@cqa-lib/cqa-ui 1.1.548 → 1.1.549-delta.2

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

@@ -35566,6 +35566,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+class GraphQLOperationPickerComponent {
+    constructor() {
+        /** Flat operations list. Picker partitions by `kind` for the section headers. */
+        this.operations = [];
+        /** Display state for the "Introspected" / "Pending" badge in the title row. */
+        this.introspected = false;
+        /** True while the parent is fetching/introspecting a schema. Renders a spinner instead of the empty state. */
+        this.isLoading = false;
+        /** Emitted when the user clicks the back arrow above the title (returns to the main step 1 view). */
+        this.back = new EventEmitter();
+        /** Emitted when the user clicks an operation row. Parent patches graphQLForm and pops the picker. */
+        this.operationSelected = new EventEmitter();
+        /** Emitted when the user clicks Re-introspect — parent re-fetches the schema. */
+        this.reIntrospect = new EventEmitter();
+        /** Emitted when the user clicks Change — parent shows a URL/auth picker (deferred for now). */
+        this.change = new EventEmitter();
+        /** Emitted when the user clicks Preview on a row — parent shows a preview popover (deferred). */
+        this.preview = new EventEmitter();
+        /** Filter input value. Plain substring match across name / description / returnType. */
+        this.filterTerm = '';
+    }
+    /** Operations currently shown after applying `filterTerm`. */
+    get filteredOperations() {
+        const term = this.filterTerm.trim().toLowerCase();
+        if (!term)
+            return this.operations || [];
+        return (this.operations || []).filter((o) => o.name.toLowerCase().includes(term) ||
+            (o.description ?? '').toLowerCase().includes(term) ||
+            (o.returnType ?? '').toLowerCase().includes(term));
+    }
+    get queryOperations() {
+        return this.filteredOperations.filter((o) => o.kind === 'query');
+    }
+    get mutationOperations() {
+        return this.filteredOperations.filter((o) => o.kind === 'mutation');
+    }
+    get subscriptionOperations() {
+        return this.filteredOperations.filter((o) => o.kind === 'subscription');
+    }
+    /** Convenience: total schema-source count line, e.g. "38 types · 4 queries · 3 mutations". */
+    get headerCounts() {
+        const parts = [];
+        const s = this.schemaSource;
+        if (!s)
+            return '';
+        if (s.typeCount != null)
+            parts.push(`${s.typeCount} types`);
+        if (s.queryCount != null)
+            parts.push(`${s.queryCount} ${s.queryCount === 1 ? 'query' : 'queries'}`);
+        if (s.mutationCount != null)
+            parts.push(`${s.mutationCount} ${s.mutationCount === 1 ? 'mutation' : 'mutations'}`);
+        if (s.subscriptionCount != null && s.subscriptionCount > 0) {
+            parts.push(`${s.subscriptionCount} ${s.subscriptionCount === 1 ? 'subscription' : 'subscriptions'}`);
+        }
+        return parts.join(' · ');
+    }
+    onBack() {
+        this.back.emit();
+    }
+    onSelect(op) {
+        this.operationSelected.emit(op);
+    }
+    onPreview(op, event) {
+        // Stop the click from also bubbling to the row's select handler — Preview is a peek,
+        // not a commit.
+        event.stopPropagation();
+        this.preview.emit(op);
+    }
+    onReIntrospect() {
+        this.reIntrospect.emit(this.schemaSource);
+    }
+    onChange() {
+        this.change.emit();
+    }
+    onFilterChange(value) {
+        this.filterTerm = value ?? '';
+    }
+    trackByOperation(_index, op) {
+        return op.id;
+    }
+    /** Tailwind text colour for the return-type pill, keyed by operation kind. */
+    returnTypeColorClass(kind) {
+        switch (kind) {
+            case 'mutation': return 'cqa-text-[#D97706]'; // amber-600
+            case 'subscription': return 'cqa-text-[#7C3AED]'; // violet-600
+            case 'query':
+            default: return 'cqa-text-[#059669]'; // emerald-600
+        }
+    }
+}
+GraphQLOperationPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GraphQLOperationPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+GraphQLOperationPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: GraphQLOperationPickerComponent, selector: "cqa-graphql-operation-picker", inputs: { schemaSource: "schemaSource", operations: "operations", introspected: "introspected", isLoading: "isLoading" }, outputs: { back: "back", operationSelected: "operationSelected", reIntrospect: "reIntrospect", change: "change", preview: "preview" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-graphql-operation-picker cqa-flex cqa-flex-col cqa-gap-4 cqa-bg-white cqa-w-full\">\n\n  <!-- Title row: back arrow + heading + Introspected badge -->\n  <div class=\"cqa-graphql-operation-picker-header cqa-flex cqa-items-center cqa-gap-3\">\n    <div class=\"cqa-cursor-pointer cqa-text-[#6B7280] cqa-text-[14px] cqa-font-semibold\" (click)=\"onBack()\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[18px] cqa-text-[#6B7280] cqa-font-semibold\" style=\"display:flex;font-size:18px;font-weight: 600;\">arrow_back</mat-icon>\n    </div>\n    <h3 class=\"cqa-graphql-operation-picker-title cqa-m-0 cqa-text-[18px] cqa-font-semibold cqa-text-[#111827] cqa-leading-[1.25]\">\n      Pick a GraphQL operation\n    </h3>\n    <span *ngIf=\"introspected\"\n      class=\"cqa-graphql-operation-picker-badge cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[11px] cqa-font-medium cqa-leading-[1.4]\">\n      <span aria-hidden=\"true\">\u25C6</span> Introspected\n    </span>\n  </div>\n\n  <!-- Subheading -->\n  <p class=\"cqa-graphql-operation-picker-subheading cqa-m-0 cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n    Phase 1 supports one operation per test step. Select one to auto-fill the request.\n  </p>\n\n  <!-- Schema source bar: URL + counts + Re-introspect / Change buttons -->\n  <div class=\"cqa-graphql-operation-picker-source cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-bg-[#EEF2FF] cqa-rounded-lg cqa-px-4 cqa-py-3 cqa-border cqa-border-solid cqa-border-[#E0E7FF]\">\n    <div class=\"cqa-graphql-operation-picker-source-info cqa-flex cqa-flex-col cqa-gap-0.5 cqa-min-w-0\">\n      <div class=\"cqa-graphql-operation-picker-source-label cqa-text-[10px] cqa-uppercase cqa-tracking-wide cqa-text-[#6B7280] cqa-font-semibold\">\n        Schema source\n      </div>\n      <div *ngIf=\"schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-font-mono cqa-text-[#1F2937] cqa-truncate cqa-min-w-0\"\n        [title]=\"schemaSource?.url\">\n        {{ schemaSource?.url }}\n      </div>\n      <div *ngIf=\"!schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-italic cqa-text-[#6B7280]\">\n        No schema loaded yet.\n      </div>\n    </div>\n    <div class=\"cqa-graphql-operation-picker-source-meta cqa-flex cqa-items-center cqa-gap-3 cqa-shrink-0\">\n      <span *ngIf=\"headerCounts\" class=\"cqa-graphql-operation-picker-source-counts cqa-text-[12px] cqa-text-[#4B5563]\">\n        {{ headerCounts }}\n      </span>\n      <cqa-button type=\"button\" variant=\"outlined\" [icon]=\"'refresh'\" btnSize=\"md\" text=\"Re-introspect\"\n        customClass=\"!cqa-bg-white !cqa-text-[#374151] !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#F9FAFB]\"\n        (clicked)=\"onReIntrospect()\">\n      </cqa-button>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\" text=\"Change\"\n        customClass=\"!cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#EEF2FF]\"\n        (clicked)=\"onChange()\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Filter -->\n  <cqa-custom-input\n    [(value)]=\"filterTerm\"\n    [label]=\"''\"\n    placeholder=\"Filter operations...\"\n    [fullWidth]=\"true\"\n    size=\"md\"\n    ariaLabel=\"Filter GraphQL operations\">\n  </cqa-custom-input>\n\n  <!-- Loading spinner shown while the parent is introspecting. Replaces the empty state. -->\n  <div *ngIf=\"isLoading\"\n    class=\"cqa-graphql-operation-picker-loading cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-12 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-graphql-operation-picker-spinner cqa-inline-block cqa-w-7 cqa-h-7 cqa-rounded-full cqa-border-2 cqa-border-solid cqa-border-[#E5E7EB] cqa-border-t-[#4F46E5] cqa-animate-spin\" aria-hidden=\"true\"></span>\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">Loading schema\u2026</span>\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Introspecting GraphQL endpoint, this may take a moment.</span>\n  </div>\n\n  <!-- Empty state when no operations are loaded yet (or filter rules everything out). -->\n  <div *ngIf=\"!isLoading && !filteredOperations.length\"\n    class=\"cqa-graphql-operation-picker-empty cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-2 cqa-py-10 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">\n      {{ filterTerm ? 'No operations match your filter.' : 'No operations available.' }}\n    </span>\n    <span *ngIf=\"!filterTerm\" class=\"cqa-text-[12px] cqa-text-[#6B7280]\">\n      Click <strong>Re-introspect</strong> above to load the schema.\n    </span>\n  </div>\n\n  <!-- Operation sections (Queries / Mutations / Subscriptions) -->\n  <ng-container *ngIf=\"!isLoading && filteredOperations.length\">\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: queryOperations, label: 'Queries', accent: 'cqa-text-[#059669]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: mutationOperations, label: 'Mutations', accent: 'cqa-text-[#D97706]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: subscriptionOperations, label: 'Subscriptions', accent: 'cqa-text-[#7C3AED]' }\"></ng-container>\n  </ng-container>\n\n  <!-- Footer: selection summary. No Back / Use buttons \u2014 clicking a row commits + returns. -->\n  <div *ngIf=\"!isLoading && filteredOperations.length\" class=\"cqa-graphql-operation-picker-footer cqa-flex cqa-items-center cqa-pt-2 cqa-text-[12px] cqa-text-[#6B7280]\">\n    <span>Click an operation to use it \u2014 the picker closes and the request is auto-filled.</span>\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Section template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <ng-template #opSection let-ops let-label=\"label\" let-accent=\"accent\">\n    <div *ngIf=\"ops?.length\" class=\"cqa-graphql-operation-picker-section cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-graphql-operation-picker-section-head cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F9FAFB] cqa-px-3 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-solid cqa-border-[#F3F4F6]\">\n        <span class=\"cqa-graphql-operation-picker-section-label cqa-text-[12px] cqa-font-semibold\" [ngClass]=\"accent\">{{ label }}</span>\n        <span class=\"cqa-graphql-operation-picker-section-count cqa-text-[11px] cqa-text-[#6B7280]\">\n          {{ ops.length }} {{ ops.length === 1 ? 'operation' : 'operations' }}\n        </span>\n      </div>\n      <div *ngFor=\"let op of ops; trackBy: trackByOperation\"\n        class=\"cqa-graphql-operation-picker-row cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-cursor-pointer cqa-border cqa-border-solid cqa-border-transparent hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#E5E7EB] focus-within:cqa-bg-[#F5F3FF]\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Use operation ' + op.name\"\n        (click)=\"onSelect(op)\"\n        (keydown.enter)=\"onSelect(op)\"\n        (keydown.space)=\"onSelect(op); $event.preventDefault()\">\n        <span class=\"cqa-graphql-operation-picker-row-radio cqa-mt-1 cqa-shrink-0\">\n          <span class=\"cqa-inline-block cqa-w-4 cqa-h-4 cqa-rounded-full cqa-border cqa-border-solid cqa-border-[#9CA3AF] cqa-bg-white\" aria-hidden=\"true\"></span>\n        </span>\n        <div class=\"cqa-graphql-operation-picker-row-body cqa-flex cqa-flex-col cqa-gap-0.5 cqa-flex-1 cqa-min-w-0\">\n          <div class=\"cqa-graphql-operation-picker-row-signature cqa-flex cqa-flex-wrap cqa-items-baseline cqa-gap-x-1 cqa-text-[13px] cqa-font-mono cqa-leading-[1.4] cqa-min-w-0\">\n            <span class=\"cqa-text-[#111827] cqa-font-semibold\">{{ op.name }}</span>\n            <span class=\"cqa-text-[#6B7280]\">(</span>\n            <ng-container *ngFor=\"let arg of op.args ?? []; let last = last\">\n              <span class=\"cqa-text-[#374151]\">{{ arg.name }}</span>\n              <span class=\"cqa-text-[#6B7280]\">:&nbsp;</span>\n              <span [ngClass]=\"returnTypeColorClass(op.kind)\">{{ arg.type }}</span>\n              <span *ngIf=\"!last\" class=\"cqa-text-[#6B7280]\">,&nbsp;</span>\n            </ng-container>\n            <span class=\"cqa-text-[#6B7280]\">)</span>\n            \n          </div>\n          <div *ngIf=\"op.description\"\n            class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-graphql-operation-picker-row-description cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n            <span>{{ op.description }}</span>\n            <mat-icon *ngIf=\"op.returnType\" style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[#6B7280] cqa-mx-1\">arrow_forward</mat-icon>\n            <span *ngIf=\"op.returnType\" [ngClass]=\"returnTypeColorClass(op.kind)\" class=\"cqa-font-semibold\">{{ op.returnType }}</span>\n          </div>\n        </div>\n        <!-- <button type=\"button\"\n          class=\"cqa-graphql-operation-picker-row-preview cqa-shrink-0 cqa-inline-flex cqa-items-center cqa-gap-1 cqa-bg-transparent cqa-border-0 cqa-cursor-pointer cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:cqa-underline focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#A5B4FC] cqa-rounded-md cqa-px-2 cqa-py-1\"\n          [attr.aria-label]=\"'Preview operation ' + op.name\"\n          (click)=\"onPreview(op, $event)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          </svg>\n          <span>Preview</span>\n        </button> -->\n      </div>\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: GraphQLOperationPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-graphql-operation-picker', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-graphql-operation-picker cqa-flex cqa-flex-col cqa-gap-4 cqa-bg-white cqa-w-full\">\n\n  <!-- Title row: back arrow + heading + Introspected badge -->\n  <div class=\"cqa-graphql-operation-picker-header cqa-flex cqa-items-center cqa-gap-3\">\n    <div class=\"cqa-cursor-pointer cqa-text-[#6B7280] cqa-text-[14px] cqa-font-semibold\" (click)=\"onBack()\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[18px] cqa-text-[#6B7280] cqa-font-semibold\" style=\"display:flex;font-size:18px;font-weight: 600;\">arrow_back</mat-icon>\n    </div>\n    <h3 class=\"cqa-graphql-operation-picker-title cqa-m-0 cqa-text-[18px] cqa-font-semibold cqa-text-[#111827] cqa-leading-[1.25]\">\n      Pick a GraphQL operation\n    </h3>\n    <span *ngIf=\"introspected\"\n      class=\"cqa-graphql-operation-picker-badge cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-bg-[#EDE9FE] cqa-text-[#7C3AED] cqa-text-[11px] cqa-font-medium cqa-leading-[1.4]\">\n      <span aria-hidden=\"true\">\u25C6</span> Introspected\n    </span>\n  </div>\n\n  <!-- Subheading -->\n  <p class=\"cqa-graphql-operation-picker-subheading cqa-m-0 cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n    Phase 1 supports one operation per test step. Select one to auto-fill the request.\n  </p>\n\n  <!-- Schema source bar: URL + counts + Re-introspect / Change buttons -->\n  <div class=\"cqa-graphql-operation-picker-source cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-bg-[#EEF2FF] cqa-rounded-lg cqa-px-4 cqa-py-3 cqa-border cqa-border-solid cqa-border-[#E0E7FF]\">\n    <div class=\"cqa-graphql-operation-picker-source-info cqa-flex cqa-flex-col cqa-gap-0.5 cqa-min-w-0\">\n      <div class=\"cqa-graphql-operation-picker-source-label cqa-text-[10px] cqa-uppercase cqa-tracking-wide cqa-text-[#6B7280] cqa-font-semibold\">\n        Schema source\n      </div>\n      <div *ngIf=\"schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-font-mono cqa-text-[#1F2937] cqa-truncate cqa-min-w-0\"\n        [title]=\"schemaSource?.url\">\n        {{ schemaSource?.url }}\n      </div>\n      <div *ngIf=\"!schemaSource?.url\"\n        class=\"cqa-graphql-operation-picker-source-url cqa-text-[13px] cqa-italic cqa-text-[#6B7280]\">\n        No schema loaded yet.\n      </div>\n    </div>\n    <div class=\"cqa-graphql-operation-picker-source-meta cqa-flex cqa-items-center cqa-gap-3 cqa-shrink-0\">\n      <span *ngIf=\"headerCounts\" class=\"cqa-graphql-operation-picker-source-counts cqa-text-[12px] cqa-text-[#4B5563]\">\n        {{ headerCounts }}\n      </span>\n      <cqa-button type=\"button\" variant=\"outlined\" [icon]=\"'refresh'\" btnSize=\"md\" text=\"Re-introspect\"\n        customClass=\"!cqa-bg-white !cqa-text-[#374151] !cqa-border !cqa-border-solid !cqa-border-[#D1D5DB] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#F9FAFB]\"\n        (clicked)=\"onReIntrospect()\">\n      </cqa-button>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\" text=\"Change\"\n        customClass=\"!cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:!cqa-bg-[#EEF2FF]\"\n        (clicked)=\"onChange()\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Filter -->\n  <cqa-custom-input\n    [(value)]=\"filterTerm\"\n    [label]=\"''\"\n    placeholder=\"Filter operations...\"\n    [fullWidth]=\"true\"\n    size=\"md\"\n    ariaLabel=\"Filter GraphQL operations\">\n  </cqa-custom-input>\n\n  <!-- Loading spinner shown while the parent is introspecting. Replaces the empty state. -->\n  <div *ngIf=\"isLoading\"\n    class=\"cqa-graphql-operation-picker-loading cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-12 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-graphql-operation-picker-spinner cqa-inline-block cqa-w-7 cqa-h-7 cqa-rounded-full cqa-border-2 cqa-border-solid cqa-border-[#E5E7EB] cqa-border-t-[#4F46E5] cqa-animate-spin\" aria-hidden=\"true\"></span>\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">Loading schema\u2026</span>\n    <span class=\"cqa-text-[12px] cqa-text-[#6B7280]\">Introspecting GraphQL endpoint, this may take a moment.</span>\n  </div>\n\n  <!-- Empty state when no operations are loaded yet (or filter rules everything out). -->\n  <div *ngIf=\"!isLoading && !filteredOperations.length\"\n    class=\"cqa-graphql-operation-picker-empty cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-2 cqa-py-10 cqa-text-center cqa-bg-[#F9FAFB] cqa-rounded-md cqa-border cqa-border-dashed cqa-border-[#E5E7EB]\">\n    <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151]\">\n      {{ filterTerm ? 'No operations match your filter.' : 'No operations available.' }}\n    </span>\n    <span *ngIf=\"!filterTerm\" class=\"cqa-text-[12px] cqa-text-[#6B7280]\">\n      Click <strong>Re-introspect</strong> above to load the schema.\n    </span>\n  </div>\n\n  <!-- Operation sections (Queries / Mutations / Subscriptions) -->\n  <ng-container *ngIf=\"!isLoading && filteredOperations.length\">\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: queryOperations, label: 'Queries', accent: 'cqa-text-[#059669]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: mutationOperations, label: 'Mutations', accent: 'cqa-text-[#D97706]' }\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"opSection; context: { $implicit: subscriptionOperations, label: 'Subscriptions', accent: 'cqa-text-[#7C3AED]' }\"></ng-container>\n  </ng-container>\n\n  <!-- Footer: selection summary. No Back / Use buttons \u2014 clicking a row commits + returns. -->\n  <div *ngIf=\"!isLoading && filteredOperations.length\" class=\"cqa-graphql-operation-picker-footer cqa-flex cqa-items-center cqa-pt-2 cqa-text-[12px] cqa-text-[#6B7280]\">\n    <span>Click an operation to use it \u2014 the picker closes and the request is auto-filled.</span>\n  </div>\n\n  <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Section template \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <ng-template #opSection let-ops let-label=\"label\" let-accent=\"accent\">\n    <div *ngIf=\"ops?.length\" class=\"cqa-graphql-operation-picker-section cqa-flex cqa-flex-col cqa-gap-2\">\n      <div class=\"cqa-graphql-operation-picker-section-head cqa-flex cqa-items-center cqa-gap-2 cqa-bg-[#F9FAFB] cqa-px-3 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-solid cqa-border-[#F3F4F6]\">\n        <span class=\"cqa-graphql-operation-picker-section-label cqa-text-[12px] cqa-font-semibold\" [ngClass]=\"accent\">{{ label }}</span>\n        <span class=\"cqa-graphql-operation-picker-section-count cqa-text-[11px] cqa-text-[#6B7280]\">\n          {{ ops.length }} {{ ops.length === 1 ? 'operation' : 'operations' }}\n        </span>\n      </div>\n      <div *ngFor=\"let op of ops; trackBy: trackByOperation\"\n        class=\"cqa-graphql-operation-picker-row cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-cursor-pointer cqa-border cqa-border-solid cqa-border-transparent hover:cqa-bg-[#F9FAFB] hover:cqa-border-[#E5E7EB] focus-within:cqa-bg-[#F5F3FF]\"\n        role=\"button\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"'Use operation ' + op.name\"\n        (click)=\"onSelect(op)\"\n        (keydown.enter)=\"onSelect(op)\"\n        (keydown.space)=\"onSelect(op); $event.preventDefault()\">\n        <span class=\"cqa-graphql-operation-picker-row-radio cqa-mt-1 cqa-shrink-0\">\n          <span class=\"cqa-inline-block cqa-w-4 cqa-h-4 cqa-rounded-full cqa-border cqa-border-solid cqa-border-[#9CA3AF] cqa-bg-white\" aria-hidden=\"true\"></span>\n        </span>\n        <div class=\"cqa-graphql-operation-picker-row-body cqa-flex cqa-flex-col cqa-gap-0.5 cqa-flex-1 cqa-min-w-0\">\n          <div class=\"cqa-graphql-operation-picker-row-signature cqa-flex cqa-flex-wrap cqa-items-baseline cqa-gap-x-1 cqa-text-[13px] cqa-font-mono cqa-leading-[1.4] cqa-min-w-0\">\n            <span class=\"cqa-text-[#111827] cqa-font-semibold\">{{ op.name }}</span>\n            <span class=\"cqa-text-[#6B7280]\">(</span>\n            <ng-container *ngFor=\"let arg of op.args ?? []; let last = last\">\n              <span class=\"cqa-text-[#374151]\">{{ arg.name }}</span>\n              <span class=\"cqa-text-[#6B7280]\">:&nbsp;</span>\n              <span [ngClass]=\"returnTypeColorClass(op.kind)\">{{ arg.type }}</span>\n              <span *ngIf=\"!last\" class=\"cqa-text-[#6B7280]\">,&nbsp;</span>\n            </ng-container>\n            <span class=\"cqa-text-[#6B7280]\">)</span>\n            \n          </div>\n          <div *ngIf=\"op.description\"\n            class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-graphql-operation-picker-row-description cqa-text-[12px] cqa-text-[#6B7280] cqa-leading-[1.5]\">\n            <span>{{ op.description }}</span>\n            <mat-icon *ngIf=\"op.returnType\" style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[#6B7280] cqa-mx-1\">arrow_forward</mat-icon>\n            <span *ngIf=\"op.returnType\" [ngClass]=\"returnTypeColorClass(op.kind)\" class=\"cqa-font-semibold\">{{ op.returnType }}</span>\n          </div>\n        </div>\n        <!-- <button type=\"button\"\n          class=\"cqa-graphql-operation-picker-row-preview cqa-shrink-0 cqa-inline-flex cqa-items-center cqa-gap-1 cqa-bg-transparent cqa-border-0 cqa-cursor-pointer cqa-text-[#4F46E5] cqa-text-[12px] cqa-font-medium hover:cqa-underline focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#A5B4FC] cqa-rounded-md cqa-px-2 cqa-py-1\"\n          [attr.aria-label]=\"'Preview operation ' + op.name\"\n          (click)=\"onPreview(op, $event)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n            <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\"/>\n          </svg>\n          <span>Preview</span>\n        </button> -->\n      </div>\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], propDecorators: { schemaSource: [{
+                type: Input
+            }], operations: [{
+                type: Input
+            }], introspected: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], back: [{
+                type: Output
+            }], operationSelected: [{
+                type: Output
+            }], reIntrospect: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], preview: [{
+                type: Output
+            }] } });
+
 class AdvancedVariablesFormComponent {
     constructor() {
         this.advancedVariables = [];
@@ -36064,6 +36179,10 @@ class ApiEditStepComponent {
         this.cdr = cdr;
         /** True while parent is creating the step (API in progress); show loader on Create/Update button */
         this.isCreatingStep = false;
+        /** Operations list for the picker. Empty until parent loads/introspects the schema. */
+        this.graphQLOperations = [];
+        /** True while the parent is introspecting; the picker swaps its empty state for a spinner. */
+        this.isLoadingGraphQLSchema = false;
         /** Emits the cURL string when user clicks Import (value from the textarea control). */
         this.importCurl = new EventEmitter();
         /** Emits when user cancels the Import cURL panel (clicks Cancel). */
@@ -36125,6 +36244,8 @@ class ApiEditStepComponent {
         this.environmentSearch = new EventEmitter();
         /** Emit when user scrolls to load more environments. */
         this.environmentLoadMore = new EventEmitter();
+        /** Emit when user clicks "Load Schema" in GraphQL mode. Parent handles the schema fetch (or shows a "coming soon" toast for now). */
+        this.loadSchema = new EventEmitter();
         /** Auth type options: array of strings or objects with id, name, value, label (passed from parent). Falls back to built-in list when empty. */
         this.authTypeOptions = [];
         /** Config for Auth Type dropdown (updated when authTypeOptions changes, like environment) */
@@ -36155,13 +36276,23 @@ class ApiEditStepComponent {
         this._url = '';
         /** When true, params form changes should not update the URL (we're syncing from URL). */
         this.paramsSyncingFromUrl = false;
-        this.payloadTabs = [
-            { value: 'authorization', label: 'Authorization' },
-            { value: 'headers', label: 'Headers' },
-            { value: 'body', label: 'Body' },
-            { value: 'params', label: 'Params' },
-        ];
         this.activePayloadTab = 'headers';
+        /** Currently selected API type. REST is the default and matches today's behaviour exactly. */
+        this.activeApiType = 'rest';
+        /** Segments rendered above the Method/URL row. SOAP/WebSocket/gRPC are intentionally `disabled` for now. */
+        this.apiTypeSegments = [
+            { label: 'REST API', value: 'rest' },
+            { label: 'GraphQL', value: 'graphql' },
+            { label: 'SOAP', value: 'soap', disabled: true, tooltip: 'Coming soon' },
+            { label: 'WebSocket', value: 'websocket', disabled: true, tooltip: 'Coming soon' },
+            { label: 'gRPC', value: 'grpc', disabled: true, tooltip: 'Coming soon' },
+        ];
+        /** Inline error displayed under the Query textarea when empty/blank on Save. Cleared as the user types. */
+        this.graphQLQueryError = '';
+        /** Inline error displayed under the Variables textarea when JSON is malformed. */
+        this.graphQLVariablesError = '';
+        /** Non-blocking warning shown under the Operation Name field when the query declares 2+ operations. */
+        this.graphQLOperationWarning = '';
         /** Step 3: Response verification tabs */
         this.responseVerificationTabs = [
             { value: 'response-body', label: 'Response Body' },
@@ -36475,6 +36606,12 @@ class ApiEditStepComponent {
     get urlPlaceholder() {
         return (this.urlOptions?.length ?? 0) > 0 ? 'Enter URL or select Parameter *' : 'Enter URL *';
     }
+    /** Tabs visible under the request row, swapped based on `activeApiType`. */
+    get payloadTabs() {
+        return this.activeApiType === 'graphql'
+            ? ApiEditStepComponent.GRAPHQL_PAYLOAD_TABS
+            : ApiEditStepComponent.REST_PAYLOAD_TABS;
+    }
     onPayloadTypeChange(val) {
         this.payloadType = val;
     }
@@ -36828,6 +36965,50 @@ class ApiEditStepComponent {
         if (this.advancedSettingsVariables && this.advancedSettingsVariables.length > 0) {
             this.buildAdvancedVariablesForm();
         }
+        // GraphQL form + initial state. Hydrate from `initialApiType` / `initialGraphQL` if the parent
+        // is editing a GraphQL step. Variables come in as either an object (preferred) or a JSON string —
+        // we always store the form value as a pretty-printed JSON string so the textarea round-trips cleanly.
+        this.activeApiType = this.initialApiType === 'graphql' ? 'graphql' : 'rest';
+        const initialQuery = this.initialGraphQL?.query ?? '';
+        const initialVarsRaw = this.initialGraphQL?.variables;
+        let initialVariablesString = '';
+        if (initialVarsRaw != null) {
+            if (typeof initialVarsRaw === 'string') {
+                initialVariablesString = initialVarsRaw;
+            }
+            else {
+                try {
+                    initialVariablesString = JSON.stringify(initialVarsRaw, null, 2);
+                }
+                catch {
+                    initialVariablesString = '';
+                }
+            }
+        }
+        const initialOperationName = this.initialGraphQL?.operationName ?? '';
+        this.graphQLForm = this.fb.group({
+            query: [initialQuery],
+            variables: [initialVariablesString],
+            operationName: [initialOperationName],
+        });
+        // Re-validate as the user types so inline errors clear/re-render in real time.
+        this.graphQLForm.get('query')?.valueChanges.subscribe(() => {
+            if (this.graphQLQueryError)
+                this.graphQLQueryError = '';
+            this.recomputeGraphQLOperationWarning();
+        });
+        this.graphQLForm.get('variables')?.valueChanges.subscribe(() => {
+            this.validateGraphQLVariables(false);
+        });
+        this.graphQLForm.get('operationName')?.valueChanges.subscribe(() => {
+            this.recomputeGraphQLOperationWarning();
+        });
+        // Default the active tab to "graphql" when the user is editing a GraphQL step,
+        // so the Query / Variables / Operation Name fields are visible immediately.
+        if (this.activeApiType === 'graphql') {
+            this.activePayloadTab = 'graphql';
+        }
+        this.recomputeGraphQLOperationWarning();
     }
     ngAfterViewInit() {
         this.setupPayloadTextareaScrollSync();
@@ -37346,6 +37527,8 @@ class ApiEditStepComponent {
                 keyValueRows: step1.keyValueRows,
                 keyTypeValueRows: step1.keyTypeValueRows,
                 paramsRows: step1.paramsRows,
+                ...(step1.apiType && { apiType: step1.apiType }),
+                ...(step1.graphQL && { graphQL: step1.graphQL }),
             });
         }
         catch {
@@ -37403,6 +37586,145 @@ class ApiEditStepComponent {
     setPayloadTab(value) {
         this.activePayloadTab = value;
     }
+    /**
+     * Handle API Type segment toggle (REST ↔ GraphQL). When switching to GraphQL we
+     * jump to the GraphQL tab so the Query / Variables / Operation Name fields are
+     * immediately visible. When switching back to REST we land on Headers (REST default).
+     * Disabled segments (SOAP/WebSocket/gRPC) cannot fire here — `cqa-segment-control`
+     * blocks the click — but we guard anyway in case a future caller bypasses that.
+     */
+    onApiTypeChange(value) {
+        if (value !== 'rest' && value !== 'graphql')
+            return;
+        if (this.activeApiType === value)
+            return;
+        this.activeApiType = value;
+        if (this.activeApiType === 'graphql') {
+            this.activePayloadTab = 'graphql';
+            // Re-validate variables on first switch — the textarea may already have content
+            // from a previous edit and we want the inline error to surface immediately.
+            this.validateGraphQLVariables(false);
+            this.recomputeGraphQLOperationWarning();
+        }
+        else {
+            // Returning to REST — drop any GraphQL-only inline state so it doesn't linger.
+            this.graphQLQueryError = '';
+            this.graphQLVariablesError = '';
+            this.graphQLOperationWarning = '';
+            this.activePayloadTab = 'headers';
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Parse the Variables textarea as JSON. Empty string is valid (= no variables).
+     * Sets `graphQLVariablesError` for inline display; returns the parsed object or
+     * the raw string when the user typed something non-empty that didn't parse.
+     *
+     * @param strict When true (called from `onCreate`), an invalid JSON blocks save
+     *               — we leave the error visible and return `null` to signal abort.
+     */
+    validateGraphQLVariables(strict) {
+        const raw = (this.graphQLForm?.get('variables')?.value ?? '').trim();
+        if (!raw) {
+            this.graphQLVariablesError = '';
+            return { value: undefined, valid: true };
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            this.graphQLVariablesError = '';
+            return { value: parsed, valid: true };
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            this.graphQLVariablesError = `Invalid JSON: ${message}`;
+            // In non-strict mode (live typing) we still echo back the raw string so the parent
+            // can decide what to do; in strict mode the caller checks `valid` to abort save.
+            return { value: strict ? undefined : raw, valid: false };
+        }
+    }
+    /**
+     * Detect when the GraphQL query declares 2+ named operations. GraphQL requires the
+     * client to specify `operationName` in that case; absence is a runtime error, not a
+     * syntax one, so we surface it as a non-blocking warning.
+     */
+    recomputeGraphQLOperationWarning() {
+        if (this.activeApiType !== 'graphql' || !this.graphQLForm) {
+            this.graphQLOperationWarning = '';
+            return;
+        }
+        const query = (this.graphQLForm.get('query')?.value ?? '');
+        const opName = (this.graphQLForm.get('operationName')?.value ?? '').trim();
+        if (!query.trim() || opName) {
+            this.graphQLOperationWarning = '';
+            return;
+        }
+        // Match `query`, `mutation`, `subscription` as standalone tokens at the start of a line.
+        // Strip block/line comments first so commented-out operations don't trip the count.
+        const stripped = query
+            .replace(/#[^\n]*/g, '')
+            .replace(/"""[\s\S]*?"""/g, '');
+        const matches = stripped.match(/^[\s]*(query|mutation|subscription)\b/gm) || [];
+        this.graphQLOperationWarning = matches.length >= 2
+            ? 'Multiple operations detected — Operation Name is required.'
+            : '';
+    }
+    /**
+     * Click handler for the "Load Schema" button (GraphQL mode only). Switches the body view
+     * to the operation picker AND emits `loadSchema` so the parent can fetch / refresh the
+     * schema in the background. The picker renders whatever `graphQLSchemaSource` /
+     * `graphQLOperations` the parent has supplied at any given time — empty state by default.
+     */
+    onLoadSchema() {
+        this.bodyView = 'graphql-schema';
+        this.loadSchema.emit({ url: this.url ?? '', headers: this.headers });
+        this.cdr.markForCheck();
+    }
+    /** Picker → back: drop the picker view and return to the headers/tabs panel. */
+    onGraphQLPickerBack() {
+        this.bodyView = 'headers';
+        this.cdr.markForCheck();
+    }
+    /** Picker → re-introspect: forward to parent so it can refetch the schema. */
+    onGraphQLPickerReIntrospect() {
+        this.loadSchema.emit({ url: this.url ?? '', headers: this.headers });
+    }
+    /**
+     * Picker → operation selected: patch the GraphQL form (query / variables / operationName)
+     * and pop back to the main view with the GraphQL tab active so the user can see the
+     * filled-in fields.
+     */
+    onGraphQLPickerOperationSelected(op) {
+        if (!this.graphQLForm) {
+            this.bodyView = 'headers';
+            return;
+        }
+        let variablesString = '';
+        if (op.variables != null) {
+            try {
+                variablesString = JSON.stringify(op.variables, null, 2);
+            }
+            catch {
+                variablesString = '';
+            }
+        }
+        this.graphQLForm.patchValue({
+            query: op.query ?? '',
+            variables: variablesString,
+            operationName: op.operationName ?? op.name ?? '',
+        });
+        this.graphQLQueryError = '';
+        this.graphQLVariablesError = '';
+        this.recomputeGraphQLOperationWarning();
+        // Drop any stale response from a previously-picked operation. The next Send Request
+        // will populate the preview again. Note: ngOnChanges on `initialResponsePreview` only
+        // syncs non-null values down, so clearing here doesn't get clobbered when the parent
+        // also clears its `initialResponsePreview` field.
+        this.responsePreview = '';
+        this.activeApiType = 'graphql';
+        this.activePayloadTab = 'graphql';
+        this.bodyView = 'headers';
+        this.cdr.markForCheck();
+    }
     setResponseVerificationTab(value) {
         this.activeResponseVerificationTab = value;
     }
@@ -37527,6 +37849,22 @@ class ApiEditStepComponent {
     /** Emit all entered details (environment, HTTP method, URL, headers, body, step2 variable, step3 verifications) when user clicks Create. */
     onCreate() {
         console.log('9999999');
+        // GraphQL mode validation: query is required + non-blank, variables (if non-empty) must be valid JSON.
+        if (this.activeApiType === 'graphql') {
+            const query = (this.graphQLForm?.get('query')?.value ?? '').trim();
+            if (!query) {
+                this.graphQLQueryError = 'Query is required.';
+                this.activePayloadTab = 'graphql';
+                this.cdr.markForCheck();
+                return;
+            }
+            const variables = this.validateGraphQLVariables(true);
+            if (!variables.valid) {
+                this.activePayloadTab = 'graphql';
+                this.cdr.markForCheck();
+                return;
+            }
+        }
         try {
             const payload = this.getCreatePayload();
             console.log('9999999 payload', payload);
@@ -37638,13 +37976,38 @@ class ApiEditStepComponent {
                 clientAuthentication: clientAuth !== '' ? clientAuth : 'basic',
             };
         }
+        // GraphQL extension: when in GraphQL mode, package the query/variables/operationName into a
+        // single sub-object and ensure Content-Type defaults to application/json (engine sets it too,
+        // but surfacing it on the headers list is cleaner for the user). Method is forced to POST so
+        // legacy REST-flavoured downstream code paths keep working when they peek at it.
+        const isGraphQL = this.activeApiType === 'graphql';
+        let outputApiType;
+        let outputGraphQL;
+        let outputHeaders = this.headers;
+        let outputMethod = method;
+        if (isGraphQL) {
+            outputApiType = 'graphql';
+            const query = (this.graphQLForm?.get('query')?.value ?? '').trim();
+            const operationName = (this.graphQLForm?.get('operationName')?.value ?? '').trim();
+            const variablesResult = this.validateGraphQLVariables(false);
+            outputGraphQL = {
+                query,
+                ...(variablesResult.value !== undefined && { variables: variablesResult.value }),
+                ...(operationName && { operationName }),
+            };
+            outputMethod = 'POST';
+            const hasContentType = outputHeaders.some(h => (h.name || '').trim().toLowerCase() === 'content-type');
+            if (!hasContentType) {
+                outputHeaders = [{ name: 'Content-Type', type: 'string', value: 'application/json' }, ...outputHeaders];
+            }
+        }
         return {
             step1: {
                 summary: this.summary?.trim() || undefined,
                 environment,
-                method,
+                method: outputMethod,
                 url: this.url ?? '',
-                headers: this.headers,
+                headers: outputHeaders,
                 authType,
                 ...(bearerToken !== undefined && { bearerToken }),
                 ...(oauth2 !== undefined && { oauth2 }),
@@ -37655,6 +38018,8 @@ class ApiEditStepComponent {
                 keyValueRows,
                 keyTypeValueRows,
                 paramsRows,
+                ...(outputApiType && { apiType: outputApiType }),
+                ...(outputGraphQL && { graphQL: outputGraphQL }),
             },
             step2: {
                 variableName: this.variableName ?? '',
@@ -37874,6 +38239,22 @@ ApiEditStepComponent.OAUTH_CLIENT_AUTH_OPTIONS = [
     { id: 'basic', value: 'basic', name: 'Send as Basic Auth header', label: 'Send as Basic Auth header' },
     { id: 'body', value: 'body', name: 'Send in body', label: 'Send in body' },
 ];
+/**
+ * The two tab arrangements. REST keeps the legacy four-tab layout. GraphQL drops Body & Params
+ * because the body is a single { query, variables, operationName } object (rendered in the new
+ * GraphQL tab below) and query params have no meaning for a GraphQL POST.
+ */
+ApiEditStepComponent.REST_PAYLOAD_TABS = [
+    { value: 'authorization', label: 'Authorization' },
+    { value: 'headers', label: 'Headers' },
+    { value: 'body', label: 'Body' },
+    { value: 'params', label: 'Params' },
+];
+ApiEditStepComponent.GRAPHQL_PAYLOAD_TABS = [
+    { value: 'authorization', label: 'Authorization' },
+    { value: 'headers', label: 'Headers' },
+    { value: 'graphql', label: 'GraphQL' },
+];
 ApiEditStepComponent.DEFAULT_FORMAT_OPTIONS = [
     { id: 'json', value: 'json', name: 'JSON', label: 'JSON' },
     { id: 'xml', value: 'xml', name: 'XML', label: 'XML' },
@@ -37945,10 +38326,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-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", "loading", "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", "size"], 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", initialApiType: "initialApiType", initialGraphQL: "initialGraphQL", graphQLSchemaSource: "graphQLSchemaSource", graphQLOperations: "graphQLOperations", isLoadingGraphQLSchema: "isLoadingGraphQLSchema", 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", loadSchema: "loadSchema" }, 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        <!-- API Type segment: REST API (default) | GraphQL | SOAP/WebSocket/gRPC (disabled) -->\n        <div class=\"cqa-api-edit-step-api-type-row cqa-flex cqa-flex-col cqa-gap-1.5\">\n          <label class=\"cqa-api-edit-step-api-type-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">API Type</label>\n          <cqa-segment-control\n            [value]=\"activeApiType\"\n            [segments]=\"apiTypeSegments\"\n            (valueChange)=\"onApiTypeChange($event)\"\n            class=\"cqa-api-edit-step-api-type-segment\">\n          </cqa-segment-control>\n        </div>\n\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-justify-end cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <div *ngIf=\"activeApiType === 'graphql'\" 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\n          <div 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          </div>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div [ngClass]=\"{'cqa-items-start': activeApiType === 'rest', 'cqa-justify-between': activeApiType === 'graphql'}\" class=\"cqa-api-edit-step-request-row cqa-flex 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          <!-- REST mode shows the HTTP Method dropdown. GraphQL pins method to POST internally so the dropdown is hidden. -->\n          <cqa-dynamic-select *ngIf=\"methodForm && activeApiType === 'rest'\" [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 *ngIf=\"activeApiType === 'rest'\" 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\n          <!-- Import API cURL: REST-only (the cURL parser produces REST shapes). -->\n          <div *ngIf=\"activeApiType === 'rest'\" 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          <!--\n            Load Schema: GraphQL-only. Uses the elevated cqa-button variant so the\n            indigo surface + text + elevation shadow come from the design system \u2014\n            customClass keeps only the typography + responsive sizing tweaks.\n            Disabled / blocked styling is handled natively by the elevated variant\n            (cqa-bg-primary-muted, muted text, no shadow), so we don't add an\n            opacity override on top.\n          -->\n          <cqa-button *ngIf=\"activeApiType === 'graphql'\" type=\"button\" variant=\"elevated\" btnSize=\"lg\" text=\"Load Schema\"\n            icon=\"schema\"\n            customClass=\"cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [disabled]=\"!url || !url.trim() || isLoadingGraphQLSchema\"\n            (clicked)=\"onLoadSchema()\">\n          </cqa-button>\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        <!-- GraphQL operation picker \u2014 opened by the \"Load Schema\" button in GraphQL mode. -->\n        <ng-container *ngIf=\"bodyView === 'graphql-schema'\">\n          <cqa-graphql-operation-picker\n            [schemaSource]=\"graphQLSchemaSource\"\n            [operations]=\"graphQLOperations\"\n            [introspected]=\"!!graphQLSchemaSource\"\n            [isLoading]=\"isLoadingGraphQLSchema\"\n            (back)=\"onGraphQLPickerBack()\"\n            (reIntrospect)=\"onGraphQLPickerReIntrospect()\"\n            (operationSelected)=\"onGraphQLPickerOperationSelected($event)\">\n          </cqa-graphql-operation-picker>\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. REST-only \u2014 GraphQL POST has no query params. -->\n            <div *ngIf=\"activePayloadTab === 'params' && activeApiType === 'rest'\" 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. REST-only \u2014 GraphQL uses the dedicated tab below. -->\n            <div *ngIf=\"activePayloadTab === 'body' && activeApiType === 'rest'\"\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\n            <!-- Payload content (GraphQL): Query + Variables + Operation Name. Active only in GraphQL mode. -->\n            <div *ngIf=\"activePayloadTab === 'graphql' && activeApiType === 'graphql' && graphQLForm\"\n              class=\"cqa-api-edit-step-payload-graphql cqa-api-edit-step-graphql-tab cqa-flex cqa-flex-col cqa-gap-4\">\n              <!--\n                Query / Variables use the design-system `cqa-custom-textarea` so\n                styling, label, error rendering, and accessibility come from the\n                primitive. We bind via [value] / (valueChange) instead of\n                formControlName because cqa-custom-textarea isn't a CVA \u2014 calling\n                form.get('\u2026').setValue still fires the existing valueChanges\n                subscriptions (which clear inline errors and recompute the\n                multi-operation warning).\n              -->\n              <cqa-custom-textarea\n                label=\"Query\"\n                [required]=\"true\"\n                [value]=\"graphQLForm.get('query')?.value || ''\"\n                (valueChange)=\"graphQLForm.get('query')?.setValue($event)\"\n                placeholder=\"query GetX($id: ID!) {&#10;  x(id: $id) { name }&#10;}\"\n                ariaLabel=\"GraphQL query\"\n                [errors]=\"graphQLQueryError ? [graphQLQueryError] : []\"\n                [fullWidth]=\"true\"\n                [rows]=\"4\"\n                resize=\"vertical\"\n                size=\"md\">\n              </cqa-custom-textarea>\n              <div class=\"cqa-flex cqa-gap-1.5\">\n                <cqa-custom-textarea\n                  class=\"cqa-flex-1\"\n                  label=\"Variables (JSON)\"\n                  [value]=\"graphQLForm.get('variables')?.value || ''\"\n                  (valueChange)=\"graphQLForm.get('variables')?.setValue($event)\"\n                  placeholder='{ \"id\": \"abc\" }'\n                  ariaLabel=\"GraphQL variables\"\n                  [errors]=\"graphQLVariablesError ? [graphQLVariablesError] : []\"\n                  [fullWidth]=\"true\"\n                  [rows]=\"3\"\n                  resize=\"vertical\"\n                  size=\"md\">\n                </cqa-custom-textarea>\n                <!-- Operation Name: optional unless 2+ operations are declared. -->\n                <div class=\"cqa-api-edit-step-graphql-field cqa-flex cqa-flex-col cqa-gap-1.5\">\n                  <label class=\"cqa-api-edit-step-graphql-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-text-[#374151]\">Operation Name</label>\n                  <cqa-custom-input\n                    [value]=\"graphQLForm.get('operationName')?.value || ''\"\n                    (valueChange)=\"graphQLForm.get('operationName')?.setValue($event)\"\n                    [label]=\"''\" placeholder=\"e.g. GetBooking\" [fullWidth]=\"true\" size=\"md\"\n                    ariaLabel=\"GraphQL operation name\">\n                  </cqa-custom-input>\n                  <p *ngIf=\"graphQLOperationWarning\" class=\"cqa-text-[#B45309] cqa-text-[12px] cqa-mt-1\">\n                    {{ graphQLOperationWarning }}\n                  </p>\n                  <div class=\"cqa-flex cqa-flex-row cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-p-2\" style=\"border-radius: 8px; border: 1px solid #EDE9FE; background: #F5F3FF;\">\n                    <div>\n                      <mat-icon style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[14px] cqa-text-[#7C3AED]\" >lightbulb</mat-icon>\n                    </div>\n                    <div class=\"cqa-text-[#7C3AED]\">\n                      Use <span style=\"background-color: white; color:black; border-radius: 4px; padding: 2px;\">var</span> in variables to bind from earlier steps.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level). Hidden while the GraphQL picker is open so it doesn't compete for focus with the operation list. -->\n        <div *ngIf=\"bodyView !== 'graphql-schema'\">\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. Hidden while the GraphQL picker is open \u2014 the user is in \"pick an operation\" mode, not \"view last response\" mode, so showing a stale preview below the picker is just noise. -->\n  <div *ngIf=\"bodyView !== 'graphql-schema'\" #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 *ngIf=\"bodyView !== 'graphql-schema'\" 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", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { 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: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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: GraphQLOperationPickerComponent, selector: "cqa-graphql-operation-picker", inputs: ["schemaSource", "operations", "introspected", "isLoading"], outputs: ["back", "operationSelected", "reIntrospect", "change", "preview"] }, { 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-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>" }]
+            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        <!-- API Type segment: REST API (default) | GraphQL | SOAP/WebSocket/gRPC (disabled) -->\n        <div class=\"cqa-api-edit-step-api-type-row cqa-flex cqa-flex-col cqa-gap-1.5\">\n          <label class=\"cqa-api-edit-step-api-type-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">API Type</label>\n          <cqa-segment-control\n            [value]=\"activeApiType\"\n            [segments]=\"apiTypeSegments\"\n            (valueChange)=\"onApiTypeChange($event)\"\n            class=\"cqa-api-edit-step-api-type-segment\">\n          </cqa-segment-control>\n        </div>\n\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-justify-end cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <div *ngIf=\"activeApiType === 'graphql'\" 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\n          <div 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          </div>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div [ngClass]=\"{'cqa-items-start': activeApiType === 'rest', 'cqa-justify-between': activeApiType === 'graphql'}\" class=\"cqa-api-edit-step-request-row cqa-flex 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          <!-- REST mode shows the HTTP Method dropdown. GraphQL pins method to POST internally so the dropdown is hidden. -->\n          <cqa-dynamic-select *ngIf=\"methodForm && activeApiType === 'rest'\" [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 *ngIf=\"activeApiType === 'rest'\" 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\n          <!-- Import API cURL: REST-only (the cURL parser produces REST shapes). -->\n          <div *ngIf=\"activeApiType === 'rest'\" 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          <!--\n            Load Schema: GraphQL-only. Uses the elevated cqa-button variant so the\n            indigo surface + text + elevation shadow come from the design system \u2014\n            customClass keeps only the typography + responsive sizing tweaks.\n            Disabled / blocked styling is handled natively by the elevated variant\n            (cqa-bg-primary-muted, muted text, no shadow), so we don't add an\n            opacity override on top.\n          -->\n          <cqa-button *ngIf=\"activeApiType === 'graphql'\" type=\"button\" variant=\"elevated\" btnSize=\"lg\" text=\"Load Schema\"\n            icon=\"schema\"\n            customClass=\"cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n            [disabled]=\"!url || !url.trim() || isLoadingGraphQLSchema\"\n            (clicked)=\"onLoadSchema()\">\n          </cqa-button>\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        <!-- GraphQL operation picker \u2014 opened by the \"Load Schema\" button in GraphQL mode. -->\n        <ng-container *ngIf=\"bodyView === 'graphql-schema'\">\n          <cqa-graphql-operation-picker\n            [schemaSource]=\"graphQLSchemaSource\"\n            [operations]=\"graphQLOperations\"\n            [introspected]=\"!!graphQLSchemaSource\"\n            [isLoading]=\"isLoadingGraphQLSchema\"\n            (back)=\"onGraphQLPickerBack()\"\n            (reIntrospect)=\"onGraphQLPickerReIntrospect()\"\n            (operationSelected)=\"onGraphQLPickerOperationSelected($event)\">\n          </cqa-graphql-operation-picker>\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. REST-only \u2014 GraphQL POST has no query params. -->\n            <div *ngIf=\"activePayloadTab === 'params' && activeApiType === 'rest'\" 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. REST-only \u2014 GraphQL uses the dedicated tab below. -->\n            <div *ngIf=\"activePayloadTab === 'body' && activeApiType === 'rest'\"\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\n            <!-- Payload content (GraphQL): Query + Variables + Operation Name. Active only in GraphQL mode. -->\n            <div *ngIf=\"activePayloadTab === 'graphql' && activeApiType === 'graphql' && graphQLForm\"\n              class=\"cqa-api-edit-step-payload-graphql cqa-api-edit-step-graphql-tab cqa-flex cqa-flex-col cqa-gap-4\">\n              <!--\n                Query / Variables use the design-system `cqa-custom-textarea` so\n                styling, label, error rendering, and accessibility come from the\n                primitive. We bind via [value] / (valueChange) instead of\n                formControlName because cqa-custom-textarea isn't a CVA \u2014 calling\n                form.get('\u2026').setValue still fires the existing valueChanges\n                subscriptions (which clear inline errors and recompute the\n                multi-operation warning).\n              -->\n              <cqa-custom-textarea\n                label=\"Query\"\n                [required]=\"true\"\n                [value]=\"graphQLForm.get('query')?.value || ''\"\n                (valueChange)=\"graphQLForm.get('query')?.setValue($event)\"\n                placeholder=\"query GetX($id: ID!) {&#10;  x(id: $id) { name }&#10;}\"\n                ariaLabel=\"GraphQL query\"\n                [errors]=\"graphQLQueryError ? [graphQLQueryError] : []\"\n                [fullWidth]=\"true\"\n                [rows]=\"4\"\n                resize=\"vertical\"\n                size=\"md\">\n              </cqa-custom-textarea>\n              <div class=\"cqa-flex cqa-gap-1.5\">\n                <cqa-custom-textarea\n                  class=\"cqa-flex-1\"\n                  label=\"Variables (JSON)\"\n                  [value]=\"graphQLForm.get('variables')?.value || ''\"\n                  (valueChange)=\"graphQLForm.get('variables')?.setValue($event)\"\n                  placeholder='{ \"id\": \"abc\" }'\n                  ariaLabel=\"GraphQL variables\"\n                  [errors]=\"graphQLVariablesError ? [graphQLVariablesError] : []\"\n                  [fullWidth]=\"true\"\n                  [rows]=\"3\"\n                  resize=\"vertical\"\n                  size=\"md\">\n                </cqa-custom-textarea>\n                <!-- Operation Name: optional unless 2+ operations are declared. -->\n                <div class=\"cqa-api-edit-step-graphql-field cqa-flex cqa-flex-col cqa-gap-1.5\">\n                  <label class=\"cqa-api-edit-step-graphql-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-text-[#374151]\">Operation Name</label>\n                  <cqa-custom-input\n                    [value]=\"graphQLForm.get('operationName')?.value || ''\"\n                    (valueChange)=\"graphQLForm.get('operationName')?.setValue($event)\"\n                    [label]=\"''\" placeholder=\"e.g. GetBooking\" [fullWidth]=\"true\" size=\"md\"\n                    ariaLabel=\"GraphQL operation name\">\n                  </cqa-custom-input>\n                  <p *ngIf=\"graphQLOperationWarning\" class=\"cqa-text-[#B45309] cqa-text-[12px] cqa-mt-1\">\n                    {{ graphQLOperationWarning }}\n                  </p>\n                  <div class=\"cqa-flex cqa-flex-row cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-p-2\" style=\"border-radius: 8px; border: 1px solid #EDE9FE; background: #F5F3FF;\">\n                    <div>\n                      <mat-icon style=\"display:flex;font-size:14px;font-weight: 600;\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-text-[14px] cqa-text-[#7C3AED]\" >lightbulb</mat-icon>\n                    </div>\n                    <div class=\"cqa-text-[#7C3AED]\">\n                      Use <span style=\"background-color: white; color:black; border-radius: 4px; padding: 2px;\">var</span> in variables to bind from earlier steps.\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level). Hidden while the GraphQL picker is open so it doesn't compete for focus with the operation list. -->\n        <div *ngIf=\"bodyView !== 'graphql-schema'\">\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. Hidden while the GraphQL picker is open \u2014 the user is in \"pick an operation\" mode, not \"view last response\" mode, so showing a stale preview below the picker is just noise. -->\n  <div *ngIf=\"bodyView !== 'graphql-schema'\" #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 *ngIf=\"bodyView !== 'graphql-schema'\" 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: [{
@@ -37981,6 +38362,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isCreatingStep: [{
                 type: Input
+            }], initialApiType: [{
+                type: Input
+            }], initialGraphQL: [{
+                type: Input
+            }], graphQLSchemaSource: [{
+                type: Input
+            }], graphQLOperations: [{
+                type: Input
+            }], isLoadingGraphQLSchema: [{
+                type: Input
             }], importCurl: [{
                 type: Output
             }], importCurlCancel: [{
@@ -38013,6 +38404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], environmentLoadMore: [{
                 type: Output
+            }], loadSchema: [{
+                type: Output
             }], authTypeOptions: [{
                 type: Input
             }], initialAuthType: [{
@@ -45991,10 +46384,10 @@ class StepBuilderDocumentComponent {
     }
 }
 StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete row</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n                  <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n                       class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n                      <cqa-dynamic-select\n                        [form]=\"getValueFormGroup(i, j)\"\n                        [config]=\"getValueTypeConfig(i, j)\">\n                      </cqa-dynamic-select>\n                    </div>\n                    <div class=\"cqa-flex-1 cqa-min-w-0\">\n                      <cqa-custom-input\n                        [placeholder]=\"'Value'\"\n                        [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n                        [fullWidth]=\"true\"\n                        (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n                      </cqa-custom-input>\n                    </div>\n                    <button\n                      type=\"button\"\n                      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n                      [disabled]=\"getValuesFormArray(i).length <= 1\"\n                      (click)=\"removeValueEntry(i, j)\"\n                      [attr.aria-label]=\"'Remove value'\"\n                      [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n                      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n                    </button>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n                    (click)=\"addValueEntry(i)\"\n                    [attr.aria-label]=\"'Add value'\">\n                    <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n                    Add value\n                  </button>\n                </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete key row'\"\n                  title=\"Delete this key and all its values\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button *ngIf=\"!isCreatingStep\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\" size=\"medium\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["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: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key (column name)</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete row</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n                  <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n                       class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n                      <cqa-dynamic-select\n                        [form]=\"getValueFormGroup(i, j)\"\n                        [config]=\"getValueTypeConfig(i, j)\">\n                      </cqa-dynamic-select>\n                    </div>\n                    <div class=\"cqa-flex-1 cqa-min-w-0\">\n                      <cqa-custom-input\n                        [placeholder]=\"'Value'\"\n                        [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n                        [fullWidth]=\"true\"\n                        (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n                      </cqa-custom-input>\n                    </div>\n                    <button\n                      type=\"button\"\n                      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n                      [disabled]=\"getValuesFormArray(i).length <= 1\"\n                      (click)=\"removeValueEntry(i, j)\"\n                      [attr.aria-label]=\"'Remove value'\"\n                      [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n                      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n                    </button>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n                    (click)=\"addValueEntry(i)\"\n                    [attr.aria-label]=\"'Add value'\">\n                    <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n                    Add value\n                  </button>\n                </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete key row'\"\n                  title=\"Delete this key and all its values\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button *ngIf=\"!isCreatingStep\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\" size=\"medium\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["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: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete row</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n                  <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n                       class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n                      <cqa-dynamic-select\n                        [form]=\"getValueFormGroup(i, j)\"\n                        [config]=\"getValueTypeConfig(i, j)\">\n                      </cqa-dynamic-select>\n                    </div>\n                    <div class=\"cqa-flex-1 cqa-min-w-0\">\n                      <cqa-custom-input\n                        [placeholder]=\"'Value'\"\n                        [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n                        [fullWidth]=\"true\"\n                        (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n                      </cqa-custom-input>\n                    </div>\n                    <button\n                      type=\"button\"\n                      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n                      [disabled]=\"getValuesFormArray(i).length <= 1\"\n                      (click)=\"removeValueEntry(i, j)\"\n                      [attr.aria-label]=\"'Remove value'\"\n                      [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n                      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n                    </button>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n                    (click)=\"addValueEntry(i)\"\n                    [attr.aria-label]=\"'Add value'\">\n                    <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n                    Add value\n                  </button>\n                </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete key row'\"\n                  title=\"Delete this key and all its values\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button *ngIf=\"!isCreatingStep\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\" size=\"medium\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key (column name)</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete row</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n                  <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n                       class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n                      <cqa-dynamic-select\n                        [form]=\"getValueFormGroup(i, j)\"\n                        [config]=\"getValueTypeConfig(i, j)\">\n                      </cqa-dynamic-select>\n                    </div>\n                    <div class=\"cqa-flex-1 cqa-min-w-0\">\n                      <cqa-custom-input\n                        [placeholder]=\"'Value'\"\n                        [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n                        [fullWidth]=\"true\"\n                        (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n                      </cqa-custom-input>\n                    </div>\n                    <button\n                      type=\"button\"\n                      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n                      [disabled]=\"getValuesFormArray(i).length <= 1\"\n                      (click)=\"removeValueEntry(i, j)\"\n                      [attr.aria-label]=\"'Remove value'\"\n                      [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n                      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n                    </button>\n                  </div>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n                    (click)=\"addValueEntry(i)\"\n                    [attr.aria-label]=\"'Add value'\">\n                    <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n                    Add value\n                  </button>\n                </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete key row'\"\n                  title=\"Delete this key and all its values\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n    <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n      <button type=\"button\"\n        class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button *ngIf=\"!isCreatingStep\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\" size=\"medium\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { documentTypeOptions: [{
                 type: Input
             }], templateOptions: [{
@@ -52918,6 +53311,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         DeleteStepsComponent,
         RunExecutionAlertComponent,
         ApiEditStepComponent,
+        GraphQLOperationPickerComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
         StepBuilderLoopComponent,
@@ -53113,6 +53507,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         DeleteStepsComponent,
         RunExecutionAlertComponent,
         ApiEditStepComponent,
+        GraphQLOperationPickerComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
         StepBuilderLoopComponent,
@@ -53355,6 +53750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DeleteStepsComponent,
                         RunExecutionAlertComponent,
                         ApiEditStepComponent,
+                        GraphQLOperationPickerComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
@@ -53556,6 +53952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         DeleteStepsComponent,
                         RunExecutionAlertComponent,
                         ApiEditStepComponent,
+                        GraphQLOperationPickerComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
@@ -54305,5 +54702,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NamePromptModalComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, ViewportSelectorComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, ALL_FILTER_VALUE, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiMockingCardComponent, ApiStepComponent, AssignEnvironmentsDialogComponent, AuditLogDrawerComponent, AuditLogDrawerService, AuditLogEntryCardComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, CaptureVideoDialogComponent, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_FOLDER_COLOR, DEFAULT_METADATA_COLOR, DEFAULT_MODULAR_CONFIG, DEFAULT_MODULAR_LABELS, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_REORDER_LABELS, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteFolderDialogComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ENVIRONMENT_ACCENT_COLORS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FOLDER_COLUMN_FIELD_ID, FOLDER_DRAG_MIME, FOLDER_NAME_MAX_LENGTH, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FolderDragDirective, FolderDropDirective, FolderSidebarComponent, FullTableLoaderComponent, GraphQLOperationPickerComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, ManageColumnsDialogComponent, MetricsCardComponent, MixedVariableInputComponent, ModularTableTemplateComponent, MoveToFolderDialogComponent, NamePromptModalComponent, NetworkRequestComponent, NewDbConfigDialogComponent, NewEnvironmentDialogComponent, NewEnvironmentVariableDialogComponent, NewFolderDialogComponent, NewGlobalVariableDialogComponent, NewTestDataProfileDialogComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, PermissionToggleComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, ROW_DRAG_MIME, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RowDragDirective, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, SubStepsConfirmationDialogComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLinkCellComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewCompareButtonComponent, ViewMoreFailedStepButtonComponent, ViewportSelectorComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map