npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.201 → 1.1.202 - Mend

@cqa-lib/cqa-ui 1.1.201 → 1.1.202

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

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

@@ -3,7 +3,7 @@ import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, Vie
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, FormGroup, FormBuilder, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3$1 from '@angular/material/menu';
@@ -18431,10 +18431,12 @@ class TestCaseLoopStepComponent {
         if (typeof event === 'object' && event !== null && 'expanded' in event) {
             // Object format from step-group: {config, expanded}
             step.expanded = event.expanded;
-            // If it's a step-group, we need to emit the event up the chain
-            if (this.isStepGroup(step)) {
-                // Re-emit the toggleExpanded event with the object format
-                this.toggleExpanded.emit(event);
+            // Check if the event's config is a step-group (not the current step)
+            // This ensures nested step-group events bubble up correctly even when condition step is inside loop step
+            if (this.isStepGroup(event.config)) {
+                // Re-emit the toggleExpanded event with the object format, preserving the original config
+                // Cast to satisfy TypeScript - the renderer accepts TestCaseStepConfig which includes StepGroupConfig
+                this.toggleExpanded.emit({ config: event.config, expanded: event.expanded });
             }
         }
         else {
@@ -19100,10 +19102,12 @@ class TestCaseConditionStepComponent {
         if (typeof event === 'object' && event !== null && 'expanded' in event) {
             // Object format from step-group: {config, expanded}
             step.expanded = event.expanded;
-            // If it's a step-group, we need to emit the event up the chain
-            if (this.isStepGroup(step)) {
-                // Re-emit the toggleExpanded event with the object format
-                this.toggleExpanded.emit(event);
+            // Check if the event's config is a step-group (not the current step)
+            // This ensures nested step-group events bubble up correctly
+            if (this.isStepGroup(event.config)) {
+                // Re-emit the toggleExpanded event with the object format, preserving the original config
+                // Cast to satisfy TypeScript - the renderer accepts TestCaseStepConfig which includes StepGroupConfig
+                this.toggleExpanded.emit({ config: event.config, expanded: event.expanded });
             }
         }
         else {
@@ -19586,10 +19590,11 @@ class TestCaseStepGroupComponent {
         if (typeof event === 'object' && event !== null && 'expanded' in event) {
             // Object format from nested step-group: {config, expanded}
             step.expanded = event.expanded;
-            // If it's a step-group, we need to emit the event up the chain
-            if (this.isStepGroup(step)) {
-                // Re-emit the toggleExpanded event with the object format
-                this.toggleExpanded.emit(event);
+            // Check if the event's config is a step-group (not the current step)
+            // This ensures nested step-group events bubble up correctly even when nested inside other step-groups
+            if (this.isStepGroup(event.config)) {
+                // Re-emit the toggleExpanded event with the object format, preserving the original config
+                this.toggleExpanded.emit({ config: event.config, expanded: event.expanded });
             }
         }
         else {
@@ -22753,6 +22758,11 @@ class StepBuilderActionComponent {
         this.description = '';
         this.advancedExpanded = false;
         this.templateVariables = [];
+        // Cache for select configs to avoid recalculating on every change detection
+        this.selectConfigCache = new Map();
+        this.formValidCache = false;
+        this.lastFormValidationTime = 0;
+        this.FORM_VALIDATION_CACHE_MS = 100; // Cache for 100ms
         this.variablesForm = this.fb.group({});
     }
     ngOnInit() {
@@ -22798,16 +22808,36 @@ class StepBuilderActionComponent {
         }
         this.templateChanged.emit(template);
         this.selectedTemplate = template;
+        // Clear cache when template changes
+        this.selectConfigCache.clear();
+        this.formValidCache = false;
         if (this.setTemplateVariables && template.variables) {
-            this.templateVariables = this.setTemplateVariables(template);
-            this.buildVariablesForm();
+            // Use setTimeout to defer heavy operations and prevent UI freezing
+            // This allows the UI to update first, then process the template variables
+            setTimeout(() => {
+                try {
+                    this.templateVariables = this.setTemplateVariables(template);
+                    this.buildVariablesForm();
+                }
+                catch (error) {
+                    console.error('Error processing template variables:', error);
+                }
+            }, 0);
         }
     }
     buildVariablesForm() {
         // Clear existing form controls
-        Object.keys(this.variablesForm.controls).forEach(key => {
+        const controlKeys = Object.keys(this.variablesForm.controls);
+        controlKeys.forEach(key => {
             this.variablesForm.removeControl(key);
         });
+        // Clear cache when form is rebuilt
+        this.selectConfigCache.clear();
+        this.formValidCache = false;
+        // Unsubscribe from previous subscription if it exists
+        if (this.formValueChangesSubscription) {
+            this.formValueChangesSubscription.unsubscribe();
+        }
         // Add form controls for each variable
         this.templateVariables.forEach(variable => {
             // Handle boolean variables - use boolean value, others use string
@@ -22816,15 +22846,31 @@ class StepBuilderActionComponent {
                 : (variable.value || '');
             this.variablesForm.addControl(variable.name, new FormControl(defaultValue));
         });
+        // Subscribe to form value changes to invalidate cache (only when user actually changes values)
+        // Note: We use emitEvent: false when programmatically setting values, so this won't fire unnecessarily
+        this.formValueChangesSubscription = this.variablesForm.valueChanges.subscribe(() => {
+            this.formValidCache = false;
+        });
+    }
+    ngOnDestroy() {
+        // Clean up subscription to prevent memory leaks
+        if (this.formValueChangesSubscription) {
+            this.formValueChangesSubscription.unsubscribe();
+        }
     }
     getSelectConfig(variable) {
+        // Use cache to avoid recalculating on every change detection
+        const cacheKey = `${variable.name}_${variable.options?.join(',') || ''}`;
+        if (this.selectConfigCache.has(cacheKey)) {
+            return this.selectConfigCache.get(cacheKey);
+        }
         const options = (variable.options || []).map((opt) => ({
             id: opt,
             value: opt,
             name: opt,
             label: opt
         }));
-        return {
+        const config = {
             key: variable.name,
             placeholder: `Select ${variable.label}`,
             multiple: false,
@@ -22834,6 +22880,8 @@ class StepBuilderActionComponent {
                 this.onVariableValueChange(variable.name, value);
             }
         };
+        this.selectConfigCache.set(cacheKey, config);
+        return config;
     }
     onVariableValueChange(variableName, value) {
         // Update the variable in templateVariables array
@@ -22841,10 +22889,12 @@ class StepBuilderActionComponent {
         if (variable) {
             variable.value = value;
         }
-        // Also update form control
+        // Also update form control (use emitEvent: false to prevent triggering valueChanges)
         if (this.variablesForm.get(variableName)) {
-            this.variablesForm.get(variableName)?.setValue(value);
+            this.variablesForm.get(variableName)?.setValue(value, { emitEvent: false });
         }
+        // Invalidate form validation cache
+        this.formValidCache = false;
     }
     onVariableBooleanChange(variableName, value) {
         // Update the variable in templateVariables array
@@ -22852,14 +22902,16 @@ class StepBuilderActionComponent {
         if (variable) {
             variable.value = value;
         }
-        // Also update form control
+        // Also update form control (use emitEvent: false to prevent triggering valueChanges)
         if (this.variablesForm.get(variableName)) {
-            this.variablesForm.get(variableName)?.setValue(value);
+            this.variablesForm.get(variableName)?.setValue(value, { emitEvent: false });
         }
         else {
             // Create form control if it doesn't exist
             this.variablesForm.addControl(variableName, new FormControl(value));
         }
+        // Invalidate form validation cache
+        this.formValidCache = false;
     }
     onBack() {
         this.selectedTemplate = null;
@@ -22882,9 +22934,15 @@ class StepBuilderActionComponent {
         if (!this.selectedTemplate) {
             return false;
         }
+        // Use cached result if available and recent
+        const now = Date.now();
+        if (this.formValidCache && (now - this.lastFormValidationTime) < this.FORM_VALIDATION_CACHE_MS) {
+            return this.formValidCache;
+        }
         // Check if all required variables are filled
+        let isValid = true;
         if (this.templateVariables && this.templateVariables.length > 0) {
-            return this.templateVariables.every(variable => {
+            isValid = this.templateVariables.every(variable => {
                 // Boolean variables are always valid (they have a default value)
                 if (variable.type === 'boolean') {
                     return true;
@@ -22894,7 +22952,16 @@ class StepBuilderActionComponent {
                 return value !== null && value !== undefined && value !== '';
             });
         }
-        return true;
+        // Cache the result
+        this.formValidCache = isValid;
+        this.lastFormValidationTime = now;
+        return isValid;
+    }
+    trackByTemplate(index, template) {
+        return template.id || template.displayName || index;
+    }
+    trackByVariable(index, variable) {
+        return variable.name || index;
     }
     onCreateStep() {
         if (!this.isFormValid()) {
@@ -22923,10 +22990,10 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\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=\"(variable.name === 'type'||variable.name === 'scrollTo'); 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                <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-container>\n          </ng-container>\n\n\n\n\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              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\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              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\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)=\"metadata = $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)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i3$4.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"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-2\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\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=\"(variable.name === 'type'||variable.name === 'scrollTo'); 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                <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-container>\n          </ng-container>\n\n\n\n\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              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\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              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\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)=\"metadata = $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)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i3$4.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"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\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=\"(variable.name === 'type'||variable.name === 'scrollTo'); 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                <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-container>\n          </ng-container>\n\n\n\n\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              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\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              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\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)=\"metadata = $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)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-2\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\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=\"(variable.name === 'type'||variable.name === 'scrollTo'); 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                <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-container>\n          </ng-container>\n\n\n\n\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              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\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              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\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)=\"metadata = $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)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{
@@ -24577,10 +24644,10 @@ class StepBuilderAiAgentComponent {
     }
 }
 StepBuilderAiAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[10px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Continue on Error</span>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-custom-toggle\n            [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n            (checkedChange)=\"aiAgentForm.get('continueOnError')?.setValue($event)\">\n          </cqa-custom-toggle>\n          <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n            Don't fail the test if this step fails.\n          </label>\n        </div>\n\n        <!-- Disabled -->\n        <div>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-4\">\n          <cqa-custom-toggle\n            [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n            (checkedChange)=\"aiAgentForm.get('disabled')?.setValue($event)\">\n          </cqa-custom-toggle>\n          <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n            Skip this step during execution.\n          </label>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { 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"] }] });
+StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div class=\"cqa-mb-4\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-custom-toggle\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (checkedChange)=\"aiAgentForm.get('continueOnError')?.setValue($event)\">\n            </cqa-custom-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div>\n\n        <!-- Disabled -->\n        <div class=\"cqa-mb-4\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-custom-toggle\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (checkedChange)=\"aiAgentForm.get('disabled')?.setValue($event)\">\n            </cqa-custom-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[10px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Continue on Error</span>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-custom-toggle\n            [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n            (checkedChange)=\"aiAgentForm.get('continueOnError')?.setValue($event)\">\n          </cqa-custom-toggle>\n          <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n            Don't fail the test if this step fails.\n          </label>\n        </div>\n\n        <!-- Disabled -->\n        <div>\n          <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-4\">\n          <cqa-custom-toggle\n            [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n            (checkedChange)=\"aiAgentForm.get('disabled')?.setValue($event)\">\n          </cqa-custom-toggle>\n          <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n            Skip this step during execution.\n          </label>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Metadata Input -->\n    <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n\n    <!-- Description Input -->\n    <div class=\"cqa-w-1/2 cqa-pl-2 \">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\n        <!-- Continue on Error -->\n        <div class=\"cqa-mb-4\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-custom-toggle\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (checkedChange)=\"aiAgentForm.get('continueOnError')?.setValue($event)\">\n            </cqa-custom-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div>\n\n        <!-- Disabled -->\n        <div class=\"cqa-mb-4\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-custom-toggle\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (checkedChange)=\"aiAgentForm.get('disabled')?.setValue($event)\">\n            </cqa-custom-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div>\n\n        <!-- Retry Count -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Iframe locator -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div>\n\n        <!-- Other Locators -->\n        <div class=\"cqa-flex cqa-flex-col cqa-mb-4\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { typeOptions: [{
                 type: Input
             }], environmentOptions: [{
@@ -25227,10 +25294,10 @@ class StepBuilderDocumentComponent {
     }
 }
 StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- Document Type and Output Variable Row (gap 12px between columns) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Upload Template: CQA drag-and-drop zone (minimal, white, centered) -->\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <!-- Upload icon: arrow in folder/box (dark gray) -->\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <!-- Create New: Template Name, Template Description, Create Template button -->\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- Document Type and Output Variable Row (gap 12px between columns) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- Document Type and Output Variable Row (gap 12px between columns) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Upload Template: CQA drag-and-drop zone (minimal, white, centered) -->\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <!-- Upload icon: arrow in folder/box (dark gray) -->\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <!-- Create New: Template Name, Template Description, Create Template button -->\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- Document Type and Output Variable Row (gap 12px between columns) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n  </div>\n  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { documentTypeOptions: [{
                 type: Input
             }], templateOptions: [{
@@ -25265,628 +25332,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
-class StepBuilderApiComponent {
+class StepBuilderGroupComponent {
     constructor(fb) {
         this.fb = fb;
-        /** Options for HTTP method dropdown */
-        this.httpMethodOptions = [
-            { id: 'GET', value: 'GET', name: 'GET', label: 'GET' },
-            { id: 'POST', value: 'POST', name: 'POST', label: 'POST' },
-            { id: 'PUT', value: 'PUT', name: 'PUT', label: 'PUT' },
-            { id: 'PATCH', value: 'PATCH', name: 'PATCH', label: 'PATCH' },
-            { id: 'DELETE', value: 'DELETE', name: 'DELETE', label: 'DELETE' },
-            { id: 'HEAD', value: 'HEAD', name: 'HEAD', label: 'HEAD' },
-            { id: 'OPTIONS', value: 'OPTIONS', name: 'OPTIONS', label: 'OPTIONS' }
-        ];
-        /** Options for header name dropdown */
-        this.headerNameOptions = [];
-        /** Current progress step */
-        this.currentStep = 'request-details';
-        /** Response preview data */
-        this.responsePreview = null;
-        /** Loading state */
-        this.isLoading = false;
+        /** Options for step group dropdown */
+        this.stepGroupOptions = [];
+        /** Indicates if more step groups are available for loading */
+        this.hasMoreStepGroups = false;
+        /** Loading state for step groups */
+        this.isLoadingStepGroups = false;
+        /** Whether in edit mode */
+        this.editMode = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
         this.cancelled = new EventEmitter();
-        /** Emit when request is sent */
-        this.sendRequest = new EventEmitter();
-        /** Emit when cURL is imported */
-        this.importCurl = new EventEmitter();
-        this.selectedTab = 'headers';
-        this.selectedProgressStep = 'request-details';
-        this.formSubmitted = false;
-        // progressSteps: ProgressStep[] = ['request-details', 'store-response', 'validation'];
-        // Cache config objects to prevent infinite change detection loops
-        this.verificationTypeConfigCache = null;
-        this.expectedTypeConfigCache = null;
-        this.httpMethodConfigCache = null;
-        this.headerNameConfigCache = null;
-        this.paramNameConfigCache = null;
-        this.hasLoadedInitialData = false;
-        // Get first HTTP method option (default to 'GET' if options not available yet)
-        const firstMethod = this.httpMethodOptions.length > 0
-            ? this.httpMethodOptions[0].value
-            : 'GET';
-        this.apiForm = this.fb.group({
-            method: [firstMethod, Validators.required],
-            url: ['', [Validators.required, this.urlValidator()]],
-            headers: this.fb.array([]),
-            body: [''],
-            params: this.fb.array([]),
-            scripts: [''],
-            variableName: [''],
-            validation: this.fb.array([])
+        /** Emit when more step groups need to be loaded */
+        this.loadMoreStepGroups = new EventEmitter();
+        /** Emit when step group search query changes */
+        this.searchStepGroups = new EventEmitter();
+        this.selectedStepGroup = null;
+        this.stepGroupForm = this.fb.group({
+            stepGroupId: [null, Validators.required]
         });
-    }
-    urlValidator() {
-        return (control) => {
-            const url = control.value;
-            if (!url) {
-                return null; // Let required validator handle empty case
-            }
-            // Pattern for plain URLs only (no parameters)
-            const urlPattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/;
-            // Pattern to detect any parameter patterns: *|param|, $|param|, @|param|, or ${param}
-            const parameterPattern = /(\*\|[\w-]+\|(\*)?|\$\|[\w-]+\|(\*)?|@\|[\w-]+\|(\*)?|\$\{[^}]+\})/;
-            // Pattern for parameter-only values: *|param|, $|param|, @|param|, or ${param}
-            const envPattern = /^\*\|[\w-]+\|(\*)?$|^\$\|[\w-]+\|(\*)?$|^@\|[\w-]+\|(\*)?$|^\$\{[^}]+\}$/;
-            // Pattern to allow URLs with embedded parameters: *|param|, $|param|, @|param|, or ${param}
-            const flexibleUrlPattern = /^[@]?(https?:\/\/)?([\w-]+(\.[\w-]+)+)([\w.,@?^=%&:/~+#-]*(\*\|[\w-]+\|(\*)?|\$\|[\w-]+\|(\*)?|@\|[\w-]+\|(\*)?|\$\{[^}]+\})[\w.,@?^=%&:/~+#-]*)*$/;
-            // Pattern that allows parameters anywhere after http:// or https://
-            const protocolWithParamsPattern = /^https?:\/\/(\*\|[\w-]+\|(\*)?|\$\|[\w-]+\|(\*)?|@\|[\w-]+\|(\*)?|\$\{[^}]+\})[^\s]*$|^https?:\/\/[^\s]*(\*\|[\w-]+\|(\*)?|\$\|[\w-]+\|(\*)?|@\|[\w-]+\|(\*)?|\$\{[^}]+\})[^\s]*$/;
-            // Check if URL contains parameters
-            if (parameterPattern.test(url)) {
-                // If it contains parameters, check if it matches allowed patterns
-                const envCombined = new RegExp(`${urlPattern.source}|${flexibleUrlPattern.source}|${envPattern.source}|${protocolWithParamsPattern.source}`);
-                if (!envCombined.test(url)) {
-                    return { hasParameter: true };
-                }
-            }
-            else {
-                // If no parameters, check if it's a valid plain URL
-                if (!urlPattern.test(url)) {
-                    return { pattern: true };
-                }
+        this.stepGroupConfig = {
+            key: 'stepGroupId',
+            placeholder: 'Select Step Group',
+            multiple: false,
+            searchable: true,
+            serverSearch: true,
+            hasMore: this.hasMoreStepGroups,
+            isLoading: this.isLoadingStepGroups,
+            options: [],
+            onChange: (value) => {
+                this.onStepGroupChange(value);
+            },
+            onSearch: (query) => {
+                this.searchStepGroups.emit(query);
+            },
+            onLoadMore: (query) => {
+                this.loadMoreStepGroups.emit(query || '');
             }
-            return null;
         };
     }
     ngOnInit() {
-        // Sync currentStep input with selectedProgressStep
-        if (this.currentStep) {
-            this.selectedProgressStep = this.currentStep;
-        }
-        // Set method to first option if not already set
-        if (!this.apiForm.get('method')?.value && this.httpMethodOptions.length > 0) {
-            this.apiForm.get('method')?.setValue(this.httpMethodOptions[0].value);
-        }
-        // Load initial data if provided (edit mode)
-        if (this.initialData) {
-            this.loadInitialData(this.initialData);
-            this.hasLoadedInitialData = true;
-        }
-        else {
-            // Add initial header row for new step
-            this.addHeader();
-        }
-        // Initialize validation form array if starting on validation step
-        if (this.selectedProgressStep === 'validation' && this.validationFormArray.length === 0) {
-            this.addValidationRule();
-        }
-    }
-    loadInitialData(data) {
-        console.log('loadInitialData: Loading data', data);
-        console.log('loadInitialData: Headers count', data.headers?.length || 0);
-        console.log('loadInitialData: Headers data', data.headers);
-        // Set basic fields
-        this.apiForm.patchValue({
-            method: data.method || 'GET',
-            url: data.url || '',
-            body: data.body || '',
-            scripts: data.scripts || '',
-            variableName: data.variableName || ''
-        });
-        // Load headers
-        // Clear existing headers first
-        while (this.headersFormArray.length !== 0) {
-            this.headersFormArray.removeAt(0);
-        }
-        if (data.headers && data.headers.length > 0) {
-            // Add headers from initial data (include all headers, even if empty)
-            data.headers.forEach(header => {
-                const headerGroup = this.fb.group({
-                    name: [header.name || '', Validators.required],
-                    value: [header.value || '', Validators.required]
-                });
-                this.headersFormArray.push(headerGroup);
-            });
-            console.log('loadInitialData: Loaded headers into form array, count:', this.headersFormArray.length);
-        }
-        // Ensure at least one header row exists
-        if (this.headersFormArray.length === 0) {
-            console.log('loadInitialData: No headers found, adding empty header row');
-            this.addHeader();
-        }
-        // Load params
-        // Clear existing params first
-        while (this.paramsFormArray.length !== 0) {
-            this.paramsFormArray.removeAt(0);
-        }
-        if (data.params && data.params.length > 0) {
-            // Add params from initial data (include all params, even if empty)
-            data.params.forEach(param => {
-                const paramGroup = this.fb.group({
-                    name: [param.name || '', Validators.required],
-                    value: [param.value || '', Validators.required]
-                });
-                this.paramsFormArray.push(paramGroup);
-            });
+        this.updateStepGroupConfig();
+        if (this.initialStepGroupId) {
+            this.stepGroupForm.patchValue({ stepGroupId: this.initialStepGroupId });
+            const foundGroup = this.stepGroupOptions.find(opt => opt.id === this.initialStepGroupId);
+            if (foundGroup) {
+                this.selectedStepGroup = foundGroup;
+            }
         }
-        // Load validation rules
-        if (data.validation && data.validation.length > 0) {
-            // Clear existing validation rules
-            while (this.validationFormArray.length !== 0) {
-                this.validationFormArray.removeAt(0);
-            }
-            // Add validation rules from initial data
-            data.validation.forEach(rule => {
-                const validationGroup = this.fb.group({
-                    jsonPath: [rule.jsonPath || '', Validators.required],
-                    verificationType: [rule.verificationType || 'equals', Validators.required],
-                    expectedType: [rule.expectedType || 'string', Validators.required],
-                    expectedValue: [rule.expectedValue !== undefined ? rule.expectedValue : '', Validators.required],
-                    result: [rule.result || 'Not run'],
-                    checked: [rule.checked || false]
-                });
-                // Ensure all controls are enabled
-                validationGroup.enable({ emitEvent: false });
-                this.validationFormArray.push(validationGroup);
-            });
+        else if (this.stepGroupOptions.length > 0) {
+            // Auto-select first option if available
+            const firstOption = this.stepGroupOptions[0];
+            this.stepGroupForm.patchValue({ stepGroupId: firstOption.id });
+            this.selectedStepGroup = firstOption;
         }
     }
-    get headersFormArray() {
-        return this.apiForm.get('headers');
-    }
-    get paramsFormArray() {
-        return this.apiForm.get('params');
-    }
-    get validationFormArray() {
-        return this.apiForm.get('validation');
-    }
-    addHeader() {
-        // Get first header name option
-        const headerOptions = this.headerNameOptions.length > 0
-            ? this.headerNameOptions
-            : [
-                { id: 'string', value: 'string', name: 'string', label: 'string' },
-                { id: 'Content-Type', value: 'Content-Type', name: 'Content-Type', label: 'Content-Type' },
-                { id: 'Authorization', value: 'Authorization', name: 'Authorization', label: 'Authorization' },
-                { id: 'Accept', value: 'Accept', name: 'Accept', label: 'Accept' }
-            ];
-        const firstHeaderName = headerOptions.length > 0 ? headerOptions[0].value : '';
-        const headerGroup = this.fb.group({
-            name: [firstHeaderName, Validators.required],
-            value: ['', Validators.required]
-        });
-        this.headersFormArray.push(headerGroup);
-    }
-    removeHeader(index) {
-        this.headersFormArray.removeAt(index);
-    }
-    addParam() {
-        const paramGroup = this.fb.group({
-            name: ['', Validators.required],
-            value: ['', Validators.required]
-        });
-        this.paramsFormArray.push(paramGroup);
-    }
-    removeParam(index) {
-        this.paramsFormArray.removeAt(index);
-    }
     ngOnChanges(changes) {
-        // Reset config caches when inputs change
-        if (changes['httpMethodOptions']) {
-            this.httpMethodConfigCache = null;
-            // Set method to first option if not already set or if we're not in edit mode
-            if (!this.hasLoadedInitialData && this.httpMethodOptions.length > 0) {
-                const methodControl = this.apiForm.get('method');
-                if (methodControl && !methodControl.value) {
-                    methodControl.setValue(this.httpMethodOptions[0].value);
-                }
-            }
+        if (changes['stepGroupOptions'] || changes['hasMoreStepGroups'] || changes['isLoadingStepGroups']) {
+            this.updateStepGroupConfig();
         }
-        if (changes['headerNameOptions']) {
-            this.headerNameConfigCache = null;
-            // Update header names to first option for empty headers (only if not in edit mode)
-            if (!this.hasLoadedInitialData && this.headerNameOptions.length > 0) {
-                this.headersFormArray.controls.forEach((headerGroup) => {
-                    const nameControl = headerGroup.get('name');
-                    if (nameControl && !nameControl.value) {
-                        nameControl.setValue(this.headerNameOptions[0].value);
-                    }
-                });
+        if (changes['initialStepGroupId'] && this.initialStepGroupId) {
+            this.stepGroupForm.patchValue({ stepGroupId: this.initialStepGroupId });
+            const foundGroup = this.stepGroupOptions.find(opt => opt.id === this.initialStepGroupId);
+            if (foundGroup) {
+                this.selectedStepGroup = foundGroup;
             }
         }
-        // Load initial data if it's set after component initialization
-        if (changes['initialData'] && !changes['initialData'].firstChange && this.initialData && !this.hasLoadedInitialData) {
-            this.loadInitialData(this.initialData);
-            this.hasLoadedInitialData = true;
-        }
     }
-    getHttpMethodConfig() {
-        if (!this.httpMethodConfigCache) {
-            this.httpMethodConfigCache = {
-                key: 'method',
-                placeholder: 'Select method',
-                multiple: false,
-                searchable: false,
-                options: this.httpMethodOptions
-            };
-        }
-        return this.httpMethodConfigCache;
-    }
-    getHeaderNameConfig(index) {
-        if (!this.headerNameConfigCache) {
-            const defaultOptions = [
-                { id: 'string', value: 'string', name: 'string', label: 'string' },
-                { id: 'Content-Type', value: 'Content-Type', name: 'Content-Type', label: 'Content-Type' },
-                { id: 'Authorization', value: 'Authorization', name: 'Authorization', label: 'Authorization' },
-                { id: 'Accept', value: 'Accept', name: 'Accept', label: 'Accept' }
-            ];
-            this.headerNameConfigCache = {
-                key: 'name',
-                placeholder: 'Select header',
-                multiple: false,
-                searchable: true,
-                options: this.headerNameOptions.length > 0 ? this.headerNameOptions : defaultOptions
-            };
-        }
-        return this.headerNameConfigCache;
+    updateStepGroupConfig() {
+        const options = this.stepGroupOptions.map(group => ({
+            id: group.id,
+            value: group.id,
+            name: group.name,
+            label: group.name
+        }));
+        this.stepGroupConfig = {
+            ...this.stepGroupConfig,
+            options: options,
+            hasMore: this.hasMoreStepGroups,
+            isLoading: this.isLoadingStepGroups
+        };
     }
-    getParamNameConfig(index) {
-        if (!this.paramNameConfigCache) {
-            this.paramNameConfigCache = {
-                key: 'name',
-                placeholder: 'Parameter name',
-                multiple: false,
-                searchable: false,
-                options: []
-            };
+    onStepGroupChange(stepGroupId) {
+        const foundGroup = this.stepGroupOptions.find(opt => opt.id === stepGroupId);
+        if (foundGroup) {
+            this.selectedStepGroup = foundGroup;
         }
-        return this.paramNameConfigCache;
-    }
-    getHeaderFormGroup(index) {
-        return this.headersFormArray.at(index);
-    }
-    getParamFormGroup(index) {
-        return this.paramsFormArray.at(index);
-    }
-    onTabChange(tab) {
-        this.selectedTab = tab;
     }
-    onSendRequest() {
-        this.formSubmitted = true;
-        this.markFormGroupTouched(this.apiForm);
-        console.log('onSendRequest: apiForm', this.apiForm.value);
-        console.log('onSendRequest: apiForm valid', this.apiForm);
-        if (this.apiForm.valid) {
-            const formValue = this.apiForm.value;
-            const headers = formValue.headers.map((h) => ({
-                name: h.name,
-                value: h.value
-            }));
-            const params = formValue.params ? formValue.params.map((p) => ({
-                name: p.name,
-                value: p.value
-            })) : [];
-            this.sendRequest.emit({
-                method: formValue.method,
-                url: formValue.url,
-                headers,
-                body: formValue.body,
-                params
-            });
+    getStepGroupDescription() {
+        if (this.selectedStepGroup?.description) {
+            const tempDescElem = document.createElement('div');
+            tempDescElem.innerHTML = this.selectedStepGroup.description;
+            return tempDescElem.textContent || '';
         }
-    }
-    onImportCurl() {
-        this.importCurl.emit();
-    }
-    onCancel() {
-        this.cancelled.emit();
+        return 'No description available';
     }
     onCreateStep() {
-        this.formSubmitted = true;
-        this.markFormGroupTouched(this.apiForm);
-        if (this.apiForm.valid) {
-            const formValue = this.apiForm.value;
+        if (this.stepGroupForm.valid) {
+            const formValue = this.stepGroupForm.value;
             const stepData = {
-                method: formValue.method,
-                url: formValue.url,
-                headers: formValue.headers.map((h) => ({
-                    name: h.name,
-                    value: h.value
-                })),
-                body: formValue.body,
-                params: formValue.params ? formValue.params.map((p) => ({
-                    name: p.name,
-                    value: p.value
-                })) : [],
-                scripts: formValue.scripts,
-                variableName: formValue.variableName || '',
-                validation: formValue.validation ? formValue.validation.map((v) => ({
-                    jsonPath: v.jsonPath,
-                    verificationType: v.verificationType,
-                    expectedType: v.expectedType,
-                    expectedValue: v.expectedValue,
-                    result: v.result || 'Not run'
-                })) : []
+                stepGroupId: formValue.stepGroupId,
+                stepGroup: this.selectedStepGroup
             };
-            console.log('9999999', stepData);
             this.createStep.emit(stepData);
         }
     }
-    onNext() {
-        // Move to next step or create step if on last step
-        const stepOrder = ['request-details', 'store-response', 'validation'];
-        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
-        if (currentIndex < stepOrder.length - 1) {
-            this.onProgressStepChange(stepOrder[currentIndex + 1]);
-        }
-        else {
-            this.onCreateStep();
-        }
-    }
-    onBack() {
-        // Move to previous step
-        const stepOrder = ['request-details', 'store-response', 'validation'];
-        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
-        if (currentIndex > 0) {
-            this.onProgressStepChange(stepOrder[currentIndex - 1]);
-        }
-    }
-    canGoBack() {
-        const stepOrder = ['request-details', 'store-response', 'validation'];
-        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
-        return currentIndex > 0;
-    }
-    isLastStep() {
-        const stepOrder = ['request-details', 'store-response', 'validation'];
-        const currentIndex = stepOrder.indexOf(this.selectedProgressStep);
-        return currentIndex === stepOrder.length - 1;
-    }
-    getProgressStepClass(step) {
-        const stepOrder = ['request-details', 'store-response', 'validation'];
-        const currentIndex = stepOrder.indexOf(this.currentStep);
-        const stepIndex = stepOrder.indexOf(step);
-        if (stepIndex < currentIndex) {
-            return 'cqa-text-gray-400'; // Completed
-        }
-        else if (stepIndex === currentIndex) {
-            return 'cqa-text-purple-600 cqa-font-semibold'; // Active
-        }
-        else {
-            return 'cqa-text-gray-400'; // Pending
-        }
-    }
-    getProgressStepNumber(step) {
-        const stepOrder = ['request-details', 'store-response', 'validation'];
-        return stepOrder.indexOf(step) + 1;
-    }
-    getProgressStepLabel(step) {
-        const labels = {
-            'request-details': 'Request Details',
-            'store-response': 'Store Response',
-            'validation': 'Validation'
-        };
-        return labels[step];
-    }
-    formatJsonResponse(data) {
-        if (!data)
-            return '';
-        try {
-            return JSON.stringify(data, null, 2);
-        }
-        catch {
-            return String(data);
-        }
-    }
-    onProgressStepChange(step) {
-        this.selectedProgressStep = step;
-        // Initialize validation form array if switching to validation step
-        if (step === 'validation' && this.validationFormArray.length === 0) {
-            this.addValidationRule();
-        }
-    }
-    addValidationRule() {
-        const validationGroup = this.fb.group({
-            checked: [false],
-            jsonPath: ['', Validators.required],
-            verificationType: ['equals'],
-            expectedType: ['string'],
-            expectedValue: ['', Validators.required],
-            result: ['Not run']
-        });
-        // Ensure all controls are enabled to avoid disabled attribute warnings
-        validationGroup.enable({ emitEvent: false });
-        this.validationFormArray.push(validationGroup);
-    }
-    removeValidationRule(index) {
-        this.validationFormArray.removeAt(index);
-    }
-    getValidationFormGroup(index) {
-        return this.validationFormArray.at(index);
-    }
-    trackByValidationRuleIndex(index) {
-        return index;
-    }
-    trackByHeaderIndex(index) {
-        return index;
-    }
-    trackByParamIndex(index) {
-        return index;
-    }
-    getVerificationTypeOptions() {
-        return [
-            { id: 'equals', value: 'equals', name: 'Equals', label: 'Equals' },
-            { id: 'not_equals', value: 'not_equals', name: 'Not Equals', label: 'Not Equals' },
-            { id: 'contains', value: 'contains', name: 'Contains', label: 'Contains' },
-            { id: 'not_contains', value: 'not_contains', name: 'Not Contains', label: 'Not Contains' },
-            { id: 'greater_than', value: 'greater_than', name: 'Greater Than', label: 'Greater Than' },
-            { id: 'less_than', value: 'less_than', name: 'Less Than', label: 'Less Than' },
-            { id: 'greater_than_or_equals', value: 'greater_than_or_equals', name: 'Greater Than Or Equals', label: 'Greater Than Or Equals' },
-            { id: 'less_than_or_equals', value: 'less_than_or_equals', name: 'Less Than Or Equals', label: 'Less Than Or Equals' },
-            { id: 'exists', value: 'exists', name: 'Exists', label: 'Exists' },
-            { id: 'not_exists', value: 'not_exists', name: 'Not Exists', label: 'Not Exists' }
-        ];
-    }
-    getExpectedTypeOptions() {
-        return [
-            { id: 'string', value: 'string', name: 'String', label: 'String' },
-            { id: 'number', value: 'number', name: 'Number', label: 'Number' },
-            { id: 'boolean', value: 'boolean', name: 'Boolean', label: 'Boolean' },
-            { id: 'object', value: 'object', name: 'Object', label: 'Object' },
-            { id: 'array', value: 'array', name: 'Array', label: 'Array' },
-            { id: 'null', value: 'null', name: 'Null', label: 'Null' }
-        ];
-    }
-    getVerificationTypeConfig(index) {
-        // Cache the config to prevent infinite change detection loops
-        if (!this.verificationTypeConfigCache) {
-            this.verificationTypeConfigCache = {
-                key: 'verificationType',
-                placeholder: 'Select verification type',
-                multiple: false,
-                searchable: false,
-                options: this.getVerificationTypeOptions()
-            };
-        }
-        return this.verificationTypeConfigCache;
-    }
-    getExpectedTypeConfig(index) {
-        // Cache the config to prevent infinite change detection loops
-        if (!this.expectedTypeConfigCache) {
-            this.expectedTypeConfigCache = {
-                key: 'expectedType',
-                placeholder: 'Select expected type',
-                multiple: false,
-                searchable: false,
-                options: this.getExpectedTypeOptions()
-            };
-        }
-        return this.expectedTypeConfigCache;
-    }
-    getResultClass(result) {
-        if (result === 'Pass') {
-            return 'cqa-bg-green-500 cqa-text-white';
-        }
-        else if (result === 'Fail') {
-            return 'cqa-bg-red-500 cqa-text-white';
-        }
-        return 'cqa-bg-gray-300 cqa-text-gray-700';
-    }
-    get allValidationRulesSelected() {
-        return this.validationFormArray.length > 0 &&
-            this.validationFormArray.controls.every(control => control.get('checked')?.value);
-    }
-    get someValidationRulesSelected() {
-        return this.validationFormArray.controls.some(control => control.get('checked')?.value) &&
-            !this.allValidationRulesSelected;
-    }
-    onSelectAllValidationRules(checked) {
-        this.validationFormArray.controls.forEach(control => {
-            control.get('checked')?.setValue(checked);
-        });
-    }
-    onDeleteSelectedValidationRules() {
-        const indicesToRemove = [];
-        this.validationFormArray.controls.forEach((control, index) => {
-            if (control.get('checked')?.value) {
-                indicesToRemove.push(index);
-            }
-        });
-        // Remove in reverse order to maintain correct indices
-        indicesToRemove.reverse().forEach(index => {
-            this.removeValidationRule(index);
-        });
-    }
-    markFormGroupTouched(formGroup) {
-        Object.keys(formGroup.controls).forEach(key => {
-            const control = formGroup.get(key);
-            if (control) {
-                control.markAsTouched();
-                if (control instanceof FormGroup) {
-                    this.markFormGroupTouched(control);
-                }
-                else if (control instanceof FormArray) {
-                    control.controls.forEach((ctrl) => {
-                        if (ctrl instanceof FormGroup) {
-                            this.markFormGroupTouched(ctrl);
-                        }
-                        else {
-                            ctrl.markAsTouched();
-                        }
-                    });
-                }
-            }
-        });
-    }
-    onUrlChange(value) {
-        const urlControl = this.apiForm.get('url');
-        if (urlControl) {
-            urlControl.setValue(value);
-            urlControl.updateValueAndValidity();
-        }
-    }
-    onUrlBlur() {
-        const urlControl = this.apiForm.get('url');
-        if (urlControl) {
-            urlControl.markAsTouched();
-        }
+    onCancel() {
+        this.cancelled.emit();
     }
-    getUrlErrors() {
-        const urlControl = this.apiForm.get('url');
-        if (!urlControl || (!this.formSubmitted && !urlControl.touched)) {
-            return [];
-        }
-        const errors = [];
-        if (urlControl.errors?.['required']) {
-            errors.push('URL is required');
-        }
-        else if (urlControl.errors?.['pattern']) {
-            errors.push('URL is not valid');
-        }
-        else if (urlControl.errors?.['hasParameter']) {
-            errors.push('URL format is invalid. Please check the parameter format.');
-        }
-        return errors;
+    isFormValid() {
+        return this.stepGroupForm.valid && !!this.selectedStepGroup;
     }
 }
-StepBuilderApiComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderApiComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderApiComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderApiComponent, selector: "cqa-step-builder-api", inputs: { httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions", currentStep: "currentStep", responsePreview: "responsePreview", isLoading: "isLoading", initialData: "initialData" }, outputs: { createStep: "createStep", cancelled: "cancelled", sendRequest: "sendRequest", importCurl: "importCurl" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create API Test Step\n  </h2>\n\n  <!-- Progress Tracker -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-mb-6 cqa-pb-4 cqa-border-b cqa-border-gray-200\">\n    <!-- <div *ngFor=\"let step of progressSteps\"\n         class=\"cqa-flex cqa-items-center cqa-gap-2\"\n         [ngClass]=\"getProgressStepClass(step)\">\n      <span class=\"cqa-text-sm cqa-font-medium\">{{ getProgressStepNumber(step) }} {{ getProgressStepLabel(step) }}</span>\n      <span *ngIf=\"step !== 'validation'\" class=\"cqa-text-gray-300\">\u2022</span>\n    </div> -->\n    <div class=\"cqa-flex cqa-items-center cqa-w-full cqa-justify-between\">\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'request-details'}\" (click)=\"onProgressStepChange('request-details')\">\n          <div class=\"cqa-w-8 cqa-h-8 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-bg-purple-600 cqa-text-white cqa-text-xs cqa-font-semibold\">1</div>\n          <div>Request Details</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'store-response'}\" (click)=\"onProgressStepChange('store-response')\">\n          <div class=\"cqa-w-8 cqa-h-8 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-bg-purple-600 cqa-text-white cqa-text-xs cqa-font-semibold\">2</div>\n          <div>Store Response</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'validation'}\" (click)=\"onProgressStepChange('validation')\">\n          <div class=\"cqa-w-8 cqa-h-8 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-bg-purple-600 cqa-text-white cqa-text-xs cqa-font-semibold\">3</div>\n          <div>Validation</div>\n          <div></div>\n         </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"selectedProgressStep === 'request-details'\">\n  <!-- API Request Configuration -->\n  <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3\">\n    <div class=\"cqa-w-32 cqa-flex-shrink-0\">\n      <cqa-dynamic-select\n        [form]=\"apiForm\"\n        [config]=\"getHttpMethodConfig()\">\n      </cqa-dynamic-select>\n    </div>\n    <div class=\"cqa-flex-1\">\n      <cqa-custom-input\n        [placeholder]=\"'Enter API endpoint URL'\"\n        [value]=\"apiForm.get('url')?.value || ''\"\n        [fullWidth]=\"true\"\n        [errors]=\"getUrlErrors()\"\n        (valueChange)=\"onUrlChange($event)\"\n        (blurred)=\"onUrlBlur()\">\n      </cqa-custom-input>\n    </div>\n    <cqa-button\n      variant=\"outlined\"\n      text=\"Import API cURL\"\n      (clicked)=\"onImportCurl()\">\n    </cqa-button>\n    <cqa-button\n      variant=\"filled\"\n      text=\"Send Request\"\n      (clicked)=\"onSendRequest()\"\n      [disabled]=\"!apiForm.get('url')?.value || isLoading\">\n    </cqa-button>\n  </div>\n\n  <!-- Request Details Tabs -->\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Tab Navigation -->\n    <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'headers'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'headers'\"\n        (click)=\"onTabChange('headers')\">\n        Headers\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'body'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'body'\"\n        (click)=\"onTabChange('body')\">\n        Body\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'params'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'params'\"\n        (click)=\"onTabChange('params')\">\n        Params\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'scripts'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'scripts'\"\n        (click)=\"onTabChange('scripts')\">\n        Scripts\n      </button>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-border cqa-border-gray-200 cqa-border-t-0 cqa-rounded-b-lg\">\n      <!-- Headers Tab -->\n      <div *ngIf=\"selectedTab === 'headers'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Name*</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Value*</div>\n        </div>\n        <div *ngFor=\"let header of headersFormArray.controls; let i = index; trackBy: trackByHeaderIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getHeaderFormGroup(i)\"\n              [config]=\"getHeaderNameConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Header value'\"\n                [value]=\"getHeaderFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getHeaderFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeHeader(i)\"\n              [attr.aria-label]=\"'Remove header'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addHeader()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Header</span>\n        </button>\n      </div>\n\n      <!-- Body Tab -->\n      <div *ngIf=\"selectedTab === 'body'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter request body (JSON, XML, etc.)'\"\n          [value]=\"apiForm.get('body')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('body')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n\n      <!-- Params Tab -->\n      <div *ngIf=\"selectedTab === 'params'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Name</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Value</div>\n        </div>\n        <div *ngFor=\"let param of paramsFormArray.controls; let i = index; trackBy: trackByParamIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'Parameter name'\"\n              [value]=\"getParamFormGroup(i).get('name')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getParamFormGroup(i).get('name')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Parameter value'\"\n                [value]=\"getParamFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getParamFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeParam(i)\"\n              [attr.aria-label]=\"'Remove parameter'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addParam()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Parameter</span>\n        </button>\n      </div>\n\n      <!-- Scripts Tab -->\n      <div *ngIf=\"selectedTab === 'scripts'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter scripts (JavaScript, etc.)'\"\n          [value]=\"apiForm.get('scripts')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('scripts')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n    </div>\n  </div>\n\n\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'store-response'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Store Response Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Store Response\n    </h3>\n\n    <!-- Variable Name Input -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        Variable Name\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Variable Name'\"\n        [value]=\"apiForm.get('variableName')?.value || ''\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"apiForm.get('variableName')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'validation'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Validation Rules Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Validation Rules\n    </h3>\n\n    <!-- Validation Rules Table -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-4\">\n      <!-- Table Header -->\n      <div class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200 cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center\">\n          <mat-checkbox\n            [checked]=\"allValidationRulesSelected\"\n            [indeterminate]=\"someValidationRulesSelected\"\n            (change)=\"onSelectAllValidationRules($event.checked)\">\n          </mat-checkbox>\n        </div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">jsonPath</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">verificationType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedValue</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Result</div>\n      </div>\n\n      <!-- Table Body -->\n      <div class=\"cqa-flex cqa-flex-col\">\n        <div *ngFor=\"let validationRule of validationFormArray.controls; let i = index; trackBy: trackByValidationRuleIndex\" \n             [formGroup]=\"getValidationFormGroup(i)\"\n             class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-border-b cqa-border-gray-200 cqa-items-center cqa-last:border-b-0\">\n          <!-- Checkbox -->\n          <div class=\"cqa-flex cqa-items-center\">\n            <mat-checkbox formControlName=\"checked\">\n            </mat-checkbox>\n          </div>\n\n          <!-- jsonPath -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'jsonPath'\"\n              [value]=\"getValidationFormGroup(i).get('jsonPath')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('jsonPath')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- verificationType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getVerificationTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getExpectedTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedValue -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'expectedValue'\"\n              [value]=\"getValidationFormGroup(i).get('expectedValue')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('expectedValue')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Result and Delete -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <button\n              type=\"button\"\n              class=\"cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-font-medium\"\n              [ngClass]=\"getResultClass(getValidationFormGroup(i).get('result')?.value || 'Not run')\">\n              {{ getValidationFormGroup(i).get('result')?.value || 'Not run' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeValidationRule(i)\"\n              [attr.aria-label]=\"'Delete validation rule'\">\n              <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Add Another Rule and Delete Selected -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-mb-4\">\n      <button\n        *ngIf=\"someValidationRulesSelected || allValidationRulesSelected\"\n        type=\"button\"\n        class=\"cqa-text-red-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-red-700 cqa-transition-colors\"\n        (click)=\"onDeleteSelectedValidationRules()\">\n        <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n        <span>Delete Selected</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n        (click)=\"addValidationRule()\">\n        <mat-icon class=\"cqa-text-base\">add</mat-icon>\n        <span>Add Another</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n\n\n  <!-- Response Preview Section -->\n  <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n    <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n      <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Response Preview</h3>\n    </div>\n    <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-overflow-auto\" style=\"max-height: 300px;\">\n      <pre *ngIf=\"responsePreview\" class=\"cqa-text-xs cqa-font-mono cqa-text-gray-800 cqa-whitespace-pre-wrap\">{{ formatJsonResponse(responsePreview) }}</pre>\n      <p *ngIf=\"!responsePreview\" class=\"cqa-text-sm cqa-text-gray-400 cqa-text-center cqa-py-8\">\n        No response yet. Send a request to see the response preview.\n      </p>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <!-- Cancel button (only on first step) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep === 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <!-- Back button (on all steps except first) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep !== 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Back\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onBack()\">\n    </cqa-button>\n    <!-- Next/Create Step button -->\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isLastStep() ? 'Create Step' : 'Next'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"isLastStep() ? onCreateStep() : onNext()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderApiComponent, decorators: [{
+StepBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Loading State -->\n    <div *ngIf=\"isLoadingStepGroups\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-api', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create API Test Step\n  </h2>\n\n  <!-- Progress Tracker -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-mb-6 cqa-pb-4 cqa-border-b cqa-border-gray-200\">\n    <!-- <div *ngFor=\"let step of progressSteps\"\n         class=\"cqa-flex cqa-items-center cqa-gap-2\"\n         [ngClass]=\"getProgressStepClass(step)\">\n      <span class=\"cqa-text-sm cqa-font-medium\">{{ getProgressStepNumber(step) }} {{ getProgressStepLabel(step) }}</span>\n      <span *ngIf=\"step !== 'validation'\" class=\"cqa-text-gray-300\">\u2022</span>\n    </div> -->\n    <div class=\"cqa-flex cqa-items-center cqa-w-full cqa-justify-between\">\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'request-details'}\" (click)=\"onProgressStepChange('request-details')\">\n          <div class=\"cqa-w-8 cqa-h-8 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-bg-purple-600 cqa-text-white cqa-text-xs cqa-font-semibold\">1</div>\n          <div>Request Details</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'store-response'}\" (click)=\"onProgressStepChange('store-response')\">\n          <div class=\"cqa-w-8 cqa-h-8 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-bg-purple-600 cqa-text-white cqa-text-xs cqa-font-semibold\">2</div>\n          <div>Store Response</div>\n          <div></div>\n         </div>\n         <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [ngClass]=\"{'cqa-text-purple-600 cqa-font-semibold': selectedProgressStep === 'validation'}\" (click)=\"onProgressStepChange('validation')\">\n          <div class=\"cqa-w-8 cqa-h-8 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-bg-purple-600 cqa-text-white cqa-text-xs cqa-font-semibold\">3</div>\n          <div>Validation</div>\n          <div></div>\n         </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"selectedProgressStep === 'request-details'\">\n  <!-- API Request Configuration -->\n  <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3\">\n    <div class=\"cqa-w-32 cqa-flex-shrink-0\">\n      <cqa-dynamic-select\n        [form]=\"apiForm\"\n        [config]=\"getHttpMethodConfig()\">\n      </cqa-dynamic-select>\n    </div>\n    <div class=\"cqa-flex-1\">\n      <cqa-custom-input\n        [placeholder]=\"'Enter API endpoint URL'\"\n        [value]=\"apiForm.get('url')?.value || ''\"\n        [fullWidth]=\"true\"\n        [errors]=\"getUrlErrors()\"\n        (valueChange)=\"onUrlChange($event)\"\n        (blurred)=\"onUrlBlur()\">\n      </cqa-custom-input>\n    </div>\n    <cqa-button\n      variant=\"outlined\"\n      text=\"Import API cURL\"\n      (clicked)=\"onImportCurl()\">\n    </cqa-button>\n    <cqa-button\n      variant=\"filled\"\n      text=\"Send Request\"\n      (clicked)=\"onSendRequest()\"\n      [disabled]=\"!apiForm.get('url')?.value || isLoading\">\n    </cqa-button>\n  </div>\n\n  <!-- Request Details Tabs -->\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Tab Navigation -->\n    <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'headers'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'headers'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'headers'\"\n        (click)=\"onTabChange('headers')\">\n        Headers\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'body'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'body'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'body'\"\n        (click)=\"onTabChange('body')\">\n        Body\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'params'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'params'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'params'\"\n        (click)=\"onTabChange('params')\">\n        Params\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'scripts'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'scripts'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'scripts'\"\n        (click)=\"onTabChange('scripts')\">\n        Scripts\n      </button>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-border cqa-border-gray-200 cqa-border-t-0 cqa-rounded-b-lg\">\n      <!-- Headers Tab -->\n      <div *ngIf=\"selectedTab === 'headers'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Name*</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Header Value*</div>\n        </div>\n        <div *ngFor=\"let header of headersFormArray.controls; let i = index; trackBy: trackByHeaderIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getHeaderFormGroup(i)\"\n              [config]=\"getHeaderNameConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Header value'\"\n                [value]=\"getHeaderFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getHeaderFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeHeader(i)\"\n              [attr.aria-label]=\"'Remove header'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addHeader()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Header</span>\n        </button>\n      </div>\n\n      <!-- Body Tab -->\n      <div *ngIf=\"selectedTab === 'body'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter request body (JSON, XML, etc.)'\"\n          [value]=\"apiForm.get('body')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('body')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n\n      <!-- Params Tab -->\n      <div *ngIf=\"selectedTab === 'params'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-start\">\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Name</div>\n          <div class=\"cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Parameter Value</div>\n        </div>\n        <div *ngFor=\"let param of paramsFormArray.controls; let i = index; trackBy: trackByParamIndex\" \n             class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4 cqa-items-center\">\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'Parameter name'\"\n              [value]=\"getParamFormGroup(i).get('name')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getParamFormGroup(i).get('name')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <div class=\"cqa-flex-1\">\n              <cqa-custom-input\n                [placeholder]=\"'Parameter value'\"\n                [value]=\"getParamFormGroup(i).get('value')?.value || ''\"\n                [fullWidth]=\"true\"\n                (valueChange)=\"getParamFormGroup(i).get('value')?.setValue($event)\">\n              </cqa-custom-input>\n            </div>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeParam(i)\"\n              [attr.aria-label]=\"'Remove parameter'\">\n              <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n        <button\n          type=\"button\"\n          class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-self-start cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n          (click)=\"addParam()\">\n          <mat-icon class=\"cqa-text-base\">add</mat-icon>\n          <span>Add Parameter</span>\n        </button>\n      </div>\n\n      <!-- Scripts Tab -->\n      <div *ngIf=\"selectedTab === 'scripts'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <cqa-custom-textarea\n          [placeholder]=\"'Enter scripts (JavaScript, etc.)'\"\n          [value]=\"apiForm.get('scripts')?.value || ''\"\n          [fullWidth]=\"true\"\n          [rows]=\"10\"\n          (valueChange)=\"apiForm.get('scripts')?.setValue($event)\">\n        </cqa-custom-textarea>\n      </div>\n    </div>\n  </div>\n\n\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'store-response'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Store Response Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Store Response\n    </h3>\n\n    <!-- Variable Name Input -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        Variable Name\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Variable Name'\"\n        [value]=\"apiForm.get('variableName')?.value || ''\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"apiForm.get('variableName')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"selectedProgressStep === 'validation'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n    <!-- Validation Rules Title -->\n    <h3 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n      Validation Rules\n    </h3>\n\n    <!-- Validation Rules Table -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-4\">\n      <!-- Table Header -->\n      <div class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200 cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center\">\n          <mat-checkbox\n            [checked]=\"allValidationRulesSelected\"\n            [indeterminate]=\"someValidationRulesSelected\"\n            (change)=\"onSelectAllValidationRules($event.checked)\">\n          </mat-checkbox>\n        </div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">jsonPath</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">verificationType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedType</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">expectedValue</div>\n        <div class=\"cqa-text-[10px] cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">Result</div>\n      </div>\n\n      <!-- Table Body -->\n      <div class=\"cqa-flex cqa-flex-col\">\n        <div *ngFor=\"let validationRule of validationFormArray.controls; let i = index; trackBy: trackByValidationRuleIndex\" \n             [formGroup]=\"getValidationFormGroup(i)\"\n             class=\"cqa-grid cqa-grid-cols-6 cqa-gap-2 cqa-p-3 cqa-border-b cqa-border-gray-200 cqa-items-center cqa-last:border-b-0\">\n          <!-- Checkbox -->\n          <div class=\"cqa-flex cqa-items-center\">\n            <mat-checkbox formControlName=\"checked\">\n            </mat-checkbox>\n          </div>\n\n          <!-- jsonPath -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'jsonPath'\"\n              [value]=\"getValidationFormGroup(i).get('jsonPath')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('jsonPath')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- verificationType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getVerificationTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedType -->\n          <div>\n            <cqa-dynamic-select\n              [form]=\"getValidationFormGroup(i)\"\n              [config]=\"getExpectedTypeConfig(i)\">\n            </cqa-dynamic-select>\n          </div>\n\n          <!-- expectedValue -->\n          <div>\n            <cqa-custom-input\n              [placeholder]=\"'expectedValue'\"\n              [value]=\"getValidationFormGroup(i).get('expectedValue')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getValidationFormGroup(i).get('expectedValue')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Result and Delete -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <button\n              type=\"button\"\n              class=\"cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-font-medium\"\n              [ngClass]=\"getResultClass(getValidationFormGroup(i).get('result')?.value || 'Not run')\">\n              {{ getValidationFormGroup(i).get('result')?.value || 'Not run' }}\n            </button>\n            <button\n              type=\"button\"\n              class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-6 cqa-h-6 cqa-rounded cqa-text-red-500 hover:cqa-text-red-700 hover:cqa-bg-red-50 cqa-transition-colors\"\n              (click)=\"removeValidationRule(i)\"\n              [attr.aria-label]=\"'Delete validation rule'\">\n              <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Add Another Rule and Delete Selected -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-center cqa-mb-4\">\n      <button\n        *ngIf=\"someValidationRulesSelected || allValidationRulesSelected\"\n        type=\"button\"\n        class=\"cqa-text-red-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-red-700 cqa-transition-colors\"\n        (click)=\"onDeleteSelectedValidationRules()\">\n        <mat-icon class=\"cqa-text-base\">delete</mat-icon>\n        <span>Delete Selected</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-text-blue-600 cqa-text-sm cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-text-blue-700 cqa-transition-colors\"\n        (click)=\"addValidationRule()\">\n        <mat-icon class=\"cqa-text-base\">add</mat-icon>\n        <span>Add Another</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n\n\n  <!-- Response Preview Section -->\n  <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n    <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n      <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Response Preview</h3>\n    </div>\n    <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-overflow-auto\" style=\"max-height: 300px;\">\n      <pre *ngIf=\"responsePreview\" class=\"cqa-text-xs cqa-font-mono cqa-text-gray-800 cqa-whitespace-pre-wrap\">{{ formatJsonResponse(responsePreview) }}</pre>\n      <p *ngIf=\"!responsePreview\" class=\"cqa-text-sm cqa-text-gray-400 cqa-text-center cqa-py-8\">\n        No response yet. Send a request to see the response preview.\n      </p>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <!-- Cancel button (only on first step) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep === 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <!-- Back button (on all steps except first) -->\n    <cqa-button\n      *ngIf=\"selectedProgressStep !== 'request-details'\"\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Back\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onBack()\">\n    </cqa-button>\n    <!-- Next/Create Step button -->\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isLastStep() ? 'Create Step' : 'Next'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"isLastStep() ? onCreateStep() : onNext()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { httpMethodOptions: [{
+            args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Loading State -->\n    <div *ngIf=\"isLoadingStepGroups\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepGroupOptions: [{
                 type: Input
-            }], headerNameOptions: [{
+            }], hasMoreStepGroups: [{
                 type: Input
-            }], currentStep: [{
+            }], isLoadingStepGroups: [{
                 type: Input
-            }], responsePreview: [{
+            }], initialStepGroupId: [{
                 type: Input
-            }], isLoading: [{
-                type: Input
-            }], initialData: [{
+            }], editMode: [{
                 type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
                 type: Output
-            }], sendRequest: [{
+            }], loadMoreStepGroups: [{
                 type: Output
-            }], importCurl: [{
+            }], searchStepGroups: [{
                 type: Output
             }] } });
@@ -26297,7 +25880,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderDocumentGenerationTemplateStepComponent,
         ElementListComponent,
         StepBuilderDocumentComponent,
-        StepBuilderApiComponent,
+        StepBuilderGroupComponent,
         StepDetailsDrawerComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -26424,9 +26007,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         StepBuilderCustomCodeComponent,
         StepBuilderRecordStepComponent,
         StepBuilderDocumentGenerationTemplateStepComponent,
-        StepBuilderApiComponent,
         ElementListComponent,
         StepBuilderDocumentComponent,
+        StepBuilderGroupComponent,
         StepDetailsDrawerComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
@@ -26604,7 +26187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderDocumentGenerationTemplateStepComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
-                        StepBuilderApiComponent,
+                        StepBuilderGroupComponent,
                         StepDetailsDrawerComponent,
                     ],
                     imports: [
@@ -26737,9 +26320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         StepBuilderCustomCodeComponent,
                         StepBuilderRecordStepComponent,
                         StepBuilderDocumentGenerationTemplateStepComponent,
-                        StepBuilderApiComponent,
                         ElementListComponent,
                         StepBuilderDocumentComponent,
+                        StepBuilderGroupComponent,
                         StepDetailsDrawerComponent,
                     ],
                     providers: [
@@ -27228,5 +26811,5 @@ function getDynamicFieldsFromLegacyConfig(step) {
  * Generated bundle index. Do not edit.
  */
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderApiComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AiDebugAlertComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map