@cqa-lib/cqa-ui 1.1.188 → 1.1.190

package/lib/custom-textarea/custom-textarea.component.d.ts

@@ -18,7 +18,6 @@ export declare class CustomTextareaComponent implements OnChanges {
     resize: 'none' | 'both' | 'horizontal' | 'vertical';
     textareaInlineStyle?: string;
     labelInlineStyle?: string;
-    customClass: string;
     valueChange: EventEmitter<string>;
     blurred: EventEmitter<FocusEvent>;
     focused: EventEmitter<FocusEvent>;
@@ -35,6 +34,6 @@ export declare class CustomTextareaComponent implements OnChanges {
     get textareaStyles(): string;
     get labelStyles(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CustomTextareaComponent, "cqa-custom-textarea", never, { "label": "label"; "placeholder": "placeholder"; "value": "value"; "disabled": "disabled"; "errors": "errors"; "required": "required"; "ariaLabel": "ariaLabel"; "size": "size"; "fullWidth": "fullWidth"; "maxLength": "maxLength"; "showCharCount": "showCharCount"; "rows": "rows"; "cols": "cols"; "resize": "resize"; "textareaInlineStyle": "textareaInlineStyle"; "labelInlineStyle": "labelInlineStyle"; "customClass": "customClass"; }, { "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomTextareaComponent, "cqa-custom-textarea", never, { "label": "label"; "placeholder": "placeholder"; "value": "value"; "disabled": "disabled"; "errors": "errors"; "required": "required"; "ariaLabel": "ariaLabel"; "size": "size"; "fullWidth": "fullWidth"; "maxLength": "maxLength"; "showCharCount": "showCharCount"; "rows": "rows"; "cols": "cols"; "resize": "resize"; "textareaInlineStyle": "textareaInlineStyle"; "labelInlineStyle": "labelInlineStyle"; }, { "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; }, never, never>;
 }
 export {};

package/lib/dynamic-select/dynamic-select-field.component.d.ts

@@ -51,11 +51,14 @@ export interface DynamicSelectFieldConfig {
     onLoadMore?: (query?: string) => void;
     /** Optional regex pattern or function to highlight parts of option text. */
     highlightPattern?: RegExp | string | ((text: string) => string);
+    /** When true (and searchable), allows adding the current search text as a new option via an "Add '<value>'" choice. */
+    allowCustomValue?: boolean;
     options: SelectOption[];
     isCompareRuns?: boolean;
 }
 export declare class DynamicSelectFieldComponent implements OnInit, OnChanges {
     readonly SELECT_ALL_VALUE: string;
+    readonly ADD_CUSTOM_VALUE_PREFIX: string;
     form: FormGroup;
     config: DynamicSelectFieldConfig;
     selectionChange: EventEmitter<{
@@ -74,6 +77,11 @@ export declare class DynamicSelectFieldComponent implements OnInit, OnChanges {
         key: string;
         query: string;
     }>;
+    /** Emits when the user chooses to add a custom value (allowCustomValue: true). Consumer should add the value to options and set the control value. */
+    addCustomValue: EventEmitter<{
+        key: string;
+        value: string;
+    }>;
     selectRef?: MatSelect;
     hostEl?: ElementRef<HTMLElement>;
     searchTextByKey: Record<string, string>;
@@ -97,6 +105,12 @@ export declare class DynamicSelectFieldComponent implements OnInit, OnChanges {
     get useCheckboxStyle(): boolean;
     get allSelected(): boolean;
     private toBoolean;
+    /**
+     * Sync the form control's disabled state from config.
+     * Use the FormControl API instead of [disabled] in the template to avoid Angular's
+     * "changed after checked" / reactive forms disabled-attribute warning.
+     */
+    private syncDisabledState;
     private syncControlValueForMultipleMode;
     private applySelectedValueIfNeeded;
     private hasExistingValue;
@@ -112,6 +126,10 @@ export declare class DynamicSelectFieldComponent implements OnInit, OnChanges {
     /** Programmatically close the select panel if open */
     closePanel(): void;
     filteredOptions(c: DynamicSelectFieldConfig): SelectOption[];
+    /** When allowCustomValue is true and the user has typed a value that is not in options, returns that value for the "Add" option. */
+    get customValueToAdd(): string | null;
+    get showAddCustomOption(): boolean;
+    get addCustomSentinelValue(): string;
     onSelectionChange(event: MatSelectChange, select: MatSelect): void;
     handleDocumentClick(event: MouseEvent): void;
     /**
@@ -129,5 +147,5 @@ export declare class DynamicSelectFieldComponent implements OnInit, OnChanges {
     get hasHighlighting(): boolean;
     private setupLoadMoreObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicSelectFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicSelectFieldComponent, "cqa-dynamic-select", never, { "form": "form"; "config": "config"; }, { "selectionChange": "selectionChange"; "selectClick": "selectClick"; "searchChange": "searchChange"; "loadMore": "loadMore"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicSelectFieldComponent, "cqa-dynamic-select", never, { "form": "form"; "config": "config"; }, { "selectionChange": "selectionChange"; "selectClick": "selectClick"; "searchChange": "searchChange"; "loadMore": "loadMore"; "addCustomValue": "addCustomValue"; }, never, never>;
 }

package/lib/test-case-details/api-edit-step/api-edit-step.component.d.ts

@@ -0,0 +1,346 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { DynamicSelectFieldConfig, SelectOption } from '../../dynamic-select/dynamic-select-field.component';
+import * as i0 from "@angular/core";
+export declare const API_EDIT_STEP_LABELS: {
+    readonly REQUEST_DETAILS: "Request Details";
+    readonly STORE_RESPONSE: "Store Response";
+    readonly VALIDATION: "Validation";
+};
+export declare type ApiEditPayloadTab = 'headers' | 'body' | 'params' | 'scripts';
+/** Which body content block is visible: headers (tabs) or import cURL textarea. */
+export declare type ApiEditBodyView = 'headers' | 'import-curl';
+export interface ApiEditHeaderRow {
+    name: string;
+    type: string;
+    value: string;
+}
+/** Payload emitted when user clicks Send Request (environment, method, url, headers). */
+export interface ApiEditSendRequestPayload {
+    environment: string;
+    method: string;
+    url: string;
+    headers: ApiEditHeaderRow[];
+}
+/** Step 1 request + body payload. */
+export interface ApiEditStep1Payload {
+    environment: string;
+    method: string;
+    url: string;
+    headers: ApiEditHeaderRow[];
+    activePayloadTab: ApiEditPayloadTab;
+    payloadType: 'raw' | 'x-www-form-urlencoded' | 'form-data';
+    payloadFormat: string;
+    payloadText: string;
+    keyValueRows: {
+        key: string;
+        value: string;
+    }[];
+    keyTypeValueRows: {
+        key: string;
+        type: string;
+        value: string;
+    }[];
+}
+/** Step 2 store-response payload. */
+export interface ApiEditStep2Payload {
+    variableName: string;
+}
+/** Response body verification row. */
+export interface ApiEditResponseBodyVerificationRow {
+    jsonPath: string;
+    verification: string;
+    dataType: string;
+    expectedValue: string;
+}
+/** Status verification row. */
+export interface ApiEditStatusVerificationRow {
+    verification: string;
+    expectedValue: string;
+}
+/** Step 3 validation payload. */
+export interface ApiEditStep3Payload {
+    activeResponseVerificationTab: 'response-body' | 'status';
+    responseBodyVerifications: ApiEditResponseBodyVerificationRow[];
+    statusVerifications: ApiEditStatusVerificationRow[];
+}
+/** Full payload emitted when user clicks Create (all steps’ data). */
+export interface ApiEditCreatePayload {
+    step1: ApiEditStep1Payload;
+    step2: ApiEditStep2Payload;
+    step3: ApiEditStep3Payload;
+}
+/** Environment option: either a string (display = value) or an object with id, name, value, label. */
+export declare type EnvironmentOptionInput = string | SelectOption;
+export declare class ApiEditStepComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
+    private readonly fb;
+    private readonly cdr;
+    initialMethod?: string;
+    initialEnvironment?: string;
+    initialStep?: number;
+    initialUrl?: string;
+    initialPayloadTab?: ApiEditPayloadTab;
+    initialHeaders?: ApiEditHeaderRow[];
+    initialResponsePreview?: string;
+    /** Emits the cURL string when user clicks Import (value from the textarea control). */
+    importCurl: EventEmitter<string>;
+    /** Emits when user cancels the Import cURL panel (clicks Cancel). */
+    importCurlCancel: EventEmitter<void>;
+    /** Emits when user clicks Send Request, with environment, method, url, and headers. */
+    sendRequest: EventEmitter<ApiEditSendRequestPayload>;
+    back: EventEmitter<void>;
+    next: EventEmitter<void>;
+    /** Emits when user clicks Create with all entered details: step1 (environment, HTTP method, URL, headers, body), step2 (variable name), step3 (verifications). */
+    create: EventEmitter<ApiEditCreatePayload>;
+    /** Emits whenever headers change (add, remove, or edit) so the parent can reflect them in the canvas/controls. */
+    headersChange: EventEmitter<ApiEditHeaderRow[]>;
+    /** Form control for Import cURL textarea; value is emitted when user clicks Import. */
+    readonly importCurlControl: FormControl;
+    variableName: string;
+    variableNameError: string;
+    /** Controls which body content is visible: headers (default) or import-curl. */
+    bodyView: ApiEditBodyView;
+    readonly stepLabels: ({
+        index: number;
+        label: "Request Details";
+    } | {
+        index: number;
+        label: "Store Response";
+    } | {
+        index: number;
+        label: "Validation";
+    })[];
+    currentStep: number;
+    /** The label for the current step only (used when showing a single step in the indicator). */
+    get activeStepLabel(): {
+        index: number;
+        label: string;
+    } | undefined;
+    private readonly minStep;
+    private readonly maxStep;
+    /** Percentage to translate the step strip (0, -33.333, -66.666) for CSS transition. */
+    get stripTranslatePercent(): number;
+    setStep(step: number): void;
+    private applyInitialStep;
+    /** HTTP method options: array of strings or objects with id, name, value, label (passed from parent). */
+    httpMethodOptions: EnvironmentOptionInput[];
+    /** Form for HTTP method select (cqa-dynamic-select) */
+    methodForm: FormGroup;
+    /** Config for method dropdown (updated when httpMethodOptions changes to avoid new reference every CD) */
+    methodSelectConfig: DynamicSelectFieldConfig;
+    private updateMethodSelectConfig;
+    private getMethodValues;
+    /** Form for environment select (cqa-dynamic-select) */
+    environmentForm: FormGroup;
+    /** Environment options: array of strings or objects with id, name, value, label (passed from parent). */
+    environmentOptions: EnvironmentOptionInput[];
+    /** Config for environment dropdown (updated when environmentOptions changes to avoid new reference every CD) */
+    environmentSelectConfig: DynamicSelectFieldConfig;
+    private static toSelectOption;
+    private static getOptionValue;
+    private updateEnvironmentSelectConfig;
+    private getEnvironmentValues;
+    /** Current HTTP method (from form or default: first of httpMethodOptions). Treats empty string as unset. */
+    get selectedMethod(): string;
+    set selectedMethod(v: string);
+    /** True when the selected HTTP method is GET, HEAD, or DELETE (no request body). */
+    get isMethodWithoutBody(): boolean;
+    /** Cached environment value from last selection (so Create payload has the selected value). */
+    private currentEnvironmentValue;
+    /** Cached HTTP method from last selection (so Create payload has the selected value). */
+    private currentMethodValue;
+    /** Current environment (from form or default: first of environmentOptions). Treats empty string as unset. */
+    get selectedEnvironment(): string;
+    set selectedEnvironment(v: string);
+    /** Called when user selects an environment; keeps currentEnvironmentValue in sync for create payload. */
+    onEnvironmentSelectionChange(event: {
+        key: string;
+        value: unknown;
+    }): void;
+    /** Called when user selects an HTTP method; keeps currentMethodValue in sync for create payload. */
+    onMethodSelectionChange(event: {
+        key: string;
+        value: unknown;
+    }): void;
+    url: string;
+    readonly payloadTabs: {
+        value: ApiEditPayloadTab;
+        label: string;
+    }[];
+    activePayloadTab: ApiEditPayloadTab;
+    /** Step 3: Response verification tabs */
+    readonly responseVerificationTabs: {
+        value: 'response-body' | 'status';
+        label: string;
+    }[];
+    activeResponseVerificationTab: 'response-body' | 'status';
+    /** Payload type for Body/Params/Scripts: raw, x-www-form-urlencoded, form-data */
+    payloadType: 'raw' | 'x-www-form-urlencoded' | 'form-data';
+    /** Segment options for payload type (used by cqa-segment-control) */
+    readonly payloadTypeSegments: {
+        label: string;
+        value: string;
+    }[];
+    onPayloadTypeChange(val: string): void;
+    /** Form for Format select (Body/Params/Scripts) */
+    payloadFormatForm: FormGroup;
+    /** Format options: array of strings or objects (passed from parent). Falls back to JSON, XML, HTML, Text when empty. */
+    formatOptions: EnvironmentOptionInput[];
+    initialFormat?: string;
+    private static readonly DEFAULT_FORMAT_OPTIONS;
+    /** Config for Format dropdown (updated when formatOptions changes, like Method dropdown) */
+    payloadFormatSelectConfig: DynamicSelectFieldConfig;
+    private updatePayloadFormatSelectConfig;
+    private getFormatValues;
+    /** Payload text area value for Body/Params/Scripts */
+    payloadText: string;
+    /** JSON parse error when format is JSON and payload is invalid; null when valid or not JSON. */
+    payloadJsonError: {
+        line: number;
+        column: number;
+        message: string;
+        excerpt: string;
+        caretOffset: number;
+    } | null;
+    /** Line numbers for payload textarea (1, 2, 3, ...) based on current line count. */
+    get payloadLineNumbers(): number[];
+    /** Whether current payload format is JSON (so we validate and show JSON editor behavior). */
+    get isPayloadFormatJson(): boolean;
+    /** Error messages for the payload textarea (red border + bottom line). */
+    get payloadJsonErrors(): string[];
+    /** Tooltip content for the line-level error icon (parse error on line X, excerpt, caret, message). */
+    get payloadJsonErrorTooltip(): string;
+    onPayloadTextChange(value: string): void;
+    onPayloadInput(event: Event): void;
+    onPayloadKeydown(event: KeyboardEvent): void;
+    /** Validate payload when format is JSON; sets payloadJsonError or clears it. */
+    validatePayloadJson(): void;
+    private extractPositionFromJsonError;
+    private positionToLineColumn;
+    private normalizeJsonErrorMessage;
+    payloadEditorWithLinesRef?: ElementRef<HTMLElement>;
+    payloadTextareaRef?: ElementRef<HTMLTextAreaElement>;
+    private static readonly DEFAULT_HEADER_NAME_OPTIONS;
+    /** Header name options: array of strings or objects with id, name, value, label (passed from parent). Falls back to built-in list when empty. */
+    headerNameOptions: EnvironmentOptionInput[];
+    /** Form array for header rows; each item is FormGroup({ name, value }) for cqa-dynamic-select and value input */
+    headersFormArray: FormArray;
+    /** Typed accessor for template (FormArray.controls is AbstractControl[]) */
+    get headerRows(): FormGroup[];
+    /** Config for header name dropdown (updated when headerNameOptions changes to avoid new reference every CD) */
+    headerNameSelectConfig: DynamicSelectFieldConfig;
+    private updateHeaderNameSelectConfig;
+    /** Collects distinct non-empty header names currently in the headers form (for dynamic options). */
+    private getCurrentHeaderNamesFromForm;
+    private readonly defaultHeaders;
+    /** Form array for key-value rows (Body payload); each item is FormGroup({ key, value }) */
+    keyValueFormArray: FormArray;
+    get keyValueRows(): FormGroup[];
+    /** Form array for key-type-value rows; each item is FormGroup({ key, type, value }) */
+    keyTypeValueFormArray: FormArray;
+    get keyTypeValueRows(): FormGroup[];
+    /** Config for Type dropdown in key-type-value rows (Text, File) */
+    readonly keyTypeValueTypeSelectConfig: DynamicSelectFieldConfig;
+    /** Form array for response body verification rows; each item is FormGroup({ jsonPath, verification, dataType, expectedValue }) */
+    verificationFormArray: FormArray;
+    get verificationRows(): FormGroup[];
+    /** Verification options: array of strings or objects (passed from parent). Falls back to built-in list when empty. */
+    verificationOptions: EnvironmentOptionInput[];
+    private static readonly DEFAULT_VERIFICATION_OPTIONS;
+    /** Config for Verification dropdown (updated when verificationOptions changes, like Method dropdown) */
+    verificationSelectConfig: DynamicSelectFieldConfig;
+    private updateVerificationSelectConfig;
+    private getVerificationValues;
+    private getDefaultVerification;
+    /** Data Type options: array of strings or objects (passed from parent). Falls back to built-in list when empty. */
+    verificationDataTypeOptions: EnvironmentOptionInput[];
+    private static readonly DEFAULT_DATA_TYPE_OPTIONS;
+    /** Config for Data Type dropdown (updated when verificationDataTypeOptions changes, like Method dropdown) */
+    verificationDataTypeSelectConfig: DynamicSelectFieldConfig;
+    private updateVerificationDataTypeSelectConfig;
+    private getDataTypeValues;
+    private getDefaultDataType;
+    /** Config for Expected Value when Data Type is Boolean (true/false dropdown) */
+    readonly verificationExpectedValueBooleanSelectConfig: DynamicSelectFieldConfig;
+    /** Form array for Status tab verification rows; each item is FormGroup({ verification, expectedValue }) */
+    statusVerificationFormArray: FormArray;
+    get statusVerificationRows(): FormGroup[];
+    /** Config for Status tab Verification dropdown (Equals, Not equal, Less than, Greater than) */
+    /** Status tab Verification options (Equals, Not equal, etc.). Falls back to built-in list when empty. */
+    statusVerificationOptions: EnvironmentOptionInput[];
+    private static readonly DEFAULT_STATUS_VERIFICATION_OPTIONS;
+    /** Config for Status tab Verification dropdown (updated when statusVerificationOptions changes). */
+    statusVerificationSelectConfig: DynamicSelectFieldConfig;
+    private updateStatusVerificationSelectConfig;
+    private getStatusVerificationValues;
+    private getDefaultStatusVerification;
+    responsePreview: string;
+    private methodChangesSub?;
+    private formatChangesSub?;
+    private headerNameOptionsChangesSub?;
+    private environmentFormChangesSub?;
+    private methodFormChangesSub?;
+    constructor(fb: FormBuilder, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Sync line numbers column scroll with payload textarea scroll (Postman-style). */
+    private setupPayloadTextareaScrollSync;
+    private buildKeyValueFormArray;
+    private buildKeyTypeValueFormArray;
+    private buildVerificationFormArray;
+    private buildStatusVerificationFormArray;
+    private buildHeadersFormArray;
+    /** Handler: show import cURL panel (called when user clicks "Import API cURL"). */
+    openImportCurlPanel(): void;
+    /** Handler: emit cURL value from control and close panel. Called when user clicks Import button. */
+    onImportCurlConfirm(): void;
+    /** Handler: emit cancel and close panel. Called when user clicks Cancel in import cURL panel. */
+    onCancelImportCurl(): void;
+    /** Handler: show headers section (called from Cancel or after Import in import panel). */
+    closeImportCurlPanel(): void;
+    onSendRequest(): void;
+    onVariableNameChange(): void;
+    onBack(): void;
+    onNext(): void;
+    setPayloadTab(value: ApiEditPayloadTab): void;
+    setResponseVerificationTab(value: 'response-body' | 'status'): void;
+    addHeader(): void;
+    removeHeader(index: number): void;
+    /** When user adds a custom header name via the dropdown "Add '…'" option, set the control value. */
+    onHeaderNameAddCustomValue(event: {
+        key: string;
+        value: string;
+    }, row: FormGroup): void;
+    trackByHeader(index: number): number;
+    addKeyValueRow(): void;
+    removeKeyValueRow(index: number): void;
+    trackByKeyValue(index: number): number;
+    addKeyTypeValueRow(): void;
+    removeKeyTypeValueRow(index: number): void;
+    trackByKeyTypeValue(index: number): number;
+    addVerificationRow(): void;
+    removeVerificationRow(index: number): void;
+    trackByVerification(index: number): number;
+    /** When Data Type changes in Response Body verification, reset Expected Value for that row. */
+    onVerificationDataTypeChange(row: FormGroup, event: {
+        key: string;
+        value: unknown;
+    }): void;
+    addStatusVerificationRow(): void;
+    removeStatusVerificationRow(index: number): void;
+    trackByStatusVerification(index: number): number;
+    /** Emit all entered details (environment, HTTP method, URL, headers, body, step2 variable, step3 verifications) when user clicks Create. */
+    onCreate(): void;
+    /** Minimal payload when getCreatePayload throws (so create always emits). */
+    private getCreatePayloadFallback;
+    /** Normalize form control value to string (handles object or string). */
+    private static getControlValue;
+    /** Build full create payload: environment, HTTP method, URL, headers, body (step1), variable name (step2), verifications (step3). */
+    private getCreatePayload;
+    /** Current header rows from form (for consumers that read headers) */
+    get headers(): ApiEditHeaderRow[];
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ApiEditStepComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ApiEditStepComponent, "cqa-api-edit-step", never, { "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"; }, { "importCurl": "importCurl"; "importCurlCancel": "importCurlCancel"; "sendRequest": "sendRequest"; "back": "back"; "next": "next"; "create": "create"; "headersChange": "headersChange"; }, never, never>;
+}

package/lib/test-case-details/api-step/api-step.component.d.ts

@@ -1,7 +1,11 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { ApiStepConfig } from '../test-case-step.models';
+import { EnvironmentOptionInput } from '../api-edit-step/api-edit-step.component';
 import * as i0 from "@angular/core";
 export declare class TestCaseApiStepComponent implements OnInit {
+    private readonly overlayContainer;
+    editModalBackdropRef?: ElementRef<HTMLElement>;
     config: ApiStepConfig;
     stepNumber: number | string;
     method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
@@ -17,6 +21,12 @@ export declare class TestCaseApiStepComponent implements OnInit {
     isInsideLoop: boolean;
     expanded: boolean;
     isReorder: boolean;
+    /** Environment options for the API edit step dropdown: strings or { id, name, value, label }. Passed to cqa-api-edit-step. */
+    environmentOptions?: EnvironmentOptionInput[];
+    /** HTTP method options for the API edit step dropdown: strings or { id, name, value, label }. Passed to cqa-api-edit-step. */
+    httpMethodOptions?: EnvironmentOptionInput[];
+    /** Header name options for the API edit step (e.g. for header dropdown): strings or { id, name, value, label }. Passed to cqa-api-edit-step. */
+    headerNameOptions?: EnvironmentOptionInput[];
     edit: EventEmitter<void>;
     link: EventEmitter<void>;
     duplicate: EventEmitter<void>;
@@ -31,7 +41,13 @@ export declare class TestCaseApiStepComponent implements OnInit {
     ngOnInit(): void;
     getDisplayText(): string;
     onToggleExpanded(): void;
+    editModalOpen: boolean;
+    constructor(overlayContainer: OverlayContainer);
     onEdit(): void;
+    closeEditModal(): void;
+    /** Attach overlay container to modal backdrop so select panels position below trigger (same stacking context). */
+    private attachOverlayToModalBackdrop;
+    private detachOverlayFromModalBackdrop;
     onLink(): void;
     onDuplicate(): void;
     onDelete(): void;
@@ -39,5 +55,5 @@ export declare class TestCaseApiStepComponent implements OnInit {
     onViewDetails(): void;
     onSelectionChange(checked: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TestCaseApiStepComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseApiStepComponent, "cqa-test-case-api-step", never, { "config": "config"; "stepNumber": "stepNumber"; "method": "method"; "endpoint": "endpoint"; "description": "description"; "baseUrl": "baseUrl"; "headersCount": "headersCount"; "hasBody": "hasBody"; "saveTo": "saveTo"; "selected": "selected"; "disabled": "disabled"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "expanded": "expanded"; "isReorder": "isReorder"; }, { "edit": "edit"; "link": "link"; "duplicate": "duplicate"; "delete": "delete"; "moreOptions": "moreOptions"; "viewDetails": "viewDetails"; "selectionChange": "selectionChange"; "toggleExpanded": "toggleExpanded"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseApiStepComponent, "cqa-test-case-api-step", never, { "config": "config"; "stepNumber": "stepNumber"; "method": "method"; "endpoint": "endpoint"; "description": "description"; "baseUrl": "baseUrl"; "headersCount": "headersCount"; "hasBody": "hasBody"; "saveTo": "saveTo"; "selected": "selected"; "disabled": "disabled"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "expanded": "expanded"; "isReorder": "isReorder"; "environmentOptions": "environmentOptions"; "httpMethodOptions": "httpMethodOptions"; "headerNameOptions": "headerNameOptions"; }, { "edit": "edit"; "link": "link"; "duplicate": "duplicate"; "delete": "delete"; "moreOptions": "moreOptions"; "viewDetails": "viewDetails"; "selectionChange": "selectionChange"; "toggleExpanded": "toggleExpanded"; }, never, never>;
 }

package/lib/test-case-details/step-details-drawer/step-details-drawer-data.d.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import { TestCaseStepConfig } from '../test-case-step.models';
+export interface StepDetailsDrawerData {
+    step: TestCaseStepConfig;
+    stepNumber: number | string;
+}
+export declare const STEP_DETAILS_DRAWER_DATA: InjectionToken<StepDetailsDrawerData>;

package/lib/test-case-details/step-details-drawer/step-details-drawer-field.config.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Configuration for Step Details Drawer (Edit In Depth).
+ * Form is fully dynamic by Step Type – no hardcoded field lists.
+ */
+import { TestCaseStepConfig } from '../test-case-step.models';
+/** Field keys used for configuration-based rendering. */
+export declare type StepDetailsFieldKey = 'description' | 'metadata' | 'retryCount' | 'advanced' | 'method' | 'url' | 'headers' | 'body' | 'saveOutputAsVariable' | 'agentTask' | 'type' | 'environment' | 'maxRetries' | 'onlyUseAttachedContext' | 'takeScreenshotsWhenVerifying' | 'iframeLocator' | 'otherLocators' | 'continueOnError' | 'disabled';
+/** Step type for the drawer (drives which fields are shown). */
+export declare type StepDetailsStepType = 'custom' | 'api' | 'aiAgent';
+/**
+ * Resolves drawer step type from a test case step config.
+ */
+export declare function getStepDetailsStepType(step: TestCaseStepConfig | null | undefined): StepDetailsStepType | null;
+/**
+ * Fields shown per step type (configuration-based).
+ * Custom: Description, Metadata, Retry Count (if configured), Advanced (if configured).
+ * API: Method, URL, Headers, Body, Save Output as Variable, Advanced (if configured).
+ * AI Agent: Agent Task, Type, Metadata, Environment, Description, Constraints (toggles + Max Retries), Advanced (toggles + Retry Count, Iframe locator, Other Locators).
+ */
+export declare const STEP_DETAILS_FIELDS_BY_TYPE: Record<StepDetailsStepType, StepDetailsFieldKey[]>;
+/** Section for grouping fields (main form, constraints, or inside advanced). */
+export declare type StepDetailsFieldSection = 'main' | 'constraints' | 'advanced';
+/** Option for dropdown fields (value/label). */
+export interface StepDetailsSelectOption {
+    value: string;
+    label: string;
+}
+/** Metadata per field (label, placeholder, control type, visibility). */
+export interface StepDetailsFieldMeta {
+    key: StepDetailsFieldKey;
+    label: string;
+    placeholder?: string;
+    controlType: 'text' | 'textarea' | 'dropdown' | 'code' | 'toggleGroup' | 'toggle';
+    /** Section for grouping; used for conditional headings (e.g. "Constraints"). */
+    section?: StepDetailsFieldSection;
+    /** Dropdown options (for controlType === 'dropdown'). */
+    options?: StepDetailsSelectOption[];
+    /** Whether the field is required (e.g. show Required pill). */
+    required?: boolean;
+    /** Textarea rows. */
+    rows?: number;
+    /** Helper text or tip below the field. */
+    tip?: string;
+    /** Sub-label or description for toggles (e.g. "Only use elements from the attached context"). */
+    subLabel?: string;
+}
+export declare const STEP_DETAILS_FIELD_META: Record<StepDetailsFieldKey, StepDetailsFieldMeta>;
+/** Toggle fields always shown inside the Advanced section. */
+export declare const ADVANCED_TOGGLE_KEYS: StepDetailsFieldKey[];
+/** Field keys shown inside Advanced (per step type), in addition to ADVANCED_TOGGLE_KEYS. */
+export declare const ADVANCED_SUBFIELDS_BY_TYPE: Record<StepDetailsStepType, StepDetailsFieldKey[]>;

package/lib/test-case-details/step-details-drawer/step-details-drawer-ref.d.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
+export declare class StepDetailsDrawerRef<TResult = unknown> {
+    private readonly overlayRef;
+    private readonly closed$;
+    private isClosed;
+    constructor(overlayRef: OverlayRef);
+    close(result?: TResult): void;
+    afterClosed(): Observable<TResult | undefined>;
+    private finishClose;
+}
+export declare const STEP_DETAILS_DRAWER_REF: InjectionToken<StepDetailsDrawerRef<unknown>>;

package/lib/test-case-details/step-details-drawer/step-details-drawer.component.d.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { StepDetailsFieldKey, StepDetailsStepType, StepDetailsFieldSection } from './step-details-drawer-field.config';
+import { StepDetailsDrawerRef } from './step-details-drawer-ref';
+import { StepDetailsDrawerData } from './step-details-drawer-data';
+import { TestCaseStepConfig } from '../test-case-step.models';
+import type { DynamicSelectFieldConfig } from '../../dynamic-select/dynamic-select-field.component';
+import * as i0 from "@angular/core";
+/**
+ * Step Details Drawer (Edit In Depth).
+ * Single reusable component; form is dynamic by Step Type via configuration.
+ * No Priority section. Uses CQA components only.
+ */
+export declare class StepDetailsDrawerComponent implements OnInit, OnChanges {
+    private ref;
+    private fb;
+    private cdr;
+    saveChanges: EventEmitter<TestCaseStepConfig>;
+    cancel: EventEmitter<void>;
+    saveAsTemplate: EventEmitter<TestCaseStepConfig>;
+    /** Optional: when provided (e.g. from Storybook Controls), use instead of STEP_DETAILS_DRAWER_DATA. */
+    stepData: TestCaseStepConfig | null;
+    stepNumberInput: number | string | null;
+    step: TestCaseStepConfig;
+    stepNumber: number | string;
+    stepType: StepDetailsStepType | null;
+    visibleFields: StepDetailsFieldKey[];
+    fieldMeta: Record<StepDetailsFieldKey, import("./step-details-drawer-field.config").StepDetailsFieldMeta>;
+    advancedToggleKeys: StepDetailsFieldKey[];
+    advancedExpanded: boolean;
+    agentTaskExpanded: boolean;
+    form: FormGroup;
+    /** Cached select configs (stable references per key) to avoid infinite change detection in template. */
+    readonly selectConfigMap: Record<string, DynamicSelectFieldConfig>;
+    /** Subfields to show inside Advanced section for current step type. */
+    get advancedSubfields(): StepDetailsFieldKey[];
+    constructor(ref: StepDetailsDrawerRef, fb: FormBuilder, cdr: ChangeDetectorRef, data?: StepDetailsDrawerData);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private syncStepTypeAndForm;
+    private buildFormFromStep;
+    getStepValue(key: StepDetailsFieldKey): unknown;
+    setStepValue(key: StepDetailsFieldKey, value: unknown): void;
+    onBack(): void;
+    onClose(): void;
+    onCancel(): void;
+    onSaveAsTemplate(): void;
+    onSaveChanges(): void;
+    private applyFormToStep;
+    /** Build cached map of select configs from field meta (stable refs to prevent CD loops). */
+    private buildSelectConfigMap;
+    /** Return cached select config for key (for template use; same reference every time). */
+    getSelectConfig(key: StepDetailsFieldKey): DynamicSelectFieldConfig | null;
+    /** Whether this key is the first in its section (for showing section headings). */
+    isFirstInSection(key: StepDetailsFieldKey, section: StepDetailsFieldSection): boolean;
+    /** Dynamic drawer title by step type (e.g. "AI Agent Step Details"). */
+    get drawerTitle(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepDetailsDrawerComponent, [null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepDetailsDrawerComponent, "cqa-step-details-drawer", never, { "stepData": "stepData"; "stepNumberInput": "stepNumberInput"; }, { "saveChanges": "saveChanges"; "cancel": "cancel"; "saveAsTemplate": "saveAsTemplate"; }, never, never>;
+}

package/lib/test-case-details/step-details-drawer/step-details-drawer.service.d.ts

@@ -0,0 +1,22 @@
+import { Injector } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { TestCaseStepConfig } from '../test-case-step.models';
+import { StepDetailsDrawerRef } from './step-details-drawer-ref';
+import { StepDetailsDrawerData } from './step-details-drawer-data';
+import * as i0 from "@angular/core";
+export interface StepDetailsDrawerResult {
+    action: 'saveChanges' | 'saveAsTemplate' | 'cancel';
+    step?: TestCaseStepConfig;
+}
+/**
+ * Opens the Step Details Drawer (Edit In Depth) from the right.
+ */
+export declare class StepDetailsDrawerService {
+    private readonly overlay;
+    private readonly injector;
+    private currentRef;
+    constructor(overlay: Overlay, injector: Injector);
+    open(data: StepDetailsDrawerData): StepDetailsDrawerRef<StepDetailsDrawerResult>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepDetailsDrawerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<StepDetailsDrawerService>;
+}