@cqa-lib/cqa-ui 1.1.219 → 1.1.220

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

@@ -24024,7 +24024,7 @@ class TemplateVariablesFormComponent {
             return this.needsDataTypeDropdownCache.get(variable.name);
         }
         const label = variable.label?.toLowerCase() || '';
-        const result = label === 'test-data' || label === 'source-value' || label === 'target-value';
+        const result = label === 'test-data' || label === 'source-value' || label === 'target-value' || label === 'source_value' || label === 'target_value';
         this.needsDataTypeDropdownCache.set(variable.name, result);
         return result;
     }
@@ -24110,10 +24110,10 @@ class TemplateVariablesFormComponent {
     }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", components: [{ type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", components: [{ type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n  <ng-container *ngFor=\"let variable of templateVariables; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle\n          [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n          color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n    \n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getDataTypeSelectConfig(variable)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n\n  <!-- Metadata -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{
@@ -28491,6 +28491,19 @@ class StepDetailsDrawerComponent {
         this.pwLocator = [];
         /** Cached select configs per field key (stable refs for change detection). */
         this.selectConfigCache = {};
+        /** Cache for data type select configs */
+        this.dataTypeSelectConfigCache = {};
+        /** Store data types for test-data fields */
+        this.fieldDataTypes = new Map();
+        /** Store raw values (without formatting) for test-data fields */
+        this.fieldRawValues = new Map();
+        /** Pre-computed data type options (static, no need to recreate) */
+        this.dataTypeOptions = [
+            { id: 'plain-text', value: 'plain-text', name: 'Plain Text', label: 'Plain Text' },
+            { id: 'parameter', value: 'parameter', name: '@|Parameter|', label: '@|Parameter|' },
+            { id: 'runtime', value: 'runtime', name: '$|Runtime|', label: '$|Runtime|' },
+            { id: 'environment', value: 'environment', name: '*|Environment|', label: '*|Environment|' }
+        ];
         this.step = data?.step ?? {};
         this.stepNumber = data?.stepNumber ?? 1;
         this.dynamicFields = data?.dynamicFields ?? [];
@@ -28581,9 +28594,21 @@ class StepDetailsDrawerComponent {
                 ? field.defaultValue
                 : raw;
             group[field.key] = [value];
+            // Initialize data types and raw values for test-data fields
+            if (this.needsDataTypeDropdown(field)) {
+                const { dataType, rawValue } = this.parseTestDataValue(String(value || ''));
+                this.fieldDataTypes.set(field.key, dataType);
+                this.fieldRawValues.set(field.key, rawValue);
+                // Ensure form control exists for data type
+                const dataTypeControlName = `${field.key}_dataType`;
+                if (!this.form.get(dataTypeControlName)) {
+                    group[dataTypeControlName] = [dataType];
+                }
+            }
         }
         this.form = this.fb.group(group);
         this.selectConfigCache = {};
+        this.dataTypeSelectConfigCache = {};
     }
     /** Read value from step by key. No step-type logic; step is a generic key-value bag. */
     getStepValue(key) {
@@ -28659,12 +28684,121 @@ class StepDetailsDrawerComponent {
     get displayTitle() {
         return this.drawerTitleValue;
     }
+    /** Check if field needs data type dropdown (test-data, source-value, target-value) */
+    needsDataTypeDropdown(field) {
+        const label = field.label?.toLowerCase() || '';
+        return label === 'test-data' || label === 'source-value' || label === 'target-value' ||
+            label === 'source_value' || label === 'target_value';
+    }
+    /** Parse test data value to extract data type and raw value */
+    parseTestDataValue(value) {
+        if (!value || typeof value !== 'string') {
+            return { dataType: 'plain-text', rawValue: '' };
+        }
+        // Check for parameter format: @|value|
+        if (value.startsWith('@|') && value.endsWith('|')) {
+            return { dataType: 'parameter', rawValue: value.slice(2, -1) };
+        }
+        // Check for runtime format: $|value|
+        else if (value.startsWith('$|') && value.endsWith('|')) {
+            return { dataType: 'runtime', rawValue: value.slice(2, -1) };
+        }
+        // Check for environment format: *|value|
+        else if (value.startsWith('*|') && value.endsWith('|')) {
+            return { dataType: 'environment', rawValue: value.slice(2, -1) };
+        }
+        // Plain text (no formatting)
+        else {
+            return { dataType: 'plain-text', rawValue: value };
+        }
+    }
+    /** Format test data value based on data type */
+    formatTestDataValue(rawValue, dataType) {
+        if (!rawValue) {
+            return '';
+        }
+        switch (dataType) {
+            case 'parameter':
+                return `@|${rawValue}|`;
+            case 'runtime':
+                return `$|${rawValue}|`;
+            case 'environment':
+                return `*|${rawValue}|`;
+            case 'plain-text':
+            default:
+                return rawValue;
+        }
+    }
+    /** Get data type select config for a field */
+    getDataTypeSelectConfig(field) {
+        if (!this.needsDataTypeDropdown(field))
+            return null;
+        if (this.dataTypeSelectConfigCache[field.key]) {
+            return this.dataTypeSelectConfigCache[field.key];
+        }
+        const dataTypeControlName = `${field.key}_dataType`;
+        // Ensure form control exists
+        if (!this.form.get(dataTypeControlName)) {
+            const currentDataType = this.fieldDataTypes.get(field.key) || 'plain-text';
+            this.form.addControl(dataTypeControlName, this.fb.control(currentDataType));
+        }
+        const config = {
+            key: dataTypeControlName,
+            placeholder: 'Select Type',
+            multiple: false,
+            searchable: false,
+            options: this.dataTypeOptions,
+            onChange: (value) => {
+                this.onDataTypeChange(field.key, value);
+            }
+        };
+        this.dataTypeSelectConfigCache[field.key] = config;
+        return config;
+    }
+    /** Get current data type for a field */
+    getCurrentDataType(field) {
+        return this.fieldDataTypes.get(field.key) || 'plain-text';
+    }
+    /** Get raw value (without formatting) for a field */
+    getRawValue(field) {
+        return this.fieldRawValues.get(field.key) || '';
+    }
+    /** Handle data type change */
+    onDataTypeChange(fieldKey, dataType) {
+        // Update stored data type
+        this.fieldDataTypes.set(fieldKey, dataType);
+        // Get current raw value
+        const rawValue = this.fieldRawValues.get(fieldKey) || '';
+        // Format the value based on new data type
+        const formattedValue = this.formatTestDataValue(rawValue, dataType);
+        // Update form control
+        if (this.form.get(fieldKey)) {
+            this.form.get(fieldKey)?.setValue(formattedValue, { emitEvent: false });
+        }
+        // Mark for check since we're using OnPush
+        this.cdr.markForCheck();
+    }
+    /** Handle test data value change (raw value input) */
+    onTestDataValueChange(fieldKey, rawValue) {
+        // Update stored raw value
+        this.fieldRawValues.set(fieldKey, rawValue);
+        // Get current data type
+        const dataType = this.fieldDataTypes.get(fieldKey) || 'plain-text';
+        // Format the value based on data type
+        const formattedValue = this.formatTestDataValue(rawValue, dataType);
+        // Update form control
+        if (this.form.get(fieldKey)) {
+            this.form.get(fieldKey)?.setValue(formattedValue, { emitEvent: false });
+        }
+        // Mark for check since we're using OnPush
+        this.cdr.markForCheck();
+    }
 }
 StepDetailsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, deps: [{ token: STEP_DETAILS_DRAWER_REF }, { token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: STEP_DETAILS_DRAWER_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n  <!-- Header: back chevron, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #E5E5E5;\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button type=\"button\" (click)=\"onBack()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n        aria-label=\"Back\">\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n        Step {{ stepNumber }}\n      </span>\n    </div>\n    <button type=\"button\" (click)=\"onClose()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n      title=\"Close\" aria-label=\"Close\">\n      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n            </div>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n            <div>\n              <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\n        <button type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n          (click)=\"advancedExpanded = !advancedExpanded\">\n          <span>Advanced</span>\n          <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n            expand_less\n          </mat-icon>\n        </button>\n        <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-toggle>\n              <div class=\"cqa-flex cqa-flex-col\">\n                <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n              class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n    <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n    <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n    <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n  </div>\n</div>", components: [{ 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", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n  <!-- Header: back chevron, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #E5E5E5;\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button type=\"button\" (click)=\"onBack()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n        aria-label=\"Back\">\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n        Step {{ stepNumber }}\n      </span>\n    </div>\n    <button type=\"button\" (click)=\"onClose()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n      title=\"Close\" aria-label=\"Close\">\n      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Test-data, source-value, or target-value with data type dropdown -->\n          <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n              <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n            </div>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n            <div>\n              <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\n        <button type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n          (click)=\"advancedExpanded = !advancedExpanded\">\n          <span>Advanced</span>\n          <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n            expand_less\n          </mat-icon>\n        </button>\n        <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            \n            <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n            <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n                <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                  [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n                </cqa-dynamic-select>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n                <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                  [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-container>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-toggle>\n              <div class=\"cqa-flex cqa-flex-col\">\n                <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n              class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n    <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n    <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n    <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n  </div>\n</div>", components: [{ 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-details-drawer', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n  <!-- Header: back chevron, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #E5E5E5;\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button type=\"button\" (click)=\"onBack()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n        aria-label=\"Back\">\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n        Step {{ stepNumber }}\n      </span>\n    </div>\n    <button type=\"button\" (click)=\"onClose()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n      title=\"Close\" aria-label=\"Close\">\n      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n            </div>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n            <div>\n              <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\n        <button type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n          (click)=\"advancedExpanded = !advancedExpanded\">\n          <span>Advanced</span>\n          <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n            expand_less\n          </mat-icon>\n        </button>\n        <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-toggle>\n              <div class=\"cqa-flex cqa-flex-col\">\n                <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n              class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n    <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n    <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n    <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-step-details-drawer', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n  <!-- Header: back chevron, title, Step N pill, close -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n    style=\"border-bottom: 1px solid #E5E5E5;\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button type=\"button\" (click)=\"onBack()\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n        aria-label=\"Back\">\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n        {{ displayTitle }}\n      </h2>\n      <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n        Step {{ stepNumber }}\n      </span>\n    </div>\n    <button type=\"button\" (click)=\"onClose()\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n      title=\"Close\" aria-label=\"Close\">\n      <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  </div>\n\n  <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n  <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <ng-container *ngIf=\"dynamicFields.length > 0\">\n      <!-- All non-advanced fields in array order with section headers -->\n      <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n        <ng-container *ngIf=\"isNonAdvancedField(i)\">\n          <p *ngIf=\"isFirstInSection(i, 'main')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n          <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n            class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n          <!-- string / undefined \u2192 text input -->\n          <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Test-data, source-value, or target-value with data type dropdown -->\n          <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n              <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n\n          <!-- number -->\n          <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n            <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- textarea -->\n          <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n              <span *ngIf=\"field.required\"\n                class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n            </div>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n            <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n          </div>\n\n          <!-- code -->\n          <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n              [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n              (valueChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-textarea>\n          </div>\n\n          <!-- boolean \u2192 toggle -->\n          <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n            <div>\n              <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n              <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n                field.subLabel }}</span>\n            </div>\n            <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n              (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n            </cqa-custom-toggle>\n          </div>\n\n          <!-- dropdown -->\n          <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n            <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n            <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n            </cqa-dynamic-select>\n          </div>\n        </ng-container>\n      </ng-container>\n\n      <!-- Advanced: expandable (all advanced fields from array) -->\n      <ng-container *ngIf=\"advancedFields.length > 0\">\n        <button type=\"button\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n          (click)=\"advancedExpanded = !advancedExpanded\">\n          <span>Advanced</span>\n          <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n            expand_less\n          </mat-icon>\n        </button>\n        <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n          <ng-container *ngFor=\"let field of advancedFields\">\n            <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n                [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            \n            <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n            <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n                <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n                  [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n                </cqa-dynamic-select>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n                <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n                  [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-container>\n            <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n                [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n                (valueChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n                (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n              </cqa-custom-toggle>\n              <div class=\"cqa-flex cqa-flex-col\">\n                <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n                <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n              </div>\n            </div>\n            <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n              class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n              <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Other Locators section (matching old UI) -->\n      <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n        <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n        <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n          <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n            <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n              class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n              style=\"padding-left: 26px;\">\n            <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n              class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n              title=\"Click to Copy\">\n              <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n            </button>\n            <button type=\"button\" (click)=\"deleteLocator(i)\"\n              class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n              title=\"Delete\">\n              <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n    </p>\n  </div>\n  <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n  <!-- Footer -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n    <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n    <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n    <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n    <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n      [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: StepDetailsDrawerRef, decorators: [{
                     type: Inject,
                     args: [STEP_DETAILS_DRAWER_REF]