@cqa-lib/cqa-ui 1.1.191 → 1.1.192

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

@@ -17483,7 +17483,20 @@ class TestCaseDetailsRendererComponent {
         wire('descriptionChange', this.descriptionChange);
         wire('reusableChange', this.reusableChange);
         wire('openExternal', this.openExternal);
-        wire('edit', this.edit);
+        wire('edit', {
+            emit: (v) => {
+                // If child component emits void or nothing, use current step and index
+                // If child component already emits an object, merge it with step and index
+                if (v != null && typeof v === 'object' && 'step' in v && 'index' in v) {
+                    // Already has step and index, emit as-is
+                    this.edit.emit(v);
+                }
+                else {
+                    // Emit with current step and index
+                    this.edit.emit({ step: this.step, index: this.index });
+                }
+            },
+        });
         wire('link', this.link);
         wire('duplicate', this.duplicate);
         wire('delete', this.delete);
@@ -19616,6 +19629,152 @@ const API_EDIT_STEP_LABELS = {
 const METHODS_WITHOUT_BODY = ['GET', 'HEAD', 'DELETE'];
 /** Auto-close pairs for payload JSON editor: opening char -> closing char. */
 const PAYLOAD_AUTO_CLOSE_PAIRS = { '{': '}', '[': ']', '"': '"', "'": "'" };
+function isSingleQuote(ch) {
+    return ch === "'" || ch === '\u2018' || ch === '\u2019';
+}
+function isDoubleQuote(ch) {
+    return ch === '"' || ch === '\u201C' || ch === '\u201D';
+}
+function isClosingQuote(ch, openQuote) {
+    if (isSingleQuote(openQuote))
+        return isSingleQuote(ch);
+    if (isDoubleQuote(openQuote))
+        return isDoubleQuote(ch);
+    return ch === openQuote;
+}
+/**
+ * Tokenize a string respecting single- and double-quoted segments (for cURL args).
+ * Handles straight and smart/curly quotes so pasted cURLs from browsers/docs work.
+ */
+function tokenizeCurlLine(line) {
+    const tokens = [];
+    let i = 0;
+    const n = line.length;
+    while (i < n) {
+        while (i < n && /\s/.test(line[i]))
+            i++;
+        if (i >= n)
+            break;
+        const ch = line[i];
+        if (isSingleQuote(ch) || isDoubleQuote(ch)) {
+            const quote = ch;
+            i++;
+            let value = '';
+            while (i < n && !isClosingQuote(line[i], quote)) {
+                if (line[i] === '\\') {
+                    i++;
+                    if (i < n)
+                        value += line[i++];
+                }
+                else {
+                    value += line[i++];
+                }
+            }
+            if (i < n)
+                i++;
+            tokens.push(value);
+            continue;
+        }
+        let word = '';
+        while (i < n && !/\s/.test(line[i]) && !isSingleQuote(line[i]) && !isDoubleQuote(line[i])) {
+            word += line[i++];
+        }
+        if (word)
+            tokens.push(word);
+    }
+    return tokens;
+}
+/** Strip one layer of surrounding single or double quotes from a string (e.g. '{"x":1}' -> {"x":1}). */
+function stripSurroundingQuotes(s) {
+    if (s.length >= 2 && (s.startsWith("'") && s.endsWith("'")) || (s.startsWith('"') && s.endsWith('"'))) {
+        return s.slice(1, -1);
+    }
+    return s;
+}
+/**
+ * Parse a cURL command string and return method, url, headers, and body.
+ * Supports -X/--request, -H/--header, -d/--data/--data-raw/--data-binary, and URL.
+ * Handles line continuations (backslash-newline) and quoted body payloads.
+ */
+function parseCurl(curlString) {
+    const raw = (curlString !== null && curlString !== void 0 ? curlString : '').trim();
+    if (!raw)
+        return null;
+    // Remove line continuations (backslash followed by newline) so they don't break tokenization
+    const noContinuations = raw.replace(/\\\s*\r?\n\s*/g, ' ');
+    const normalized = noContinuations.replace(/\r?\n/g, ' ').replace(/\s+/g, ' ');
+    const tokens = tokenizeCurlLine(normalized);
+    let method = 'GET';
+    let url = '';
+    const headers = [];
+    let body = '';
+    const urlPattern = /^https?:\/\//i;
+    for (let i = 0; i < tokens.length; i++) {
+        const t = tokens[i];
+        const consumeNext = () => {
+            i++;
+            return tokens[i];
+        };
+        if (t === '-X' || t === '--request') {
+            const value = consumeNext();
+            if (value)
+                method = value.toUpperCase();
+            continue;
+        }
+        if (t === '-H' || t === '--header') {
+            const value = consumeNext();
+            if (value) {
+                const colon = value.indexOf(':');
+                if (colon !== -1) {
+                    const name = value.slice(0, colon).trim();
+                    const headerValue = value.slice(colon + 1).trim();
+                    if (name)
+                        headers.push({ name, type: 'string', value: headerValue });
+                }
+            }
+            continue;
+        }
+        if (t === '-d' || t === '--data' || t === '--data-raw' || t === '--data-binary' || t === '--data-ascii') {
+            const value = consumeNext();
+            if (value != null && !String(value).startsWith('@'))
+                body = stripSurroundingQuotes(value);
+            continue;
+        }
+        if (t.startsWith('--data=')) {
+            const value = t.slice(7);
+            if (!value.startsWith('@'))
+                body = stripSurroundingQuotes(value.replace(/^["']|["']$/g, ''));
+            continue;
+        }
+        if (t.startsWith('--data-raw=')) {
+            const value = t.slice(11);
+            if (!value.startsWith('@'))
+                body = stripSurroundingQuotes(value.replace(/^["']|["']$/g, ''));
+            continue;
+        }
+        if (t.startsWith('-d')) {
+            const value = t.length > 2 ? t.slice(2) : consumeNext();
+            if (value != null && !value.startsWith('@'))
+                body = stripSurroundingQuotes(value);
+            continue;
+        }
+        if (urlPattern.test(t)) {
+            if (!url)
+                url = t;
+        }
+    }
+    if (!url) {
+        const firstUrl = tokens.find((tok) => urlPattern.test(tok));
+        if (firstUrl)
+            url = firstUrl;
+    }
+    // Many cURLs (e.g. from browser devtools) omit -X POST when sending a body; infer POST
+    const finalMethod = (method || 'GET').toUpperCase();
+    if (body && (finalMethod === 'GET' || finalMethod === 'HEAD')) {
+        return { method: 'POST', url, headers, body };
+    }
+    return { method: finalMethod, url, headers, body };
+}
 class ApiEditStepComponent {
     constructor(fb, cdr) {
         this.fb = fb;
@@ -19627,6 +19786,8 @@ class ApiEditStepComponent {
         /** Emits when user clicks Send Request, with environment, method, url, and headers. */
         this.sendRequest = new EventEmitter();
         this.back = new EventEmitter();
+        /** Emits when user clicks the Cancel button (step 1). */
+        this.cancel = new EventEmitter();
         this.next = new EventEmitter();
         /** Emits when user clicks Create with all entered details: step1 (environment, HTTP method, URL, headers, body), step2 (variable name), step3 (verifications). */
         this.create = new EventEmitter();
@@ -19664,16 +19825,41 @@ class ApiEditStepComponent {
             searchable: false,
             options: [],
         };
+        /** 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) */
+        this.authTypeSelectConfig = {
+            key: 'authType',
+            placeholder: 'No Auth',
+            searchable: false,
+            options: [],
+        };
+        /** Bearer token value (Authorization tab, when auth type is Bearer Token). */
+        this.bearerToken = '';
+        this.oauth2GrantTypeSelectConfig = {
+            key: 'grantType',
+            placeholder: 'Select grant type',
+            searchable: false,
+            options: [...ApiEditStepComponent.OAUTH_GRANT_TYPE_OPTIONS],
+        };
+        this.oauth2ClientAuthSelectConfig = {
+            key: 'clientAuthentication',
+            placeholder: 'Select method',
+            searchable: false,
+            options: [...ApiEditStepComponent.OAUTH_CLIENT_AUTH_OPTIONS],
+        };
         /** Cached environment value from last selection (so Create payload has the selected value). */
         this.currentEnvironmentValue = '';
         /** Cached HTTP method from last selection (so Create payload has the selected value). */
         this.currentMethodValue = '';
-        this.url = '';
+        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' },
-            { value: 'scripts', label: 'Scripts' },
         ];
         this.activePayloadTab = 'headers';
         /** Step 3: Response verification tabs */
@@ -19682,7 +19868,7 @@ class ApiEditStepComponent {
             { value: 'status', label: 'Status' },
         ];
         this.activeResponseVerificationTab = 'response-body';
-        /** Payload type for Body/Params/Scripts: raw, x-www-form-urlencoded, form-data */
+        /** Payload type for Body/Params/Authorization: raw, x-www-form-urlencoded, form-data */
         this.payloadType = 'raw';
         /** Segment options for payload type (used by cqa-segment-control) */
         this.payloadTypeSegments = [
@@ -19699,7 +19885,7 @@ class ApiEditStepComponent {
             searchable: false,
             options: [...ApiEditStepComponent.DEFAULT_FORMAT_OPTIONS],
         };
-        /** Payload text area value for Body/Params/Scripts */
+        /** Payload text area value for Body/Params/Authorization */
         this.payloadText = '';
         /** JSON parse error when format is JSON and payload is invalid; null when valid or not JSON. */
         this.payloadJsonError = null;
@@ -19797,16 +19983,16 @@ class ApiEditStepComponent {
             .filter((v) => v != null);
     }
     static toSelectOption(item) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _c, _d, _e, _f, _g, _h, _j;
         if (typeof item === 'string') {
             return { id: item, value: item, name: item, label: item };
         }
         const o = item;
         return {
             id: (_a = o.id) !== null && _a !== void 0 ? _a : o.value,
-            value: (_b = o.value) !== null && _b !== void 0 ? _b : o.id,
-            name: (_d = (_c = o.name) !== null && _c !== void 0 ? _c : o.label) !== null && _d !== void 0 ? _d : String((_e = o.value) !== null && _e !== void 0 ? _e : o.id),
-            label: (_g = (_f = o.label) !== null && _f !== void 0 ? _f : o.name) !== null && _g !== void 0 ? _g : String((_h = o.value) !== null && _h !== void 0 ? _h : o.id),
+            value: (_c = o.value) !== null && _c !== void 0 ? _c : o.id,
+            name: (_e = (_d = o.name) !== null && _d !== void 0 ? _d : o.label) !== null && _e !== void 0 ? _e : String((_f = o.value) !== null && _f !== void 0 ? _f : o.id),
+            label: (_h = (_g = o.label) !== null && _g !== void 0 ? _g : o.name) !== null && _h !== void 0 ? _h : String((_j = o.value) !== null && _j !== void 0 ? _j : o.id),
         };
     }
     static getOptionValue(item) {
@@ -19828,15 +20014,39 @@ class ApiEditStepComponent {
             .map((e) => ApiEditStepComponent.getOptionValue(e))
             .filter((v) => v != null);
     }
+    updateAuthTypeSelectConfig() {
+        var _a;
+        const options = ((_a = this.authTypeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? this.authTypeOptions.map((a) => ApiEditStepComponent.toSelectOption(a))
+            : [...ApiEditStepComponent.DEFAULT_AUTH_TYPE_OPTIONS];
+        this.authTypeSelectConfig = Object.assign(Object.assign({}, this.authTypeSelectConfig), { options });
+    }
+    getAuthTypeValues() {
+        var _a;
+        const source = ((_a = this.authTypeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0
+            ? this.authTypeOptions
+            : ApiEditStepComponent.DEFAULT_AUTH_TYPE_OPTIONS;
+        return source
+            .map((a) => ApiEditStepComponent.getOptionValue(a))
+            .filter((v) => v != null);
+    }
+    /** Current auth type value (e.g. 'no-auth') for template */
+    get selectedAuthType() {
+        var _a, _c, _d, _e;
+        const v = (_c = (_a = this.authTypeForm) === null || _a === void 0 ? void 0 : _a.get('authType')) === null || _c === void 0 ? void 0 : _c.value;
+        if (v == null || v === '')
+            return 'no-auth';
+        return typeof v === 'object' ? ((_e = (_d = v === null || v === void 0 ? void 0 : v.value) !== null && _d !== void 0 ? _d : v === null || v === void 0 ? void 0 : v.id) !== null && _e !== void 0 ? _e : 'no-auth') : String(v);
+    }
     /** Current HTTP method (from form or default: first of httpMethodOptions). Treats empty string as unset. */
     get selectedMethod() {
-        var _a, _b, _c, _d;
-        const value = (_b = (_a = this.methodForm) === null || _a === void 0 ? void 0 : _a.get('method')) === null || _b === void 0 ? void 0 : _b.value;
-        const firstValue = ((_c = this.httpMethodOptions) === null || _c === void 0 ? void 0 : _c.length)
+        var _a, _c, _d, _e;
+        const value = (_c = (_a = this.methodForm) === null || _a === void 0 ? void 0 : _a.get('method')) === null || _c === void 0 ? void 0 : _c.value;
+        const firstValue = ((_d = this.httpMethodOptions) === null || _d === void 0 ? void 0 : _d.length)
             ? ApiEditStepComponent.getOptionValue(this.httpMethodOptions[0])
             : undefined;
         const resolved = value != null && value !== '' ? (typeof value === 'object' ? ApiEditStepComponent.getOptionValue(value) : String(value)) : undefined;
-        return (_d = resolved !== null && resolved !== void 0 ? resolved : firstValue) !== null && _d !== void 0 ? _d : 'GET';
+        return (_e = resolved !== null && resolved !== void 0 ? resolved : firstValue) !== null && _e !== void 0 ? _e : 'GET';
     }
     set selectedMethod(v) {
         var _a;
@@ -19849,13 +20059,13 @@ class ApiEditStepComponent {
     }
     /** Current environment (from form or default: first of environmentOptions). Treats empty string as unset. */
     get selectedEnvironment() {
-        var _a, _b, _c, _d;
-        const value = (_b = (_a = this.environmentForm) === null || _a === void 0 ? void 0 : _a.get('environment')) === null || _b === void 0 ? void 0 : _b.value;
-        const firstValue = ((_c = this.environmentOptions) === null || _c === void 0 ? void 0 : _c.length)
+        var _a, _c, _d, _e;
+        const value = (_c = (_a = this.environmentForm) === null || _a === void 0 ? void 0 : _a.get('environment')) === null || _c === void 0 ? void 0 : _c.value;
+        const firstValue = ((_d = this.environmentOptions) === null || _d === void 0 ? void 0 : _d.length)
             ? ApiEditStepComponent.getOptionValue(this.environmentOptions[0])
             : undefined;
         const resolved = value != null && value !== '' ? (typeof value === 'object' ? ApiEditStepComponent.getOptionValue(value) : String(value)) : undefined;
-        return (_d = resolved !== null && resolved !== void 0 ? resolved : firstValue) !== null && _d !== void 0 ? _d : 'Development';
+        return (_e = resolved !== null && resolved !== void 0 ? resolved : firstValue) !== null && _e !== void 0 ? _e : 'Development';
     }
     set selectedEnvironment(v) {
         var _a;
@@ -19883,6 +20093,21 @@ class ApiEditStepComponent {
                     : String(v)
                 : '';
     }
+    /** URL for the request. Getter/setter syncs query params with the Params tab (Postman-style). */
+    get url() {
+        return this._url;
+    }
+    set url(value) {
+        const next = value !== null && value !== void 0 ? value : '';
+        if (this._url === next)
+            return;
+        this._url = next;
+        if (this.paramsFormArray) {
+            this.paramsSyncingFromUrl = true;
+            this.syncParamsFromUrl();
+            this.paramsSyncingFromUrl = false;
+        }
+    }
     onPayloadTypeChange(val) {
         this.payloadType = val;
     }
@@ -19909,8 +20134,8 @@ class ApiEditStepComponent {
     }
     /** Whether current payload format is JSON (so we validate and show JSON editor behavior). */
     get isPayloadFormatJson() {
-        var _a, _b;
-        const format = (_b = (_a = this.payloadFormatForm) === null || _a === void 0 ? void 0 : _a.get('format')) === null || _b === void 0 ? void 0 : _b.value;
+        var _a, _c;
+        const format = (_c = (_a = this.payloadFormatForm) === null || _a === void 0 ? void 0 : _a.get('format')) === null || _c === void 0 ? void 0 : _c.value;
         return format === 'json';
     }
     /** Error messages for the payload textarea (red border + bottom line). */
@@ -19935,7 +20160,7 @@ class ApiEditStepComponent {
         this.onPayloadTextChange((_a = target === null || target === void 0 ? void 0 : target.value) !== null && _a !== void 0 ? _a : '');
     }
     onPayloadKeydown(event) {
-        var _a, _b;
+        var _a, _c;
         if (!this.isPayloadFormatJson)
             return;
         const key = event.key;
@@ -19947,7 +20172,7 @@ class ApiEditStepComponent {
             return;
         event.preventDefault();
         const start = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 0;
-        const end = (_b = target.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        const end = (_c = target.selectionEnd) !== null && _c !== void 0 ? _c : start;
         const before = this.payloadText.slice(0, start);
         const after = this.payloadText.slice(end);
         const insertPos = start + 1;
@@ -19955,13 +20180,13 @@ class ApiEditStepComponent {
         this.payloadText = newValue;
         this.validatePayloadJson();
         setTimeout(() => {
-            var _a, _b;
-            (_b = (_a = this.payloadTextareaRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.setSelectionRange(insertPos, insertPos);
+            var _a, _c;
+            (_c = (_a = this.payloadTextareaRef) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _c === void 0 ? void 0 : _c.setSelectionRange(insertPos, insertPos);
         }, 0);
     }
     /** Validate payload when format is JSON; sets payloadJsonError or clears it. */
     validatePayloadJson() {
-        var _a, _b;
+        var _a, _c;
         if (!this.isPayloadFormatJson) {
             this.payloadJsonError = null;
             return;
@@ -19981,7 +20206,7 @@ class ApiEditStepComponent {
             const { line, column } = this.positionToLineColumn(text, position);
             const lines = text.split(/\r?\n/);
             const lineIndex = Math.max(0, line - 1);
-            const lineContent = (_b = lines[lineIndex]) !== null && _b !== void 0 ? _b : '';
+            const lineContent = (_c = lines[lineIndex]) !== null && _c !== void 0 ? _c : '';
             const excerpt = lineContent || ' ';
             const caretOffset = lineIndex === line - 1 ? Math.min(column - 1, lineContent.length) : 0;
             this.payloadJsonError = {
@@ -20016,8 +20241,8 @@ class ApiEditStepComponent {
     }
     /** Typed accessor for template (FormArray.controls is AbstractControl[]) */
     get headerRows() {
-        var _a, _b;
-        return ((_b = (_a = this.headersFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : []);
+        var _a, _c;
+        return ((_c = (_a = this.headersFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _c !== void 0 ? _c : []);
     }
     updateHeaderNameSelectConfig() {
         var _a;
@@ -20025,7 +20250,7 @@ class ApiEditStepComponent {
             ? this.headerNameOptions
             : ApiEditStepComponent.DEFAULT_HEADER_NAME_OPTIONS;
         const baseOptions = source.map((h) => ApiEditStepComponent.toSelectOption(h));
-        const baseValues = new Set(baseOptions.map((o) => { var _a, _b; return String((_b = (_a = o.value) !== null && _a !== void 0 ? _a : o.id) !== null && _b !== void 0 ? _b : '').trim(); }).filter(Boolean));
+        const baseValues = new Set(baseOptions.map((o) => { var _a, _c; return String((_c = (_a = o.value) !== null && _a !== void 0 ? _a : o.id) !== null && _c !== void 0 ? _c : '').trim(); }).filter(Boolean));
         const currentNamesFromForm = this.getCurrentHeaderNamesFromForm();
         const extraOptions = [];
         for (const name of currentNamesFromForm) {
@@ -20040,13 +20265,13 @@ class ApiEditStepComponent {
     }
     /** Collects distinct non-empty header names currently in the headers form (for dynamic options). */
     getCurrentHeaderNamesFromForm() {
-        var _a, _b, _c;
+        var _a, _c, _d;
         const names = [];
         const seen = new Set();
-        if (!((_b = (_a = this.headersFormArray) === null || _a === void 0 ? void 0 : _a.controls) === null || _b === void 0 ? void 0 : _b.length))
+        if (!((_c = (_a = this.headersFormArray) === null || _a === void 0 ? void 0 : _a.controls) === null || _c === void 0 ? void 0 : _c.length))
             return names;
         for (const control of this.headersFormArray.controls) {
-            const name = (_c = control.get('name')) === null || _c === void 0 ? void 0 : _c.value;
+            const name = (_d = control.get('name')) === null || _d === void 0 ? void 0 : _d.value;
             const str = name != null ? String(name).trim() : '';
             if (str && !seen.has(str)) {
                 seen.add(str);
@@ -20056,16 +20281,20 @@ class ApiEditStepComponent {
         return names;
     }
     get keyValueRows() {
-        var _a, _b;
-        return ((_b = (_a = this.keyValueFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : []);
+        var _a, _c;
+        return ((_c = (_a = this.keyValueFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _c !== void 0 ? _c : []);
     }
     get keyTypeValueRows() {
-        var _a, _b;
-        return ((_b = (_a = this.keyTypeValueFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : []);
+        var _a, _c;
+        return ((_c = (_a = this.keyTypeValueFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _c !== void 0 ? _c : []);
+    }
+    get paramsRows() {
+        var _a, _c;
+        return ((_c = (_a = this.paramsFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _c !== void 0 ? _c : []);
     }
     get verificationRows() {
-        var _a, _b;
-        return ((_b = (_a = this.verificationFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : []);
+        var _a, _c;
+        return ((_c = (_a = this.verificationFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _c !== void 0 ? _c : []);
     }
     updateVerificationSelectConfig() {
         var _a;
@@ -20108,8 +20337,8 @@ class ApiEditStepComponent {
         return values.length > 0 ? values[0] : 'string';
     }
     get statusVerificationRows() {
-        var _a, _b;
-        return ((_b = (_a = this.statusVerificationFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : []);
+        var _a, _c;
+        return ((_c = (_a = this.statusVerificationFormArray) === null || _a === void 0 ? void 0 : _a.controls) !== null && _c !== void 0 ? _c : []);
     }
     updateStatusVerificationSelectConfig() {
         var _a;
@@ -20132,36 +20361,50 @@ class ApiEditStepComponent {
         return values.length > 0 ? values[0] : 'equals';
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         this.applyInitialStep(this.initialStep);
         this.updateMethodSelectConfig();
         this.updateHeaderNameSelectConfig();
         const firstMethodValue = ((_a = this.httpMethodOptions) === null || _a === void 0 ? void 0 : _a.length)
             ? ApiEditStepComponent.getOptionValue(this.httpMethodOptions[0])
             : undefined;
-        const defaultMethod = (_c = (_b = this.initialMethod) !== null && _b !== void 0 ? _b : firstMethodValue) !== null && _c !== void 0 ? _c : 'GET';
-        this.currentMethodValue = typeof defaultMethod === 'string' ? defaultMethod : ((_d = ApiEditStepComponent.getOptionValue(defaultMethod)) !== null && _d !== void 0 ? _d : '');
+        const defaultMethod = (_d = (_c = this.initialMethod) !== null && _c !== void 0 ? _c : firstMethodValue) !== null && _d !== void 0 ? _d : 'GET';
+        this.currentMethodValue = typeof defaultMethod === 'string' ? defaultMethod : ((_e = ApiEditStepComponent.getOptionValue(defaultMethod)) !== null && _e !== void 0 ? _e : '');
         this.methodForm = this.fb.group({
             method: [defaultMethod],
         });
-        const firstValue = ((_e = this.environmentOptions) === null || _e === void 0 ? void 0 : _e.length)
+        const firstValue = ((_f = this.environmentOptions) === null || _f === void 0 ? void 0 : _f.length)
             ? ApiEditStepComponent.getOptionValue(this.environmentOptions[0])
             : undefined;
-        const defaultEnv = (_g = (_f = this.initialEnvironment) !== null && _f !== void 0 ? _f : firstValue) !== null && _g !== void 0 ? _g : 'Development';
-        this.currentEnvironmentValue = typeof defaultEnv === 'string' ? defaultEnv : ((_h = ApiEditStepComponent.getOptionValue(defaultEnv)) !== null && _h !== void 0 ? _h : '');
+        const defaultEnv = (_h = (_g = this.initialEnvironment) !== null && _g !== void 0 ? _g : firstValue) !== null && _h !== void 0 ? _h : 'Development';
+        this.currentEnvironmentValue = typeof defaultEnv === 'string' ? defaultEnv : ((_j = ApiEditStepComponent.getOptionValue(defaultEnv)) !== null && _j !== void 0 ? _j : '');
         this.environmentForm = this.fb.group({
             environment: [defaultEnv],
         });
-        this.environmentFormChangesSub = (_k = (_j = this.environmentForm.get('environment')) === null || _j === void 0 ? void 0 : _j.valueChanges) === null || _k === void 0 ? void 0 : _k.subscribe((v) => {
+        this.updateAuthTypeSelectConfig();
+        const firstAuthValue = this.getAuthTypeValues()[0];
+        const defaultAuthType = (_l = (_k = this.initialAuthType) !== null && _k !== void 0 ? _k : firstAuthValue) !== null && _l !== void 0 ? _l : 'no-auth';
+        this.authTypeForm = this.fb.group({
+            authType: [defaultAuthType],
+        });
+        this.oauth2Form = this.fb.group({
+            grantType: ['client_credentials'],
+            accessTokenUrl: [''],
+            clientId: [''],
+            clientSecret: [''],
+            scope: [''],
+            clientAuthentication: ['basic'],
+        });
+        this.environmentFormChangesSub = (_o = (_m = this.environmentForm.get('environment')) === null || _m === void 0 ? void 0 : _m.valueChanges) === null || _o === void 0 ? void 0 : _o.subscribe((v) => {
             const s = v != null && v !== '' ? (typeof v === 'object' ? ApiEditStepComponent.getOptionValue(v) : String(v)) : '';
             this.currentEnvironmentValue = s !== null && s !== void 0 ? s : '';
         });
-        this.methodFormChangesSub = (_m = (_l = this.methodForm.get('method')) === null || _l === void 0 ? void 0 : _l.valueChanges) === null || _m === void 0 ? void 0 : _m.subscribe((v) => {
+        this.methodFormChangesSub = (_q = (_p = this.methodForm.get('method')) === null || _p === void 0 ? void 0 : _p.valueChanges) === null || _q === void 0 ? void 0 : _q.subscribe((v) => {
             const s = v != null && v !== '' ? (typeof v === 'object' ? ApiEditStepComponent.getOptionValue(v) : String(v)) : '';
             this.currentMethodValue = s !== null && s !== void 0 ? s : '';
         });
-        this.buildHeadersFormArray((_o = this.initialHeaders) !== null && _o !== void 0 ? _o : [{ name: '', type: 'string', value: '' }]);
-        this.headerNameOptionsChangesSub = (_q = (_p = this.headersFormArray) === null || _p === void 0 ? void 0 : _p.valueChanges) === null || _q === void 0 ? void 0 : _q.subscribe(() => {
+        this.buildHeadersFormArray((_r = this.initialHeaders) !== null && _r !== void 0 ? _r : [{ name: '', type: 'string', value: '' }]);
+        this.headerNameOptionsChangesSub = (_t = (_s = this.headersFormArray) === null || _s === void 0 ? void 0 : _s.valueChanges) === null || _t === void 0 ? void 0 : _t.subscribe(() => {
             this.updateHeaderNameSelectConfig();
             this.headersChange.emit(this.headers);
         });
@@ -20170,23 +20413,33 @@ class ApiEditStepComponent {
         this.updateEnvironmentSelectConfig();
         this.updatePayloadFormatSelectConfig();
         const firstFormatValue = this.getFormatValues()[0];
-        const defaultFormat = (_s = (_r = this.initialFormat) !== null && _r !== void 0 ? _r : firstFormatValue) !== null && _s !== void 0 ? _s : 'json';
+        const defaultFormat = (_v = (_u = this.initialFormat) !== null && _u !== void 0 ? _u : firstFormatValue) !== null && _v !== void 0 ? _v : 'json';
         this.payloadFormatForm = this.fb.group({ format: [defaultFormat] });
         this.buildKeyValueFormArray();
         this.buildKeyTypeValueFormArray();
+        this.buildParamsFormArray();
+        this.paramsFormArrayChangesSub = (_w = this.paramsFormArray.valueChanges) === null || _w === void 0 ? void 0 : _w.subscribe(() => this.syncUrlFromParams());
+        if (this.initialUrl != null && this.initialUrl !== '') {
+            this._url = this.initialUrl;
+            this.syncParamsFromUrl();
+        }
+        // Initialize variableName from initialVariableName
+        if (this.initialVariableName != null && this.initialVariableName !== '') {
+            this.variableName = this.initialVariableName;
+        }
         this.updateVerificationSelectConfig();
         this.updateVerificationDataTypeSelectConfig();
         this.buildVerificationFormArray();
         this.updateStatusVerificationSelectConfig();
         this.buildStatusVerificationFormArray();
-        this.methodChangesSub = (_u = (_t = this.methodForm.get('method')) === null || _t === void 0 ? void 0 : _t.valueChanges) === null || _u === void 0 ? void 0 : _u.subscribe((value) => {
+        this.methodChangesSub = (_y = (_x = this.methodForm.get('method')) === null || _x === void 0 ? void 0 : _x.valueChanges) === null || _y === void 0 ? void 0 : _y.subscribe((value) => {
             const method = value != null ? String(value).toUpperCase() : '';
             if (METHODS_WITHOUT_BODY.includes(method) && this.activePayloadTab !== 'headers') {
                 this.activePayloadTab = 'headers';
                 this.cdr.detectChanges();
             }
         });
-        this.formatChangesSub = (_w = (_v = this.payloadFormatForm.get('format')) === null || _v === void 0 ? void 0 : _v.valueChanges) === null || _w === void 0 ? void 0 : _w.subscribe(() => {
+        this.formatChangesSub = (_0 = (_z = this.payloadFormatForm.get('format')) === null || _z === void 0 ? void 0 : _z.valueChanges) === null || _0 === void 0 ? void 0 : _0.subscribe(() => {
             this.validatePayloadJson();
         });
         this.validatePayloadJson();
@@ -20195,12 +20448,13 @@ class ApiEditStepComponent {
         this.setupPayloadTextareaScrollSync();
     }
     ngOnDestroy() {
-        var _a, _b, _c, _d, _e;
+        var _a, _c, _d, _e, _f, _g;
         (_a = this.methodChangesSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        (_b = this.formatChangesSub) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-        (_c = this.headerNameOptionsChangesSub) === null || _c === void 0 ? void 0 : _c.unsubscribe();
-        (_d = this.environmentFormChangesSub) === null || _d === void 0 ? void 0 : _d.unsubscribe();
-        (_e = this.methodFormChangesSub) === null || _e === void 0 ? void 0 : _e.unsubscribe();
+        (_c = this.formatChangesSub) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+        (_d = this.headerNameOptionsChangesSub) === null || _d === void 0 ? void 0 : _d.unsubscribe();
+        (_e = this.environmentFormChangesSub) === null || _e === void 0 ? void 0 : _e.unsubscribe();
+        (_f = this.methodFormChangesSub) === null || _f === void 0 ? void 0 : _f.unsubscribe();
+        (_g = this.paramsFormArrayChangesSub) === null || _g === void 0 ? void 0 : _g.unsubscribe();
     }
     /** Sync line numbers column scroll with payload textarea scroll (Postman-style). */
     setupPayloadTextareaScrollSync() {
@@ -20216,6 +20470,9 @@ class ApiEditStepComponent {
             textarea.addEventListener('scroll', () => {
                 lineNumbersEl.scrollTop = textarea.scrollTop;
             });
+            lineNumbersEl.addEventListener('scroll', () => {
+                textarea.scrollTop = lineNumbersEl.scrollTop;
+            });
         }, 0);
     }
     buildKeyValueFormArray(rows) {
@@ -20228,6 +20485,111 @@ class ApiEditStepComponent {
         const groups = initial.map((r) => this.fb.group({ key: [r.key], type: [r.type], value: [r.value] }));
         this.keyTypeValueFormArray = this.fb.array(groups);
     }
+    buildParamsFormArray(rows) {
+        const initial = rows !== null && rows !== void 0 ? rows : [{ key: '', value: '' }];
+        const groups = initial.map((r) => this.fb.group({ key: [r.key], value: [r.value] }));
+        if (this.paramsFormArray) {
+            this.paramsFormArray.clear();
+            groups.forEach((g) => this.paramsFormArray.push(g));
+        }
+        else {
+            this.paramsFormArray = this.fb.array(groups);
+        }
+    }
+    /** Parse URL into base (without query/fragment) and query key-value pairs. Preserves relative URLs. */
+    parseQueryParamsFromUrl(urlStr) {
+        const empty = { baseUrl: urlStr, rows: [{ key: '', value: '' }] };
+        if (!urlStr || !urlStr.trim())
+            return empty;
+        try {
+            const isAbsolute = /^https?:\/\//i.test(urlStr.trim());
+            const url = new URL(urlStr, 'http://localhost');
+            const baseUrl = isAbsolute ? url.origin + url.pathname : url.pathname;
+            const rows = [];
+            url.searchParams.forEach((value, key) => {
+                rows.push({ key, value });
+            });
+            if (rows.length === 0)
+                rows.push({ key: '', value: '' });
+            return { baseUrl, rows };
+        }
+        catch (_a) {
+            return empty;
+        }
+    }
+    /** Get base URL (without query/fragment) for building URL from params. Preserves relative URLs. */
+    getBaseUrl(urlStr) {
+        if (!urlStr || !urlStr.trim())
+            return urlStr;
+        try {
+            const isAbsolute = /^https?:\/\//i.test(urlStr.trim());
+            const url = new URL(urlStr, 'http://localhost');
+            return isAbsolute ? url.origin + url.pathname : url.pathname;
+        }
+        catch (_a) {
+            return urlStr;
+        }
+    }
+    /** Parse application/x-www-form-urlencoded body (key=value&...) into key-value rows. */
+    parseFormUrlEncodedBody(body) {
+        const trimmed = (body !== null && body !== void 0 ? body : '').trim();
+        if (!trimmed)
+            return [];
+        try {
+            const params = new URLSearchParams(trimmed);
+            const rows = [];
+            params.forEach((value, key) => rows.push({ key, value }));
+            return rows;
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    /**
+     * If form body has a single key whose value is URL-decoded JSON, return it pretty-printed for Raw body.
+     * Otherwise return null (caller keeps x-www-form-urlencoded view).
+     */
+    tryFormBodyValueAsRawJson(rows) {
+        var _a;
+        if (rows.length !== 1 || !((_a = rows[0].value) === null || _a === void 0 ? void 0 : _a.trim()))
+            return null;
+        const value = rows[0].value.trim();
+        if (!(value.startsWith('{') || value.startsWith('[')))
+            return null;
+        try {
+            const parsed = JSON.parse(value);
+            return JSON.stringify(parsed, null, 2);
+        }
+        catch (_c) {
+            return null;
+        }
+    }
+    /** Update Params table from current URL query string (Postman-style). */
+    syncParamsFromUrl() {
+        const { baseUrl: _b, rows } = this.parseQueryParamsFromUrl(this._url);
+        this.buildParamsFormArray(rows);
+        this.cdr.markForCheck();
+    }
+    /** Update URL query string from Params table (Postman-style). */
+    syncUrlFromParams() {
+        var _a, _c, _d, _e;
+        if (this.paramsSyncingFromUrl || !this.paramsFormArray)
+            return;
+        const baseUrl = this.getBaseUrl(this._url);
+        const params = new URLSearchParams();
+        for (const c of this.paramsFormArray.controls) {
+            const key = ((_c = (_a = c.get('key')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '').trim();
+            const value = (_e = (_d = c.get('value')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '';
+            if (key !== '')
+                params.set(key, value);
+        }
+        const queryString = params.toString();
+        const newUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+        if (this._url !== newUrl) {
+            this._url = newUrl;
+            this.cdr.markForCheck();
+        }
+    }
     buildVerificationFormArray(rows) {
         const defaultVerification = this.getDefaultVerification();
         const defaultDataType = this.getDefaultDataType();
@@ -20262,16 +20624,154 @@ class ApiEditStepComponent {
             this.headersFormArray = this.fb.array(groups);
         }
     }
-    /** Handler: show import cURL panel (called when user clicks "Import API cURL"). */
+    /** Reset all three steps and all entered data to initial/default state. Used when user cancels on step 1. */
+    resetAllStepsAndData() {
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        this.currentStep = 1;
+        const firstMethodValue = ((_a = this.httpMethodOptions) === null || _a === void 0 ? void 0 : _a.length)
+            ? ApiEditStepComponent.getOptionValue(this.httpMethodOptions[0])
+            : undefined;
+        const defaultMethod = (_d = (_c = this.initialMethod) !== null && _c !== void 0 ? _c : firstMethodValue) !== null && _d !== void 0 ? _d : 'GET';
+        const methodVal = typeof defaultMethod === 'string' ? defaultMethod : ((_e = ApiEditStepComponent.getOptionValue(defaultMethod)) !== null && _e !== void 0 ? _e : '');
+        this.currentMethodValue = methodVal !== null && methodVal !== void 0 ? methodVal : '';
+        if (this.methodForm)
+            this.methodForm.patchValue({ method: defaultMethod });
+        const firstEnvValue = ((_f = this.environmentOptions) === null || _f === void 0 ? void 0 : _f.length)
+            ? ApiEditStepComponent.getOptionValue(this.environmentOptions[0])
+            : undefined;
+        const defaultEnv = (_h = (_g = this.initialEnvironment) !== null && _g !== void 0 ? _g : firstEnvValue) !== null && _h !== void 0 ? _h : 'Development';
+        const envVal = typeof defaultEnv === 'string' ? defaultEnv : ((_j = ApiEditStepComponent.getOptionValue(defaultEnv)) !== null && _j !== void 0 ? _j : '');
+        this.currentEnvironmentValue = envVal !== null && envVal !== void 0 ? envVal : '';
+        if (this.environmentForm)
+            this.environmentForm.patchValue({ environment: defaultEnv });
+        this.url = (_k = this.initialUrl) !== null && _k !== void 0 ? _k : '';
+        this.buildHeadersFormArray((_l = this.initialHeaders) !== null && _l !== void 0 ? _l : [{ name: '', type: 'string', value: '' }]);
+        this.updateHeaderNameSelectConfig();
+        this.headersChange.emit(this.headers);
+        this.bodyView = 'headers';
+        this.activePayloadTab = 'headers';
+        this.payloadType = 'raw';
+        this.payloadText = '';
+        this.payloadJsonError = null;
+        const defaultFormat = (_o = (_m = this.initialFormat) !== null && _m !== void 0 ? _m : this.getFormatValues()[0]) !== null && _o !== void 0 ? _o : 'json';
+        if (this.payloadFormatForm)
+            this.payloadFormatForm.patchValue({ format: defaultFormat });
+        this.buildKeyValueFormArray();
+        this.buildKeyTypeValueFormArray();
+        this.buildParamsFormArray();
+        this.importCurlControl.setValue('');
+        this.variableName = '';
+        this.variableNameError = '';
+        this.buildVerificationFormArray();
+        this.buildStatusVerificationFormArray();
+        this.activeResponseVerificationTab = 'response-body';
+        this.validatePayloadJson();
+        this.cdr.detectChanges();
+    }
+    /** Handler: show import cURL panel (called when user clicks "Import API cURL"). Resets textarea so it is cleared each time. */
     openImportCurlPanel() {
+        this.importCurlControl.setValue('');
         this.bodyView = 'import-curl';
         this.cdr.detectChanges();
     }
-    /** Handler: emit cURL value from control and close panel. Called when user clicks Import button. */
+    /** Reset URL, method, headers, body, and params to empty/default before applying imported cURL. */
+    resetRequestFieldsBeforeCurlImport() {
+        var _a, _c, _d, _e, _f, _g, _h;
+        const firstMethodValue = ((_a = this.httpMethodOptions) === null || _a === void 0 ? void 0 : _a.length)
+            ? ApiEditStepComponent.getOptionValue(this.httpMethodOptions[0])
+            : undefined;
+        const defaultMethod = (_d = (_c = this.initialMethod) !== null && _c !== void 0 ? _c : firstMethodValue) !== null && _d !== void 0 ? _d : 'GET';
+        this.selectedMethod = typeof defaultMethod === 'string' ? defaultMethod : (_f = ((_e = ApiEditStepComponent.getOptionValue(defaultMethod)) !== null && _e !== void 0 ? _e : '')) !== null && _f !== void 0 ? _f : 'GET';
+        this.currentMethodValue = this.selectedMethod;
+        if (this.methodForm)
+            this.methodForm.patchValue({ method: defaultMethod });
+        this.url = '';
+        this.buildHeadersFormArray([{ name: '', type: 'string', value: '' }]);
+        this.updateHeaderNameSelectConfig();
+        this.headersChange.emit(this.headers);
+        this.payloadType = 'raw';
+        this.payloadText = '';
+        this.payloadJsonError = null;
+        const defaultFormat = (_h = (_g = this.initialFormat) !== null && _g !== void 0 ? _g : this.getFormatValues()[0]) !== null && _h !== void 0 ? _h : 'json';
+        if (this.payloadFormatForm)
+            this.payloadFormatForm.patchValue({ format: defaultFormat });
+        this.buildKeyValueFormArray([{ key: '', value: '' }]);
+        this.buildKeyTypeValueFormArray([{ key: '', type: 'text', value: '' }]);
+        this.buildParamsFormArray([{ key: '', value: '' }]);
+        this.validatePayloadJson();
+        this.cdr.detectChanges();
+    }
+    /** Handler: parse cURL from control, bind to form fields, emit and close panel. Called when user clicks Import button. */
     onImportCurlConfirm() {
-        var _a;
+        var _a, _c, _d, _e, _f;
         const value = (_a = this.importCurlControl.value) !== null && _a !== void 0 ? _a : '';
-        this.importCurl.emit(typeof value === 'string' ? value : '');
+        const curlStr = typeof value === 'string' ? value : '';
+        this.importCurl.emit(curlStr);
+        this.resetRequestFieldsBeforeCurlImport();
+        const parsed = parseCurl(curlStr);
+        if (parsed) {
+            const methodValue = parsed.method && this.getMethodValues().includes(parsed.method)
+                ? parsed.method
+                : parsed.method || 'GET';
+            this.selectedMethod = methodValue;
+            this.currentMethodValue = methodValue;
+            if (parsed.url)
+                this.url = parsed.url;
+            // Bind Authorization header to Authorization section when present (Bearer or other scheme)
+            let headerRows = parsed.headers;
+            const authHeader = headerRows.find((h) => h.name.toLowerCase() === 'authorization');
+            if ((_c = authHeader === null || authHeader === void 0 ? void 0 : authHeader.value) === null || _c === void 0 ? void 0 : _c.trim()) {
+                const authValue = authHeader.value.trim();
+                const bearerMatch = /^Bearer\s+(.+)$/i.exec(authValue);
+                if (bearerMatch) {
+                    const token = bearerMatch[1].trim();
+                    if (this.getAuthTypeValues().includes('bearer') && this.authTypeForm) {
+                        this.authTypeForm.patchValue({ authType: 'bearer' });
+                        this.bearerToken = token;
+                    }
+                    headerRows = headerRows.filter((h) => h.name.toLowerCase() !== 'authorization');
+                }
+            }
+            headerRows = headerRows.length > 0 ? headerRows : [{ name: '', type: 'string', value: '' }];
+            this.buildHeadersFormArray(headerRows);
+            this.updateHeaderNameSelectConfig();
+            this.headersChange.emit(this.headers);
+            if (parsed.body) {
+                const contentType = (_f = (_e = (_d = parsed.headers
+                    .find((h) => h.name.toLowerCase() === 'content-type')) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.toLowerCase()) !== null && _f !== void 0 ? _f : '';
+                const isFormUrlEncoded = contentType.includes('application/x-www-form-urlencoded');
+                if (isFormUrlEncoded) {
+                    const rows = this.parseFormUrlEncodedBody(parsed.body);
+                    this.buildKeyValueFormArray(rows.length > 0 ? rows : [{ key: '', value: '' }]);
+                    const decodedAsJson = this.tryFormBodyValueAsRawJson(rows);
+                    if (decodedAsJson != null) {
+                        this.payloadType = 'raw';
+                        this.payloadText = decodedAsJson;
+                        if (this.payloadFormatForm)
+                            this.payloadFormatForm.patchValue({ format: 'json' });
+                        this.validatePayloadJson();
+                        this.payloadJsonError = null;
+                    }
+                    else {
+                        this.payloadType = 'x-www-form-urlencoded';
+                        this.payloadText = '';
+                        this.payloadJsonError = null;
+                    }
+                }
+                else {
+                    this.payloadText = parsed.body;
+                    this.validatePayloadJson();
+                    const trimmed = parsed.body.trim();
+                    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+                        const formatValues = this.getFormatValues();
+                        if (formatValues.includes('json') && this.payloadFormatForm) {
+                            this.payloadFormatForm.patchValue({ format: 'json' });
+                        }
+                    }
+                }
+            }
+            this.cdr.detectChanges();
+        }
         this.closeImportCurlPanel();
     }
     /** Handler: emit cancel and close panel. Called when user clicks Cancel in import cURL panel. */
@@ -20303,9 +20803,15 @@ class ApiEditStepComponent {
             this.setStep(this.currentStep - 1);
         }
         else {
+            this.resetAllStepsAndData();
             this.back.emit();
         }
     }
+    /** Called when user clicks the Cancel button (step 1). Emits cancel then runs normal back flow. */
+    onCancel() {
+        this.cancel.emit();
+        this.onBack();
+    }
     onNext() {
         var _a;
         if (this.currentStep === 2 && !((_a = this.variableName) === null || _a === void 0 ? void 0 : _a.trim())) {
@@ -20360,6 +20866,15 @@ class ApiEditStepComponent {
     trackByKeyTypeValue(index) {
         return index;
     }
+    addParamsRow() {
+        this.paramsFormArray.push(this.fb.group({ key: [''], value: [''] }));
+    }
+    removeParamsRow(index) {
+        this.paramsFormArray.removeAt(index);
+    }
+    trackByParams(index) {
+        return index;
+    }
     addVerificationRow() {
         this.verificationFormArray.push(this.fb.group({
             jsonPath: [''],
@@ -20405,21 +20920,25 @@ class ApiEditStepComponent {
     }
     /** Minimal payload when getCreatePayload throws (so create always emits). */
     getCreatePayloadFallback() {
-        var _a, _b, _c;
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const authType = this.selectedAuthType;
+        const bearerToken = authType === 'bearer' ? ((_a = this.bearerToken) !== null && _a !== void 0 ? _a : '') : undefined;
+        let oauth2;
+        if (authType === 'oauth2' && this.oauth2Form) {
+            const grantType = ApiEditStepComponent.getControlValue(this.oauth2Form.get('grantType'));
+            const clientAuth = ApiEditStepComponent.getControlValue(this.oauth2Form.get('clientAuthentication'));
+            oauth2 = {
+                grantType: grantType !== '' ? grantType : 'client_credentials',
+                accessTokenUrl: ((_d = (_c = this.oauth2Form.get('accessTokenUrl')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : ''),
+                clientId: ((_f = (_e = this.oauth2Form.get('clientId')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : ''),
+                clientSecret: ((_h = (_g = this.oauth2Form.get('clientSecret')) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : ''),
+                scope: ((_k = (_j = this.oauth2Form.get('scope')) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : ''),
+                clientAuthentication: clientAuth !== '' ? clientAuth : 'basic',
+            };
+        }
         return {
-            step1: {
-                environment: '',
-                method: '',
-                url: (_a = this.url) !== null && _a !== void 0 ? _a : '',
-                headers: [],
-                activePayloadTab: this.activePayloadTab,
-                payloadType: this.payloadType,
-                payloadFormat: '',
-                payloadText: (_b = this.payloadText) !== null && _b !== void 0 ? _b : '',
-                keyValueRows: [],
-                keyTypeValueRows: [],
-            },
-            step2: { variableName: (_c = this.variableName) !== null && _c !== void 0 ? _c : '' },
+            step1: Object.assign(Object.assign(Object.assign({ environment: '', method: '', url: (_l = this.url) !== null && _l !== void 0 ? _l : '', headers: [], authType }, (bearerToken !== undefined && { bearerToken })), (oauth2 !== undefined && { oauth2 })), { activePayloadTab: this.activePayloadTab, payloadType: this.payloadType, payloadFormat: '', payloadText: (_m = this.payloadText) !== null && _m !== void 0 ? _m : '', keyValueRows: [], keyTypeValueRows: [], paramsRows: [] }),
+            step2: { variableName: (_o = this.variableName) !== null && _o !== void 0 ? _o : '' },
             step3: {
                 activeResponseVerificationTab: this.activeResponseVerificationTab,
                 responseBodyVerifications: [],
@@ -20437,62 +20956,77 @@ class ApiEditStepComponent {
     }
     /** Build full create payload: environment, HTTP method, URL, headers, body (step1), variable name (step2), verifications (step3). */
     getCreatePayload() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         const envFromForm = ApiEditStepComponent.getControlValue((_a = this.environmentForm) === null || _a === void 0 ? void 0 : _a.get('environment'));
         const environment = envFromForm !== '' ? envFromForm : (this.currentEnvironmentValue !== '' ? this.currentEnvironmentValue : this.selectedEnvironment);
-        const methodFromForm = ApiEditStepComponent.getControlValue((_b = this.methodForm) === null || _b === void 0 ? void 0 : _b.get('method'));
+        const methodFromForm = ApiEditStepComponent.getControlValue((_c = this.methodForm) === null || _c === void 0 ? void 0 : _c.get('method'));
         const method = methodFromForm !== '' ? methodFromForm : (this.currentMethodValue !== '' ? this.currentMethodValue : this.selectedMethod);
-        const format = (_e = (_d = (_c = this.payloadFormatForm) === null || _c === void 0 ? void 0 : _c.get('format')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '';
+        const format = (_f = (_e = (_d = this.payloadFormatForm) === null || _d === void 0 ? void 0 : _d.get('format')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '';
         const keyValueFormArray = this.keyValueFormArray;
-        const keyValueRows = ((_f = keyValueFormArray === null || keyValueFormArray === void 0 ? void 0 : keyValueFormArray.controls) !== null && _f !== void 0 ? _f : []).map((c) => {
-            var _a, _b, _c, _d;
+        const keyValueRows = ((_g = keyValueFormArray === null || keyValueFormArray === void 0 ? void 0 : keyValueFormArray.controls) !== null && _g !== void 0 ? _g : []).map((c) => {
+            var _a, _c, _d, _e;
             return ({
-                key: (_b = (_a = c.get('key')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
-                value: (_d = (_c = c.get('value')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
+                key: (_c = (_a = c.get('key')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '',
+                value: (_e = (_d = c.get('value')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '',
             });
         });
         const keyTypeValueFormArray = this.keyTypeValueFormArray;
-        const keyTypeValueRows = ((_g = keyTypeValueFormArray === null || keyTypeValueFormArray === void 0 ? void 0 : keyTypeValueFormArray.controls) !== null && _g !== void 0 ? _g : []).map((c) => {
-            var _a, _b, _c, _d, _e, _f;
+        const keyTypeValueRows = ((_h = keyTypeValueFormArray === null || keyTypeValueFormArray === void 0 ? void 0 : keyTypeValueFormArray.controls) !== null && _h !== void 0 ? _h : []).map((c) => {
+            var _a, _c, _d, _e, _f, _g;
             return ({
-                key: (_b = (_a = c.get('key')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
-                type: (_d = (_c = c.get('type')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'text',
-                value: (_f = (_e = c.get('value')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '',
+                key: (_c = (_a = c.get('key')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '',
+                type: (_e = (_d = c.get('type')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 'text',
+                value: (_g = (_f = c.get('value')) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '',
+            });
+        });
+        const paramsFormArray = this.paramsFormArray;
+        const paramsRows = ((_j = paramsFormArray === null || paramsFormArray === void 0 ? void 0 : paramsFormArray.controls) !== null && _j !== void 0 ? _j : []).map((c) => {
+            var _a, _c, _d, _e;
+            return ({
+                key: (_c = (_a = c.get('key')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '',
+                value: (_e = (_d = c.get('value')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '',
             });
         });
         const verificationFormArray = this.verificationFormArray;
-        const responseBodyVerifications = ((_h = verificationFormArray === null || verificationFormArray === void 0 ? void 0 : verificationFormArray.controls) !== null && _h !== void 0 ? _h : []).map((c) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+        const responseBodyVerifications = ((_k = verificationFormArray === null || verificationFormArray === void 0 ? void 0 : verificationFormArray.controls) !== null && _k !== void 0 ? _k : []).map((c) => {
+            var _a, _c, _d, _e, _f, _g, _h, _j;
             return ({
-                jsonPath: (_b = (_a = c.get('jsonPath')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
-                verification: (_d = (_c = c.get('verification')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
-                dataType: (_f = (_e = c.get('dataType')) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : '',
-                expectedValue: (_h = (_g = c.get('expectedValue')) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : '',
+                jsonPath: (_c = (_a = c.get('jsonPath')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '',
+                verification: (_e = (_d = c.get('verification')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '',
+                dataType: (_g = (_f = c.get('dataType')) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : '',
+                expectedValue: (_j = (_h = c.get('expectedValue')) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : '',
             });
         });
         const statusVerificationFormArray = this.statusVerificationFormArray;
-        const statusVerifications = ((_j = statusVerificationFormArray === null || statusVerificationFormArray === void 0 ? void 0 : statusVerificationFormArray.controls) !== null && _j !== void 0 ? _j : []).map((c) => {
-            var _a, _b, _c, _d;
+        const statusVerifications = ((_l = statusVerificationFormArray === null || statusVerificationFormArray === void 0 ? void 0 : statusVerificationFormArray.controls) !== null && _l !== void 0 ? _l : []).map((c) => {
+            var _a, _c, _d, _e;
             return ({
-                verification: (_b = (_a = c.get('verification')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
-                expectedValue: (_d = (_c = c.get('expectedValue')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
+                verification: (_c = (_a = c.get('verification')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '',
+                expectedValue: (_e = (_d = c.get('expectedValue')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '',
             });
         });
+        const authType = this.selectedAuthType;
+        const bearerToken = authType === 'bearer' ? ((_m = this.bearerToken) !== null && _m !== void 0 ? _m : '') : undefined;
+        let oauth2;
+        if (authType === 'oauth2' && this.oauth2Form) {
+            const grantType = ApiEditStepComponent.getControlValue(this.oauth2Form.get('grantType'));
+            const clientAuth = ApiEditStepComponent.getControlValue(this.oauth2Form.get('clientAuthentication'));
+            oauth2 = {
+                grantType: grantType !== '' ? grantType : 'client_credentials',
+                accessTokenUrl: ((_p = (_o = this.oauth2Form.get('accessTokenUrl')) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : ''),
+                clientId: ((_r = (_q = this.oauth2Form.get('clientId')) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : ''),
+                clientSecret: ((_t = (_s = this.oauth2Form.get('clientSecret')) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : ''),
+                scope: ((_v = (_u = this.oauth2Form.get('scope')) === null || _u === void 0 ? void 0 : _u.value) !== null && _v !== void 0 ? _v : ''),
+                clientAuthentication: clientAuth !== '' ? clientAuth : 'basic',
+            };
+        }
         return {
-            step1: {
-                environment,
-                method,
-                url: (_k = this.url) !== null && _k !== void 0 ? _k : '',
-                headers: this.headers,
-                activePayloadTab: this.activePayloadTab,
-                payloadType: this.payloadType,
-                payloadFormat: format,
-                payloadText: (_l = this.payloadText) !== null && _l !== void 0 ? _l : '',
-                keyValueRows,
+            step1: Object.assign(Object.assign(Object.assign({ environment,
+                method, url: (_w = this.url) !== null && _w !== void 0 ? _w : '', headers: this.headers, authType }, (bearerToken !== undefined && { bearerToken })), (oauth2 !== undefined && { oauth2 })), { activePayloadTab: this.activePayloadTab, payloadType: this.payloadType, payloadFormat: format, payloadText: (_x = this.payloadText) !== null && _x !== void 0 ? _x : '', keyValueRows,
                 keyTypeValueRows,
-            },
+                paramsRows }),
             step2: {
-                variableName: (_m = this.variableName) !== null && _m !== void 0 ? _m : '',
+                variableName: (_y = this.variableName) !== null && _y !== void 0 ? _y : '',
             },
             step3: {
                 activeResponseVerificationTab: this.activeResponseVerificationTab,
@@ -20506,25 +21040,25 @@ class ApiEditStepComponent {
         if (!this.headersFormArray)
             return [];
         return this.headersFormArray.controls.map((c) => {
-            var _a, _b, _c, _d;
+            var _a, _c, _d, _e;
             return ({
-                name: (_b = (_a = c.get('name')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '',
+                name: (_c = (_a = c.get('name')) === null || _a === void 0 ? void 0 : _a.value) !== null && _c !== void 0 ? _c : '',
                 type: 'string',
-                value: (_d = (_c = c.get('value')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '',
+                value: (_e = (_d = c.get('value')) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : '',
             });
         });
     }
     ngOnChanges(changes) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         if (((_a = changes['initialMethod']) === null || _a === void 0 ? void 0 : _a.currentValue) != null && this.methodForm) {
             const v = changes['initialMethod'].currentValue;
-            this.currentMethodValue = typeof v === 'string' ? v : ((_b = ApiEditStepComponent.getOptionValue(v)) !== null && _b !== void 0 ? _b : '');
+            this.currentMethodValue = typeof v === 'string' ? v : ((_c = ApiEditStepComponent.getOptionValue(v)) !== null && _c !== void 0 ? _c : '');
             this.methodForm.patchValue({ method: v });
         }
         if (changes['httpMethodOptions']) {
             this.updateMethodSelectConfig();
-            if (this.methodForm && ((_c = this.httpMethodOptions) === null || _c === void 0 ? void 0 : _c.length)) {
-                const current = (_d = this.methodForm.get('method')) === null || _d === void 0 ? void 0 : _d.value;
+            if (this.methodForm && ((_d = this.httpMethodOptions) === null || _d === void 0 ? void 0 : _d.length)) {
+                const current = (_e = this.methodForm.get('method')) === null || _e === void 0 ? void 0 : _e.value;
                 const values = this.getMethodValues();
                 const valid = values.includes(current);
                 if (!valid) {
@@ -20536,15 +21070,15 @@ class ApiEditStepComponent {
                 }
             }
         }
-        if (((_e = changes['initialEnvironment']) === null || _e === void 0 ? void 0 : _e.currentValue) != null && this.environmentForm) {
+        if (((_f = changes['initialEnvironment']) === null || _f === void 0 ? void 0 : _f.currentValue) != null && this.environmentForm) {
             const v = changes['initialEnvironment'].currentValue;
-            this.currentEnvironmentValue = typeof v === 'string' ? v : ((_f = ApiEditStepComponent.getOptionValue(v)) !== null && _f !== void 0 ? _f : '');
+            this.currentEnvironmentValue = typeof v === 'string' ? v : ((_g = ApiEditStepComponent.getOptionValue(v)) !== null && _g !== void 0 ? _g : '');
             this.environmentForm.patchValue({ environment: v });
         }
         if (changes['environmentOptions']) {
             this.updateEnvironmentSelectConfig();
-            if (this.environmentForm && ((_g = this.environmentOptions) === null || _g === void 0 ? void 0 : _g.length)) {
-                const current = (_h = this.environmentForm.get('environment')) === null || _h === void 0 ? void 0 : _h.value;
+            if (this.environmentForm && ((_h = this.environmentOptions) === null || _h === void 0 ? void 0 : _h.length)) {
+                const current = (_j = this.environmentForm.get('environment')) === null || _j === void 0 ? void 0 : _j.value;
                 const values = this.getEnvironmentValues();
                 const valid = values.includes(current);
                 if (!valid) {
@@ -20556,32 +21090,62 @@ class ApiEditStepComponent {
                 }
             }
         }
+        if (((_k = changes['initialAuthType']) === null || _k === void 0 ? void 0 : _k.currentValue) != null && this.authTypeForm) {
+            const v = changes['initialAuthType'].currentValue;
+            const resolved = typeof v === 'string' ? v : ApiEditStepComponent.getOptionValue(v);
+            if (resolved != null)
+                this.authTypeForm.patchValue({ authType: v });
+        }
+        if (changes['authTypeOptions']) {
+            this.updateAuthTypeSelectConfig();
+            if (this.authTypeForm) {
+                const values = this.getAuthTypeValues();
+                if (values.length > 0) {
+                    const current = (_l = this.authTypeForm.get('authType')) === null || _l === void 0 ? void 0 : _l.value;
+                    const currentVal = current != null && current !== ''
+                        ? typeof current === 'object'
+                            ? ApiEditStepComponent.getOptionValue(current)
+                            : String(current)
+                        : null;
+                    const valid = currentVal != null && values.includes(currentVal);
+                    if (!valid) {
+                        const firstValue = values[0];
+                        if (firstValue != null) {
+                            this.authTypeForm.patchValue({ authType: firstValue });
+                        }
+                    }
+                }
+            }
+        }
         if (changes['initialStep']) {
             this.applyInitialStep(changes['initialStep'].currentValue);
         }
-        if (((_j = changes['initialUrl']) === null || _j === void 0 ? void 0 : _j.currentValue) != null) {
+        if (((_m = changes['initialUrl']) === null || _m === void 0 ? void 0 : _m.currentValue) != null) {
             this.url = changes['initialUrl'].currentValue;
         }
-        if (((_k = changes['initialPayloadTab']) === null || _k === void 0 ? void 0 : _k.currentValue) != null) {
+        if (((_o = changes['initialPayloadTab']) === null || _o === void 0 ? void 0 : _o.currentValue) != null) {
             this.activePayloadTab = changes['initialPayloadTab'].currentValue;
         }
         if (changes['headerNameOptions']) {
             this.updateHeaderNameSelectConfig();
         }
-        if (((_l = changes['initialHeaders']) === null || _l === void 0 ? void 0 : _l.currentValue) != null) {
+        if (((_p = changes['initialHeaders']) === null || _p === void 0 ? void 0 : _p.currentValue) != null) {
             this.buildHeadersFormArray(changes['initialHeaders'].currentValue);
             this.updateHeaderNameSelectConfig();
         }
-        if (((_m = changes['initialResponsePreview']) === null || _m === void 0 ? void 0 : _m.currentValue) != null) {
+        if (((_q = changes['initialResponsePreview']) === null || _q === void 0 ? void 0 : _q.currentValue) != null) {
             this.responsePreview = changes['initialResponsePreview'].currentValue;
         }
-        if (((_o = changes['initialFormat']) === null || _o === void 0 ? void 0 : _o.currentValue) != null && this.payloadFormatForm) {
+        if (((_r = changes['initialFormat']) === null || _r === void 0 ? void 0 : _r.currentValue) != null && this.payloadFormatForm) {
             this.payloadFormatForm.patchValue({ format: changes['initialFormat'].currentValue });
         }
+        if (((_s = changes['initialVariableName']) === null || _s === void 0 ? void 0 : _s.currentValue) != null) {
+            this.variableName = changes['initialVariableName'].currentValue;
+        }
         if (changes['formatOptions']) {
             this.updatePayloadFormatSelectConfig();
             if (this.payloadFormatForm) {
-                const current = (_p = this.payloadFormatForm.get('format')) === null || _p === void 0 ? void 0 : _p.value;
+                const current = (_t = this.payloadFormatForm.get('format')) === null || _t === void 0 ? void 0 : _t.value;
                 const values = this.getFormatValues();
                 const valid = values.includes(current);
                 if (!valid && values.length > 0) {
@@ -20634,6 +21198,24 @@ class ApiEditStepComponent {
         }
     }
 }
+/** Default options when authTypeOptions is empty (same shape as environment) */
+ApiEditStepComponent.DEFAULT_AUTH_TYPE_OPTIONS = [
+    { id: 'no-auth', value: 'no-auth', name: 'No Auth', label: 'No Auth' },
+    { id: 'bearer', value: 'bearer', name: 'Bearer Token', label: 'Bearer Token' },
+    { id: 'oauth2', value: 'oauth2', name: 'OAuth 2.0', label: 'OAuth 2.0' },
+];
+/** Grant type options for OAuth 2.0 */
+ApiEditStepComponent.OAUTH_GRANT_TYPE_OPTIONS = [
+    { id: 'client_credentials', value: 'client_credentials', name: 'Client Credentials', label: 'Client Credentials' },
+    { id: 'authorization_code', value: 'authorization_code', name: 'Authorization Code', label: 'Authorization Code' },
+    { id: 'password', value: 'password', name: 'Password', label: 'Password' },
+    { id: 'implicit', value: 'implicit', name: 'Implicit', label: 'Implicit' },
+];
+/** Client authentication method options for OAuth 2.0 */
+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' },
+];
 ApiEditStepComponent.DEFAULT_FORMAT_OPTIONS = [
     { id: 'json', value: 'json', name: 'JSON', label: 'JSON' },
     { id: 'xml', value: 'xml', name: 'XML', label: 'XML' },
@@ -20647,7 +21229,7 @@ ApiEditStepComponent.DEFAULT_HEADER_NAME_OPTIONS = [
     'Accept-Language',
     'Access-Control-Request-Headers',
     'Access-Control-Request-Method',
-    'Authorization',
+    'Scripts',
     'Cache-Control',
     'Content-MD5',
     'Content-Length',
@@ -20705,10 +21287,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", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", next: "next", create: "create", headersChange: "headersChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container\">\n  <!-- Title -->\n  <h2\n    class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000]\">\n    Create API Test Step</h2>\n\n  <!-- Step indicator: all three steps visible, active step highlighted (Postman-style) -->\n  <div class=\"cqa-api-edit-step-indicator\">\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\"\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\"\n          [class.cqa-api-edit-step-indicator-circle--active]=\"step.index === currentStep\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label\"\n          [class.cqa-api-edit-step-indicator-label--active]=\"step.index === currentStep\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: smooth slide between steps -->\n  <div class=\"cqa-api-edit-step-viewport\">\n    <div class=\"cqa-api-edit-step-strip\" [style.transform]=\"'translateX(' + stripTranslatePercent + '%)'\">\n      <!-- Step 1: Environment, request, body, response -->\n      <div class=\"cqa-api-edit-step-panel\">\n        <!-- Environment row: new line, select aligned right -->\n        <div class=\"cqa-api-edit-step-environment-row\">\n          <cqa-dynamic-select *ngIf=\"environmentForm\" [form]=\"environmentForm\" [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select\" aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap\">\n            <cqa-custom-input [(value)]=\"url\" [label]=\"''\" placeholder=\"\" [fullWidth]=\"true\" size=\"md\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger\" style=\"display: contents\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#414146]\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#FBFCFF]\">\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\">\n            <div class=\"cqa-api-edit-step-import-curl-header\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator\"></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\">\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 !== 'headers' ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && tab.value !== 'headers'\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\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 (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-resize-y cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        [attr.rows]=\"10\"\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      </div>\n      <!-- Step 2: Variable Name: input, validation, Back / Next -->\n      <div class=\"cqa-api-edit-step-panel\">\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 class=\"cqa-api-edit-step-panel\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper\">\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\">\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\">\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  </div>\n\n  <!-- Response Preview -->\n  <div class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title\">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)=\"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=\"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 type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Create\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "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"], outputs: ["valueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", editMode: "editMode", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], 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        <!-- Environment row: new line, select aligned right -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-justify-end cqa-items-center\">\n          <cqa-dynamic-select *ngIf=\"environmentForm\" [form]=\"environmentForm\" [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\" aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full [&_cqa-custom-input_.cqa-relative_input]:cqa-h-[40px] [&_cqa-custom-input_.cqa-relative_input]:cqa-bg-white [&_cqa-custom-input_.cqa-relative_input]:cqa-border [&_cqa-custom-input_.cqa-relative_input]:cqa-border-solid [&_cqa-custom-input_.cqa-relative_input]:cqa-border-[#D1D5DB] [&_cqa-custom-input_.cqa-relative_input]:cqa-rounded-md [&_cqa-custom-input_.cqa-relative_input]:cqa-text-sm [&_cqa-custom-input_.cqa-relative_input]:cqa-text-[#374151]\">\n            <cqa-custom-input [(value)]=\"url\" [label]=\"''\" placeholder=\"\" [fullWidth]=\"true\" size=\"md\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\">\n          </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-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\">\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;'\">\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    </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\">\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\">\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\">\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 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 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      </ng-container>\n    </ng-container>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "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"], outputs: ["valueChange"] }], 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\">\n  <!-- Title -->\n  <h2\n    class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000]\">\n    Create API Test Step</h2>\n\n  <!-- Step indicator: all three steps visible, active step highlighted (Postman-style) -->\n  <div class=\"cqa-api-edit-step-indicator\">\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\"\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\"\n          [class.cqa-api-edit-step-indicator-circle--active]=\"step.index === currentStep\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label\"\n          [class.cqa-api-edit-step-indicator-label--active]=\"step.index === currentStep\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: smooth slide between steps -->\n  <div class=\"cqa-api-edit-step-viewport\">\n    <div class=\"cqa-api-edit-step-strip\" [style.transform]=\"'translateX(' + stripTranslatePercent + '%)'\">\n      <!-- Step 1: Environment, request, body, response -->\n      <div class=\"cqa-api-edit-step-panel\">\n        <!-- Environment row: new line, select aligned right -->\n        <div class=\"cqa-api-edit-step-environment-row\">\n          <cqa-dynamic-select *ngIf=\"environmentForm\" [form]=\"environmentForm\" [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select\" aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap\">\n            <cqa-custom-input [(value)]=\"url\" [label]=\"''\" placeholder=\"\" [fullWidth]=\"true\" size=\"md\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger\" style=\"display: contents\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#414146]\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#FBFCFF]\">\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\">\n            <div class=\"cqa-api-edit-step-import-curl-header\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator\"></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\">\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 !== 'headers' ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && tab.value !== 'headers'\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\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 (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-resize-y cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        [attr.rows]=\"10\"\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      </div>\n      <!-- Step 2: Variable Name: input, validation, Back / Next -->\n      <div class=\"cqa-api-edit-step-panel\">\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 class=\"cqa-api-edit-step-panel\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper\">\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\">\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\">\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  </div>\n\n  <!-- Response Preview -->\n  <div class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title\">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)=\"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=\"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 type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Create\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\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        <!-- Environment row: new line, select aligned right -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-justify-end cqa-items-center\">\n          <cqa-dynamic-select *ngIf=\"environmentForm\" [form]=\"environmentForm\" [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\" aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full [&_cqa-custom-input_.cqa-relative_input]:cqa-h-[40px] [&_cqa-custom-input_.cqa-relative_input]:cqa-bg-white [&_cqa-custom-input_.cqa-relative_input]:cqa-border [&_cqa-custom-input_.cqa-relative_input]:cqa-border-solid [&_cqa-custom-input_.cqa-relative_input]:cqa-border-[#D1D5DB] [&_cqa-custom-input_.cqa-relative_input]:cqa-rounded-md [&_cqa-custom-input_.cqa-relative_input]:cqa-text-sm [&_cqa-custom-input_.cqa-relative_input]:cqa-text-[#374151]\">\n            <cqa-custom-input [(value)]=\"url\" [label]=\"''\" placeholder=\"\" [fullWidth]=\"true\" size=\"md\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\">\n          </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-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\">\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;'\">\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    </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\">\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\">\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\">\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 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 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      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { initialMethod: [{
                 type: Input
             }], initialEnvironment: [{
@@ -20723,6 +21305,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], initialResponsePreview: [{
                 type: Input
+            }], initialVariableName: [{
+                type: Input
+            }], editMode: [{
+                type: Input
             }], importCurl: [{
                 type: Output
             }], importCurlCancel: [{
@@ -20731,6 +21317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], back: [{
                 type: Output
+            }], cancel: [{
+                type: Output
             }], next: [{
                 type: Output
             }], create: [{
@@ -20741,6 +21329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], environmentOptions: [{
                 type: Input
+            }], authTypeOptions: [{
+                type: Input
+            }], initialAuthType: [{
+                type: Input
             }], formatOptions: [{
                 type: Input
             }], initialFormat: [{