@cqa-lib/cqa-ui 1.1.198 → 1.1.199

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

@@ -22599,7 +22599,28 @@ class StepBuilderActionComponent {
         this.onBack();
         this.cancelled.emit();
     }
+    isFormValid() {
+        if (!this.selectedTemplate) {
+            return false;
+        }
+        // Check if all required variables are filled
+        if (this.templateVariables && this.templateVariables.length > 0) {
+            return this.templateVariables.every(variable => {
+                // Boolean variables are always valid (they have a default value)
+                if (variable.type === 'boolean') {
+                    return true;
+                }
+                // Check if variable has a value
+                const value = variable.value;
+                return value !== null && value !== undefined && value !== '';
+            });
+        }
+        return true;
+    }
     onCreateStep() {
+        if (!this.isFormValid()) {
+            return;
+        }
         const stepData = {
             template: this.selectedTemplate,
             metadata: this.metadata,
@@ -22623,10 +22644,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        (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\"\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"] }] });
 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        (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\"\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: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{
@@ -22907,7 +22928,32 @@ class StepBuilderLoopComponent {
         this.resetForm();
         this.cancelled.emit();
     }
+    isFormValid() {
+        if (this.selectedLoopType === 'while') {
+            return !!this.selectedWhileTemplate;
+        }
+        else {
+            // For 'for' loop type
+            const formValue = this.loopForm.value;
+            const selectOption = formValue.selectOption;
+            if (!selectOption) {
+                return false;
+            }
+            if (selectOption === 'dataProfile') {
+                // For data profile, need dataProfile, loopStart, and loopEnd
+                return !!(formValue.dataProfile && formValue.loopStart && formValue.loopEnd);
+            }
+            else if (selectOption === 'runTime') {
+                // For run time, need runTime value
+                return !!(formValue.runTime && formValue.runTime.trim() !== '');
+            }
+            return false;
+        }
+    }
     onCreateStep() {
+        if (!this.isFormValid()) {
+            return;
+        }
         const formValue = this.loopForm.value;
         if (this.selectedLoopType === 'while') {
             if (!this.selectedWhileTemplate) {
@@ -22993,10 +23039,10 @@ class StepBuilderLoopComponent {
     }
 }
 StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles" }, 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4\">\n    <cqa-segment-control\n      [segments]=\"[\n        { label: 'For', value: 'for' },\n        { label: 'While', value: 'while' }\n      ]\"\n      [value]=\"selectedLoopType\"\n      (valueChange)=\"onLoopTypeChange($event)\">\n    </cqa-segment-control>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action [showHeader]=\"false\" [templates]=\"whileTemplates\" [setTemplateVariables]=\"setWhileTemplateVariables\" [searchPlaceholder]=\"whileSearchPlaceholder\" (templateChanged)=\"selectWhileTemplate($event)\" (createStep)=\"createWhileStep($event)\"></cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\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    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { 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: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate"], outputs: ["templateChanged", "createStep", "cancelled"] }, { 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"] }] });
+StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles" }, 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4\">\n    <cqa-segment-control\n      [segments]=\"[\n        { label: 'For', value: 'for' },\n        { label: 'While', value: 'while' }\n      ]\"\n      [value]=\"selectedLoopType\"\n      (valueChange)=\"onLoopTypeChange($event)\">\n    </cqa-segment-control>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action [showHeader]=\"false\" [templates]=\"whileTemplates\" [setTemplateVariables]=\"setWhileTemplateVariables\" [searchPlaceholder]=\"whileSearchPlaceholder\" (templateChanged)=\"selectWhileTemplate($event)\" (createStep)=\"createWhileStep($event)\"></cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\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    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { 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: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate"], outputs: ["templateChanged", "createStep", "cancelled"] }, { 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: StepBuilderLoopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-loop', 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4\">\n    <cqa-segment-control\n      [segments]=\"[\n        { label: 'For', value: 'for' },\n        { label: 'While', value: 'while' }\n      ]\"\n      [value]=\"selectedLoopType\"\n      (valueChange)=\"onLoopTypeChange($event)\">\n    </cqa-segment-control>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action [showHeader]=\"false\" [templates]=\"whileTemplates\" [setTemplateVariables]=\"setWhileTemplateVariables\" [searchPlaceholder]=\"whileSearchPlaceholder\" (templateChanged)=\"selectWhileTemplate($event)\" (createStep)=\"createWhileStep($event)\"></cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\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    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-loop', 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4\">\n    <cqa-segment-control\n      [segments]=\"[\n        { label: 'For', value: 'for' },\n        { label: 'While', value: 'while' }\n      ]\"\n      [value]=\"selectedLoopType\"\n      (valueChange)=\"onLoopTypeChange($event)\">\n    </cqa-segment-control>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action [showHeader]=\"false\" [templates]=\"whileTemplates\" [setTemplateVariables]=\"setWhileTemplateVariables\" [searchPlaceholder]=\"whileSearchPlaceholder\" (templateChanged)=\"selectWhileTemplate($event)\" (createStep)=\"createWhileStep($event)\"></cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\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    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [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 []; }, propDecorators: { loopType: [{
                 type: Input
             }], selectOptions: [{
@@ -23150,7 +23196,7 @@ class StepBuilderConditionComponent {
         }));
         this.valueConfigCache = {
             key: 'value',
-            placeholder: 'Select Template',
+            placeholder: 'Select Template*',
             multiple: false,
             searchable: true,
             displayLabelAsInnerHtml: true,
@@ -23332,10 +23378,10 @@ class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { 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 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 Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, 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                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\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    <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      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", 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"] }, { 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$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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { 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 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 Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, 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                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\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    <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]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", 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"] }, { 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$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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-condition', 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 Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, 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                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\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    <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      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-condition', 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 Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\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-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, 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                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\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    <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]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { operatorOptions: [{
                 type: Input
             }], conditionTemplates: [{
@@ -24252,10 +24298,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\">\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-max-h-[500px] 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?\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\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\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      (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-[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"] }] });
 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\">\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-max-h-[500px] 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?\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\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\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      (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-[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: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { typeOptions: [{
                 type: Input
             }], environmentOptions: [{
@@ -24418,10 +24464,10 @@ class StepBuilderCustomCodeComponent {
     }
 }
 StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables" }, 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\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\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]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.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]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\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      </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=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\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: 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: 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$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: 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"] }] });
+StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables" }, 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\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\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]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.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]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\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      </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=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\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: 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: 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$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: 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: StepBuilderCustomCodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col 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    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\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]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.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]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\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      </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=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col 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    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\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]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.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]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\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      </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=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { languageOptions: [{
                 type: Input
             }], template: [{
@@ -24844,37 +24890,55 @@ class StepBuilderDocumentComponent {
     onCancel() {
         this.cancelled.emit();
     }
-    onCreateStep() {
-        if (this.selectedTemplateSource === 'upload' && !this.uploadedFile) {
-            return;
+    isFormValid() {
+        // Check if main form is valid (documentType and outputVariable are required)
+        if (!this.documentForm.valid) {
+            return false;
         }
-        if (this.selectedTemplateSource === 'createNew') {
+        // Check template source specific requirements
+        if (this.selectedTemplateSource === 'existing') {
+            const templateId = this.documentForm.get('templateId')?.value;
+            if (!templateId) {
+                return false;
+            }
+        }
+        else if (this.selectedTemplateSource === 'upload') {
+            if (!this.uploadedFile) {
+                return false;
+            }
+        }
+        else if (this.selectedTemplateSource === 'createNew') {
             const name = this.documentForm.get('templateName')?.value?.trim();
             const desc = this.documentForm.get('templateDescription')?.value?.trim();
-            if (!name || !desc)
-                return;
+            if (!name || !desc) {
+                return false;
+            }
         }
-        if (this.documentForm.valid) {
-            const formValue = this.documentForm.value;
-            const stepData = {
-                documentType: formValue.documentType,
-                outputVariable: formValue.outputVariable,
-                templateSource: this.selectedTemplateSource,
-                templateId: formValue.templateId || undefined,
-                ...(this.selectedTemplateSource === 'upload' && this.uploadedFile && { uploadedFile: this.uploadedFile }),
-                ...(this.selectedTemplateSource === 'createNew' && {
-                    templateName: (formValue.templateName ?? '').trim(),
-                    templateDescription: (formValue.templateDescription ?? '').trim()
-                }),
-                mappings: (formValue.mappings || []).map((m) => ({
-                    key: m.key || '',
-                    valueType: m.valueType || 'variable',
-                    value: m.value || '',
-                    enabled: m.enabled ?? false
-                }))
-            };
-            this.createStep.emit(stepData);
+        return true;
+    }
+    onCreateStep() {
+        if (!this.isFormValid()) {
+            return;
         }
+        const formValue = this.documentForm.value;
+        const stepData = {
+            documentType: formValue.documentType,
+            outputVariable: formValue.outputVariable,
+            templateSource: this.selectedTemplateSource,
+            templateId: formValue.templateId || undefined,
+            ...(this.selectedTemplateSource === 'upload' && this.uploadedFile && { uploadedFile: this.uploadedFile }),
+            ...(this.selectedTemplateSource === 'createNew' && {
+                templateName: (formValue.templateName ?? '').trim(),
+                templateDescription: (formValue.templateDescription ?? '').trim()
+            }),
+            mappings: (formValue.mappings || []).map((m) => ({
+                key: m.key || '',
+                valueType: m.valueType || 'variable',
+                value: m.value || '',
+                enabled: m.enabled ?? false
+            }))
+        };
+        this.createStep.emit(stepData);
     }
     onMapperHelpClick(event) {
         if (this.mapperHelpUrl) {