@cqa-lib/cqa-ui 1.1.259 → 1.1.261

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

@@ -21,7 +21,7 @@ import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i5$1 from '@angular/material/slide-toggle';
+import * as i4$2 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3$3 from '@angular/material/progress-spinner';
@@ -11796,11 +11796,42 @@ class AIAgentStepComponent extends BaseStepComponent {
         this.selfHealAction = new EventEmitter();
         this.userManuallyClosed = false;
         this.selectedTab = 'action-trace';
+        this.showThinkingLog = false;
+        this.lastProcessedActionsLength = 0;
+        this.lastProcessedStatus = '';
+        this.lastProcessedActionsKey = '';
     }
     /** Show debug icon only when this step has no child steps (leaf step: always show when isDebug). */
     get showDebugIcon() {
         return this.isDebug === true;
     }
+    ngDoCheck() {
+        if (!this.isLive)
+            return;
+        const actions = this.actions || [];
+        const currentLength = actions.length;
+        const currentStatus = (this.status || '').toString();
+        const actionsKey = actions.map((a) => `${a.uiType || a.type}|${a.status}`).join(',');
+        const changed = currentLength !== this.lastProcessedActionsLength ||
+            currentStatus !== this.lastProcessedStatus ||
+            actionsKey !== this.lastProcessedActionsKey;
+        if (changed) {
+            this.processLiveThinkingLog();
+            this.lastProcessedActionsLength = currentLength;
+            this.lastProcessedStatus = currentStatus;
+            this.lastProcessedActionsKey = actionsKey;
+        }
+    }
+    processLiveThinkingLog() {
+        const actions = this.actions || [];
+        const hasExecutionStarted = actions.some((a) => (a.uiType || a.type) === 'STEP_EXECUTION_STARTED');
+        const hasStepRunSuccessfully = actions.some((a) => (a.uiType || a.type) === 'STEP_RUN_SUCCESSFULLY');
+        const hasFailed = actions.some((a) => {
+            const s = (a.status || '').toString().toLowerCase();
+            return s === 'failed' || s === 'failure';
+        }) || actions.some((a) => (a.uiType || a.type) === 'STEP_RUN_FAILED');
+        this.showThinkingLog = this.isLive && hasExecutionStarted && !hasStepRunSuccessfully && !hasFailed;
+    }
     ngOnInit() {
         var _a;
         // Get action from step if available (set by step-renderer)
@@ -12013,10 +12044,10 @@ class AIAgentStepComponent extends BaseStepComponent {
     }
 }
 AIAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", isLive: "isLive", step: "step" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n    <!-- Skipped -->\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n    <!-- Lightbulb Icon and Step Number -->\n    <div>\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n      <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config?.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config?.duration || 0) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div> -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n          <div\n            *ngIf=\"action?.description\"\n            class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n            [ngStyle]=\"{\n              'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n              'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n            }\"\n          >\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n                  <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n    \n              </div>\n            <span\n              class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\" style=\"word-break: break-word;\"\n              [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n            >\n              {{ action.description }}\n            </span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.tool || 0) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", isLive: "isLive", step: "step" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n    <!-- Skipped -->\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n    <!-- Lightbulb Icon and Step Number -->\n    <div>\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n      <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config?.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config?.duration || 0) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div> -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n          <div\n            *ngIf=\"action?.description\"\n            class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n            [ngStyle]=\"{\n              'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n              'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n            }\"\n          >\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n                  <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n    \n              </div>\n            <span\n              class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\" style=\"word-break: break-word;\"\n              [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n            >\n              {{ action.description }}\n            </span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n        <div *ngIf=\"isLive && showThinkingLog\" class=\"cqa-ai-agent-thinking-log cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-bg-[#F7FAFC] cqa-border cqa-border-[#BEDBFF]\" style=\"border: 1px solid #BEDBFF;\">\n          <div class=\"cqa-ai-agent-thinking-dots cqa-flex cqa-gap-1\">\n            <span class=\"cqa-ai-agent-thinking-dot\"></span>\n            <span class=\"cqa-ai-agent-thinking-dot\"></span>\n            <span class=\"cqa-ai-agent-thinking-dot\"></span>\n          </div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#334155]\">Thinking</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.tool || 0) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-ai-agent-step', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n    <!-- Skipped -->\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n    <!-- Lightbulb Icon and Step Number -->\n    <div>\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n      <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config?.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config?.duration || 0) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div> -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n          <div\n            *ngIf=\"action?.description\"\n            class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n            [ngStyle]=\"{\n              'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n              'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n            }\"\n          >\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n                  <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n    \n              </div>\n            <span\n              class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\" style=\"word-break: break-word;\"\n              [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n            >\n              {{ action.description }}\n            </span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.tool || 0) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-ai-agent-step', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div *ngIf=\"status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'pending'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n    <!-- Skipped -->\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"status.toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n    <!-- Lightbulb Icon and Step Number -->\n    <div>\n      <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3 cqa-font-inter\">\n      <span class=\"cqa-font-semibold cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n        {{ config?.stepNumber }}. <span [innerHTML]=\"config?.title || ''\"></span>\n      </span>\n      \n      <!-- Loop Type Badges -->\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        AI Agent\n      </span>\n\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <!-- Action Count -->\n    <span *ngIf=\"config?.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n      {{ config?.actionCount }} actions\n    </span>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config?.duration || 0) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- Prompt Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n      <div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n          <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n          <span *ngIf=\"config?.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n            Optimized Run\n          </span>\n        </div>\n        <p class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" style=\"word-break: break-word;\" [innerHTML]=\"config?.prompt\"></p>\n      </div>\n      <button \n        class=\"cqa-p-1.5\" \n        (click)=\"copyPrompt()\"\n        [matTooltip]=\"'Copy prompt'\"\n        matTooltipPosition=\"above\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n\n    <!-- Tab Navigation -->\n    <!-- <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n      <button\n        (click)=\"selectTab('action-trace')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Action Trace\n        <span *ngIf=\"config && config.actions && config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n          {{ config.actions.length }}\n        </span>\n      </button>\n      <button\n        (click)=\"selectTab('planner-timeline')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        Planner Timeline\n      </button>\n      <button\n        (click)=\"selectTab('ai-reasoning')\"\n        [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n        [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n        class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n        AI Reasoning\n      </button>\n    </div> -->\n\n    <!-- Tab Content -->\n    <!-- Action Trace Tab -->\n    <div *ngIf=\"selectedTab === 'action-trace'\">\n      <!-- <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-my-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n        <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n          <b>{{ config?.actions?.length || 0 }} actions</b> \n          from previous runs\n        </div>\n      </div> -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-my-1.5\">\n        <ng-container *ngFor=\"let action of config?.actions; let i = index; trackBy: trackByActionId\">\n          <div\n            *ngIf=\"action?.description\"\n            class=\"cqa-font-inter cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1\"\n            [ngStyle]=\"{\n              'background-color': action?.reasoning ? '#EEF2FF' : '#F7FAFC',\n              'border': action?.reasoning ? '1px solid #C4B5FD' : '1px solid #BEDBFF'\n            }\"\n          >\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              <svg *ngIf=\"action?.reasoning\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"8\" fill=\"#ddd7f5\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#7C3AED\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </div>\n            <!-- <mat-icon\n              class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n              {{ getActionIcon(action.type) }}\n            </mat-icon> -->\n            <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n              <svg *ngIf=\"!action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                <svg *ngIf=\"action?.reasoning\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#ddd7f5\"/>\n                  <path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n    \n              </div>\n            <span\n              class=\"cqa-flex-1 cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\" style=\"word-break: break-word;\"\n              [ngStyle]=\"{ color: action?.reasoning ? '#4C1D95' : '#0B0B0B' }\"\n            >\n              {{ action.description }}\n            </span>\n            <span *ngIf=\"action.confidence\" class=\"cqa-font-inter cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n              {{ action.confidence }}%\n            </span>\n            <span class=\"cqa-text-[10px] cqa-font-inter cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n              {{ formatDuration(action.duration) }}\n            </span>\n            <!-- <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div> -->\n          </div>\n        </ng-container>\n        <div *ngIf=\"isLive && showThinkingLog\" class=\"cqa-ai-agent-thinking-log cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-bg-[#F7FAFC] cqa-border cqa-border-[#BEDBFF]\" style=\"border: 1px solid #BEDBFF;\">\n          <div class=\"cqa-ai-agent-thinking-dots cqa-flex cqa-gap-1\">\n            <span class=\"cqa-ai-agent-thinking-dot\"></span>\n            <span class=\"cqa-ai-agent-thinking-dot\"></span>\n            <span class=\"cqa-ai-agent-thinking-dot\"></span>\n          </div>\n          <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#334155]\">Thinking</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Planner Timeline Tab -->\n    <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      Planner timeline content would go here\n    </div>\n\n    <!-- AI Reasoning Tab -->\n    <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-font-inter cqa-text-sm cqa-text-gray-600\">\n      AI reasoning content would go here\n    </div>\n\n  </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config?.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.app || 0) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config?.timingBreakdown?.tool || 0) }}</span>\n      </div>\n    </span>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -21941,6 +21972,9 @@ class TestCaseLoopStepComponent {
         const start = this.getDisplayStartIndex();
         if (start == null)
             return `Start: ${(_b = (_a = this.nestedSteps[0]) === null || _a === void 0 ? void 0 : _a.stepNumber) !== null && _b !== void 0 ? _b : 1}`;
