@cqa-lib/cqa-ui 1.1.501 → 1.1.502

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

@@ -26567,6 +26567,11 @@ class TestCaseLoopStepComponent {
         this.isEditing = false;
     }
     onEditInDepth(templateOverride) {
+        // When switching to edit-in-depth modal, close inline edit mode first.
+        // This ensures modal Cancel returns the row to normal (non-editing) state.
+        if (this.isEditing) {
+            this.onEditCancel();
+        }
         this.moreOptions.emit();
         // Use renderer's index when available (correct for structural steps). stepNumber "10.3" parses to 10 - wrong.
         const index = typeof this.index === 'number'
@@ -37574,10 +37579,10 @@ class StepBuilderLoopComponent {
     }
 }
 StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [{ token: i1$1.FormBuilder }], 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", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, 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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\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\n    <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n         class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n      Data Profile is disabled because it is set at the test case level configuration.\n    </div>\n\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      [hasTestDataProfile]=\"hasTestDataProfile\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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 *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], 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", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, 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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\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\n    <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n         class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n      Data Profile is disabled because it is set at the test case level configuration.\n    </div>\n\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [isCreatingStep]=\"isCreatingStep\"\n      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      [hasTestDataProfile]=\"hasTestDataProfile\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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 *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], 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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\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\n    <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n         class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n      Data Profile is disabled because it is set at the test case level configuration.\n    </div>\n\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      [hasTestDataProfile]=\"hasTestDataProfile\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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 *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\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\n    <div *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n         class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n      Data Profile is disabled because it is set at the test case level configuration.\n    </div>\n\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action\n      [showHeader]=\"false\"\n      [isCreatingStep]=\"isCreatingStep\"\n      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      [hasTestDataProfile]=\"hasTestDataProfile\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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 *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { loopType: [{
                 type: Input
             }], selectOptions: [{