@cqa-lib/cqa-ui 1.1.362 → 1.1.363

package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs

@@ -752,7 +752,7 @@ export class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], 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", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", 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", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", 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\">\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      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\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                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($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              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\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 *ngIf=\"!isCreatingStep\" 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 *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>", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.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: i8.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"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", 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", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", 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\">\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      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\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                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($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              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\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 *ngIf=\"!isCreatingStep\" 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 *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>", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "isDebug", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i7.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: i8.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"] }], directives: [{ type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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' }, changeDetection: ChangeDetectionStrategy.OnPush, 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      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\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                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($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              </cqa-template-variables-form>\n              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\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 *ngIf=\"!isCreatingStep\" 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 *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>", styles: [] }]