+        // If start is -1, user selected "Start" option, just return "Start"
+        if (start === -1)
+            return 'Start';
         const name = this.getDataRowNameForOneBasedIndex(start);
         return name != null ? `Start: ${name}` : `Start: ${start}`;
     }
@@ -21951,6 +21985,9 @@ class TestCaseLoopStepComponent {
             const defaultEnd = (_b = (_a = this.nestedSteps[this.nestedSteps.length - 1]) === null || _a === void 0 ? void 0 : _a.stepNumber) !== null && _b !== void 0 ? _b : this.nestedSteps.length;
             return `End: ${defaultEnd}`;
         }
+        // If end is -1, user selected "End" option, just return "End"
+        if (end === -1)
+            return 'End';
         const name = this.getDataRowNameForOneBasedIndex(end);
         return name != null ? `End: ${name}` : `End: ${end}`;
     }
@@ -22275,7 +22312,7 @@ class TestCaseLoopStepComponent {
 /** Default max for Loop Start / End when no profile selected (options 1..10) */
 TestCaseLoopStepComponent.DEFAULT_LOOP_OPTIONS_MAX = 10;
 TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"editForm.get('condition')?.value ?? ''\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables (shown when template is selected, same as condition-step) -->\n          <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of templateVariables\">\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">{{ variable.label }}</label>\n                  <mat-slide-toggle\n                    [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select\n                      [form]=\"templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [placeholder]=\"'Enter ' + variable.label\"\n                      [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      [fullWidth]=\"true\"\n                      (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Controls (only show Test Data profile / Start / End when values are set) -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n      <!-- Test Data Profile Button -->\n      <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\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        {{ getTestDataProfileLabel() }}\n      </button>\n\n      <!-- Start Button -->\n      <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\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        {{ getStartStepLabel() }}\n      </button>\n\n      <!-- End Button -->\n      <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\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        {{ getEndStepLabel() }}\n      </button>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-gray-700 cqa-text-sm\">\n        While\n      </span>\n      <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n    <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" 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 -->\n    <div\n      [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n      style=\"border-top: 1px solid #BEDBFF;\">\n      {{ getEndLabel() }}\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"editForm.get('condition')?.value ?? ''\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables (shown when template is selected, same as condition-step) -->\n          <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of templateVariables\">\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">{{ variable.label }}</label>\n                  <mat-slide-toggle\n                    [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select\n                      [form]=\"templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [placeholder]=\"'Enter ' + variable.label\"\n                      [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      [fullWidth]=\"true\"\n                      (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Controls (only show Test Data profile / Start / End when values are set) -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n      <!-- Test Data Profile Button -->\n      <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\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        {{ getTestDataProfileLabel() }}\n      </button>\n\n      <!-- Start Button -->\n      <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\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        {{ getStartStepLabel() }}\n      </button>\n\n      <!-- End Button -->\n      <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\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        {{ getEndStepLabel() }}\n      </button>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-gray-700 cqa-text-sm\">\n        While\n      </span>\n      <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n    <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" 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 -->\n    <div\n      [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n      style=\"border-top: 1px solid #BEDBFF;\">\n      {{ getEndLabel() }}\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 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: [
@@ -23183,7 +23220,7 @@ class TestCaseConditionStepComponent {
     }
 }
 TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\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    <!-- 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]=\"editForm.get('conditionLeft')?.value ?? ''\"\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 - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\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-cursor-pointer cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\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-cursor-pointer cqa-transition-colors\">\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  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\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                <!-- 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]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \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                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input and event key-value details (exclude customEvent) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n      <span [innerHTML]=\"condition\"></span>\n      <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n        <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n        </span>\n      </ng-container>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\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]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n      \n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"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\"><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>\n        </button> -->\n        <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><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>\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\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" 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\">\n      <!-- Branch Header (2 = ELSE IF, 3 = ELSE; sub steps show 1.1, 2.1, 3.1 from step config) -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ branchIndex + 1 }}</span>\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n      <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\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    <!-- 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]=\"editForm.get('conditionLeft')?.value ?? ''\"\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 - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\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-cursor-pointer cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\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-cursor-pointer cqa-transition-colors\">\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  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\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                <!-- 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]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \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                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input and event key-value details (exclude customEvent) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n      <span [innerHTML]=\"condition\"></span>\n      <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n        <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n        </span>\n      </ng-container>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\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]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n      \n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"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\"><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>\n        </button> -->\n        <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><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>\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\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" 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\">\n      <!-- Branch Header (2 = ELSE IF, 3 = ELSE; sub steps show 1.1, 2.1, 3.1 from step config) -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ branchIndex + 1 }}</span>\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n      <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 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: [
@@ -28868,10 +28905,10 @@ class TemplateVariablesFormComponent {
     }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{
@@ -28948,6 +28985,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class AdvancedVariablesFormComponent {
+    constructor() {
+        this.advancedVariables = [];
+        this.advancedVariableForm = new FormArray([]);
+        this.variableBooleanChange = new EventEmitter();
+        this.variableValueChange = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        // Handle changes if needed
+        if (changes['advancedVariables'] || changes['advancedVariableForm']) {
+            // Form is managed by parent component
+        }
+    }
+    /**
+     * Get the FormGroup at a specific index
+     */
+    getFormGroupAt(index) {
+        if (this.advancedVariableForm && index >= 0 && index < this.advancedVariableForm.length) {
+            const control = this.advancedVariableForm.at(index);
+            return control instanceof FormGroup ? control : null;
+        }
+        return null;
+    }
+    /**
+     * Get the value from form or variable
+     */
+    getBooleanValue(variable, index) {
+        var _a;
+        const formGroup = this.getFormGroupAt(index);
+        if (formGroup) {
+            const value = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
+            return value !== null && value !== undefined ? value : variable.value || false;
+        }
+        return variable.value || false;
+    }
+    /**
+     * Get the value from form or variable (for non-boolean types)
+     */
+    getValue(variable, index) {
+        var _a;
+        const formGroup = this.getFormGroupAt(index);
+        if (formGroup) {
+            const value = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
+            return value !== null && value !== undefined ? value : variable.value;
+        }
+        return variable.value;
+    }
+    /**
+     * Check if variable is boolean type
+     */
+    isBooleanType(variable) {
+        return variable.type !== 'str_list' && typeof variable.value === 'boolean';
+    }
+    /**
+     * Check if variable is str_list type
+     */
+    isStrListType(variable) {
+        return variable.type === 'str_list';
+    }
+    /**
+     * Handle boolean value change
+     */
+    onVariableBooleanChange(variableName, value) {
+        this.variableBooleanChange.emit({ name: variableName, value });
+    }
+    /**
+     * Handle value change for non-boolean types
+     */
+    onVariableValueChange(variableName, value) {
+        this.variableValueChange.emit({ name: variableName, value });
+    }
+    /**
+     * Handle adding a new item to str_list
+     */
+    addStrListItem(variable, index) {
+        const formGroup = this.getFormGroupAt(index);
+        if (formGroup) {
+            const valueControl = formGroup.get('value');
+            if (valueControl instanceof FormArray) {
+                valueControl.push(new FormControl(''));
+                // Emit the updated value
+                const currentValue = valueControl.value;
+                this.onVariableValueChange(variable.name, currentValue);
+            }
+            else {
+                console.error('Expected FormArray for str_list variable, got:', valueControl);
+            }
+        }
+    }
+    /**
+     * Handle removing an item from str_list
+     */
+    removeStrListItem(variable, index, itemIndex) {
+        const formGroup = this.getFormGroupAt(index);
+        if (formGroup) {
+            const valueControl = formGroup.get('value');
+            if (valueControl instanceof FormArray && itemIndex >= 0 && itemIndex < valueControl.length) {
+                valueControl.removeAt(itemIndex);
+                // Emit the updated value
+                const currentValue = valueControl.value;
+                this.onVariableValueChange(variable.name, currentValue);
+            }
+        }
+    }
+    /**
+     * Handle str_list item value change
+     */
+    onStrListItemChange(variable, index, itemIndex, value) {
+        const formGroup = this.getFormGroupAt(index);
+        if (formGroup) {
+            const valueControl = formGroup.get('value');
+            if (valueControl instanceof FormArray && itemIndex >= 0 && itemIndex < valueControl.length) {
+                // Use emitEvent: false to prevent triggering change detection that causes focus loss
+                valueControl.at(itemIndex).setValue(value, { emitEvent: false });
+                // Emit the updated value after a short delay to avoid focus issues
+                setTimeout(() => {
+                    const currentValue = valueControl.value;
+                    this.onVariableValueChange(variable.name, currentValue);
+                }, 0);
+            }
+        }
+    }
+    /**
+     * Get FormArray for str_list variable
+     */
+    getStrListFormArray(variable, index) {
+        const formGroup = this.getFormGroupAt(index);
+        if (formGroup) {
+            const formArray = formGroup.get('value');
+            return formArray instanceof FormArray ? formArray : null;
+        }
+        return null;
+    }
+    /**
+     * Track by function for ngFor
+     */
+    trackByVariable(index, variable) {
+        return variable.name || index.toString();
+    }
+    /**
+     * Track by function for form controls in str_list
+     */
+    trackByControl(index, control) {
+        return control || index;
+    }
+}
+AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", components: [{ type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { advancedVariables: [{
+                type: Input
+            }], advancedVariableForm: [{
+                type: Input
+            }], variableBooleanChange: [{
+                type: Output
+            }], variableValueChange: [{
+                type: Output
+            }] } });
+
 class StepBuilderActionComponent {
     constructor(fb) {
         this.fb = fb;
@@ -28958,6 +29156,8 @@ class StepBuilderActionComponent {
         this.searchPlaceholder = 'Search library';
         /** Function to handle variable processing or custom logic. Can be passed from parent component. */
         this.setTemplateVariables = () => { return []; };
+        /** Function to handle advanced settings variables. Can be passed from parent component. */
+        this.setAdvancedSettingsVariables = () => { return []; };
         this.preventSelectTemplate = ['databaseverification'];
         this.elementOptions = []; // Element objects for element dropdown
         this.hasMoreElements = false; // Whether more elements are available
@@ -29003,8 +29203,9 @@ class StepBuilderActionComponent {
         this.selectedTemplate = null;
         this.metadata = '';
         this.description = '';
-        this.advancedExpanded = false;
+        this.advancedExpanded = true;
         this.templateVariables = [];
+        this.advancedSettingsVariables = [];
         this.updatedHtmlGrammar = ''; // Updated HTML grammar with variable values
         this.createElementVisible = false;
         // Cache for select configs to avoid recalculating on every change detection
@@ -29013,6 +29214,7 @@ class StepBuilderActionComponent {
         this.lastFormValidationTime = 0;
         this.FORM_VALIDATION_CACHE_MS = 100; // Cache for 100ms
         this.variablesForm = this.fb.array([]);
+        this.advancedVariablesForm = this.fb.array([]);
     }
     /**
      * Handle element form visibility change
@@ -29104,6 +29306,12 @@ class StepBuilderActionComponent {
                     this.buildVariablesForm();
                     // Initialize updated HTML grammar
                     this.updateHtmlGrammar();
+                    // Initialize advanced settings variables
+                    if (this.setAdvancedSettingsVariables) {
+                        this.advancedSettingsVariables = this.setAdvancedSettingsVariables(template);
+                        console.log("advancedSettingsVariables", this.advancedSettingsVariables);
+                        this.buildAdvancedVariablesForm();
+                    }
                 }
                 catch (error) {
                     console.error('Error processing template variables:', error);
@@ -29113,6 +29321,11 @@ class StepBuilderActionComponent {
         else {
             // Initialize with template's HTML grammar if no variables
             this.updatedHtmlGrammar = template.htmlGrammar || template.naturalText || '';
+            // Initialize advanced settings variables even if no template variables
+            if (this.setAdvancedSettingsVariables) {
+                this.advancedSettingsVariables = this.setAdvancedSettingsVariables(template);
+                this.buildAdvancedVariablesForm();
+            }
         }
     }
     buildVariablesForm() {
@@ -29168,6 +29381,40 @@ class StepBuilderActionComponent {
             this.formValidCache = false;
         });
     }
+    buildAdvancedVariablesForm() {
+        // Clear existing form array
+        while (this.advancedVariablesForm.length !== 0) {
+            this.advancedVariablesForm.removeAt(0);
+        }
+        // Add form groups for each advanced variable
+        this.advancedSettingsVariables.forEach(variable => {
+            // Handle different types
+            let defaultValue;
+            if (variable.type === 'str_list') {
+                // For str_list, create a FormArray
+                const valueArray = Array.isArray(variable.value) ? variable.value : [];
+                const formArray = this.fb.array(valueArray.length > 0
+                    ? valueArray.map((item) => this.fb.control(item))
+                    : [this.fb.control('')] // Start with one empty control
+                );
+                defaultValue = formArray;
+            }
+            else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
+                defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
+            }
+            else {
+                defaultValue = variable.value || '';
+            }
+            // Create a FormGroup for each variable
+            const variableGroup = this.fb.group({
+                name: [variable.name],
+                value: variable.type === 'str_list' ? defaultValue : [defaultValue],
+                type: [variable.type || 'string'],
+                label: [variable.label || '']
+            });
+            this.advancedVariablesForm.push(variableGroup);
+        });
+    }
     ngOnDestroy() {
         // Clean up subscription to prevent memory leaks
         if (this.formValueChangesSubscription) {
@@ -29287,17 +29534,52 @@ class StepBuilderActionComponent {
         // Update HTML grammar with new value
         this.updateHtmlGrammar();
     }
+    onAdvancedVariableBooleanChange(variableName, value) {
+        var _a;
+        // Update the variable in advancedSettingsVariables array
+        const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== -1) {
+            (_a = this.advancedVariablesForm.at(variableIndex).get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
+        }
+    }
+    onAdvancedVariableValueChange(variableName, value) {
+        var _a;
+        // Update the variable in advancedSettingsVariables array
+        const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== -1) {
+            const formGroup = this.advancedVariablesForm.at(variableIndex);
+            // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
+            // so we don't need to rebuild or update it here to avoid focus loss.
+            if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
+                (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
+            }
+        }
+    }
     onBack() {
         this.selectedTemplate = null;
         this.metadata = '';
         this.description = '';
         this.advancedExpanded = false;
         this.templateVariables = [];
+        this.advancedSettingsVariables = [];
         this.updatedHtmlGrammar = '';
-        // Clear form array
+        // Clear form arrays
         while (this.variablesForm.length !== 0) {
             this.variablesForm.removeAt(0);
         }
+        while (this.advancedVariablesForm.length !== 0) {
+            this.advancedVariablesForm.removeAt(0);
+        }
         // Reapply filter to maintain search state
         this.applyFilter();
     }
@@ -29345,15 +29627,32 @@ class StepBuilderActionComponent {
         }
         // Get environment IDs from template variables (if any environment type variables are selected)
         const environmentIds = ((_a = this.templateVariablesForm) === null || _a === void 0 ? void 0 : _a.getEnvironmentIdsForVariables()) || new Map();
+        // Sync advanced variables from form to array
+        this.advancedSettingsVariables.forEach((variable, index) => {
+            var _a;
+            const formGroup = this.advancedVariablesForm.at(index);
+            if (formGroup) {
+                const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
+                if (variable.type === 'str_list' && formValue instanceof FormArray) {
+                    // Extract values from FormArray
+                    variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
+                }
+                else {
+                    variable.value = formValue;
+                }
+            }
+        });
         const stepData = {
             template: this.selectedTemplate,
             metadata: this.metadata,
             description: this.description,
             templateVariables: this.templateVariables,
+            advancedSettingsVariables: this.advancedSettingsVariables,
             environmentIds: environmentIds // Map of variable name to environment ID
         };
         console.log("stepData", stepData);
         console.log("variablesForm", this.variablesForm.value);
+        console.log("advancedVariablesForm", this.advancedVariablesForm.value);
         console.log("environmentIds", environmentIds);
         this.createStep.emit(stepData);
     }
@@ -29394,15 +29693,32 @@ class StepBuilderActionComponent {
                         valueStr = variable.value ? 'true' : 'false';
                     }
                     else if (variable.dataKey === 'element' && variable.name !== 'selector') {
-                        valueStr = String(variable.elementName);
+                        // Only use elementName if it's defined and not empty
+                        if (variable.elementName !== undefined && variable.elementName !== null && variable.elementName !== '') {
+                            valueStr = String(variable.elementName);
+                        }
+                        else {
+                            // Skip this variable - don't add to map if element is not selected
+                            return;
+                        }
                     }
                     else if (variable.dataKey === 'element' && variable.name === 'selector') {
-                        valueStr = String(variable.elementLocator || '');
+                        // Only use elementLocator if it's defined and not empty
+                        if (variable.elementLocator !== undefined && variable.elementLocator !== null && variable.elementLocator !== '') {
+                            valueStr = String(variable.elementLocator);
+                        }
+                        else {
+                            // Skip this variable - don't add to map if element locator is not available
+                            return;
+                        }
                     }
                     else {
                         valueStr = String(variable.value || '');
                     }
-                    valueMap.set(variable.name, valueStr);
+                    // Only add to map if valueStr is not empty and not "undefined"
+                    if (valueStr && valueStr !== 'undefined' && valueStr.trim() !== '') {
+                        valueMap.set(variable.name, valueStr);
+                    }
                 }
             });
         }
@@ -29417,8 +29733,12 @@ class StepBuilderActionComponent {
                     const eventKey = span.getAttribute('data-event-key');
                     if (eventKey && valueMap.has(eventKey)) {
                         const value = valueMap.get(eventKey);
-                        // Preserve the span structure but update the content
-                        span.innerHTML = value || '';
+                        // Only update if value is valid (not undefined, not empty)
+                        if (value && value !== 'undefined' && value.trim() !== '') {
+                            // Preserve the span structure but update the content
+                            span.innerHTML = value;
+                        }
+                        // If value is invalid, leave the span content as is (don't replace with undefined)
                     }
                 });
                 this.updatedHtmlGrammar = tempDiv.innerHTML;
@@ -29433,12 +29753,15 @@ class StepBuilderActionComponent {
             // Fallback: simple string replacement for server-side rendering
             let updatedHtml = String(htmlGrammar);
             valueMap.forEach((value, key) => {
-                // Replace spans with data-event-key matching the variable name
-                const regex = new RegExp(`<span[^>]*data-event-key="${key}"[^>]*>.*?</span>`, 'gi');
-                updatedHtml = updatedHtml.replace(regex, (match) => {
-                    // Replace the content inside the span
-                    return match.replace(/>.*?</, `>${value}<`);
-                });
+                // Only replace if value is valid (not undefined, not empty)
+                if (value && value !== 'undefined' && value.trim() !== '') {
+                    // Replace spans with data-event-key matching the variable name
+                    const regex = new RegExp(`<span[^>]*data-event-key="${key}"[^>]*>.*?</span>`, 'gi');
+                    updatedHtml = updatedHtml.replace(regex, (match) => {
+                        // Replace the content inside the span
+                        return match.replace(/>.*?</, `>${value}<`);
+                    });
+                }
             });
             this.updatedHtmlGrammar = updatedHtml;
         }
@@ -29479,10 +29802,10 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n          </div>\n        </div> -->\n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n          </div>\n        </div> -->\n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-2\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div> \n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{
@@ -29491,6 +29814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], setTemplateVariables: [{
                 type: Input
+            }], setAdvancedSettingsVariables: [{
+                type: Input
             }], preventSelectTemplate: [{
                 type: Input
             }], elementOptions: [{
@@ -29575,6 +29900,8 @@ class StepBuilderLoopComponent {
         this.isLoadingDataProfiles = false;
         /** Function to handle variable processing or custom logic. Can be passed from parent component. */
         this.setWhileTemplateVariables = () => { return []; };
+        /** Function to handle advanced settings variables. Can be passed from parent component. */
+        this.setAdvancedSettingsVariables = () => { return []; };
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
@@ -29944,10 +30271,10 @@ class StepBuilderLoopComponent {
     }
 }
 StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return []; }, propDecorators: { loopType: [{
                 type: Input
             }], selectOptions: [{
@@ -29960,6 +30287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], setWhileTemplateVariables: [{
                 type: Input
+            }], setAdvancedSettingsVariables: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -30051,6 +30380,8 @@ class StepBuilderConditionComponent {
         this.conditionTemplates = [];
         /** Function to handle variable processing or custom logic. Can be passed from parent component. */
         this.setConditionTemplateVariables = () => { return []; };
+        /** Function to handle advanced settings variables. Can be passed from parent component. */
+        this.setAdvancedSettingsVariables = () => { return []; };
         this.elementOptions = []; // Element objects for element dropdown
         this.hasMoreElements = false; // Whether more elements are available
         this.isLoadingElements = false; // Loading state for elements
@@ -30097,6 +30428,10 @@ class StepBuilderConditionComponent {
         this.conditionTemplateVariables = new Map();
         this.conditionVariablesForms = new Map();
         this.conditionUpdatedHtmlGrammar = new Map(); // Updated HTML grammar per condition
+        // Advanced settings variables per condition
+        this.conditionAdvancedSettingsVariables = new Map();
+        this.conditionAdvancedVariablesForms = new Map();
+        this.conditionAdvancedExpanded = new Map();
         // Cache for condition form groups to avoid repeated lookups
         this.conditionFormGroupCache = new Map();
         this.conditionForm = this.fb.group({
@@ -30175,6 +30510,9 @@ class StepBuilderConditionComponent {
         const newFormGroupCache = new Map();
         const newValueConfigs = new Map();
         const newUpdatedHtmlGrammar = new Map();
+        const newAdvancedSettingsVariables = new Map();
+        const newAdvancedVariablesForms = new Map();
+        const newAdvancedExpanded = new Map();
         this.selectedTemplates.forEach((template, oldIndex) => {
             if (oldIndex < removedIndex) {
                 newSelectedTemplates.set(oldIndex, template);
@@ -30227,12 +30565,39 @@ class StepBuilderConditionComponent {
                 newUpdatedHtmlGrammar.set(oldIndex - 1, grammar);
             }
         });
+        this.conditionAdvancedSettingsVariables.forEach((variables, oldIndex) => {
+            if (oldIndex < removedIndex) {
+                newAdvancedSettingsVariables.set(oldIndex, variables);
+            }
+            else if (oldIndex > removedIndex) {
+                newAdvancedSettingsVariables.set(oldIndex - 1, variables);
+            }
+        });
+        this.conditionAdvancedVariablesForms.forEach((form, oldIndex) => {
+            if (oldIndex < removedIndex) {
+                newAdvancedVariablesForms.set(oldIndex, form);
+            }
+            else if (oldIndex > removedIndex) {
+                newAdvancedVariablesForms.set(oldIndex - 1, form);
+            }
+        });
+        this.conditionAdvancedExpanded.forEach((expanded, oldIndex) => {
+            if (oldIndex < removedIndex) {
+                newAdvancedExpanded.set(oldIndex, expanded);
+            }
+            else if (oldIndex > removedIndex) {
+                newAdvancedExpanded.set(oldIndex - 1, expanded);
+            }
+        });
         this.selectedTemplates = newSelectedTemplates;
         this.conditionTemplateVariables = newTemplateVariables;
         this.conditionVariablesForms = newVariablesForms;
         this.conditionFormGroupCache = newFormGroupCache;
         this.valueConfigsWithHandlers = newValueConfigs;
         this.conditionUpdatedHtmlGrammar = newUpdatedHtmlGrammar;
+        this.conditionAdvancedSettingsVariables = newAdvancedSettingsVariables;
+        this.conditionAdvancedVariablesForms = newAdvancedVariablesForms;
+        this.conditionAdvancedExpanded = newAdvancedExpanded;
     }
     getOperatorConfig(index) {
         // Return cached config (static, same for all conditions)
@@ -30290,18 +30655,31 @@ class StepBuilderConditionComponent {
             this.buildConditionVariablesForm(index, variables);
             // Initialize updated HTML grammar
             this.updateConditionHtmlGrammar(index);
+            // Initialize advanced settings variables
+            if (this.setAdvancedSettingsVariables) {
+                const advancedVariables = this.setAdvancedSettingsVariables(selectedTemplate);
+                this.conditionAdvancedSettingsVariables.set(index, advancedVariables);
+                this.buildConditionAdvancedVariablesForm(index, advancedVariables);
+            }
         }
         else {
             // Clear template and variables if no template selected
             this.selectedTemplates.delete(index);
             this.conditionTemplateVariables.delete(index);
             this.conditionUpdatedHtmlGrammar.delete(index);
+            this.conditionAdvancedSettingsVariables.delete(index);
             const formArray = this.conditionVariablesForms.get(index);
             if (formArray) {
                 while (formArray.length !== 0) {
                     formArray.removeAt(0);
                 }
             }
+            const advancedFormArray = this.conditionAdvancedVariablesForms.get(index);
+            if (advancedFormArray) {
+                while (advancedFormArray.length !== 0) {
+                    advancedFormArray.removeAt(0);
+                }
+            }
         }
         // Mark for check since we're using OnPush
         this.cdr.markForCheck();
@@ -30503,6 +30881,103 @@ class StepBuilderConditionComponent {
         });
         this.conditionUpdatedHtmlGrammar.set(conditionIndex, updatedGrammar);
     }
+    buildConditionAdvancedVariablesForm(index, variables) {
+        let formArray = this.conditionAdvancedVariablesForms.get(index);
+        if (!formArray) {
+            formArray = this.fb.array([]);
+            this.conditionAdvancedVariablesForms.set(index, formArray);
+        }
+        // Ensure formArray is not undefined (TypeScript guard)
+        if (!formArray) {
+            return;
+        }
+        // Store reference to avoid TypeScript issues in forEach callback
+        const formArrayRef = formArray;
+        // Clear existing form array
+        while (formArrayRef.length !== 0) {
+            formArrayRef.removeAt(0);
+        }
+        // Add form groups for each advanced variable
+        variables.forEach(variable => {
+            // Handle different types
+            let defaultValue;
+            if (variable.type === 'str_list') {
+                // For str_list, create a FormArray
+                const valueArray = Array.isArray(variable.value) ? variable.value : [];
+                const formArrayValue = this.fb.array(valueArray.length > 0
+                    ? valueArray.map((item) => this.fb.control(item))
+                    : [this.fb.control('')] // Start with one empty control
+                );
+                defaultValue = formArrayValue;
+            }
+            else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
+                defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
+            }
+            else {
+                defaultValue = variable.value || '';
+            }
+            // Create a FormGroup for each variable
+            const variableGroup = this.fb.group({
+                name: [variable.name],
+                value: variable.type === 'str_list' ? defaultValue : [defaultValue],
+                type: [variable.type || 'string'],
+                label: [variable.label || '']
+            });
+            formArrayRef.push(variableGroup);
+        });
+    }
+    getConditionAdvancedSettingsVariables(index) {
+        return this.conditionAdvancedSettingsVariables.get(index) || [];
+    }
+    getConditionAdvancedVariablesForm(index) {
+        let formArray = this.conditionAdvancedVariablesForms.get(index);
+        if (!formArray) {
+            formArray = this.fb.array([]);
+            this.conditionAdvancedVariablesForms.set(index, formArray);
+        }
+        return formArray;
+    }
+    getConditionAdvancedExpanded(index) {
+        return this.conditionAdvancedExpanded.get(index) || false;
+    }
+    toggleConditionAdvanced(index) {
+        const current = this.conditionAdvancedExpanded.get(index) || false;
+        this.conditionAdvancedExpanded.set(index, !current);
+        this.cdr.markForCheck();
+    }
+    onConditionAdvancedVariableBooleanChange(conditionIndex, variableName, value) {
+        var _a, _b, _c;
+        // Update the variable in advancedSettingsVariables array
+        const variables = this.conditionAdvancedSettingsVariables.get(conditionIndex) || [];
+        const variable = variables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = (_a = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _a === void 0 ? void 0 : _a.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== undefined && variableIndex !== -1) {
+            (_c = (_b = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _b === void 0 ? void 0 : _b.at(variableIndex).get('value')) === null || _c === void 0 ? void 0 : _c.setValue(value, { emitEvent: false });
+        }
+    }
+    onConditionAdvancedVariableValueChange(conditionIndex, variableName, value) {
+        var _a, _b, _c;
+        // Update the variable in advancedSettingsVariables array
+        const variables = this.conditionAdvancedSettingsVariables.get(conditionIndex) || [];
+        const variable = variables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = (_a = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _a === void 0 ? void 0 : _a.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== undefined && variableIndex !== -1) {
+            const formGroup = (_b = this.conditionAdvancedVariablesForms.get(conditionIndex)) === null || _b === void 0 ? void 0 : _b.at(variableIndex);
+            // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
+            // so we don't need to rebuild or update it here to avoid focus loss.
+            if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
+                (_c = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get('value')) === null || _c === void 0 ? void 0 : _c.setValue(value, { emitEvent: false });
+            }
+        }
+    }
     getConditionFormGroup(index) {
         // Use cache to avoid repeated lookups
         if (this.conditionFormGroupCache.has(index)) {
@@ -30548,6 +31023,26 @@ class StepBuilderConditionComponent {
     onCreateStep() {
         if (this.conditionForm.valid) {
             const formValue = this.conditionForm.value;
+            // Sync advanced variables from form to array for all conditions
+            this.conditionAdvancedSettingsVariables.forEach((variables, index) => {
+                const formArray = this.conditionAdvancedVariablesForms.get(index);
+                if (formArray) {
+                    variables.forEach((variable, varIndex) => {
+                        var _a;
+                        const formGroup = formArray.at(varIndex);
+                        if (formGroup) {
+                            const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
+                            if (variable.type === 'str_list' && formValue instanceof FormArray) {
+                                // Extract values from FormArray
+                                variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
+                            }
+                            else {
+                                variable.value = formValue;
+                            }
+                        }
+                    });
+                }
+            });
             const stepData = {
                 conditions: formValue.conditions.map((cond, index) => {
                     // Find the ActionTemplate object from the stored ID/value
@@ -30555,11 +31050,14 @@ class StepBuilderConditionComponent {
                     const selectedTemplate = this.conditionTemplates.find(t => { var _a; return (((_a = t.id) === null || _a === void 0 ? void 0 : _a.toString()) === templateId) || (t.displayName === templateId); }) || this.selectedTemplates.get(index);
                     // Get template variables for this condition
                     const templateVariables = this.conditionTemplateVariables.get(index) || [];
+                    // Get advanced settings variables for this condition
+                    const advancedSettingsVariables = this.conditionAdvancedSettingsVariables.get(index) || [];
                     return {
                         field: cond.field,
                         operator: cond.operator,
                         value: selectedTemplate || null,
                         templateVariables: templateVariables,
+                        advancedSettingsVariables: advancedSettingsVariables,
                         description: cond.description || '',
                         metadata: cond.metadata || ''
                     };
@@ -30572,16 +31070,18 @@ class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n                <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n                  <button type=\"button\"\n                    class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n                    (click)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\n                <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n                  <button type=\"button\"\n                    class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n                    (click)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { operatorOptions: [{
                 type: Input
             }], conditionTemplates: [{
                 type: Input
             }], setConditionTemplateVariables: [{
                 type: Input
+            }], setAdvancedSettingsVariables: [{
+                type: Input
             }], elementOptions: [{
                 type: Input
             }], hasMoreElements: [{
@@ -31550,7 +32050,7 @@ class StepBuilderAiAgentComponent {
     }
 }
 StepBuilderAiAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div>\n\n        <!-- Disabled -->\n        <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div>\n\n        <!-- Disabled -->\n        <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div>\n\n        <!-- Disabled -->\n        <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
@@ -31601,12 +32101,16 @@ class StepBuilderCustomCodeComponent {
         this.template = null;
         /** Function to handle variable processing or custom logic. Can be passed from parent component. */
         this.setTemplateVariables = () => { return []; };
+        /** Function to handle advanced settings variables. Can be passed from parent component. */
+        this.setAdvancedSettingsVariables = () => { return []; };
         this.isEditMode = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
         this.cancelled = new EventEmitter();
         this.templateVariables = [];
+        this.advancedSettingsVariables = [];
+        this.advancedExpanded = true;
         this.customCodeForm = this.fb.group({
             language: ['', Validators.required],
             code: ['', Validators.required],
@@ -31614,6 +32118,7 @@ class StepBuilderCustomCodeComponent {
             description: ['']
         });
         this.variablesForm = this.fb.group({});
+        this.advancedVariablesForm = this.fb.array([]);
     }
     ngOnInit() {
         // Initialize form with initial values if in edit mode
@@ -31653,6 +32158,11 @@ class StepBuilderCustomCodeComponent {
         if (this.template && this.setTemplateVariables) {
             this.templateVariables = this.setTemplateVariables(this.template);
             this.buildVariablesForm();
+            // Initialize advanced settings variables
+            if (this.setAdvancedSettingsVariables) {
+                this.advancedSettingsVariables = this.setAdvancedSettingsVariables(this.template);
+                this.buildAdvancedVariablesForm();
+            }
         }
     }
     buildVariablesForm() {
@@ -31727,31 +32237,117 @@ class StepBuilderCustomCodeComponent {
     onCancel() {
         this.cancelled.emit();
     }
+    buildAdvancedVariablesForm() {
+        // Clear existing form array
+        while (this.advancedVariablesForm.length !== 0) {
+            this.advancedVariablesForm.removeAt(0);
+        }
+        // Add form groups for each advanced variable
+        this.advancedSettingsVariables.forEach(variable => {
+            // Handle different types
+            let defaultValue;
+            if (variable.type === 'str_list') {
+                // For str_list, create a FormArray
+                const valueArray = Array.isArray(variable.value) ? variable.value : [];
+                const formArrayValue = this.fb.array(valueArray.length > 0
+                    ? valueArray.map((item) => this.fb.control(item))
+                    : [this.fb.control('')] // Start with one empty control
+                );
+                defaultValue = formArrayValue;
+            }
+            else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
+                defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
+            }
+            else {
+                defaultValue = variable.value || '';
+            }
+            // Create a FormGroup for each variable
+            const variableGroup = this.fb.group({
+                name: [variable.name],
+                value: variable.type === 'str_list' ? defaultValue : [defaultValue],
+                type: [variable.type || 'string'],
+                label: [variable.label || '']
+            });
+            this.advancedVariablesForm.push(variableGroup);
+        });
+    }
+    onAdvancedVariableBooleanChange(variableName, value) {
+        var _a;
+        // Update the variable in advancedSettingsVariables array
+        const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== -1) {
+            (_a = this.advancedVariablesForm.at(variableIndex).get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
+        }
+    }
+    onAdvancedVariableValueChange(variableName, value) {
+        var _a;
+        // Update the variable in advancedSettingsVariables array
+        const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== -1) {
+            const formGroup = this.advancedVariablesForm.at(variableIndex);
+            // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
+            // so we don't need to rebuild or update it here to avoid focus loss.
+            if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
+                (_a = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
+            }
+        }
+    }
+    toggleAdvanced() {
+        this.advancedExpanded = !this.advancedExpanded;
+    }
     onCreateStep() {
         if (this.customCodeForm.valid) {
+            // Sync advanced variables from form to array
+            this.advancedSettingsVariables.forEach((variable, index) => {
+                var _a;
+                const formGroup = this.advancedVariablesForm.at(index);
+                if (formGroup) {
+                    const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
+                    if (variable.type === 'str_list' && formValue instanceof FormArray) {
+                        // Extract values from FormArray
+                        variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
+                    }
+                    else {
+                        variable.value = formValue;
+                    }
+                }
+            });
             const formValue = this.customCodeForm.value;
             const stepData = {
                 language: formValue.language || '',
                 code: formValue.code || '',
                 metadata: formValue.metadata || '',
                 description: formValue.description || '',
-                templateVariables: this.templateVariables.length > 0 ? this.templateVariables : undefined
+                templateVariables: this.templateVariables.length > 0 ? this.templateVariables : undefined,
+                advancedSettingsVariables: this.advancedSettingsVariables.length > 0 ? this.advancedSettingsVariables : undefined
             };
             this.createStep.emit(stepData);
         }
     }
 }
 StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Advanced Settings Variables Form -->\n    <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <button type=\"button\"\n          class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n          (click)=\"toggleAdvanced()\">\n          <span class=\"cqa-text-[10px]\">Advanced</span>\n          <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n            expand_more\n          </mat-icon>\n        </button>\n        <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Advanced Settings Variables Form -->\n    <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <button type=\"button\"\n          class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n          (click)=\"toggleAdvanced()\">\n          <span class=\"cqa-text-[10px]\">Advanced</span>\n          <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n            expand_more\n          </mat-icon>\n        </button>\n        <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { languageOptions: [{
                 type: Input
             }], template: [{
                 type: Input
             }], setTemplateVariables: [{
                 type: Input
+            }], setAdvancedSettingsVariables: [{
+                type: Input
             }], initialCode: [{
                 type: Input
             }], initialLanguage: [{
@@ -31978,6 +32574,8 @@ class StepBuilderDocumentComponent {
             { id: '\\t', value: '\\t', name: 'Tab (\\t)', label: 'Tab (\\t)' },
             { id: '|', value: '|', name: 'Pipe (|)', label: 'Pipe (|)' }
         ];
+        /** Function to handle advanced settings variables. Can be passed from parent component. */
+        this.setAdvancedSettingsVariables = () => { return []; };
         /** Optional URL for "Need help?" link in Document Mapper section */
         this.mapperHelpUrl = '';
         /** Tooltip text when hovering over "Need help?" (same as custom-edit-step) */
@@ -31995,6 +32593,8 @@ class StepBuilderDocumentComponent {
         this.uploadedFile = null;
         /** Visual state for drag-and-drop zone */
         this.isDragOver = false;
+        this.advancedSettingsVariables = [];
+        this.advancedExpanded = true;
         this.documentForm = this.fb.group({
             documentType: ['', Validators.required],
             outputVariable: ['', Validators.required],
@@ -32008,11 +32608,17 @@ class StepBuilderDocumentComponent {
             templateDescription: [''],
             mappings: this.fb.array([])
         });
+        this.advancedVariablesForm = this.fb.array([]);
     }
     ngOnInit() {
         var _a;
         this.selectedTemplateSource = this.initialTemplateSource || ((_a = this.documentForm.get('templateSource')) === null || _a === void 0 ? void 0 : _a.value) || 'existing';
         this.initializeFormWithInitialValues();
+        // Initialize advanced settings variables
+        if (this.setAdvancedSettingsVariables) {
+            this.advancedSettingsVariables = this.setAdvancedSettingsVariables(this.template, this.testStep);
+            this.buildAdvancedVariablesForm();
+        }
     }
     ngOnChanges(changes) {
         if (changes['documentTypeOptions'] || changes['templateOptions'] || changes['valueTypeOptions'] || changes['delimeterTypeOptions']) {
@@ -32024,6 +32630,13 @@ class StepBuilderDocumentComponent {
             changes['initialDelimeter'] || changes['initialFileFormatHeader']) {
             this.initializeFormWithInitialValues();
         }
+        if (changes['template'] || changes['testStep'] || changes['setAdvancedSettingsVariables']) {
+            // Re-initialize advanced settings variables if template or testStep changes
+            if (this.setAdvancedSettingsVariables) {
+                this.advancedSettingsVariables = this.setAdvancedSettingsVariables(this.template, this.testStep);
+                this.buildAdvancedVariablesForm();
+            }
+        }
     }
     initializeFormWithInitialValues() {
         // Clear existing mappings
@@ -32250,11 +32863,94 @@ class StepBuilderDocumentComponent {
         // }
         return true;
     }
+    buildAdvancedVariablesForm() {
+        // Clear existing form array
+        while (this.advancedVariablesForm.length !== 0) {
+            this.advancedVariablesForm.removeAt(0);
+        }
+        // Add form groups for each advanced variable
+        this.advancedSettingsVariables.forEach(variable => {
+            // Handle different types
+            let defaultValue;
+            if (variable.type === 'str_list') {
+                // For str_list, create a FormArray
+                const valueArray = Array.isArray(variable.value) ? variable.value : [];
+                const formArrayValue = this.fb.array(valueArray.length > 0
+                    ? valueArray.map((item) => this.fb.control(item))
+                    : [this.fb.control('')] // Start with one empty control
+                );
+                defaultValue = formArrayValue;
+            }
+            else if (variable.type === 'boolean' || typeof variable.value === 'boolean') {
+                defaultValue = variable.value === true || variable.value === 'true' || variable.value === 1;
+            }
+            else {
+                defaultValue = variable.value || '';
+            }
+            // Create a FormGroup for each variable
+            const variableGroup = this.fb.group({
+                name: [variable.name],
+                value: variable.type === 'str_list' ? defaultValue : [defaultValue],
+                type: [variable.type || 'string'],
+                label: [variable.label || '']
+            });
+            this.advancedVariablesForm.push(variableGroup);
+        });
+    }
+    onAdvancedVariableBooleanChange(variableName, value) {
+        var _a;
+        // Update the variable in advancedSettingsVariables array
+        const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== -1) {
+            (_a = this.advancedVariablesForm.at(variableIndex).get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
+        }
+    }
+    onAdvancedVariableValueChange(variableName, value) {
+        var _a;
+        // Update the variable in advancedSettingsVariables array
+        const variable = this.advancedSettingsVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form array
+        const variableIndex = this.advancedVariablesForm.controls.findIndex(control => { var _a; return ((_a = control.get('name')) === null || _a === void 0 ? void 0 : _a.value) === variableName; });
+        if (variableIndex !== -1) {
+            const formGroup = this.advancedVariablesForm.at(variableIndex);
+            // For str_list, the FormArray is already managed inside AdvancedVariablesFormComponent,
+            // so we don't need to rebuild or update it here to avoid focus loss.
+            if ((variable === null || variable === void 0 ? void 0 : variable.type) !== 'str_list') {
+                (_a = formGroup === null || formGroup === void 0 ? void 0 : formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue(value, { emitEvent: false });
+            }
+        }
+    }
+    toggleAdvanced() {
+        this.advancedExpanded = !this.advancedExpanded;
+    }
     onCreateStep() {
         var _a, _b;
         if (!this.isFormValid()) {
             return;
         }
+        // Sync advanced variables from form to array
+        this.advancedSettingsVariables.forEach((variable, index) => {
+            var _a;
+            const formGroup = this.advancedVariablesForm.at(index);
+            if (formGroup) {
+                const formValue = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
+                if (variable.type === 'str_list' && formValue instanceof FormArray) {
+                    // Extract values from FormArray
+                    variable.value = formValue.controls.map(control => control.value).filter((val) => val && val.trim() !== '');
+                }
+                else {
+                    variable.value = formValue;
+                }
+            }
+        });
         const formValue = this.documentForm.value;
         const stepData = Object.assign(Object.assign(Object.assign({ documentType: formValue.documentType, outputVariable: formValue.outputVariable, fileName: formValue.fileName || undefined, seprator: formValue.seprator || undefined, delimeter: formValue.delimeter || undefined, fileFormatHeader: formValue.fileFormatHeader || undefined, templateSource: this.selectedTemplateSource, templateId: formValue.templateId || undefined }, (this.selectedTemplateSource === 'upload' && this.uploadedFile && { uploadedFile: this.uploadedFile })), (this.selectedTemplateSource === 'createNew' && {
             templateName: ((_a = formValue.templateName) !== null && _a !== void 0 ? _a : '').trim(),
@@ -32267,7 +32963,7 @@ class StepBuilderDocumentComponent {
                     value: m.value || '',
                     enabled: (_a = m.enabled) !== null && _a !== void 0 ? _a : false
                 });
-            }) });
+            }), advancedSettingsVariables: this.advancedSettingsVariables.length > 0 ? this.advancedSettingsVariables : undefined });
         this.createStep.emit(stepData);
     }
     onMapperHelpClick(event) {
@@ -32278,10 +32974,10 @@ class StepBuilderDocumentComponent {
     }
 }
 StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { documentTypeOptions: [{
                 type: Input
             }], templateOptions: [{
@@ -32290,6 +32986,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], delimeterTypeOptions: [{
                 type: Input
+            }], setAdvancedSettingsVariables: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], testStep: [{
+                type: Input
             }], mapperHelpUrl: [{
                 type: Input
             }], mapperHelpTooltipText: [{
@@ -34445,66 +35147,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
-class AdvancedVariablesFormComponent {
-    constructor() {
-        this.advancedVariables = [];
-        this.advancedVariableForm = new FormArray([]);
-        this.variableBooleanChange = new EventEmitter();
-    }
-    ngOnChanges(changes) {
-        // Handle changes if needed
-        if (changes['advancedVariables'] || changes['advancedVariableForm']) {
-            // Form is managed by parent component
-        }
-    }
-    /**
-     * Get the FormGroup at a specific index
-     */
-    getFormGroupAt(index) {
-        if (this.advancedVariableForm && index >= 0 && index < this.advancedVariableForm.length) {
-            const control = this.advancedVariableForm.at(index);
-            return control instanceof FormGroup ? control : null;
-        }
-        return null;
-    }
-    /**
-     * Get the value from form or variable
-     */
-    getBooleanValue(variable, index) {
-        var _a;
-        const formGroup = this.getFormGroupAt(index);
-        if (formGroup) {
-            const value = (_a = formGroup.get('value')) === null || _a === void 0 ? void 0 : _a.value;
-            return value !== null && value !== undefined ? value : variable.value || false;
-        }
-        return variable.value || false;
-    }
-    /**
-     * Handle boolean value change
-     */
-    onVariableBooleanChange(variableName, value) {
-        this.variableBooleanChange.emit({ name: variableName, value });
-    }
-    /**
-     * Track by function for ngFor
-     */
-    trackByVariable(index, variable) {
-        return variable.name || index.toString();
-    }
-}
-AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n        {{ variable.label }}\n      </label>\n      <mat-slide-toggle \n        [checked]=\"getBooleanValue(variable, i)\"\n        (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n        color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </ng-container>\n</div>\n\n", components: [{ type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ 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: AdvancedVariablesFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n        {{ variable.label }}\n      </label>\n      <mat-slide-toggle \n        [checked]=\"getBooleanValue(variable, i)\"\n        (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n        color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </ng-container>\n</div>\n\n", styles: [] }]
-        }], propDecorators: { advancedVariables: [{
-                type: Input
-            }], advancedVariableForm: [{
-                type: Input
-            }], variableBooleanChange: [{
-                type: Output
-            }] } });
-
 const STEP_DETAILS_MODAL_DATA = new InjectionToken('STEP_DETAILS_MODAL_DATA');
 
 class StepDetailsModalRef {