@cqa-lib/cqa-ui 1.1.264 → 1.1.266

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

@@ -25345,10 +25345,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: [{
@@ -27442,15 +27442,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 = variableGroup.get('selectedScreenName')?.value;
-                                if (currentValue !== variable.screenNameId) {
-                                    variableGroup.get('selectedScreenName')?.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) {
+                                    variableGroup.get('selectedScreenName')?.setValue(expectedValue, { emitEvent: false });
                                 }
                             }
                             // If we have screenNameId but not selectedScreenName, find it from screenNameOptions
@@ -27484,67 +27487,105 @@ class TemplateVariablesFormComponent {
                     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 = variableGroup.get('selectedScreenName')?.value;
+                                            const currentValueStr = currentValue != null ? String(currentValue) : null;
+                                            if (currentValueStr !== screenNameIdString && currentValueStr !== 'none') {
+                                                variableGroup.get('selectedScreenName')?.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 {
-                                        variableGroup.get('selectedScreenName')?.setValue(element.screenNameId, { emitEvent: false });
+                                        variableGroup.get('id')?.setValue(element.id, { emitEvent: false });
+                                    }
+                                    // Update value form control
+                                    if (variableGroup.get('value')) {
+                                        variableGroup.get('value')?.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 = variableGroup.get('selectedScreenName')?.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 {
+                                        variableGroup.get('selectedScreenName')?.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 {
-                                    variableGroup.get('id')?.setValue(element.id, { emitEvent: false });
-                                }
-                                // Update value form control
-                                if (variableGroup.get('value')) {
-                                    variableGroup.get('value')?.setValue(variable.value, { emitEvent: false });
+                                    variableGroup.get('id')?.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
-                            }
                         }
                     }
                 });
@@ -27761,66 +27802,104 @@ 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 = variableGroup.get('selectedScreenName')?.value;
+                                        const currentValueStr = currentValue != null ? String(currentValue) : null;
+                                        if (currentValueStr !== screenNameIdString && currentValueStr !== 'none') {
+                                            variableGroup.get('selectedScreenName')?.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 {
-                                    variableGroup.get('selectedScreenName')?.setValue(element.screenNameId, { emitEvent: false });
+                                    variableGroup.get('id')?.setValue(element.id, { emitEvent: false });
+                                }
+                                // Update value form control
+                                if (variableGroup.get('value')) {
+                                    variableGroup.get('value')?.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 = variableGroup.get('selectedScreenName')?.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 {
+                                    variableGroup.get('selectedScreenName')?.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 {
-                                variableGroup.get('id')?.setValue(element.id, { emitEvent: false });
+                                variableGroup.get('id')?.setValue(null, { emitEvent: false });
                             }
-                            // Update value form control
-                            if (variableGroup.get('value')) {
-                                variableGroup.get('value')?.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
                         }
                     }
                 }
@@ -28888,8 +28967,14 @@ 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;
     }
     /**
@@ -28901,29 +28986,46 @@ class TemplateVariablesFormComponent {
         if (this.screenNameSelectConfigCache.has(cacheKey)) {
             return this.screenNameSelectConfigCache.get(cacheKey);
         }
-        // Use screenNameOptions from API (not extracted from elementOptions)
-        const optionsArray = this.screenNameOptions.map(screenName => ({
-            id: screenName.id?.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 => ({
+                id: screenName.id?.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 = variableGroup.get('selectedScreenName')?.value;
-                    if (currentValue !== variable.screenNameId) {
-                        variableGroup.get('selectedScreenName')?.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) {
+                        variableGroup.get('selectedScreenName')?.setValue(expectedValue, { emitEvent: false });
+                    }
+                }
+                else {
+                    // If no screenNameId, ensure form control is 'none' (for "None" selection by default)
+                    const currentValue = variableGroup.get('selectedScreenName')?.value;
+                    if (currentValue !== 'none' && currentValue !== null && currentValue !== '') {
+                        variableGroup.get('selectedScreenName')?.setValue('none', { emitEvent: false });
                     }
                 }
             }
@@ -28937,42 +29039,92 @@ class TemplateVariablesFormComponent {
             options: optionsArray,
             hasMore: this.hasMoreScreenNames,
             isLoading: this.isLoadingScreenNames,
-            valueBy: 'screenNameId',
             onChange: (value) => {
-                // 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')) {
-                        variableGroup.get('value')?.setValue('', { emitEvent: false });
+                // 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')) {
+                            variableGroup.get('value')?.setValue('', { emitEvent: false });
+                        }
+                        if (variableGroup.get('selectedScreenName')) {
+                            variableGroup.get('selectedScreenName')?.setValue('none', { emitEvent: false });
+                        }
+                        // Clear element ID form control to ensure elementId is cleared
+                        if (variableGroup.get('id')) {
+                            variableGroup.get('id')?.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')) {
+                            variableGroup.get('value')?.setValue('', { emitEvent: false });
+                        }
+                        // Ensure form control has the correct value (as string to match option id)
+                        if (variableGroup.get('selectedScreenName')) {
+                            variableGroup.get('selectedScreenName')?.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
@@ -28994,7 +29146,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}`;
@@ -29085,6 +29236,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) {
@@ -29104,8 +29265,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) {
@@ -29116,6 +29275,11 @@ class TemplateVariablesFormComponent {
                     if (selectedElement && variableGroup.get('id')) {
                         variableGroup.get('id')?.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
+                        variableGroup.get('selectedScreenName')?.setValue(String(selectedElement.screenNameId), { emitEvent: false });
+                    }
                 }
                 // Mark for check and emit
                 this.cdr.markForCheck();
@@ -29141,10 +29305,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: [{
@@ -33504,96 +33668,368 @@ const DETAIL_SIDE_PANEL_SCROLL_STYLES = `
 }
 `;
 
-/** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
-const TEST_CASE_DETAILS_SELECT_KEYS = {
-    status: 'status',
-    priority: 'priority',
-    type: 'type',
-    labels: 'labels',
-    prerequisiteCases: 'prerequisiteCases',
-    testDataProfile: 'testDataProfile',
-    testDataSet: 'testDataSet',
-    videoRecording: 'videoRecording',
-    enableAiSmartness: 'enableAiSmartness',
-    defaultAiAction: 'defaultAiAction',
-    knowledgeBaseDefaultTestCase: 'knowledgeBaseDefaultTestCase',
-    useAiMetadata: 'useAiMetadata',
-    defaultBrowser: 'defaultBrowser',
-    defaultViewport: 'defaultViewport',
-    deviceType: 'deviceType',
-    deviceOS: 'deviceOS',
-};
-const FREQUENTLY_USED_LABELS = [
-    'Case',
-    'Critical',
-    'PO',
-    'Upload',
-    'Validation',
-    'Review',
-    'Edge-cases',
-    'Security',
-    'Integration',
-    'Smoke',
-];
-class TestCaseDetailsEditComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.descriptionTitle = 'Description';
-        this.descriptionContent = '';
-        /** When true, description uses Trix rich text editor (Bold, Italic, etc.). Host app must load Trix. */
-        this.enableMarkdown = false;
-        this.metadataItems = [];
-        this.labels = [];
-        this.configTitle = 'Configuration';
-        this.configSections = [];
-        this.configSectionsRow2 = [];
-        /** Optional list of prerequisite test case options for the multi-select. If not provided, uses default sample options. */
-        this.prerequisiteCaseOptions = [];
-        /** Platform: 'web' shows Default Browser + Viewport; 'mobile' shows Device Type + OS. Defaults to 'web'. */
-        this.platform = 'web';
-        /** When true, hides Priority, Type, and Test Data Set fields (step groups don't have these). Defaults to false. */
-        this.isStepGroup = false;
-        /**
-         * Override config per select key. Use for:
-         * - API-driven options: pass options array (update when API returns)
-         * - Server-side search: serverSearch: true, onSearch in override or listen to selectSearch
-         * - Infinite scroll: hasMore: true, onLoadMore in override or listen to selectLoadMore
-         * - Initial fetch on open: initialFetchOnOpen: true
-         */
-        this.selectConfigOverrides = {};
-        this.save = new EventEmitter();
-        this.cancel = new EventEmitter();
-        /** Emitted when user searches in a select (serverSearch mode). Call API and update options via selectConfigOverrides. */
-        this.selectSearch = new EventEmitter();
-        /** Emitted when user scrolls to load more. Call API, append to options via selectConfigOverrides. */
-        this.selectLoadMore = new EventEmitter();
-        /** Emitted when a select panel is opened. Use to call API for initial load (e.g. when initialFetchOnOpen). */
-        this.selectOpened = new EventEmitter();
-        /** Emitted when selection changes in any select. */
-        this.selectionChange = new EventEmitter();
-        /** Emitted when user adds a new custom label via the "New" option. */
-        this.labelAdded = new EventEmitter();
-        /** Form state */
-        this.editDescription = '';
-        this.editStatus = '';
-        this.editPriority = '';
-        this.editLabels = [];
-        this.testCaseTimeout = '';
-        this.waitTimeoutLocators = '';
-        this.autoWaitEnabled = false;
-        this.retryFailedSteps = '';
-        this.configExpanded = true;
-        this.executionExpanded = true;
-        this.aiConfigExpanded = true;
-        this.waitsRetriesExpanded = true;
-        this.deviceExpanded = true;
-        this.keyFlagsExpanded = true;
-        this.mobileTestingEnabled = false;
-        this.extensionUseEnabled = false;
-        this.dataDrivenEnabled = false;
-        this.frequentlyUsedLabels = FREQUENTLY_USED_LABELS;
-        /** FormGroup for cqa-dynamic-select bindings */
-        this.editForm = new FormGroup({
+class DetailSidePanelComponent {
+    constructor() {
+        /** Tabs - each tab has a side panel icon button; tabs and buttons are 1:1. Host defines tabs and content. */
+        this.tabs = [
+            { label: 'Test Case', value: 'test-case', icon: 'description' },
+            { label: 'Data Library', value: 'data-library', icon: 'folder' },
+            { label: 'Variables', value: 'variables', icon: 'code' },
+        ];
+        /** Currently active tab value */
+        this.activeTab = 'test-case';
+        /** Whether to show the close button in the side menu */
+        this.showCloseButton = false;
+        /** Whether the panel is expanded (affects expand button icon and panel width) */
+        this.expanded = true;
+        /** Panel width when expanded (e.g. '480px', '25%') */
+        this.expandedWidth = '380px';
+        /** Panel width when collapsed (e.g. '56px' - fits icon bar + back button) */
+        this.collapsedWidth = '56px';
+        this.hostOverflow = 'hidden';
+        /** Tooltip for expand button when panel is collapsed */
+        this.expandTooltip = 'Expand';
+        /** Tooltip for expand button when panel is expanded (collapse) */
+        this.collapseTooltip = 'Collapse';
+        /** Tooltip for close button */
+        this.closeTooltip = 'Close';
+        this.back = new EventEmitter();
+        this.tabChange = new EventEmitter();
+        this.expandToggle = new EventEmitter();
+        this.close = new EventEmitter();
+    }
+    get hostWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    get hostMinWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    get hostMaxWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    trackByTabValue(_i, tab) {
+        return tab.value;
+    }
+    onBack() {
+        this.back.emit();
+    }
+    onTabClick(tab) {
+        if (!this.expanded) {
+            this.expandToggle.emit();
+        }
+        if (tab.value !== this.activeTab) {
+            this.tabChange.emit(tab.value);
+        }
+    }
+    onExpandToggle() {
+        this.expandToggle.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+}
+DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n      <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n      <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n        <button\n          *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === tab.value\"\n          [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n          [class.cqa-text-white]=\"activeTab === tab.value\"\n          [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n          class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onTabClick(tab)\">\n          {{ tab.label }}\n        </button>\n      </div>\n\n      <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n      <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: DetailSidePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-detail-side-panel', styles: [DETAIL_SIDE_PANEL_SCROLL_STYLES], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
+                        style: 'transition: width 0.3s ease-in-out',
+                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n      <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n      <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n        <button\n          *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === tab.value\"\n          [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n          [class.cqa-text-white]=\"activeTab === tab.value\"\n          [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n          class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onTabClick(tab)\">\n          {{ tab.label }}\n        </button>\n      </div>\n\n      <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n      <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedWidth: [{
+                type: Input
+            }], collapsedWidth: [{
+                type: Input
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostMinWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], hostMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], hostOverflow: [{
+                type: HostBinding,
+                args: ['style.overflow']
+            }], expandTooltip: [{
+                type: Input
+            }], collapseTooltip: [{
+                type: Input
+            }], closeTooltip: [{
+                type: Input
+            }], back: [{
+                type: Output
+            }], tabChange: [{
+                type: Output
+            }], expandToggle: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+class DetailDrawerTabContentDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+DetailDrawerTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DetailDrawerTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerTabContentDirective, selector: "[cqaTabContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cqaTabContent]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class DetailDrawerTabComponent {
+    constructor() {
+        /** Tab label (shown in tooltip on icon button) */
+        this.label = '';
+        /** Tab value (unique identifier) */
+        this.value = '';
+        /** Material icon name for the tab button */
+        this.icon = 'folder';
+    }
+    get contentTemplate() {
+        return this.contentDirective?.templateRef ?? null;
+    }
+}
+DetailDrawerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DetailDrawerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerTabComponent, selector: "cqa-detail-drawer-tab", inputs: { label: "label", value: "value", icon: "icon" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "contentDirective", first: true, predicate: DetailDrawerTabContentDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cqa-detail-drawer-tab',
+                    template: '',
+                    host: {
+                        style: 'display: contents',
+                    },
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], contentDirective: [{
+                type: ContentChild,
+                args: [DetailDrawerTabContentDirective]
+            }] } });
+
+class DetailDrawerComponent {
+    constructor() {
+        /** Currently active tab value */
+        this.activeTab = '';
+        /** Whether to show the close button */
+        this.showCloseButton = true;
+        /** Whether the drawer is expanded */
+        this.expanded = true;
+        /** Panel width when expanded */
+        this.expandedWidth = '280px';
+        /** Maximum width when expanded (e.g. '600px', '30vw'). Default: 30% of viewport */
+        this.maxExpandedWidth = '30vw';
+        /** Panel width when collapsed */
+        this.collapsedWidth = '56px';
+        this.expandTooltip = 'Expand';
+        this.collapseTooltip = 'Collapse';
+        this.closeTooltip = 'Close';
+        this.activeTabChange = new EventEmitter();
+        this.expandToggle = new EventEmitter();
+        this.close = new EventEmitter();
+    }
+    get hostWidth() {
+        return this.expanded ? this.expandedWidth : this.collapsedWidth;
+    }
+    get hostMinWidth() {
+        return this.expanded && this.minExpandedWidth ? this.minExpandedWidth : null;
+    }
+    get hostMaxWidth() {
+        return this.expanded ? this.maxExpandedWidth : null;
+    }
+    ngAfterContentInit() {
+        this.ensureActiveTab();
+    }
+    ngAfterContentChecked() {
+        this.ensureActiveTab();
+    }
+    ensureActiveTab() {
+        const tabs = this.tabComponents?.toArray() ?? [];
+        if (tabs.length > 0 && !this.activeTab) {
+            this.activeTab = tabs[0].value;
+            this.activeTabChange.emit(this.activeTab);
+        }
+    }
+    onTabClick(tab) {
+        // If drawer is collapsed, open it (but never close on tab click)
+        if (!this.expanded) {
+            this.expandToggle.emit();
+        }
+        // Select the tab
+        if (tab.value !== this.activeTab) {
+            this.activeTab = tab.value;
+            this.activeTabChange.emit(this.activeTab);
+        }
+    }
+    onExpandToggle() {
+        this.expandToggle.emit();
+    }
+    onClose() {
+        this.close.emit();
+    }
+    trackByValue(_i, tab) {
+        return tab.value;
+    }
+    isTabActive(tab) {
+        return tab.value === this.activeTab;
+    }
+}
+DetailDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DetailDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerComponent, selector: "cqa-detail-drawer", inputs: { activeTab: "activeTab", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", minExpandedWidth: "minExpandedWidth", maxExpandedWidth: "maxExpandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { activeTabChange: "activeTabChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, queries: [{ propertyName: "tabComponents", predicate: DetailDrawerTabComponent }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\">\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon bar: one button per tab -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-min-h-0 cqa-items-center cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons: equally distributed in remaining space -->\n      <div class=\"cqa-flex cqa-flex-1 cqa-flex-col cqa-justify-evenly cqa-items-center cqa-w-full\">\n        <button\n          *ngFor=\"let tab of tabComponents; trackBy: trackByValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [matTooltip]=\"tab.label\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n          [ngClass]=\"{\n            'cqa-bg-[#3F43EE] cqa-text-white': isTabActive(tab),\n            'cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155]': !isTabActive(tab)\n          }\"\n          (click)=\"onTabClick(tab)\">\n          <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon }}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Content area: show only the active tab's content -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-overflow-y-auto cqa-p-4\">\n        <ng-container *ngFor=\"let tab of tabComponents\">\n          <ng-container *ngIf=\"tab.value === activeTab && tab.contentTemplate\" [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-detail-drawer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
+                        style: 'transition: width 0.3s ease-in-out',
+                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\">\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon bar: one button per tab -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-min-h-0 cqa-items-center cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons: equally distributed in remaining space -->\n      <div class=\"cqa-flex cqa-flex-1 cqa-flex-col cqa-justify-evenly cqa-items-center cqa-w-full\">\n        <button\n          *ngFor=\"let tab of tabComponents; trackBy: trackByValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [matTooltip]=\"tab.label\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n          [ngClass]=\"{\n            'cqa-bg-[#3F43EE] cqa-text-white': isTabActive(tab),\n            'cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155]': !isTabActive(tab)\n          }\"\n          (click)=\"onTabClick(tab)\">\n          <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon }}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Content area: show only the active tab's content -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-overflow-y-auto cqa-p-4\">\n        <ng-container *ngFor=\"let tab of tabComponents\">\n          <ng-container *ngIf=\"tab.value === activeTab && tab.contentTemplate\" [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], propDecorators: { tabComponents: [{
+                type: ContentChildren,
+                args: [DetailDrawerTabComponent]
+            }], activeTab: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedWidth: [{
+                type: Input
+            }], minExpandedWidth: [{
+                type: Input
+            }], maxExpandedWidth: [{
+                type: Input
+            }], collapsedWidth: [{
+                type: Input
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostMinWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], hostMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], expandTooltip: [{
+                type: Input
+            }], collapseTooltip: [{
+                type: Input
+            }], closeTooltip: [{
+                type: Input
+            }], activeTabChange: [{
+                type: Output
+            }], expandToggle: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }] } });
+
+/** Keys for each dynamic select in test-case-details-edit. Use these with selectConfigOverrides. */
+const TEST_CASE_DETAILS_SELECT_KEYS = {
+    status: 'status',
+    priority: 'priority',
+    type: 'type',
+    labels: 'labels',
+    prerequisiteCases: 'prerequisiteCases',
+    testDataProfile: 'testDataProfile',
+    testDataSet: 'testDataSet',
+    videoRecording: 'videoRecording',
+    enableAiSmartness: 'enableAiSmartness',
+    defaultAiAction: 'defaultAiAction',
+    knowledgeBaseDefaultTestCase: 'knowledgeBaseDefaultTestCase',
+    useAiMetadata: 'useAiMetadata',
+    defaultBrowser: 'defaultBrowser',
+    defaultViewport: 'defaultViewport',
+    deviceType: 'deviceType',
+    deviceOS: 'deviceOS',
+};
+const FREQUENTLY_USED_LABELS = [
+    'Case',
+    'Critical',
+    'PO',
+    'Upload',
+    'Validation',
+    'Review',
+    'Edge-cases',
+    'Security',
+    'Integration',
+    'Smoke',
+];
+class TestCaseDetailsEditComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.descriptionTitle = 'Description';
+        this.descriptionContent = '';
+        /** When true, description uses Trix rich text editor (Bold, Italic, etc.). Host app must load Trix. */
+        this.enableMarkdown = false;
+        this.metadataItems = [];
+        this.labels = [];
+        this.configTitle = 'Configuration';
+        this.configSections = [];
+        this.configSectionsRow2 = [];
+        /** Optional list of prerequisite test case options for the multi-select. If not provided, uses default sample options. */
+        this.prerequisiteCaseOptions = [];
+        /** Platform: 'web' shows Default Browser + Viewport; 'mobile' shows Device Type + OS. Defaults to 'web'. */
+        this.platform = 'web';
+        /** When true, hides Priority, Type, and Test Data Set fields (step groups don't have these). Defaults to false. */
+        this.isStepGroup = false;
+        /**
+         * Override config per select key. Use for:
+         * - API-driven options: pass options array (update when API returns)
+         * - Server-side search: serverSearch: true, onSearch in override or listen to selectSearch
+         * - Infinite scroll: hasMore: true, onLoadMore in override or listen to selectLoadMore
+         * - Initial fetch on open: initialFetchOnOpen: true
+         */
+        this.selectConfigOverrides = {};
+        this.save = new EventEmitter();
+        this.cancel = new EventEmitter();
+        /** Emitted when user searches in a select (serverSearch mode). Call API and update options via selectConfigOverrides. */
+        this.selectSearch = new EventEmitter();
+        /** Emitted when user scrolls to load more. Call API, append to options via selectConfigOverrides. */
+        this.selectLoadMore = new EventEmitter();
+        /** Emitted when a select panel is opened. Use to call API for initial load (e.g. when initialFetchOnOpen). */
+        this.selectOpened = new EventEmitter();
+        /** Emitted when selection changes in any select. */
+        this.selectionChange = new EventEmitter();
+        /** Emitted when user adds a new custom label via the "New" option. */
+        this.labelAdded = new EventEmitter();
+        /** Form state */
+        this.editDescription = '';
+        this.editStatus = '';
+        this.editPriority = '';
+        this.editLabels = [];
+        this.testCaseTimeout = '';
+        this.waitTimeoutLocators = '';
+        this.autoWaitEnabled = false;
+        this.retryFailedSteps = '';
+        this.configExpanded = true;
+        this.executionExpanded = true;
+        this.aiConfigExpanded = true;
+        this.waitsRetriesExpanded = true;
+        this.deviceExpanded = true;
+        this.keyFlagsExpanded = true;
+        this.mobileTestingEnabled = false;
+        this.extensionUseEnabled = false;
+        this.dataDrivenEnabled = false;
+        this.frequentlyUsedLabels = FREQUENTLY_USED_LABELS;
+        /** FormGroup for cqa-dynamic-select bindings */
+        this.editForm = new FormGroup({
             status: new FormControl(''),
             priority: new FormControl(''),
             type: new FormControl(''),
@@ -34424,234 +34860,43 @@ class TestCaseDetailsComponent {
         return this.editing !== undefined ? this.editing : this._editing;
     }
     ngOnInit() {
-        if (this.startInEditMode) {
-            this._editing = true;
-        }
-    }
-    /** Filtered metadata items - excludes Priority and Type for step groups */
-    get filteredMetadataItems() {
-        if (!this.isStepGroup) {
-            return this.metadataItems;
-        }
-        return this.metadataItems.filter((item) => !this.stepGroupExcludedMetadataLabels.includes(item.label?.toLowerCase() ?? ''));
-    }
-    onEditClick() {
-        if (this.editing === undefined) {
-            this._editing = true;
-            this.cdr.detectChanges();
-        }
-        this.editDescription.emit();
-    }
-    onSaveChanges(data) {
-        if (this.editing === undefined) {
-            this._editing = false;
-        }
-        this.cdr.detectChanges();
-        this.saveChanges.emit(data);
-    }
-    onCancelEdit() {
-        this.cancel.emit();
-        if (this.editing === undefined) {
-            this._editing = false;
-        }
-        this.cdr.detectChanges();
-    }
-    trackByConfigTitle(_i, section) {
-        return section.title;
-    }
-    trackByMetadataLabel(_i, item) {
-        return item.label;
-    }
-    onMetadataLinkClick(item) {
-        if (item.link) {
-            this.metadataLinkClick.emit(item);
-        }
-    }
-    getStatusDotClass(item) {
-        if (!item.statusColor)
-            return '';
-        switch (item.statusColor) {
-            case 'yellow':
-                return 'cqa-bg-[#EAB308]';
-            case 'red':
-                return 'cqa-bg-[#DC2626]';
-            case 'green':
-                return 'cqa-bg-[#16A34A]';
-            case 'gray':
-            default:
-                return 'cqa-bg-[#94A3B8]';
-        }
-    }
-    /** Text color for metadata value (e.g. red for critical priority) */
-    getValueTextClass(item) {
-        if (item.statusColor === 'red') {
-            return 'cqa-text-[#DC2626]';
-        }
-        return 'cqa-text-[#111827]';
-    }
-}
-TestCaseDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n          Edit\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: ["icon", "title", "data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n          Edit\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { editing: [{
-                type: Input
-            }], startInEditMode: [{
-                type: Input
-            }], descriptionTitle: [{
-                type: Input
-            }], descriptionContent: [{
-                type: Input
-            }], enableMarkdown: [{
-                type: Input
-            }], showEditButton: [{
-                type: Input
-            }], metadataItems: [{
-                type: Input
-            }], labels: [{
-                type: Input
-            }], configTitle: [{
-                type: Input
-            }], configSections: [{
-                type: Input
-            }], configSectionsRow2: [{
-                type: Input
-            }], platform: [{
-                type: Input
-            }], isStepGroup: [{
-                type: Input
-            }], selectConfigOverrides: [{
-                type: Input
-            }], editDescription: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], saveChanges: [{
-                type: Output
-            }], metadataLinkClick: [{
-                type: Output
-            }], selectSearch: [{
-                type: Output
-            }], selectLoadMore: [{
-                type: Output
-            }], selectOpened: [{
-                type: Output
-            }], selectionChange: [{
-                type: Output
-            }], labelAdded: [{
-                type: Output
-            }] } });
-
-class DetailSidePanelComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        /** Tabs - each tab has a side panel icon button; tabs and buttons are 1:1 */
-        this.tabs = [
-            { label: 'Test Case', value: 'test-case', icon: 'description' },
-            { label: 'Data Library', value: 'data-library', icon: 'folder' },
-            { label: 'Variables', value: 'variables', icon: 'code' },
-        ];
-        /** Currently active tab value */
-        this.activeTab = 'test-case';
-        /** Description section title */
-        this.descriptionTitle = 'Description';
-        /** Description text content */
-        this.descriptionContent = '';
-        /** When true, description uses rich text editor and renders as HTML. Host app must load Trix. */
-        this.enableMarkdown = false;
-        /** Whether to show the Edit button in the Description header */
-        this.showEditButton = true;
-        /** Metadata items (Created on, Status, Priority, etc.) */
-        this.metadataItems = [];
-        /** Labels/tags (e.g. Automation, API, SDK, UI/UX) */
-        this.labels = [];
-        /** Configuration sections - full width (e.g. Execution, AI Configuration) */
-        this.configSections = [];
-        /** Optional config sections displayed in a 2-column row (e.g. Waits & Retries, Device) */
-        this.configSectionsRow2 = [];
-        /** Platform: 'web' or 'mobile'. Defaults to 'web'. Used for Device Settings. */
-        this.platform = 'web';
-        /** When true, hides Priority, Type, Test Data Set, and Prerequisite Case (step groups don't have these). Defaults to false. */
-        this.isStepGroup = false;
-        /** Configuration section title */
-        this.configTitle = 'Configuration';
-        /** Whether to show the close button in the side menu */
-        this.showCloseButton = false;
-        /** When true, test case details start in edit mode (useful for Storybook). */
-        this.startInEditMode = false;
-        /** Override config per select for API-driven options, server search, load more. */
-        this.selectConfigOverrides = {};
-        /** Whether the panel is expanded (affects expand button icon and panel width) */
-        this.expanded = true;
-        /** Panel width when expanded (e.g. '480px', '25%') */
-        this.expandedWidth = '380px';
-        /** Panel width when collapsed (e.g. '56px' - fits icon bar + back button) */
-        this.collapsedWidth = '56px';
-        this.hostOverflow = 'hidden';
-        /** Tooltip for expand button when panel is collapsed */
-        this.expandTooltip = 'Expand';
-        /** Tooltip for expand button when panel is expanded (collapse) */
-        this.collapseTooltip = 'Collapse';
-        /** Tooltip for close button */
-        this.closeTooltip = 'Close';
-        this.back = new EventEmitter();
-        this.tabChange = new EventEmitter();
-        this.editDescription = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.saveChanges = new EventEmitter();
-        this.metadataLinkClick = new EventEmitter();
-        this.selectSearch = new EventEmitter();
-        this.selectLoadMore = new EventEmitter();
-        this.selectOpened = new EventEmitter();
-        this.selectionChange = new EventEmitter();
-        this.labelAdded = new EventEmitter();
-        this.expandToggle = new EventEmitter();
-        this.close = new EventEmitter();
-    }
-    get hostWidth() {
-        return this.expanded ? this.expandedWidth : this.collapsedWidth;
-    }
-    get hostMinWidth() {
-        return this.expanded ? this.expandedWidth : this.collapsedWidth;
-    }
-    get hostMaxWidth() {
-        return this.expanded ? this.expandedWidth : this.collapsedWidth;
-    }
-    trackByTabValue(_i, tab) {
-        return tab.value;
-    }
-    trackByMetadataLabel(_i, item) {
-        return item.label;
-    }
-    trackByConfigTitle(_i, section) {
-        return section.title;
-    }
-    onBack() {
-        this.back.emit();
-    }
-    onTabClick(tab) {
-        if (!this.expanded) {
-            this.expandToggle.emit();
+        if (this.startInEditMode) {
+            this._editing = true;
         }
-        if (tab.value !== this.activeTab) {
-            this.tabChange.emit(tab.value);
+    }
+    /** Filtered metadata items - excludes Priority and Type for step groups */
+    get filteredMetadataItems() {
+        if (!this.isStepGroup) {
+            return this.metadataItems;
         }
+        return this.metadataItems.filter((item) => !this.stepGroupExcludedMetadataLabels.includes(item.label?.toLowerCase() ?? ''));
     }
-    onEditDescription() {
+    onEditClick() {
+        if (this.editing === undefined) {
+            this._editing = true;
+            this.cdr.detectChanges();
+        }
         this.editDescription.emit();
     }
     onSaveChanges(data) {
+        if (this.editing === undefined) {
+            this._editing = false;
+        }
+        this.cdr.detectChanges();
         this.saveChanges.emit(data);
     }
-    onCancel() {
+    onCancelEdit() {
         this.cancel.emit();
+        if (this.editing === undefined) {
+            this._editing = false;
+        }
+        this.cdr.detectChanges();
     }
-    onExpandToggle() {
-        this.expandToggle.emit();
+    trackByConfigTitle(_i, section) {
+        return section.title;
     }
-    onClose() {
-        this.close.emit();
+    trackByMetadataLabel(_i, item) {
+        return item.label;
     }
     onMetadataLinkClick(item) {
         if (item.link) {
@@ -34673,18 +34918,22 @@ class DetailSidePanelComponent {
                 return 'cqa-bg-[#94A3B8]';
         }
     }
+    /** Text color for metadata value (e.g. red for critical priority) */
+    getValueTextClass(item) {
+        if (item.statusColor === 'red') {
+            return 'cqa-text-[#DC2626]';
+        }
+        return 'cqa-text-[#111827]';
+    }
 }
-DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", configTitle: "configTitle", showCloseButton: "showCloseButton", startInEditMode: "startInEditMode", editing: "editing", selectConfigOverrides: "selectConfigOverrides", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n      <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n      <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n        <button\n          *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === tab.value\"\n          [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n          [class.cqa-text-white]=\"activeTab === tab.value\"\n          [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n          class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onTabClick(tab)\">\n          {{ tab.label }}\n        </button>\n      </div>\n\n      <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n      <cqa-test-case-details\n        *ngIf=\"activeTab === 'test-case'\"\n        [descriptionTitle]=\"descriptionTitle\"\n        [descriptionContent]=\"descriptionContent\"\n        [enableMarkdown]=\"enableMarkdown\"\n        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [editing]=\"editing\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        [isStepGroup]=\"isStepGroup\"\n        (editDescription)=\"onEditDescription()\"\n        (cancel)=\"onCancel()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\"\n        (labelAdded)=\"labelAdded.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: ["editing", "startInEditMode", "descriptionTitle", "descriptionContent", "enableMarkdown", "showEditButton", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["editDescription", "cancel", "saveChanges", "metadataLinkClick", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }], directives: [{ type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: DetailSidePanelComponent, decorators: [{
+TestCaseDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TestCaseDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsComponent, selector: "cqa-test-case-details", inputs: { editing: "editing", startInEditMode: "startInEditMode", descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", showEditButton: "showEditButton", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides" }, outputs: { editDescription: "editDescription", cancel: "cancel", saveChanges: "saveChanges", metadataLinkClick: "metadataLinkClick", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, ngImport: i0, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n          Edit\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: ["descriptionTitle", "descriptionContent", "enableMarkdown", "metadataItems", "labels", "configTitle", "configSections", "configSectionsRow2", "prerequisiteCaseOptions", "platform", "isStepGroup", "selectConfigOverrides"], outputs: ["save", "cancel", "selectSearch", "selectLoadMore", "selectOpened", "selectionChange", "labelAdded"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: ConfigurationCardComponent, selector: "cqa-configuration-card", inputs: ["icon", "title", "data"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-detail-side-panel', styles: [DETAIL_SIDE_PANEL_SCROLL_STYLES], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
-                        style: 'transition: width 0.3s ease-in-out',
-                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n  <!-- Main content: Side menu + Scrollable content -->\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon menu -->\n    <div\n      class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n      style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons (1:1 with tabs) -->\n      <button\n        *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n        type=\"button\"\n        [matTooltip]=\"tab.label\"\n        [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n        [class.cqa-text-white]=\"activeTab === tab.value\"\n        [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n        (click)=\"onTabClick(tab)\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon || 'circle' }}</mat-icon>\n      </button>\n    </div>\n\n    <!-- Scrollable content area (collapses with animation when expanded is false) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n      <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n      <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n      <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n        <button\n          *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === tab.value\"\n          [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n          [class.cqa-text-white]=\"activeTab === tab.value\"\n          [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n          class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onTabClick(tab)\">\n          {{ tab.label }}\n        </button>\n      </div>\n\n      <!-- Test Case tab: use cqa-test-case-details (Figma design) -->\n      <cqa-test-case-details\n        *ngIf=\"activeTab === 'test-case'\"\n        [descriptionTitle]=\"descriptionTitle\"\n        [descriptionContent]=\"descriptionContent\"\n        [enableMarkdown]=\"enableMarkdown\"\n        [showEditButton]=\"showEditButton\"\n        [startInEditMode]=\"startInEditMode\"\n        [editing]=\"editing\"\n        [selectConfigOverrides]=\"selectConfigOverrides\"\n        [metadataItems]=\"metadataItems\"\n        [labels]=\"labels\"\n        [configTitle]=\"configTitle\"\n        [configSections]=\"configSections\"\n        [configSectionsRow2]=\"configSectionsRow2\"\n        [platform]=\"platform\"\n        [isStepGroup]=\"isStepGroup\"\n        (editDescription)=\"onEditDescription()\"\n        (cancel)=\"onCancel()\"\n        (saveChanges)=\"onSaveChanges($event)\"\n        (metadataLinkClick)=\"onMetadataLinkClick($event)\"\n        (selectSearch)=\"selectSearch.emit($event)\"\n        (selectLoadMore)=\"selectLoadMore.emit($event)\"\n        (selectOpened)=\"selectOpened.emit($event)\"\n        (selectionChange)=\"selectionChange.emit($event)\"\n        (labelAdded)=\"labelAdded.emit($event)\">\n      </cqa-test-case-details>\n\n      <!-- Placeholder for other tabs (Data Library, Variables) -->\n      <div *ngIf=\"activeTab !== 'test-case'\" class=\"cqa-p-4 cqa-text-[#64748B] cqa-text-sm\">\n        {{ activeTab === 'data-library' ? 'Data Library content' : 'Variables content' }} \u2013 coming soon\n      </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabs: [{
+            args: [{ selector: 'cqa-test-case-details', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Edit mode: show edit form (Figma design) -->\n<cqa-test-case-details-edit\n  *ngIf=\"isEditing\"\n  [descriptionTitle]=\"descriptionTitle\"\n  [descriptionContent]=\"descriptionContent\"\n  [enableMarkdown]=\"enableMarkdown\"\n  [metadataItems]=\"metadataItems\"\n  [labels]=\"labels\"\n  [configTitle]=\"configTitle\"\n  [configSections]=\"configSections\"\n  [configSectionsRow2]=\"configSectionsRow2\"\n  [platform]=\"platform\"\n  [isStepGroup]=\"isStepGroup\"\n  [selectConfigOverrides]=\"selectConfigOverrides\"\n  (save)=\"onSaveChanges($event)\"\n  (cancel)=\"onCancelEdit()\"\n  (selectSearch)=\"selectSearch.emit($event)\"\n  (selectLoadMore)=\"selectLoadMore.emit($event)\"\n  (selectOpened)=\"selectOpened.emit($event)\"\n  (selectionChange)=\"selectionChange.emit($event)\"\n  (labelAdded)=\"labelAdded.emit($event)\">\n</cqa-test-case-details-edit>\n\n<!-- View mode: read-only details -->\n<div *ngIf=\"!isEditing\" class=\"cqa-self-stretch cqa-py-4 cqa-px-0 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n  <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n    <!-- Description Section -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-between cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n        </div>\n        <button\n          *ngIf=\"showEditButton\"\n          type=\"button\"\n          class=\"cqa-flex cqa-justify-end cqa-items-center cqa-gap-2 cqa-text-[#A3A3A3] cqa-text-xs cqa-font-semibold hover:cqa-text-[#737373] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n          (click)=\"onEditClick()\">\n          <mat-icon class=\"cqa-text-[14px] cqa-w-4 cqa-h-4\">edit</mat-icon>\n          Edit\n        </button>\n      </div>\n      <div *ngIf=\"descriptionContent\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div *ngIf=\"enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-prose cqa-prose-sm cqa-max-w-none\" [innerHTML]=\"descriptionContent\"></div>\n        <div *ngIf=\"!enableMarkdown\" class=\"cqa-self-stretch cqa-text-[#111827] cqa-text-sm cqa-leading-[19.6px] cqa-font-normal\">{{ descriptionContent }}</div>\n      </div>\n    </div>\n\n    <!-- Metadata Section -->\n    <div *ngIf=\"filteredMetadataItems.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-2 cqa-gap-x-0 cqa-gap-y-4\">\n        <ng-container *ngFor=\"let item of filteredMetadataItems; trackBy: trackByMetadataLabel\">\n          <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5\">\n            <div class=\"cqa-text-[#6B7280] cqa-text-xs cqa-leading-[15px] cqa-font-medium\">{{ item.label }}</div>\n            <div\n              class=\"cqa-flex cqa-justify-start cqa-items-center cqa-gap-[5px] cqa-min-w-0 cqa-w-full cqa-text-left cqa-text-[#0A0A0A] cqa-border cqa-border-[#F5F5F5]\">\n              <mat-icon *ngIf=\"item.icon && (!item.iconLibrary || item.iconLibrary === 'mat')\" class=\"cqa-text-[#6B7280] cqa-text-sm cqa-w-4 cqa-h-4\">\n                {{ item.icon }}\n              </mat-icon>\n              <span *ngIf=\"item.statusColor\" class=\"cqa-w-3.5 cqa-h-3.5 cqa-rounded-full cqa-flex-shrink-0\" [ngClass]=\"getStatusDotClass(item)\"></span>\n              <a\n                *ngIf=\"item.link\"\n                href=\"javascript:void(0)\"\n                class=\"cqa-text-[#2563EB] cqa-text-xs cqa-leading-[12px] cqa-font-normal hover:cqa-underline cqa-cursor-pointer cqa-block cqa-truncate cqa-min-w-0\"\n                (click)=\"onMetadataLinkClick(item); $event.preventDefault()\">\n                {{ item.value }}\n              </a>\n              <span *ngIf=\"!item.link\" class=\"cqa-text-xs cqa-leading-[12px] cqa-font-normal cqa-align-middle\" [ngClass]=\"getValueTextClass(item)\">\n                {{ item.value }}\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Labels (Figma: Labels title, cqa-badge chips with tag icon) -->\n    <div *ngIf=\"labels.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2 cqa-text-sm cqa-leading-[19.6px]\">\n      <span class=\"cqa-text-[#111827] cqa-text-sm cqa-font-medium cqa-leading-5\">Labels</span>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge\n          *ngFor=\"let label of labels\"\n          [label]=\"label\"\n          icon=\"label\"\n          variant=\"outline\"\n          size=\"small\"\n          backgroundColor=\"#ffffff\"\n          textColor=\"#475569\"\n          borderColor=\"#E2E8F0\"\n          iconColor=\"#94A3B8\">\n        </cqa-badge>\n      </div>\n    </div>\n\n    <!-- Configuration Section -->\n    <div *ngIf=\"configSections.length || configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n      <div class=\"cqa-self-stretch cqa-inline-flex cqa-justify-start cqa-items-center\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n            <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n          </div>\n          <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ configTitle }}</span>\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-2.5\">\n        <div class=\"cqa-self-stretch cqa-grid cqa-grid-cols-1 cqa-gap-2.5\">\n          <ng-container *ngFor=\"let section of configSections; trackBy: trackByConfigTitle\">\n            <cqa-configuration-card\n              [icon]=\"section.icon || 'tune'\"\n              [title]=\"section.title\"\n              [data]=\"section.items\">\n            </cqa-configuration-card>\n          </ng-container>\n        </div>\n        <div *ngIf=\"configSectionsRow2.length\" class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px]\">\n          <cqa-configuration-card\n            *ngFor=\"let section of configSectionsRow2; trackBy: trackByConfigTitle\"\n            [icon]=\"section.icon || 'tune'\"\n            [title]=\"section.title\"\n            [data]=\"section.items\">\n          </cqa-configuration-card>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { editing: [{
                 type: Input
-            }], activeTab: [{
+            }], startInEditMode: [{
                 type: Input
             }], descriptionTitle: [{
                 type: Input
@@ -34698,6 +34947,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], labels: [{
                 type: Input
+            }], configTitle: [{
+                type: Input
             }], configSections: [{
                 type: Input
             }], configSectionsRow2: [{
@@ -34706,44 +34957,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isStepGroup: [{
                 type: Input
-            }], configTitle: [{
-                type: Input
-            }], showCloseButton: [{
-                type: Input
-            }], startInEditMode: [{
-                type: Input
-            }], editing: [{
-                type: Input
             }], selectConfigOverrides: [{
                 type: Input
-            }], expanded: [{
-                type: Input
-            }], expandedWidth: [{
-                type: Input
-            }], collapsedWidth: [{
-                type: Input
-            }], hostWidth: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], hostMinWidth: [{
-                type: HostBinding,
-                args: ['style.min-width']
-            }], hostMaxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width']
-            }], hostOverflow: [{
-                type: HostBinding,
-                args: ['style.overflow']
-            }], expandTooltip: [{
-                type: Input
-            }], collapseTooltip: [{
-                type: Input
-            }], closeTooltip: [{
-                type: Input
-            }], back: [{
-                type: Output
-            }], tabChange: [{
-                type: Output
             }], editDescription: [{
                 type: Output
             }], cancel: [{
@@ -34762,174 +34977,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], labelAdded: [{
                 type: Output
-            }], expandToggle: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }] } });
-
-class DetailDrawerTabContentDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-DetailDrawerTabContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-DetailDrawerTabContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerTabContentDirective, selector: "[cqaTabContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cqaTabContent]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-class DetailDrawerTabComponent {
-    constructor() {
-        /** Tab label (shown in tooltip on icon button) */
-        this.label = '';
-        /** Tab value (unique identifier) */
-        this.value = '';
-        /** Material icon name for the tab button */
-        this.icon = 'folder';
-    }
-    get contentTemplate() {
-        return this.contentDirective?.templateRef ?? null;
-    }
-}
-DetailDrawerTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DetailDrawerTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerTabComponent, selector: "cqa-detail-drawer-tab", inputs: { label: "label", value: "value", icon: "icon" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "contentDirective", first: true, predicate: DetailDrawerTabContentDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerTabComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'cqa-detail-drawer-tab',
-                    template: '',
-                    host: {
-                        style: 'display: contents',
-                    },
-                }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], contentDirective: [{
-                type: ContentChild,
-                args: [DetailDrawerTabContentDirective]
-            }] } });
-
-class DetailDrawerComponent {
-    constructor() {
-        /** Currently active tab value */
-        this.activeTab = '';
-        /** Whether to show the close button */
-        this.showCloseButton = true;
-        /** Whether the drawer is expanded */
-        this.expanded = true;
-        /** Panel width when expanded */
-        this.expandedWidth = '280px';
-        /** Maximum width when expanded (e.g. '600px', '30vw'). Default: 30% of viewport */
-        this.maxExpandedWidth = '30vw';
-        /** Panel width when collapsed */
-        this.collapsedWidth = '56px';
-        this.expandTooltip = 'Expand';
-        this.collapseTooltip = 'Collapse';
-        this.closeTooltip = 'Close';
-        this.activeTabChange = new EventEmitter();
-        this.expandToggle = new EventEmitter();
-        this.close = new EventEmitter();
-    }
-    get hostWidth() {
-        return this.expanded ? this.expandedWidth : this.collapsedWidth;
-    }
-    get hostMinWidth() {
-        return this.expanded && this.minExpandedWidth ? this.minExpandedWidth : null;
-    }
-    get hostMaxWidth() {
-        return this.expanded ? this.maxExpandedWidth : null;
-    }
-    ngAfterContentInit() {
-        this.ensureActiveTab();
-    }
-    ngAfterContentChecked() {
-        this.ensureActiveTab();
-    }
-    ensureActiveTab() {
-        const tabs = this.tabComponents?.toArray() ?? [];
-        if (tabs.length > 0 && !this.activeTab) {
-            this.activeTab = tabs[0].value;
-            this.activeTabChange.emit(this.activeTab);
-        }
-    }
-    onTabClick(tab) {
-        // If drawer is collapsed, open it (but never close on tab click)
-        if (!this.expanded) {
-            this.expandToggle.emit();
-        }
-        // Select the tab
-        if (tab.value !== this.activeTab) {
-            this.activeTab = tab.value;
-            this.activeTabChange.emit(this.activeTab);
-        }
-    }
-    onExpandToggle() {
-        this.expandToggle.emit();
-    }
-    onClose() {
-        this.close.emit();
-    }
-    trackByValue(_i, tab) {
-        return tab.value;
-    }
-    isTabActive(tab) {
-        return tab.value === this.activeTab;
-    }
-}
-DetailDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DetailDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailDrawerComponent, selector: "cqa-detail-drawer", inputs: { activeTab: "activeTab", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", minExpandedWidth: "minExpandedWidth", maxExpandedWidth: "maxExpandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { activeTabChange: "activeTabChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, queries: [{ propertyName: "tabComponents", predicate: DetailDrawerTabComponent }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\">\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon bar: one button per tab -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-min-h-0 cqa-items-center cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons: equally distributed in remaining space -->\n      <div class=\"cqa-flex cqa-flex-1 cqa-flex-col cqa-justify-evenly cqa-items-center cqa-w-full\">\n        <button\n          *ngFor=\"let tab of tabComponents; trackBy: trackByValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [matTooltip]=\"tab.label\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n          [ngClass]=\"{\n            'cqa-bg-[#3F43EE] cqa-text-white': isTabActive(tab),\n            'cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155]': !isTabActive(tab)\n          }\"\n          (click)=\"onTabClick(tab)\">\n          <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon }}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Content area: show only the active tab's content -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-overflow-y-auto cqa-p-4\">\n        <ng-container *ngFor=\"let tab of tabComponents\">\n          <ng-container *ngIf=\"tab.value === activeTab && tab.contentTemplate\" [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cqa-detail-drawer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
-                        style: 'transition: width 0.3s ease-in-out',
-                    }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\">\n  <div\n    class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-overflow-hidden\"\n    [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n    style=\"transition: grid-template-columns 0.3s ease-in-out\">\n    <!-- Left vertical icon bar: one button per tab -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-min-h-0 cqa-items-center cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#E2E8F0] cqa-bg-[#FAFAFA] cqa-flex-shrink-0\">\n      <!-- Expand / Collapse button (always visible) -->\n      <button\n        type=\"button\"\n        [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onExpandToggle()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ expanded ? 'unfold_less' : 'unfold_more' }}</mat-icon>\n      </button>\n      <!-- Close button -->\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        [matTooltip]=\"closeTooltip\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n        (click)=\"onClose()\">\n        <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">close</mat-icon>\n      </button>\n      <!-- Tab buttons: equally distributed in remaining space -->\n      <div class=\"cqa-flex cqa-flex-1 cqa-flex-col cqa-justify-evenly cqa-items-center cqa-w-full\">\n        <button\n          *ngFor=\"let tab of tabComponents; trackBy: trackByValue\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [matTooltip]=\"tab.label\"\n          class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2 cqa-flex-shrink-0\"\n          [ngClass]=\"{\n            'cqa-bg-[#3F43EE] cqa-text-white': isTabActive(tab),\n            'cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155]': !isTabActive(tab)\n          }\"\n          (click)=\"onTabClick(tab)\">\n          <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5\">{{ tab.icon }}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <!-- Content area: show only the active tab's content -->\n    <div class=\"cqa-min-w-0 cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-overflow-y-auto cqa-p-4\">\n        <ng-container *ngFor=\"let tab of tabComponents\">\n          <ng-container *ngIf=\"tab.value === activeTab && tab.contentTemplate\" [ngTemplateOutlet]=\"tab.contentTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [] }]
-        }], propDecorators: { tabComponents: [{
-                type: ContentChildren,
-                args: [DetailDrawerTabComponent]
-            }], activeTab: [{
-                type: Input
-            }], showCloseButton: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], expandedWidth: [{
-                type: Input
-            }], minExpandedWidth: [{
-                type: Input
-            }], maxExpandedWidth: [{
-                type: Input
-            }], collapsedWidth: [{
-                type: Input
-            }], hostWidth: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], hostMinWidth: [{
-                type: HostBinding,
-                args: ['style.min-width']
-            }], hostMaxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width']
-            }], expandTooltip: [{
-                type: Input
-            }], collapseTooltip: [{
-                type: Input
-            }], closeTooltip: [{
-                type: Input
-            }], activeTabChange: [{
-                type: Output
-            }], expandToggle: [{
-                type: Output
-            }], close: [{
-                type: Output
             }] } });
 
 class StepBuilderGroupComponent {