@cqa-lib/cqa-ui 1.1.192 → 1.1.194

package/lib/autocomplete/autocomplete.component.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { CqaAutocompleteOption } from './autocomplete.model';
+import * as i0 from "@angular/core";
+declare type AutocompleteSize = 'sm' | 'md' | 'lg';
+export declare class AutocompleteComponent implements OnInit, OnChanges {
+    /** Placeholder text for the input */
+    placeholder: string;
+    /** Options shown in the dropdown (filtered by input when open) */
+    options: CqaAutocompleteOption[];
+    /** Initial or controlled value (displayed in the input) */
+    value: string;
+    /** Disable the input */
+    disabled: boolean;
+    /** Whether to show the clear button when there is text */
+    showClear: boolean;
+    /** Accessible label for the input */
+    ariaLabel: string;
+    /** Auto focus the input when rendered */
+    autoFocus: boolean;
+    /** Size variant (matches search bar widths) */
+    size: AutocompleteSize;
+    /** Stretch to full width of container */
+    fullWidth: boolean;
+    /** Emit when the input value changes (e.g. for two-way binding) */
+    valueChange: EventEmitter<string>;
+    /** Emit when an option is selected from the list (value from option) */
+    optionSelect: EventEmitter<CqaAutocompleteOption>;
+    /** Emit when the value is cleared via the clear button */
+    cleared: EventEmitter<void>;
+    inputValue: string;
+    panelOpen: boolean;
+    private blurTimeout;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    readonly widthClasses: Record<AutocompleteSize, string>;
+    get displayOptions(): CqaAutocompleteOption[];
+    onInput(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    selectOption(option: CqaAutocompleteOption): void;
+    clear(): void;
+    getOptionLabel(option: CqaAutocompleteOption): string;
+    trackByValue(_index: number, option: CqaAutocompleteOption): string;
+    onEscape(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "cqa-autocomplete", never, { "placeholder": "placeholder"; "options": "options"; "value": "value"; "disabled": "disabled"; "showClear": "showClear"; "ariaLabel": "ariaLabel"; "autoFocus": "autoFocus"; "size": "size"; "fullWidth": "fullWidth"; }, { "valueChange": "valueChange"; "optionSelect": "optionSelect"; "cleared": "cleared"; }, never, never>;
+}
+export {};

package/lib/autocomplete/autocomplete.model.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Option for the autocomplete dropdown.
+ * Use label for display and value for the selected value (e.g. for IDs).
+ */
+export interface CqaAutocompleteOption {
+    /** Value emitted on selection (e.g. id or code) */
+    value: string;
+    /** Text shown in the list (defaults to value if omitted) */
+    label?: string;
+}

package/lib/step-builder/step-builder-database/step-builder-database.component.d.ts

@@ -22,6 +22,10 @@ export declare class StepBuilderDatabaseComponent implements OnInit, OnChanges {
     queryResults: any[];
     /** Loading state */
     isLoading: boolean;
+    /** Initial DB environment for edit mode */
+    initialDbEnvironment?: string;
+    /** Whether in edit mode */
+    editMode?: boolean;
     /** Emit when step is created */
     createStep: EventEmitter<DatabaseFormData>;
     /** Emit when cancelled */
@@ -42,6 +46,7 @@ export declare class StepBuilderDatabaseComponent implements OnInit, OnChanges {
     constructor(fb: FormBuilder);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    private initializeFormWithInitialValues;
     get queriesFormArray(): FormArray;
     addNewQuery(): void;
     private addQueryToForm;
@@ -57,5 +62,5 @@ export declare class StepBuilderDatabaseComponent implements OnInit, OnChanges {
     onCreateStep(): void;
     getTableColumns(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<StepBuilderDatabaseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepBuilderDatabaseComponent, "cqa-step-builder-database", never, { "dbEnvironmentOptions": "dbEnvironmentOptions"; "queries": "queries"; "queryResults": "queryResults"; "isLoading": "isLoading"; }, { "createStep": "createStep"; "cancelled": "cancelled"; "runQuery": "runQuery"; "addQuery": "addQuery"; "deleteQuery": "deleteQuery"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepBuilderDatabaseComponent, "cqa-step-builder-database", never, { "dbEnvironmentOptions": "dbEnvironmentOptions"; "queries": "queries"; "queryResults": "queryResults"; "isLoading": "isLoading"; "initialDbEnvironment": "initialDbEnvironment"; "editMode": "editMode"; }, { "createStep": "createStep"; "cancelled": "cancelled"; "runQuery": "runQuery"; "addQuery": "addQuery"; "deleteQuery": "deleteQuery"; }, never, never>;
 }

package/lib/step-builder/step-builder-document/step-builder-document.component.d.ts

@@ -34,6 +34,22 @@ export declare class StepBuilderDocumentComponent implements OnInit, OnChanges {
     mapperHelpUrl: string;
     /** Tooltip text when hovering over "Need help?" (same as custom-edit-step) */
     mapperHelpTooltipText: string;
+    /** Initial document type for edit mode */
+    initialDocumentType?: string;
+    /** Initial output variable for edit mode */
+    initialOutputVariable?: string;
+    /** Initial template source for edit mode */
+    initialTemplateSource?: TemplateSourceType;
+    /** Initial template ID for edit mode */
+    initialTemplateId?: string;
+    /** Initial template name for edit mode (when templateSource is 'createNew') */
+    initialTemplateName?: string;
+    /** Initial template description for edit mode (when templateSource is 'createNew') */
+    initialTemplateDescription?: string;
+    /** Initial mappings for edit mode */
+    initialMappings?: DocumentMappingRow[];
+    /** Whether in edit mode */
+    editMode?: boolean;
     /** Whether the help tooltip is visible */
     showHelpTooltip: boolean;
     /** Emit when step is created */
@@ -54,6 +70,7 @@ export declare class StepBuilderDocumentComponent implements OnInit, OnChanges {
     constructor(fb: FormBuilder);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    private initializeFormWithInitialValues;
     get mappingsFormArray(): FormArray;
     getDocumentTypeConfig(): DynamicSelectFieldConfig;
     getTemplateSelectConfig(): DynamicSelectFieldConfig;
@@ -77,5 +94,5 @@ export declare class StepBuilderDocumentComponent implements OnInit, OnChanges {
     onCreateStep(): void;
     onMapperHelpClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepBuilderDocumentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepBuilderDocumentComponent, "cqa-step-builder-document", never, { "documentTypeOptions": "documentTypeOptions"; "templateOptions": "templateOptions"; "valueTypeOptions": "valueTypeOptions"; "mapperHelpUrl": "mapperHelpUrl"; "mapperHelpTooltipText": "mapperHelpTooltipText"; }, { "createStep": "createStep"; "cancelled": "cancelled"; "createTemplate": "createTemplate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepBuilderDocumentComponent, "cqa-step-builder-document", never, { "documentTypeOptions": "documentTypeOptions"; "templateOptions": "templateOptions"; "valueTypeOptions": "valueTypeOptions"; "mapperHelpUrl": "mapperHelpUrl"; "mapperHelpTooltipText": "mapperHelpTooltipText"; "initialDocumentType": "initialDocumentType"; "initialOutputVariable": "initialOutputVariable"; "initialTemplateSource": "initialTemplateSource"; "initialTemplateId": "initialTemplateId"; "initialTemplateName": "initialTemplateName"; "initialTemplateDescription": "initialTemplateDescription"; "initialMappings": "initialMappings"; "editMode": "editMode"; }, { "createStep": "createStep"; "cancelled": "cancelled"; "createTemplate": "createTemplate"; }, never, never>;
 }

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

@@ -1,11 +1,13 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnInit, OnChanges, ChangeDetectorRef } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { DndDropEvent } from 'ngx-drag-drop';
 import { ConditionStepConfig, ConditionBranch, TestCaseStepConfig, NormalStepConfig, LoopStepConfig, StepGroupConfig } from '../test-case-step.models';
 import { DynamicSelectFieldConfig } from '../../dynamic-select/dynamic-select-field.component';
+import { CqaAutocompleteOption } from '../../autocomplete/autocomplete.model';
 import * as i0 from "@angular/core";
-export declare class TestCaseConditionStepComponent implements OnInit {
+export declare class TestCaseConditionStepComponent implements OnInit, OnChanges {
     private fb;
+    private cdr;
     config: ConditionStepConfig;
     id: string;
     stepNumber: number | string;
@@ -15,14 +17,45 @@ export declare class TestCaseConditionStepComponent implements OnInit {
     isNested: boolean;
     isInsideLoop: boolean;
     isReorder: boolean;
+    /** Options for the data profile dropdown */
+    dataProfileOptions: any[];
+    /** Indicates if more data profiles are available for loading */
+    hasMoreDataProfiles: boolean;
+    /** Loading state for data profiles */
+    isLoadingDataProfiles: boolean;
+    /** Natural text actions options for while loop condition */
+    naturalTextActionsOptions: any[];
+    /** Function to process template variables (similar to step-builder-condition) */
+    setConditionTemplateVariables: (template: any) => any[];
     /** When true, header shows inline edit form (fields, operator select, Cancel/Apply) */
     isEditing: boolean;
+    /** Array of ELSE IF branches in edit mode */
+    elseIfBranches: Array<{
+        id: string;
+        form: FormGroup;
+        selectedTemplate: any;
+        templateVariables: any[];
+        templateVariablesForm: FormGroup;
+        snapshot: {
+            conditionLeft?: string;
+            conditionOperator?: string;
+            conditionRight?: string;
+        };
+    }>;
     /** Form for edit mode; bound to cqa-dynamic-select and cqa-custom-input */
     editForm: FormGroup;
     /** Operator dropdown config (IS, IS NOT, CONTAINS, etc.) */
     operatorSelectConfig: DynamicSelectFieldConfig;
+    /** Condition left operand dropdown config (natural text actions with IF_CONDITION) */
+    conditionLeftSelectConfig: DynamicSelectFieldConfig;
     /** Snapshot for Cancel revert */
     private editSnapshot;
+    /** Selected template for IF condition */
+    selectedTemplate: any;
+    /** Template variables for IF condition */
+    templateVariables: any[];
+    /** Form group for template variables */
+    templateVariablesForm: FormGroup;
     toggleExpanded: EventEmitter<{
         config: ConditionStepConfig;
         expanded: boolean;
@@ -41,6 +74,10 @@ export declare class TestCaseConditionStepComponent implements OnInit {
         stepIndex: number;
     }>;
     addBranch: EventEmitter<void>;
+    /** Emitted when user clicks "Add Else" so the parent can call POST test_steps with conditionType CONDITION_ELSE */
+    addElse: EventEmitter<{
+        conditionStepConfig: ConditionStepConfig;
+    }>;
     deleteBranch: EventEmitter<ConditionBranch>;
     duplicate: EventEmitter<void>;
     delete: EventEmitter<void>;
@@ -49,11 +86,36 @@ export declare class TestCaseConditionStepComponent implements OnInit {
         event: DndDropEvent;
         targetList: TestCaseStepConfig[];
     }>;
+    /** Emit when more data profiles need to be loaded */
+    loadMoreDataProfiles: EventEmitter<string>;
+    /** Emit when data profile search query changes */
+    searchDataProfiles: EventEmitter<string>;
+    /** Emit when a nested step is updated (e.g., Apply button clicked in loop-step edit mode) */
+    stepUpdate: EventEmitter<TestCaseStepConfig>;
     onDndDrop(event: DndDropEvent, branch: ConditionBranch): void;
-    constructor(fb: FormBuilder);
+    constructor(fb: FormBuilder, cdr: ChangeDetectorRef);
     ngOnInit(): void;
+    ngOnChanges(changes: any): void;
+    /** Rebuild edit form when naturalTextActionsOptions are loaded to populate from naturalTextActionId */
+    private rebuildEditFormWithNaturalTextAction;
     private buildEditForm;
+    private buildElseIfBranch;
     private buildOperatorSelectConfig;
+    /** Update condition left select config with filtered natural text actions (IF_CONDITION only) */
+    private updateConditionLeftSelectConfig;
+    /** Options for the condition left autocomplete (IF_CONDITION natural text actions) */
+    get conditionLeftAutocompleteOptions(): CqaAutocompleteOption[];
+    onConditionLeftSelect(option: CqaAutocompleteOption & {
+        template?: any;
+    }): void;
+    private buildTemplateVariablesForm;
+    onElseConditionLeftSelect(option: CqaAutocompleteOption & {
+        template?: any;
+    }, branchId: string): void;
+    private buildElseTemplateVariablesForm;
+    onAddElse(): void;
+    onAddElseBranch(): void;
+    onRemoveElse(branchId: string): void;
     /** Parse condition string into left, operator, right (e.g. "Usertype is Premium") */
     private parseCondition;
     /** Build condition string from form values */
@@ -83,12 +145,19 @@ export declare class TestCaseConditionStepComponent implements OnInit {
     onOpenExternal(): void;
     onEdit(): void;
     onEditCancel(): void;
+    /**
+     * Build payload for one ELSE IF branch (action, naturalTextActionId, templateVariablesData, testDataList)
+     * so the parent can create the step via POST then PUT when Apply is clicked.
+     */
+    private buildElseIfBranchPayload;
     onEditApply(): void;
     onEditInDepth(): void;
     onLink(): void;
     onDuplicate(): void;
     onDelete(): void;
     onMoreOptions(): void;
+    /** Get select config for a template variable */
+    getSelectConfigForVariable(variable: any, branchIdOrIsElse?: string | boolean): DynamicSelectFieldConfig;
     static ɵfac: i0.ɵɵFactoryDeclaration<TestCaseConditionStepComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseConditionStepComponent, "cqa-test-case-condition-step", never, { "config": "config"; "id": "id"; "stepNumber": "stepNumber"; "condition": "condition"; "branches": "branches"; "expanded": "expanded"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "isReorder": "isReorder"; }, { "toggleExpanded": "toggleExpanded"; "conditionChange": "conditionChange"; "branchStepChange": "branchStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "addBranch": "addBranch"; "deleteBranch": "deleteBranch"; "duplicate": "duplicate"; "delete": "delete"; "moreOptions": "moreOptions"; "dndDropInZone": "dndDropInZone"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseConditionStepComponent, "cqa-test-case-condition-step", never, { "config": "config"; "id": "id"; "stepNumber": "stepNumber"; "condition": "condition"; "branches": "branches"; "expanded": "expanded"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "isReorder": "isReorder"; "dataProfileOptions": "dataProfileOptions"; "hasMoreDataProfiles": "hasMoreDataProfiles"; "isLoadingDataProfiles": "isLoadingDataProfiles"; "naturalTextActionsOptions": "naturalTextActionsOptions"; "setConditionTemplateVariables": "setConditionTemplateVariables"; }, { "toggleExpanded": "toggleExpanded"; "conditionChange": "conditionChange"; "branchStepChange": "branchStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "addBranch": "addBranch"; "addElse": "addElse"; "deleteBranch": "deleteBranch"; "duplicate": "duplicate"; "delete": "delete"; "moreOptions": "moreOptions"; "dndDropInZone": "dndDropInZone"; "loadMoreDataProfiles": "loadMoreDataProfiles"; "searchDataProfiles": "searchDataProfiles"; "stepUpdate": "stepUpdate"; }, never, never>;
 }

package/lib/test-case-details/delete-steps/delete-steps.component.d.ts

@@ -7,10 +7,22 @@ import * as i0 from "@angular/core";
  * warning text, and Cancel / Delete actions. Steps are shown with red/danger styling.
  */
 export declare class DeleteStepsComponent {
+    data?: {
+        stepsToDelete?: TestCaseStepConfig[];
+        contextLabel?: string;
+        stepImages?: Map<string | number, string>;
+    };
     /** Steps that will be deleted (shown in the list). */
     stepsToDelete: TestCaseStepConfig[];
     /** Context label for the sub-heading, e.g. "IF lane", "ELSE", "For loop". */
     contextLabel: string;
+    /** Optional step images/screenshots map: stepId -> imageUrl */
+    stepImages: Map<string | number, string>;
+    constructor(data?: {
+        stepsToDelete?: TestCaseStepConfig[];
+        contextLabel?: string;
+        stepImages?: Map<string | number, string>;
+    });
     confirmDelete: EventEmitter<void>;
     cancelled: EventEmitter<void>;
     get stepsCount(): number;
@@ -21,6 +33,10 @@ export declare class DeleteStepsComponent {
     private getNormalStepLabel;
     onCancel(): void;
     onDelete(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DeleteStepsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DeleteStepsComponent, "cqa-delete-steps", never, { "stepsToDelete": "stepsToDelete"; "contextLabel": "contextLabel"; }, { "confirmDelete": "confirmDelete"; "cancelled": "cancelled"; }, never, never>;
+    /** Get step image URL if available */
+    getStepImage(step: TestCaseStepConfig): string | null;
+    /** Check if step has an image */
+    hasStepImage(step: TestCaseStepConfig): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DeleteStepsComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DeleteStepsComponent, "cqa-delete-steps", never, {}, { "confirmDelete": "confirmDelete"; "cancelled": "cancelled"; }, never, never>;
 }

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

@@ -1,10 +1,11 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { DndDropEvent } from 'ngx-drag-drop';
-import { DynamicSelectFieldConfig } from '../../dynamic-select/dynamic-select-field.component';
+import { DynamicSelectFieldConfig, SelectOption } from '../../dynamic-select/dynamic-select-field.component';
 import { LoopStepConfig, TestCaseStepConfig, NormalStepConfig, ConditionStepConfig, StepGroupConfig } from '../test-case-step.models';
+import { DataProfileOption } from '../../step-builder/step-builder-loop/step-builder-loop.component';
 import * as i0 from "@angular/core";
-export declare class TestCaseLoopStepComponent implements OnInit {
+export declare class TestCaseLoopStepComponent implements OnInit, OnChanges {
     private fb;
     config: LoopStepConfig;
     id: string;
@@ -20,6 +21,14 @@ export declare class TestCaseLoopStepComponent implements OnInit {
     isNested: boolean;
     isInsideLoop: boolean;
     isReorder: boolean;
+    /** Options for the data profile dropdown - accepts DataProfileOption objects */
+    dataProfileOptions: DataProfileOption[];
+    /** Indicates if more data profiles are available for loading */
+    hasMoreDataProfiles: boolean;
+    /** Loading state for data profiles */
+    isLoadingDataProfiles: boolean;
+    /** Options for natural text actions (for while loop condition) */
+    naturalTextActionsOptions: SelectOption[];
     toggleExpanded: EventEmitter<{
         config: LoopStepConfig;
         expanded: boolean;
@@ -43,6 +52,12 @@ export declare class TestCaseLoopStepComponent implements OnInit {
         event: DndDropEvent;
         targetList: TestCaseStepConfig[];
     }>;
+    /** Emit when more data profiles need to be loaded */
+    loadMoreDataProfiles: EventEmitter<string>;
+    /** Emit when data profile search query changes */
+    searchDataProfiles: EventEmitter<string>;
+    /** Emit when step is updated (Apply button clicked in edit mode) */
+    stepUpdate: EventEmitter<LoopStepConfig>;
     onDndDrop(event: DndDropEvent): void;
     /** Expose global constructors for template (Angular templates don't have String/Number) */
     readonly stringFn: StringConstructor;
@@ -53,17 +68,32 @@ export declare class TestCaseLoopStepComponent implements OnInit {
     editForm: FormGroup;
     /** Cached select configs (stable refs to avoid change-detection loops) */
     forOptionTypeSelectConfig: DynamicSelectFieldConfig;
+    testDataProfileSelectConfig: DynamicSelectFieldConfig;
     startStepSelectConfig: DynamicSelectFieldConfig;
     endStepSelectConfig: DynamicSelectFieldConfig;
+    conditionSelectConfig: DynamicSelectFieldConfig;
     /** Options for Loop Start / Loop End dropdowns (1-10) */
     loopStepOptions: number[];
     /** Local copy of values while editing (for Cancel revert) */
     private editSnapshot;
     constructor(fb: FormBuilder);
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     private buildEditForm;
     /** Build select configs once (same option shape as default stories: id + name) */
     private buildSelectConfigs;
+    /** Update condition select config with natural text actions options */
+    private updateConditionSelectConfig;
+    /** Update test data profile select config with current options and callbacks */
+    private updateTestDataProfileSelectConfig;
+    /** Convert DataProfileOption[] to SelectOption[] */
+    private convertDataProfileOptionsToSelectOptions;
+    /** Handle data profile selection */
+    private onDataProfileChange;
+    /** Handle search for data profiles */
+    private onSearchDataProfiles;
+    /** Handle load more data profiles */
+    private onLoadMoreDataProfiles;
     onEditFormFieldChange(controlName: string, value: string | number): void;
     getLoopTypeLabel(): string;
     isWhileLoop(): boolean;
@@ -105,5 +135,5 @@ export declare class TestCaseLoopStepComponent implements OnInit {
     onDelete(): void;
     onMoreOptions(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TestCaseLoopStepComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseLoopStepComponent, "cqa-test-case-loop-step", never, { "config": "config"; "id": "id"; "loopType": "loopType"; "stepNumber": "stepNumber"; "condition": "condition"; "maxIterations": "maxIterations"; "testDataProfile": "testDataProfile"; "startStep": "startStep"; "endStep": "endStep"; "nestedSteps": "nestedSteps"; "expanded": "expanded"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "isReorder": "isReorder"; }, { "toggleExpanded": "toggleExpanded"; "testDataProfileChange": "testDataProfileChange"; "startStepChange": "startStepChange"; "endStepChange": "endStepChange"; "conditionChange": "conditionChange"; "maxIterationsChange": "maxIterationsChange"; "nestedStepChange": "nestedStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "duplicate": "duplicate"; "delete": "delete"; "moreOptions": "moreOptions"; "edit": "edit"; "dndDropInZone": "dndDropInZone"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseLoopStepComponent, "cqa-test-case-loop-step", never, { "config": "config"; "id": "id"; "loopType": "loopType"; "stepNumber": "stepNumber"; "condition": "condition"; "maxIterations": "maxIterations"; "testDataProfile": "testDataProfile"; "startStep": "startStep"; "endStep": "endStep"; "nestedSteps": "nestedSteps"; "expanded": "expanded"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "isReorder": "isReorder"; "dataProfileOptions": "dataProfileOptions"; "hasMoreDataProfiles": "hasMoreDataProfiles"; "isLoadingDataProfiles": "isLoadingDataProfiles"; "naturalTextActionsOptions": "naturalTextActionsOptions"; }, { "toggleExpanded": "toggleExpanded"; "testDataProfileChange": "testDataProfileChange"; "startStepChange": "startStepChange"; "endStepChange": "endStepChange"; "conditionChange": "conditionChange"; "maxIterationsChange": "maxIterationsChange"; "nestedStepChange": "nestedStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "duplicate": "duplicate"; "delete": "delete"; "moreOptions": "moreOptions"; "edit": "edit"; "dndDropInZone": "dndDropInZone"; "loadMoreDataProfiles": "loadMoreDataProfiles"; "searchDataProfiles": "searchDataProfiles"; "stepUpdate": "stepUpdate"; }, never, never>;
 }

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

@@ -1,7 +1,63 @@
 import { InjectionToken } from '@angular/core';
 import { TestCaseStepConfig } from '../test-case-step.models';
+/**
+ * API-driven field configuration for the Step Details Drawer.
+ * When type is undefined or unknown, treat as 'string' (text input / textfield).
+ */
+export interface DynamicFieldConfig {
+    key: string;
+    label: string;
+    /** Rendered control: string (textfield), number, boolean, dropdown, textarea, code. When omitted, defaults to 'string'. */
+    type?: 'string' | 'number' | 'boolean' | 'dropdown' | 'textarea' | 'code';
+    section?: 'main' | 'constraints' | 'advanced';
+    options?: {
+        label: string;
+        value: unknown;
+    }[];
+    placeholder?: string;
+    required?: boolean;
+    rows?: number;
+    /** Optional default value when step has no value for this key. */
+    defaultValue?: unknown;
+    /** Optional sub-label for toggles (e.g. "Only use elements from the attached context"). */
+    subLabel?: string;
+    /** Optional tip text below the field. */
+    tip?: string;
+}
+/**
+ * API variable schema (e.g. from natural_test_actions[].variables).
+ */
+export interface ApiVariableSchema {
+    path?: string;
+    default?: unknown;
+    mutable?: boolean;
+    type?: string;
+    /** Dropdown options: array of strings (value and label) or { label, value }[]. */
+    options?: string[] | {
+        label: string;
+        value: unknown;
+    }[];
+}
+/** Map of variable key → API variable schema. */
+export declare type ApiVariablesMap = Record<string, ApiVariableSchema>;
+/**
+ * Humanizes a variable key for use as label (e.g. "iFrameLocator" → "I Frame Locator").
+ */
+export declare function humanizeVariableKey(key: string): string;
+/**
+ * Maps API variables (e.g. natural_test_actions[].variables) to DynamicFieldConfig[].
+ * Use when the drawer is driven by API response instead of legacy step-type config.
+ */
+export declare function mapApiVariablesToDynamicFields(variables: ApiVariablesMap | null | undefined, options?: {
+    labels?: Record<string, string>;
+    section?: DynamicFieldConfig['section'];
+}): DynamicFieldConfig[];
 export interface StepDetailsDrawerData {
     step: TestCaseStepConfig;
     stepNumber: number | string;
+    /** Dynamic field definitions (e.g. from API natural_test_actions.variables). When provided, drawer renders from this array only. */
+    dynamicFields: DynamicFieldConfig[];
+    /** Optional drawer title (e.g. "API Step Details"). When omitted, defaults to "Step Details". */
+    title?: 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

@@ -2,6 +2,7 @@
  * Configuration for Step Details Drawer (Edit In Depth).
  * Form is fully dynamic by Step Type – no hardcoded field lists.
  */
+import type { DynamicFieldConfig } from './step-details-drawer-data';
 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';
@@ -49,3 +50,8 @@ export declare const STEP_DETAILS_FIELD_META: Record<StepDetailsFieldKey, StepDe
 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[]>;
+/**
+ * Converts legacy step-type config to DynamicFieldConfig[] for backward compatibility.
+ * Use when opening the drawer without API-provided dynamic fields (e.g. Storybook, migration).
+ */
+export declare function getDynamicFieldsFromLegacyConfig(step: TestCaseStepConfig | null | undefined): DynamicFieldConfig[];

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

@@ -1,15 +1,14 @@
 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 { StepDetailsDrawerData, DynamicFieldConfig } 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.
+ * Renders only from the provided DynamicFieldConfig[]; no filtering or step-type-based field logic.
+ * Each step instance receives its own complete field configuration. Generic key-based step read/write.
  */
 export declare class StepDetailsDrawerComponent implements OnInit, OnChanges {
     private ref;
@@ -18,43 +17,50 @@ export declare class StepDetailsDrawerComponent implements OnInit, OnChanges {
     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;
+    /** When provided (e.g. Storybook), use instead of STEP_DETAILS_DRAWER_DATA.dynamicFields. */
+    dynamicFieldsInput: DynamicFieldConfig[] | null;
+    /** When provided, use as drawer header title (overrides data.title). */
+    drawerTitle: string | null;
     step: TestCaseStepConfig;
     stepNumber: number | string;
-    stepType: StepDetailsStepType | null;
-    visibleFields: StepDetailsFieldKey[];
-    fieldMeta: Record<StepDetailsFieldKey, import("./step-details-drawer-field.config").StepDetailsFieldMeta>;
-    advancedToggleKeys: StepDetailsFieldKey[];
+    dynamicFields: DynamicFieldConfig[];
+    drawerTitleValue: string;
     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[];
+    /** Cached select configs per field key (stable refs for change detection). */
+    private selectConfigCache;
+    /** All fields from the provided array (same reference; used for single source of truth in template). */
+    get allFields(): DynamicFieldConfig[];
+    /** Fields in main section (section === 'main' or undefined). */
+    get mainFields(): DynamicFieldConfig[];
+    /** Fields in constraints section. */
+    get constraintsFields(): DynamicFieldConfig[];
+    /** Fields in advanced section (inside expandable block). */
+    get advancedFields(): DynamicFieldConfig[];
+    /** True when the field at index is the first in its section (for showing section headers). */
+    isFirstInSection(index: number, section: 'main' | 'constraints' | 'advanced'): boolean;
+    /** True when the field at index is not in the advanced section (render in main flow). */
+    isNonAdvancedField(index: number): boolean;
     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;
+    private buildFormFromDynamicFields;
+    /** Read value from step by key. No step-type logic; step is a generic key-value bag. */
+    getStepValue(key: string): unknown;
+    /** Write value to step by key. No step-type logic; step is a generic key-value bag. */
+    setStepValue(key: string, 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;
+    /** Build select config for dropdown field (cached per key). */
+    getSelectConfig(field: DynamicFieldConfig): DynamicSelectFieldConfig | null;
+    /** Resolved header title for template: @Input drawerTitle > injected data.title > default. */
+    get displayTitle(): 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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepDetailsDrawerComponent, "cqa-step-details-drawer", never, { "stepData": "stepData"; "stepNumberInput": "stepNumberInput"; "dynamicFieldsInput": "dynamicFieldsInput"; "drawerTitle": "drawerTitle"; }, { "saveChanges": "saveChanges"; "cancel": "cancel"; "saveAsTemplate": "saveAsTemplate"; }, never, never>;
 }

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

@@ -16,6 +16,14 @@ export declare class TestCaseStepGroupComponent implements OnInit, OnChanges, Do
     isInsideLoop: boolean;
     isReorder: boolean;
     loading: boolean;
+    /** Options for the data profile dropdown */
+    dataProfileOptions: any[];
+    /** Indicates if more data profiles are available for loading */
+    hasMoreDataProfiles: boolean;
+    /** Loading state for data profiles */
+    isLoadingDataProfiles: boolean;
+    /** Natural text actions options for while loop condition */
+    naturalTextActionsOptions: any[];
     private previousNestedStepsLength;
     private previousNestedStepsReference;
     constructor(cdr: ChangeDetectorRef);
@@ -43,6 +51,12 @@ export declare class TestCaseStepGroupComponent implements OnInit, OnChanges, Do
         event: DndDropEvent;
         targetList: TestCaseStepConfig[];
     }>;
+    /** Emit when more data profiles need to be loaded */
+    loadMoreDataProfiles: EventEmitter<string>;
+    /** Emit when data profile search query changes */
+    searchDataProfiles: EventEmitter<string>;
+    /** Emit when a nested step is updated (e.g., Apply button clicked in loop-step edit mode) */
+    stepUpdate: EventEmitter<TestCaseStepConfig>;
     onDndDrop(event: DndDropEvent): void;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -74,5 +88,5 @@ export declare class TestCaseStepGroupComponent implements OnInit, OnChanges, Do
     onNestedConditionAddBranch(nestedStep: ConditionStepConfig, index: number): void;
     onNestedConditionDeleteBranch(nestedStep: ConditionStepConfig, branch: any, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TestCaseStepGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseStepGroupComponent, "cqa-test-case-step-group", never, { "config": "config"; "id": "id"; "stepNumber": "stepNumber"; "groupName": "groupName"; "description": "description"; "reusable": "reusable"; "nestedSteps": "nestedSteps"; "expanded": "expanded"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "isReorder": "isReorder"; "loading": "loading"; }, { "toggleExpanded": "toggleExpanded"; "groupNameChange": "groupNameChange"; "descriptionChange": "descriptionChange"; "reusableChange": "reusableChange"; "nestedStepChange": "nestedStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "openExternal": "openExternal"; "edit": "edit"; "link": "link"; "duplicate": "duplicate"; "delete": "delete"; "dndDropInZone": "dndDropInZone"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestCaseStepGroupComponent, "cqa-test-case-step-group", never, { "config": "config"; "id": "id"; "stepNumber": "stepNumber"; "groupName": "groupName"; "description": "description"; "reusable": "reusable"; "nestedSteps": "nestedSteps"; "expanded": "expanded"; "isNested": "isNested"; "isInsideLoop": "isInsideLoop"; "isReorder": "isReorder"; "loading": "loading"; "dataProfileOptions": "dataProfileOptions"; "hasMoreDataProfiles": "hasMoreDataProfiles"; "isLoadingDataProfiles": "isLoadingDataProfiles"; "naturalTextActionsOptions": "naturalTextActionsOptions"; }, { "toggleExpanded": "toggleExpanded"; "groupNameChange": "groupNameChange"; "descriptionChange": "descriptionChange"; "reusableChange": "reusableChange"; "nestedStepChange": "nestedStepChange"; "addStep": "addStep"; "deleteStep": "deleteStep"; "openExternal": "openExternal"; "edit": "edit"; "link": "link"; "duplicate": "duplicate"; "delete": "delete"; "dndDropInZone": "dndDropInZone"; "loadMoreDataProfiles": "loadMoreDataProfiles"; "searchDataProfiles": "searchDataProfiles"; "stepUpdate": "stepUpdate"; }, never, never>;
 }