@cqa-lib/cqa-ui 1.1.265 → 1.1.266

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

@@ -25293,10 +25293,10 @@ class AdvancedVariablesFormComponent {
     }
 }
 AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", components: [{ type: i4$2.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div *ngIf=\"formArray.length > 1\" class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", components: [{ type: i4$2.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div *ngIf=\"formArray.length > 1\" class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", styles: [] }]
         }], propDecorators: { advancedVariables: [{
                 type: Input
             }], advancedVariableForm: [{
@@ -27417,15 +27417,18 @@ class TemplateVariablesFormComponent {
                     if (this.isElementType(variable) && variable.screenNameId) {
                         const variableGroup = this.getVariableFormGroup(variable.name);
                         if (variableGroup) {
-                            // Initialize screen name form control with screenNameId (since valueBy is 'screenNameId')
+                            // Initialize screen name form control with screenNameId as string (to match option id format), or 'none' by default
                             if (!variableGroup.get('selectedScreenName')) {
-                                variableGroup.addControl('selectedScreenName', new FormControl(variable.screenNameId));
+                                const initialValue = variable.screenNameId ? String(variable.screenNameId) : 'none';
+                                variableGroup.addControl('selectedScreenName', new FormControl(initialValue));
                             }
                             else {
                                 // Update form control value if it doesn't match
                                 const currentValue = (_a = variableGroup.get('selectedScreenName')) === null || _a === void 0 ? void 0 : _a.value;
-                                if (currentValue !== variable.screenNameId) {
-                                    (_b = variableGroup.get('selectedScreenName')) === null || _b === void 0 ? void 0 : _b.setValue(variable.screenNameId, { emitEvent: false });
+                                const expectedValue = variable.screenNameId ? String(variable.screenNameId) : 'none';
+                                const currentValueStr = currentValue != null ? String(currentValue) : null;
+                                if (currentValueStr !== expectedValue && currentValue !== variable.screenNameId) {
+                                    (_b = variableGroup.get('selectedScreenName')) === null || _b === void 0 ? void 0 : _b.setValue(expectedValue, { emitEvent: false });
                                 }
                             }
                             // If we have screenNameId but not selectedScreenName, find it from screenNameOptions
@@ -27456,70 +27459,108 @@ class TemplateVariablesFormComponent {
                 // This ensures that when elements are loaded after screen name selection, the config is recomputed
                 this.elementSelectConfigCache.clear();
                 this.templateVariables.forEach((variable) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     if (this.isElementType(variable)) {
                         const variableGroup = this.getVariableFormGroup(variable.name);
                         if (variableGroup) {
-                            let element = null;
-                            // Priority 1: Find by elementId if available (from setTemplateVariables)
+                            // Only try to find and set element if elementId exists in template data
+                            // If no elementId, don't select anything - use default values
                             if (variable.elementId) {
+                                let element = null;
+                                // Priority 1: Find by elementId (from setTemplateVariables)
                                 element = this.elementOptions.find(el => el.id === variable.elementId);
-                            }
-                            // Priority 2: Find by elementName if available (from setTemplateVariables)
-                            if (!element && variable.elementName) {
-                                element = this.elementOptions.find(el => el.name === variable.elementName);
-                            }
-                            // Priority 3: Find by locatorValue (for backward compatibility)
-                            if (!element && variable.value) {
-                                const elementValue = variable.value;
-                                element = this.elementOptions.find(el => el.locatorValue === elementValue);
-                            }
-                            if (element) {
-                                // Set screen name info from the found element
-                                if (element.screenNameId && element.screenNameObj) {
-                                    variable.selectedScreenName = element.screenNameObj.name;
-                                    variable.screenNameId = element.screenNameId;
-                                    // Set form controls
-                                    // Since valueBy is 'screenNameId', we need to store the screenNameId (number) in the form control
-                                    if (!variableGroup.get('selectedScreenName')) {
-                                        variableGroup.addControl('selectedScreenName', new FormControl(element.screenNameId));
+                                // Priority 2: Find by elementName if elementId search didn't find it (fallback)
+                                if (!element && variable.elementName) {
+                                    element = this.elementOptions.find(el => el.name === variable.elementName);
+                                }
+                                // Priority 3: Find by locatorValue (for backward compatibility)
+                                if (!element && variable.value) {
+                                    const elementValue = variable.value;
+                                    element = this.elementOptions.find(el => el.locatorValue === elementValue);
+                                }
+                                if (element) {
+                                    // Set screen name info from the found element
+                                    if (element.screenNameId && element.screenNameObj) {
+                                        variable.selectedScreenName = element.screenNameObj.name;
+                                        variable.screenNameId = element.screenNameId;
+                                        // Set form controls
+                                        // Store screenNameId as string to match option id format (for consistency with getScreenNameSelectConfig)
+                                        const screenNameIdString = String(element.screenNameId);
+                                        if (!variableGroup.get('selectedScreenName')) {
+                                            variableGroup.addControl('selectedScreenName', new FormControl(screenNameIdString));
+                                        }
+                                        else {
+                                            // Only update if form control doesn't already have a valid screen name selected
+                                            // This prevents resetting user's selection when elementOptions changes
+                                            const currentValue = (_a = variableGroup.get('selectedScreenName')) === null || _a === void 0 ? void 0 : _a.value;
+                                            const currentValueStr = currentValue != null ? String(currentValue) : null;
+                                            if (currentValueStr !== screenNameIdString && currentValueStr !== 'none') {
+                                                (_b = variableGroup.get('selectedScreenName')) === null || _b === void 0 ? void 0 : _b.setValue(screenNameIdString, { emitEvent: false });
+                                            }
+                                        }
+                                    }
+                                    // Set/update element details from the found element
+                                    variable.elementId = element.id;
+                                    variable.elementLocator = element.locatorValue || '';
+                                    // Only update elementName if it wasn't already set (preserve from setTemplateVariables)
+                                    if (!variable.elementName) {
+                                        variable.elementName = element.name || '';
+                                    }
+                                    // For selector, use elementLocator as value; for others, use elementName
+                                    if (variable.name === 'selector') {
+                                        variable.value = element.locatorValue || element.name || '';
+                                    }
+                                    else if (!variable.value || variable.value === '') {
+                                        variable.value = element.name || element.locatorValue || '';
+                                    }
+                                    // Set element ID form control for the dropdown (key is 'id' in config)
+                                    if (!variableGroup.get('id')) {
+                                        variableGroup.addControl('id', new FormControl(element.id));
                                     }
                                     else {
-                                        (_a = variableGroup.get('selectedScreenName')) === null || _a === void 0 ? void 0 : _a.setValue(element.screenNameId, { emitEvent: false });
+                                        (_c = variableGroup.get('id')) === null || _c === void 0 ? void 0 : _c.setValue(element.id, { emitEvent: false });
+                                    }
+                                    // Update value form control
+                                    if (variableGroup.get('value')) {
+                                        (_d = variableGroup.get('value')) === null || _d === void 0 ? void 0 : _d.setValue(variable.value, { emitEvent: false });
                                     }
                                 }
-                                // Set/update element details from the found element
-                                variable.elementId = element.id;
-                                variable.elementLocator = element.locatorValue || '';
-                                // Only update elementName if it wasn't already set (preserve from setTemplateVariables)
-                                if (!variable.elementName) {
-                                    variable.elementName = element.name || '';
-                                }
-                                // For selector, use elementLocator as value; for others, use elementName
-                                if (variable.name === 'selector') {
-                                    variable.value = element.locatorValue || element.name || '';
+                                else {
+                                    // Element not found in elementOptions yet - might need to fetch
+                                    // Keep elementId and elementName if they exist (from setTemplateVariables)
+                                    // If we have elementId but element isn't found, we might need to fetch elements
+                                    // However, we don't know the screen name yet, so we'll wait for elementOptions to be loaded
+                                    // The initialization will run again when elementOptions changes via ngOnChanges
                                 }
-                                else if (!variable.value || variable.value === '') {
-                                    variable.value = element.name || element.locatorValue || '';
+                            }
+                            else {
+                                // No elementId in template data - clear all element-related fields and set defaults
+                                // But don't override user's screen name selection if they've already selected one
+                                variable.elementId = undefined;
+                                variable.elementLocator = undefined;
+                                variable.elementName = undefined;
+                                // Only clear screenNameId if it wasn't set by user selection
+                                // Check if form control has a valid screen name (not 'none')
+                                const currentScreenNameValue = (_e = variableGroup.get('selectedScreenName')) === null || _e === void 0 ? void 0 : _e.value;
+                                if (!currentScreenNameValue || currentScreenNameValue === 'none' || currentScreenNameValue === null) {
+                                    variable.screenNameId = undefined;
+                                    variable.selectedScreenName = undefined;
+                                    // Set form controls to default values
+                                    // Screen name should be 'none' (Select option)
+                                    if (!variableGroup.get('selectedScreenName')) {
+                                        variableGroup.addControl('selectedScreenName', new FormControl('none'));
+                                    }
+                                    else {
+                                        (_f = variableGroup.get('selectedScreenName')) === null || _f === void 0 ? void 0 : _f.setValue('none', { emitEvent: false });
+                                    }
                                 }
-                                // Set element ID form control for the dropdown (key is 'id' in config)
+                                // Element ID should be null
                                 if (!variableGroup.get('id')) {
-                                    variableGroup.addControl('id', new FormControl(element.id));
+                                    variableGroup.addControl('id', new FormControl(null));
                                 }
                                 else {
-                                    (_b = variableGroup.get('id')) === null || _b === void 0 ? void 0 : _b.setValue(element.id, { emitEvent: false });
+                                    (_g = variableGroup.get('id')) === null || _g === void 0 ? void 0 : _g.setValue(null, { emitEvent: false });
                                 }
-                                // Update value form control
-                                if (variableGroup.get('value')) {
-                                    (_c = variableGroup.get('value')) === null || _c === void 0 ? void 0 : _c.setValue(variable.value, { emitEvent: false });
-                                }
-                            }
-                            else {
-                                // Element not found in elementOptions yet - might need to fetch
-                                // Keep elementId and elementName if they exist (from setTemplateVariables)
-                                // If we have elementId but element isn't found, we might need to fetch elements
-                                // However, we don't know the screen name yet, so we'll wait for elementOptions to be loaded
-                                // The initialization will run again when elementOptions changes via ngOnChanges
                             }
                         }
                     }
@@ -27579,7 +27620,7 @@ class TemplateVariablesFormComponent {
     }
     initializeTestDataVariables() {
         this.templateVariables.forEach((variable, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             if (this.needsDataTypeDropdown(variable)) {
                 const { dataType, rawValue } = this.parseTestDataValue(variable.value || '');
                 // Set properties directly on the variable object
@@ -27738,67 +27779,105 @@ class TemplateVariablesFormComponent {
                     }
                     // For element type, parse the value to extract screen name and element
                     if (this.isElementType(variable)) {
-                        let element = null;
-                        // Priority 1: Find by elementId if available (from setTemplateVariables)
+                        // Only try to find and set element if elementId exists in template data
+                        // If no elementId, don't select anything - use default values
                         if (variable.elementId) {
+                            let element = null;
+                            // Priority 1: Find by elementId (from setTemplateVariables)
                             element = this.elementOptions.find(el => el.id === variable.elementId);
-                        }
-                        // Priority 2: Find by elementName if available (from setTemplateVariables)
-                        if (!element && variable.elementName) {
-                            element = this.elementOptions.find(el => el.name === variable.elementName);
-                        }
-                        // Priority 3: Find by locatorValue (for backward compatibility)
-                        if (!element && variable.value) {
-                            const elementValue = variable.value;
-                            element = this.elementOptions.find(el => el.locatorValue === elementValue);
-                        }
-                        if (element) {
-                            // Set screen name info from the found element
-                            if (element.screenNameId && element.screenNameObj) {
-                                variable.selectedScreenName = element.screenNameObj.name;
-                                variable.screenNameId = element.screenNameId;
-                                // Set form controls
-                                // Since valueBy is 'screenNameId', we need to store the screenNameId (number) in the form control
-                                if (!variableGroup.get('selectedScreenName')) {
-                                    variableGroup.addControl('selectedScreenName', new FormControl(element.screenNameId));
+                            // Priority 2: Find by elementName if elementId search didn't find it (fallback)
+                            if (!element && variable.elementName) {
+                                element = this.elementOptions.find(el => el.name === variable.elementName);
+                            }
+                            // Priority 3: Find by locatorValue (for backward compatibility)
+                            if (!element && variable.value) {
+                                const elementValue = variable.value;
+                                element = this.elementOptions.find(el => el.locatorValue === elementValue);
+                            }
+                            if (element) {
+                                // Set screen name info from the found element
+                                if (element.screenNameId && element.screenNameObj) {
+                                    variable.selectedScreenName = element.screenNameObj.name;
+                                    variable.screenNameId = element.screenNameId;
+                                    // Set form controls
+                                    // Store screenNameId as string to match option id format (for consistency with getScreenNameSelectConfig)
+                                    const screenNameIdString = String(element.screenNameId);
+                                    if (!variableGroup.get('selectedScreenName')) {
+                                        variableGroup.addControl('selectedScreenName', new FormControl(screenNameIdString));
+                                    }
+                                    else {
+                                        // Only update if form control doesn't already have a valid screen name selected
+                                        // This prevents resetting user's selection when elementOptions changes
+                                        const currentValue = (_l = variableGroup.get('selectedScreenName')) === null || _l === void 0 ? void 0 : _l.value;
+                                        const currentValueStr = currentValue != null ? String(currentValue) : null;
+                                        if (currentValueStr !== screenNameIdString && currentValueStr !== 'none') {
+                                            (_m = variableGroup.get('selectedScreenName')) === null || _m === void 0 ? void 0 : _m.setValue(screenNameIdString, { emitEvent: false });
+                                        }
+                                    }
+                                }
+                                // Set/update element details from the found element
+                                variable.elementId = element.id;
+                                variable.elementLocator = element.locatorValue || '';
+                                // Only update elementName if it wasn't already set (preserve from setTemplateVariables)
+                                if (!variable.elementName) {
+                                    variable.elementName = element.name || '';
+                                }
+                                // For selector, use elementLocator as value; for others, use elementName
+                                if (variable.name === 'selector') {
+                                    variable.value = element.locatorValue || element.name || '';
+                                }
+                                else if (!variable.value || variable.value === '') {
+                                    variable.value = element.name || element.locatorValue || '';
+                                }
+                                // Set element ID form control for the dropdown (key is 'id' in config)
+                                if (!variableGroup.get('id')) {
+                                    variableGroup.addControl('id', new FormControl(element.id));
                                 }
                                 else {
-                                    (_l = variableGroup.get('selectedScreenName')) === null || _l === void 0 ? void 0 : _l.setValue(element.screenNameId, { emitEvent: false });
+                                    (_o = variableGroup.get('id')) === null || _o === void 0 ? void 0 : _o.setValue(element.id, { emitEvent: false });
+                                }
+                                // Update value form control
+                                if (variableGroup.get('value')) {
+                                    (_p = variableGroup.get('value')) === null || _p === void 0 ? void 0 : _p.setValue(variable.value, { emitEvent: false });
                                 }
                             }
-                            // Set/update element details from the found element
-                            variable.elementId = element.id;
-                            variable.elementLocator = element.locatorValue || '';
-                            // Only update elementName if it wasn't already set (preserve from setTemplateVariables)
-                            if (!variable.elementName) {
-                                variable.elementName = element.name || '';
-                            }
-                            // For selector, use elementLocator as value; for others, use elementName
-                            if (variable.name === 'selector') {
-                                variable.value = element.locatorValue || element.name || '';
+                            else {
+                                // Element not found in elementOptions yet - might need to fetch
+                                // Keep elementId and elementName if they exist (from setTemplateVariables)
+                                // If we have elementId but element isn't found, we might need to fetch elements
+                                // However, we don't know the screen name yet, so we'll wait for elementOptions to be loaded
+                                // The initialization will run again when elementOptions changes via ngOnChanges
                             }
-                            else if (!variable.value || variable.value === '') {
-                                variable.value = element.name || element.locatorValue || '';
+                        }
+                        else {
+                            // No elementId in template data - clear all element-related fields and set defaults
+                            // But don't override user's screen name selection if they've already selected one
+                            variable.elementId = undefined;
+                            variable.elementLocator = undefined;
+                            variable.elementName = undefined;
+                            // Only clear screenNameId if it wasn't set by user selection
+                            // Check if form control has a valid screen name (not 'none')
+                            const currentScreenNameValue = (_q = variableGroup.get('selectedScreenName')) === null || _q === void 0 ? void 0 : _q.value;
+                            if (!currentScreenNameValue || currentScreenNameValue === 'none' || currentScreenNameValue === null) {
+                                variable.screenNameId = undefined;
+                                variable.selectedScreenName = undefined;
+                                // Set form controls to default values
+                                // Screen name should be 'none' (Select option)
+                                if (!variableGroup.get('selectedScreenName')) {
+                                    variableGroup.addControl('selectedScreenName', new FormControl('none'));
+                                }
+                                else {
+                                    (_r = variableGroup.get('selectedScreenName')) === null || _r === void 0 ? void 0 : _r.setValue('none', { emitEvent: false });
+                                }
                             }
-                            // Set element ID form control for the dropdown (key is 'id' in config)
+                            // Element ID should be null
                             if (!variableGroup.get('id')) {
-                                variableGroup.addControl('id', new FormControl(element.id));
+                                variableGroup.addControl('id', new FormControl(null));
                             }
                             else {
-                                (_m = variableGroup.get('id')) === null || _m === void 0 ? void 0 : _m.setValue(element.id, { emitEvent: false });
-                            }
-                            // Update value form control
-                            if (variableGroup.get('value')) {
-                                (_o = variableGroup.get('value')) === null || _o === void 0 ? void 0 : _o.setValue(variable.value, { emitEvent: false });
+                                (_s = variableGroup.get('id')) === null || _s === void 0 ? void 0 : _s.setValue(null, { emitEvent: false });
                             }
                         }
-                        else {
-                            // Element not found in elementOptions yet - might need to fetch
-                            // Keep elementId and elementName if they exist (from setTemplateVariables)
-                            // If we have elementId but element isn't found, we might need to fetch elements
-                            // However, we don't know the screen name yet, so we'll wait for elementOptions to be loaded
-                            // The initialization will run again when elementOptions changes via ngOnChanges
-                        }
                     }
                 }
             }
@@ -28882,46 +28961,69 @@ class TemplateVariablesFormComponent {
     }
     /**
      * Check if screen name is selected for an element variable
+     * Returns true if either selectedScreenName or screenNameId is set (and not "None")
      */
     hasSelectedScreenName(variable) {
+        // Check if screenNameId exists and is a valid number (not null/undefined)
+        if (variable.screenNameId != null && typeof variable.screenNameId === 'number' && !isNaN(variable.screenNameId)) {
+            return true;
+        }
+        // Fallback: check selectedScreenName
         return !!variable.selectedScreenName;
     }
     /**
      * Get select config for screen name dropdown (first dropdown for element variables)
      */
     getScreenNameSelectConfig(variable, index) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         // Include loading state in cache key to invalidate when loading completes
         const cacheKey = `${variable.name}_screenName_${this.screenNameOptions.length}_${this.isLoadingScreenNames}`;
         if (this.screenNameSelectConfigCache.has(cacheKey)) {
             return this.screenNameSelectConfigCache.get(cacheKey);
         }
-        // Use screenNameOptions from API (not extracted from elementOptions)
-        const optionsArray = this.screenNameOptions.map(screenName => {
-            var _a;
-            return ({
-                id: ((_a = screenName.id) === null || _a === void 0 ? void 0 : _a.toString()) || '',
-                value: screenName.name,
-                name: screenName.name,
-                label: screenName.name,
-                screenNameId: screenName.id
-            });
-        });
+        // Build options: include a "None" option (displayed as "Select") plus screenNameOptions from API
+        const optionsArray = [
+            {
+                id: 'none',
+                value: 'Select',
+                name: 'None',
+                label: 'None'
+            },
+            ...this.screenNameOptions.map(screenName => {
+                var _a;
+                return ({
+                    id: ((_a = screenName.id) === null || _a === void 0 ? void 0 : _a.toString()) || '',
+                    value: screenName.name,
+                    name: screenName.name,
+                    label: screenName.name
+                });
+            })
+        ];
         // Ensure form control exists for screen name selection
-        // Since valueBy is 'screenNameId', we need to store the screenNameId (number) in the form control
+        // The form control value should match the option id (string for "none", string representation of number for real screen names)
         const variableGroup = this.getVariableFormGroup(variable.name);
         if (variableGroup) {
             if (!variableGroup.get('selectedScreenName')) {
-                // Initialize with screenNameId if available, otherwise null
-                const initialValue = variable.screenNameId || null;
+                // Initialize with screenNameId as string (to match option id format), or 'none' by default
+                const initialValue = variable.screenNameId ? String(variable.screenNameId) : 'none';
                 variableGroup.addControl('selectedScreenName', new FormControl(initialValue));
             }
             else {
                 // Update form control value if variable has screenNameId but form control doesn't match
                 if (variable.screenNameId) {
                     const currentValue = (_a = variableGroup.get('selectedScreenName')) === null || _a === void 0 ? void 0 : _a.value;
-                    if (currentValue !== variable.screenNameId) {
-                        (_b = variableGroup.get('selectedScreenName')) === null || _b === void 0 ? void 0 : _b.setValue(variable.screenNameId, { emitEvent: false });
+                    const expectedValue = String(variable.screenNameId);
+                    // Compare as strings to handle both number and string values
+                    const currentValueStr = currentValue != null ? String(currentValue) : null;
+                    if (currentValueStr !== expectedValue) {
+                        (_b = variableGroup.get('selectedScreenName')) === null || _b === void 0 ? void 0 : _b.setValue(expectedValue, { emitEvent: false });
+                    }
+                }
+                else {
+                    // If no screenNameId, ensure form control is 'none' (for "None" selection by default)
+                    const currentValue = (_c = variableGroup.get('selectedScreenName')) === null || _c === void 0 ? void 0 : _c.value;
+                    if (currentValue !== 'none' && currentValue !== null && currentValue !== '') {
+                        (_d = variableGroup.get('selectedScreenName')) === null || _d === void 0 ? void 0 : _d.setValue('none', { emitEvent: false });
                     }
                 }
             }
@@ -28935,43 +29037,93 @@ class TemplateVariablesFormComponent {
             options: optionsArray,
             hasMore: this.hasMoreScreenNames,
             isLoading: this.isLoadingScreenNames,
-            valueBy: 'screenNameId',
             onChange: (value) => {
-                var _a;
-                // Store selected screen name on the variable object
-                // value is the screenNameId (number) since valueBy is 'screenNameId'
-                variable.screenNameId = value;
-                // Find and store screen name name from screenNameOptions
-                const screenNameOption = this.screenNameOptions.find(sn => sn.id === value);
-                if (screenNameOption && screenNameOption.id) {
-                    variable.selectedScreenName = screenNameOption.name;
-                }
-                // Clear the element selection when screen name changes
-                variable.value = '';
-                // Clear element config cache to force refresh
-                // Clear all element configs for this variable since screen name changed
-                const keysToDelete = [];
-                this.elementSelectConfigCache.forEach((_, key) => {
-                    if (key.startsWith(`${variable.name}_element`)) {
-                        keysToDelete.push(key);
-                    }
-                });
-                keysToDelete.forEach(key => this.elementSelectConfigCache.delete(key));
-                // Update form control
-                if (variableGroup) {
-                    if (variableGroup.get('value')) {
-                        (_a = variableGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue('', { emitEvent: false });
+                var _a, _b, _c, _d, _e;
+                // If "None" is selected (value is 'none' string or null), clear screen name and element info
+                if (value == null || value === 'none' || value === '') {
+                    variable.screenNameId = undefined;
+                    variable.selectedScreenName = undefined;
+                    variable.elementId = undefined;
+                    variable.elementLocator = undefined;
+                    variable.elementName = undefined;
+                    variable.value = '';
+                    // Clear element config cache for this variable
+                    const keysToDelete = [];
+                    this.elementSelectConfigCache.forEach((_, key) => {
+                        if (key.startsWith(`${variable.name}_element`)) {
+                            keysToDelete.push(key);
+                        }
+                    });
+                    keysToDelete.forEach(key => this.elementSelectConfigCache.delete(key));
+                    // Update form controls - clear all element-related form controls
+                    // Set selectedScreenName to 'none' to show "None" is selected
+                    if (variableGroup) {
+                        if (variableGroup.get('value')) {
+                            (_a = variableGroup.get('value')) === null || _a === void 0 ? void 0 : _a.setValue('', { emitEvent: false });
+                        }
+                        if (variableGroup.get('selectedScreenName')) {
+                            (_b = variableGroup.get('selectedScreenName')) === null || _b === void 0 ? void 0 : _b.setValue('none', { emitEvent: false });
+                        }
+                        // Clear element ID form control to ensure elementId is cleared
+                        if (variableGroup.get('id')) {
+                            (_c = variableGroup.get('id')) === null || _c === void 0 ? void 0 : _c.setValue(null, { emitEvent: false });
+                        }
                     }
-                    // The form control already has the correct value (screenNameId) from the dropdown
-                    // No need to update it here as it's already set by mat-select
+                    // Mark for check and stop (no element fetch when None)
+                    this.cdr.markForCheck();
+                    return;
                 }
-                // Emit event to fetch elements filtered by selected screen name
-                if (variable.screenNameId) {
+                // value is the option id (string for "none", string representation of number for real screen names)
+                // Convert to number for screenNameId if it's a valid number
+                const screenNameIdNum = typeof value === 'string' && value !== 'none' ? parseInt(value, 10) : (typeof value === 'number' ? value : null);
+                if (screenNameIdNum && !isNaN(screenNameIdNum)) {
+                    // Store selected screen name on the variable object
+                    variable.screenNameId = screenNameIdNum;
+                    // Find and store screen name name from screenNameOptions
+                    const screenNameOption = this.screenNameOptions.find(sn => sn.id === screenNameIdNum);
+                    if (screenNameOption) {
+                        variable.selectedScreenName = screenNameOption.name;
+                    }
+                    else {
+                        // Fallback: if not found, still set the ID but clear the name
+                        variable.selectedScreenName = undefined;
+                    }
+                    // Clear the element selection when screen name changes
+                    variable.elementId = undefined;
+                    variable.elementLocator = undefined;
+                    variable.elementName = undefined;
+                    variable.value = '';
+                    // Clear element config cache to force refresh
+                    // Clear all element configs for this variable since screen name changed
+                    const keysToDelete = [];
+                    this.elementSelectConfigCache.forEach((_, key) => {
+                        if (key.startsWith(`${variable.name}_element`)) {
+                            keysToDelete.push(key);
+                        }
+                    });
+                    keysToDelete.forEach(key => this.elementSelectConfigCache.delete(key));
+                    // Update form control
+                    if (variableGroup) {
+                        if (variableGroup.get('value')) {
+                            (_d = variableGroup.get('value')) === null || _d === void 0 ? void 0 : _d.setValue('', { emitEvent: false });
+                        }
+                        // Ensure form control has the correct value (as string to match option id)
+                        if (variableGroup.get('selectedScreenName')) {
+                            (_e = variableGroup.get('selectedScreenName')) === null || _e === void 0 ? void 0 : _e.setValue(String(screenNameIdNum), { emitEvent: false });
+                        }
+                    }
+                    // Emit event to fetch elements filtered by selected screen name
                     this.searchElementsByScreenName.emit({
                         screenNameId: variable.screenNameId,
                         searchTerm: ''
                     });
                 }
+                else {
+                    // Invalid value - clear everything
+                    variable.screenNameId = undefined;
+                    variable.selectedScreenName = undefined;
+                    variable.value = '';
+                }
                 // Mark for check to update UI first
                 this.cdr.markForCheck();
                 // The element config will be recomputed automatically when elementOptions input changes
@@ -28993,7 +29145,6 @@ class TemplateVariablesFormComponent {
      */
     getElementSelectConfig(variable, index) {
         // Get selected screen name ID
-        console.log('variable', variable);
         const selectedScreenNameId = variable.screenNameId;
         // Include elementOptions length and loading state in cache key to invalidate when elements change
         const cacheKey = `${variable.name}_element_${selectedScreenNameId || ''}_${this.elementOptions.length}_${this.isLoadingElements}`;
@@ -29076,7 +29227,7 @@ class TemplateVariablesFormComponent {
             hasMore: this.hasMoreElements,
             isLoading: this.isLoadingElements,
             onChange: (value) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 // Find the selected element from elementOptions
                 // value is the element ID (since config key is 'id')
                 const selectedElement = this.elementOptions.find(el => el.id === value);
@@ -29086,6 +29237,16 @@ class TemplateVariablesFormComponent {
                     variable.elementId = selectedElement.id;
                     variable.elementLocator = selectedElement.locatorValue || '';
                     variable.elementName = selectedElement.name || '';
+                    // Update screen name from the selected element
+                    // This ensures the screen name dropdown shows the correct selection
+                    if (selectedElement.screenNameId) {
+                        variable.screenNameId = selectedElement.screenNameId;
+                        // Find and store screen name name from screenNameOptions
+                        const screenNameOption = this.screenNameOptions.find(sn => sn.id === selectedElement.screenNameId);
+                        if (screenNameOption) {
+                            variable.selectedScreenName = screenNameOption.name;
+                        }
+                    }
                     // Find and patch the selector variable with dataKey 'not_found'
                     const selectorVariable = this.templateVariables.find(v => v.name === 'selector' && v.dataKey === 'not_found');
                     if (selectorVariable && selectedElement.locatorValue) {
@@ -29105,8 +29266,6 @@ class TemplateVariablesFormComponent {
                     // Fallback: if element not found, just set the value
                     variable.value = value;
                 }
-                // Screen name ID is already stored on variable.selectedScreenNameId
-                // (it was set when screen name was selected)
                 // Update form control in FormArray
                 const variableGroup = this.getVariableFormGroup(variable.name);
                 if (variableGroup) {
@@ -29117,6 +29276,11 @@ class TemplateVariablesFormComponent {
                     if (selectedElement && variableGroup.get('id')) {
                         (_c = variableGroup.get('id')) === null || _c === void 0 ? void 0 : _c.setValue(selectedElement.id, { emitEvent: false });
                     }
+                    // Update screen name form control if element has a screen name
+                    if (selectedElement && selectedElement.screenNameId && variableGroup.get('selectedScreenName')) {
+                        // Set the screen name ID as string to match option id format
+                        (_d = variableGroup.get('selectedScreenName')) === null || _d === void 0 ? void 0 : _d.setValue(String(selectedElement.screenNameId), { emitEvent: false });
+                    }
                 }
                 // Mark for check and emit
                 this.cdr.markForCheck();
@@ -29142,10 +29306,10 @@ class TemplateVariablesFormComponent {
     }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", 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", isEditInDepth: "isEditInDepth", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", 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", isEditInDepth: "isEditInDepth", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{