@cqa-lib/cqa-ui 1.1.489 → 1.1.491

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

@@ -20474,6 +20474,9 @@ class ExecutionResultModalComponent {
     get shouldShowFailedSteps() {
         return this.status === 'failed' && this.failedSteps && this.failedSteps.length > 0;
     }
+    get shouldShowJoinedInProgressMessage() {
+        return !!this.joinedInProgressMessage;
+    }
     get shouldShowSkippedSteps() {
         return !!this.skippedSteps && this.skippedSteps.length > 0;
     }
@@ -20495,10 +20498,10 @@ class ExecutionResultModalComponent {
     }
 }
 ExecutionResultModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps", skippedSteps: "skippedSteps", showSessionChangesButton: "showSessionChangesButton" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal", sessionChangesClick: "sessionChangesClick" }, ngImport: i0, template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <!--\n            Tool Time is hidden until BE provides real values (CON-909).\n            Tracking ticket: https://linear.app/contextqa/issue/CON-909\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n          -->\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowSkippedSteps\"\n      class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n      style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n          {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngFor=\"let skipped of skippedSteps\"\n                class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n                style=\"word-break: break-word;\">\n            Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let last = last\">\n          <cqa-button\n            *ngIf=\"showSessionChangesButton && last\"\n            variant=\"outlined\"\n            text=\"Review Session Changes\"\n            btnSize=\"lg\"\n            [fullWidth]=\"true\"\n            (clicked)=\"onSessionChangesClick()\">\n          </cqa-button>\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], 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"] }] });
+ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps", skippedSteps: "skippedSteps", showSessionChangesButton: "showSessionChangesButton", joinedInProgressMessage: "joinedInProgressMessage" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal", sessionChangesClick: "sessionChangesClick" }, ngImport: i0, template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime && !shouldShowJoinedInProgressMessage\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime && !shouldShowJoinedInProgressMessage\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <!--\n            Tool Time is hidden until BE provides real values (CON-909).\n            Tracking ticket: https://linear.app/contextqa/issue/CON-909\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n          -->\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowJoinedInProgressMessage\"\n           class=\"cqa-rounded-[10px] cqa-p-[17px] cqa-my-2 cqa-text-[12px] cqa-text-[#364153] cqa-leading-[18px]\"\n           style=\"border: 1px solid #C7D2FE; background-color: #EEF2FF;\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink: 0; margin-top: 1px;\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#6366F1\" stroke-width=\"2\"/>\n            <path d=\"M12 8h.01M11 12h1v4h1\" stroke=\"#6366F1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          <span>{{ joinedInProgressMessage }}</span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowSkippedSteps\"\n      class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n      style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n          {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngFor=\"let skipped of skippedSteps\"\n                class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n                style=\"word-break: break-word;\">\n            Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let last = last\">\n          <cqa-button\n            *ngIf=\"showSessionChangesButton && last\"\n            variant=\"outlined\"\n            text=\"Review Session Changes\"\n            btnSize=\"lg\"\n            [fullWidth]=\"true\"\n            (clicked)=\"onSessionChangesClick()\">\n          </cqa-button>\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-execution-result-modal', template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <!--\n            Tool Time is hidden until BE provides real values (CON-909).\n            Tracking ticket: https://linear.app/contextqa/issue/CON-909\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n          -->\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowSkippedSteps\"\n      class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n      style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n          {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngFor=\"let skipped of skippedSteps\"\n                class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n                style=\"word-break: break-word;\">\n            Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let last = last\">\n          <cqa-button\n            *ngIf=\"showSessionChangesButton && last\"\n            variant=\"outlined\"\n            text=\"Review Session Changes\"\n            btnSize=\"lg\"\n            [fullWidth]=\"true\"\n            (clicked)=\"onSessionChangesClick()\">\n          </cqa-button>\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-execution-result-modal', template: "<div \n  *ngIf=\"isOpen\"\n  class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\">\n  <div \n    class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n    style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n    (click)=\"$event.stopPropagation()\">\n      \n      <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n          <div *ngIf=\"status === 'passed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n              <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'failed'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n              <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </div>\n  \n          <div *ngIf=\"status === 'aborted'\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n              <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n              <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n              </svg>\n          </div>\n  \n        <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n          {{ title }}\n        </h2>\n      </div>\n  \n      <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-2\"\n           [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n        <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ completedSteps }} / {{ totalSteps }}\n            </span>\n          </div>\n  \n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime && !shouldShowJoinedInProgressMessage\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ totalTime }}\n            </span>\n          </div>\n\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime && !shouldShowJoinedInProgressMessage\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ appTime }}\n            </span>\n          </div>\n  \n          <!--\n            Tool Time is hidden until BE provides real values (CON-909).\n            Tracking ticket: https://linear.app/contextqa/issue/CON-909\n          <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n            <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n            <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n              {{ toolTime }}\n            </span>\n          </div>\n          -->\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowJoinedInProgressMessage\"\n           class=\"cqa-rounded-[10px] cqa-p-[17px] cqa-my-2 cqa-text-[12px] cqa-text-[#364153] cqa-leading-[18px]\"\n           style=\"border: 1px solid #C7D2FE; background-color: #EEF2FF;\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-2\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" style=\"flex-shrink: 0; margin-top: 1px;\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"#6366F1\" stroke-width=\"2\"/>\n            <path d=\"M12 8h.01M11 12h1v4h1\" stroke=\"#6366F1\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          <span>{{ joinedInProgressMessage }}</span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-2 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n          Last completed step:\n        </div>\n        <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n          <span [innerHTML]=\"lastCompletedStep\"></span>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowSkippedSteps\"\n      class=\"cqa-rounded-lg cqa-p-[17px] cqa-my-2 cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\"\n      style=\"border: 1px solid #E5E7EB; scrollbar-width: thin; background-color: #F9FAFB;\">\n        <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-2 cqa-leading-[18px]\">\n          {{ skippedSteps.length }} step{{ skippedSteps.length === 1 ? '' : 's' }} skipped during execution (as configured) :\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngFor=\"let skipped of skippedSteps\"\n                class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\"\n                style=\"word-break: break-word;\">\n            Step {{ skipped.stepNumber }}<span *ngIf=\"skipped.label\">: {{ skipped.label }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-2 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <div \n            *ngFor=\"let failedStep of failedSteps\" \n            class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n            style=\"border: 1px solid #FECACA;\">\n            <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n              Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n            </div>\n            <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n            </div>\n            <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n            </div>\n            <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n            </div>\n            <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n              <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n            </div>\n            <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n              </svg>\n              <span>View screenshot at {{ failedStep.timestamp }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n  \n      <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n        <ng-container *ngFor=\"let button of buttons; let last = last\">\n          <cqa-button\n            *ngIf=\"showSessionChangesButton && last\"\n            variant=\"outlined\"\n            text=\"Review Session Changes\"\n            btnSize=\"lg\"\n            [fullWidth]=\"true\"\n            (clicked)=\"onSessionChangesClick()\">\n          </cqa-button>\n          <cqa-button\n            [variant]=\"button.variant\"\n            [text]=\"button.label\"\n            [icon]=\"button.icon\"\n            [btnSize]=\"button.btnSize || 'lg'\"\n            [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n            (clicked)=\"onButtonClick(button)\">\n          </cqa-button>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n", styles: [] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], status: [{
@@ -20525,6 +20528,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], showSessionChangesButton: [{
                 type: Input
+            }], joinedInProgressMessage: [{
+                type: Input
             }], buttonClick: [{
                 type: Output
             }], closeModal: [{
@@ -24125,6 +24130,20 @@ class TestCaseDetailsRendererComponent {
     ngAfterViewInit() {
         this.renderStep();
     }
+    ngDoCheck() {
+        var _a;
+        // Step numbers are frequently recomputed in-place on existing step objects.
+        // For dynamically created child components, that doesn't trigger ngOnChanges,
+        // so keep the rendered stepNumber input in sync manually.
+        if (!((_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance) || !this.step)
+            return;
+        const latestStepNumber = this.step.stepNumber;
+        if (this.lastSyncedStepNumber !== latestStepNumber) {
+            this.componentRef.instance.stepNumber = latestStepNumber;
+            this.lastSyncedStepNumber = latestStepNumber;
+            this.cdr.detectChanges();
+        }
+    }
     ngOnChanges(changes) {
         var _a, _b, _c, _d;
         const structuralChange = changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop'] || changes['isInsideForLoop'] ||
@@ -24229,6 +24248,7 @@ class TestCaseDetailsRendererComponent {
         const instance = this.componentRef.instance;
         instance.config = this.step;
         instance.stepNumber = this.step.stepNumber;
+        this.lastSyncedStepNumber = this.step.stepNumber;
         instance.index = this.index; // Correct edit-in-depth for all step types (stepNumber "10.3" parses wrong)
         instance.isNested = this.isNested;
         instance.isInsideLoop = this.isInsideLoop;
@@ -32180,10 +32200,10 @@ ApiEditStepComponent.DEFAULT_STATUS_VERIFICATION_OPTIONS = [
     { id: 'greater-than', value: 'greater-than', name: 'Greater than', label: 'Greater than' },
 ];
 ApiEditStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialSummary: "initialSummary", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { 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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialSummary: "initialSummary", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { 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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Summary field: label on top, input below (above Environment) -->\n        <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n          <cqa-custom-input [(value)]=\"summary\"\n            [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n            ariaLabel=\"Summary\">\n          </cqa-custom-input>\n        </div>\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n              <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                      <path\n                        d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                        fill=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <cqa-advanced-variables-form\n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                    fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                    <path\n                      d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                      fill=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { initialMethod: [{
                 type: Input
             }], initialEnvironment: [{