npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.385 → 1.1.387 - Mend

@cqa-lib/cqa-ui 1.1.385 → 1.1.387

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -3820,10 +3820,10 @@ class TableActionToolbarComponent {
 }
 TableActionToolbarComponent.ACTION_COOLDOWN_MS = 500;
 TableActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ 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: TableActionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { selectedItems: [{
                 type: Input
             }], actions: [{
@@ -21305,6 +21305,7 @@ class ElementFormComponent {
     }
     onEditInDepth(event) {
         event.preventDefault();
+        event.stopPropagation();
         this.editInDepth.emit();
     }
     getFormControl(controlName) {
@@ -21349,10 +21350,10 @@ class ElementFormComponent {
     }
 }
 ElementFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, deps: [{ token: i1$1.FormBuilder, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n    <cqa-custom-input \n      class=\"cqa-w-1/2\" \n      label=\"Name\" \n      placeholder=\"default-element\"\n      [value]=\"getFormControlValue('name')\"\n      [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('name', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-1/2\">\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a href=\"#\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n    <cqa-custom-input \n      class=\"cqa-w-1/2\" \n      label=\"Name\" \n      placeholder=\"default-element\"\n      [value]=\"getFormControlValue('name')\"\n      [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('name', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-1/2\">\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n    <cqa-custom-input \n      class=\"cqa-w-1/2\" \n      label=\"Name\" \n      placeholder=\"default-element\"\n      [value]=\"getFormControlValue('name')\"\n      [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('name', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-1/2\">\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a href=\"#\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\n\n" }]
+            args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n  <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n    <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n    </svg>\n    <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n  </div>\n  <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n    <cqa-custom-input \n      class=\"cqa-w-1/2\" \n      label=\"Name\" \n      placeholder=\"default-element\"\n      [value]=\"getFormControlValue('name')\"\n      [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('name', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-1/2\">\n      <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n        (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n        class=\"cqa-w-full\">\n      </cqa-dynamic-select>\n      <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n        <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 14 14\"\n            fill=\"none\"\n            class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n            <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n          </svg>\n          <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n            Screen Name is required\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-container *ngIf=\"!isElementLoading\">\n    <cqa-custom-input \n      class=\"cqa-w-full\"  \n      label=\"Enter Value\" \n      placeholder=\"#default_id or xpath\"\n      [value]=\"getFormControlValue('value')\"\n      [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n      [required]=\"true\"\n      (valueChange)=\"onFormControlChange('value', $event)\">\n    </cqa-custom-input>\n    <div class=\"cqa-w-full\">\n      <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n      <div\n        class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n        *ngIf=\"formLabels?.length; else noTagsContainer\">\n        <span *ngFor=\"let tag of visibleTags\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n          [matTooltip]=\"tag\"\n          matTooltipPosition=\"above\"\n          style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n          <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n          <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n            <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n          </button>\n        </span>\n        <input type=\"text\"\n          class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n          placeholder=\"Type and press Enter to add\"\n          [(ngModel)]=\"tagInputValue\"\n          (keydown)=\"onTagInputKeydown($event)\"\n          (blur)=\"addTag()\"\n          [ngModelOptions]=\"{standalone: true}\">\n      </div>\n      <ng-template #noTagsContainer>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n          <input type=\"text\"\n            class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n            placeholder=\"Type and press Enter to add\"\n            [(ngModel)]=\"tagInputValue\"\n            (keydown)=\"onTagInputKeydown($event)\"\n            (blur)=\"addTag()\"\n            [ngModelOptions]=\"{standalone: true}\">\n        </div>\n      </ng-template>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n        <div class=\"cqa-flex-1 cqa-min-w-0\">\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n        </div>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </ng-container>\n</div>\n\n\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef, decorators: [{
@@ -22280,6 +22281,7 @@ class TestDataModalComponent {
     }
     onEditInDepth(event) {
         event.preventDefault();
+        event.stopPropagation();
         this.editInDepth.emit();
         this.ref.close(TEST_DATA_MODAL_EDIT_IN_DEPTH);
     }
@@ -22291,10 +22293,10 @@ class TestDataModalComponent {
     }
 }
 TestDataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: TEST_DATA_MODAL_REF }, { token: TEST_DATA_MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n  <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Test Data\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n      <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n      <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n        <div *ngIf=\"showHelpTooltip\"\n          class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n  <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n    <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n      <cqa-button\n        type=\"button\"\n        [attr.role]=\"'tab'\"\n        [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n        [text]=\"segment.label\"\n        [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onTabChange(segment.value)\"\n        [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n    [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n    <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n    <ng-container *ngIf=\"activeTab === 'plain-text'\">\n      <cqa-custom-input\n        label=\"Value\"\n        [value]=\"editForm.get('value')?.value ?? ''\"\n        (valueChange)=\"onEditFormFieldChange('value', $event)\"\n        placeholder=\"https://example.com/dashboard\"\n        [fullWidth]=\"true\"\n        size=\"md\">\n      </cqa-custom-input>\n      <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n        Enter a static text value that won't change during execution.\n      </p>\n    </ng-container>\n\n    <!-- Parameter tab: Variable Library -->\n    <ng-container *ngIf=\"activeTab === 'parameter'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Variable Library header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Parameters\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search library'\"\n            [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search library'\"\n            (valueChange)=\"onParameterSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <div\n            *ngFor=\"let item of parameterListConfig\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onParameterRowClick($event, item)\"\n            (keydown.enter)=\"onParameterRowClick($event, item)\"\n            (keydown.space)=\"onParameterRowClick($event, item)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n            [class.cqa-border]=\"selectedParameterId === item.id\"\n            [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n                <button\n                  *ngIf=\"item.showEdit\"\n                  type=\"button\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n                  (click)=\"onParameterEditClick($event, item.id)\"\n                  title=\"Edit\"\n                  aria-label=\"Edit\">\n                  <mat-icon\n                    class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n                    (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n          <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No parameters match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Environment tab: Variable library by environment -->\n    <ng-container *ngIf=\"activeTab === 'environment'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Section header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Environment\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search Environment'\"\n            [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search Environment'\"\n            (valueChange)=\"onEnvironmentSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <button\n            *ngFor=\"let item of environmentListConfig\"\n            type=\"button\"\n            (click)=\"onEnvironmentSelect(item.id)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n              </div>\n            </div>\n          </button>\n          <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No environment variables match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Runtime tab: dynamic value injector -->\n    <ng-container *ngIf=\"activeTab === 'runtime'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n        <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n          Runtime\n        </h3>\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-custom-input\n            [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n            (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n            placeholder=\"input text\"\n            [fullWidth]=\"true\"\n            size=\"md\">\n          </cqa-custom-input>\n          <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n            Values resolved during test execution based on session and step state.\n          </p>\n        </div>\n        <!-- Recommended: suggestion chips -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n            <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n            <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n          </div>\n          <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n            <cqa-button\n              *ngFor=\"let snippet of runtimeSuggestedValues\"\n              type=\"button\"\n              variant=\"outlined\"\n              btnSize=\"md\"\n              [text]=\"snippet\"\n              (clicked)=\"onRuntimeChipInsert(snippet)\"\n              [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Line below content (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Footer: Cancel, Apply (full width in one row) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n      </div>\n    </div>\n    <a href=\"#\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n  <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Test Data\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n      <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n      <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n        <div *ngIf=\"showHelpTooltip\"\n          class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n  <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n    <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n      <cqa-button\n        type=\"button\"\n        [attr.role]=\"'tab'\"\n        [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n        [text]=\"segment.label\"\n        [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onTabChange(segment.value)\"\n        [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n    [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n    <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n    <ng-container *ngIf=\"activeTab === 'plain-text'\">\n      <cqa-custom-input\n        label=\"Value\"\n        [value]=\"editForm.get('value')?.value ?? ''\"\n        (valueChange)=\"onEditFormFieldChange('value', $event)\"\n        placeholder=\"https://example.com/dashboard\"\n        [fullWidth]=\"true\"\n        size=\"md\">\n      </cqa-custom-input>\n      <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n        Enter a static text value that won't change during execution.\n      </p>\n    </ng-container>\n\n    <!-- Parameter tab: Variable Library -->\n    <ng-container *ngIf=\"activeTab === 'parameter'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Variable Library header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Parameters\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search library'\"\n            [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search library'\"\n            (valueChange)=\"onParameterSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <div\n            *ngFor=\"let item of parameterListConfig\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onParameterRowClick($event, item)\"\n            (keydown.enter)=\"onParameterRowClick($event, item)\"\n            (keydown.space)=\"onParameterRowClick($event, item)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n            [class.cqa-border]=\"selectedParameterId === item.id\"\n            [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n                <button\n                  *ngIf=\"item.showEdit\"\n                  type=\"button\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n                  (click)=\"onParameterEditClick($event, item.id)\"\n                  title=\"Edit\"\n                  aria-label=\"Edit\">\n                  <mat-icon\n                    class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n                    (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n          <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No parameters match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Environment tab: Variable library by environment -->\n    <ng-container *ngIf=\"activeTab === 'environment'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Section header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Environment\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search Environment'\"\n            [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search Environment'\"\n            (valueChange)=\"onEnvironmentSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <button\n            *ngFor=\"let item of environmentListConfig\"\n            type=\"button\"\n            (click)=\"onEnvironmentSelect(item.id)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n              </div>\n            </div>\n          </button>\n          <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No environment variables match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Runtime tab: dynamic value injector -->\n    <ng-container *ngIf=\"activeTab === 'runtime'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n        <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n          Runtime\n        </h3>\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-custom-input\n            [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n            (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n            placeholder=\"input text\"\n            [fullWidth]=\"true\"\n            size=\"md\">\n          </cqa-custom-input>\n          <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n            Values resolved during test execution based on session and step state.\n          </p>\n        </div>\n        <!-- Recommended: suggestion chips -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n            <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n            <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n          </div>\n          <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n            <cqa-button\n              *ngFor=\"let snippet of runtimeSuggestedValues\"\n              type=\"button\"\n              variant=\"outlined\"\n              btnSize=\"md\"\n              [text]=\"snippet\"\n              (clicked)=\"onRuntimeChipInsert(snippet)\"\n              [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Line below content (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Footer: Cancel, Apply (full width in one row) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ 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: TestDataModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-data-modal', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n  <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Test Data\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n      <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n      <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n        <div *ngIf=\"showHelpTooltip\"\n          class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n  <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n    <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n      <cqa-button\n        type=\"button\"\n        [attr.role]=\"'tab'\"\n        [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n        [text]=\"segment.label\"\n        [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onTabChange(segment.value)\"\n        [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n    [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n    <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n    <ng-container *ngIf=\"activeTab === 'plain-text'\">\n      <cqa-custom-input\n        label=\"Value\"\n        [value]=\"editForm.get('value')?.value ?? ''\"\n        (valueChange)=\"onEditFormFieldChange('value', $event)\"\n        placeholder=\"https://example.com/dashboard\"\n        [fullWidth]=\"true\"\n        size=\"md\">\n      </cqa-custom-input>\n      <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n        Enter a static text value that won't change during execution.\n      </p>\n    </ng-container>\n\n    <!-- Parameter tab: Variable Library -->\n    <ng-container *ngIf=\"activeTab === 'parameter'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Variable Library header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Parameters\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search library'\"\n            [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search library'\"\n            (valueChange)=\"onParameterSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <div\n            *ngFor=\"let item of parameterListConfig\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onParameterRowClick($event, item)\"\n            (keydown.enter)=\"onParameterRowClick($event, item)\"\n            (keydown.space)=\"onParameterRowClick($event, item)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n            [class.cqa-border]=\"selectedParameterId === item.id\"\n            [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n                <button\n                  *ngIf=\"item.showEdit\"\n                  type=\"button\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n                  (click)=\"onParameterEditClick($event, item.id)\"\n                  title=\"Edit\"\n                  aria-label=\"Edit\">\n                  <mat-icon\n                    class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n                    (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n          <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No parameters match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Environment tab: Variable library by environment -->\n    <ng-container *ngIf=\"activeTab === 'environment'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Section header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Environment\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search Environment'\"\n            [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search Environment'\"\n            (valueChange)=\"onEnvironmentSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <button\n            *ngFor=\"let item of environmentListConfig\"\n            type=\"button\"\n            (click)=\"onEnvironmentSelect(item.id)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n              </div>\n            </div>\n          </button>\n          <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No environment variables match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Runtime tab: dynamic value injector -->\n    <ng-container *ngIf=\"activeTab === 'runtime'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n        <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n          Runtime\n        </h3>\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-custom-input\n            [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n            (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n            placeholder=\"input text\"\n            [fullWidth]=\"true\"\n            size=\"md\">\n          </cqa-custom-input>\n          <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n            Values resolved during test execution based on session and step state.\n          </p>\n        </div>\n        <!-- Recommended: suggestion chips -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n            <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n            <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n          </div>\n          <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n            <cqa-button\n              *ngFor=\"let snippet of runtimeSuggestedValues\"\n              type=\"button\"\n              variant=\"outlined\"\n              btnSize=\"md\"\n              [text]=\"snippet\"\n              (clicked)=\"onRuntimeChipInsert(snippet)\"\n              [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Line below content (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Footer: Cancel, Apply (full width in one row) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n      </div>\n    </div>\n    <a href=\"#\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-test-data-modal', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n  <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n  <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Test Data\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n      <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n      <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#test-data-help-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"test-data-help-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n        <div *ngIf=\"showHelpTooltip\"\n          class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n        [text]=\"''\"\n        icon=\"close\"\n        (clicked)=\"onClose()\"\n        [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n        title=\"Close\"\n        aria-label=\"Close\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n  <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n    <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n      <cqa-button\n        type=\"button\"\n        [attr.role]=\"'tab'\"\n        [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n        [text]=\"segment.label\"\n        [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n        btnSize=\"md\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onTabChange(segment.value)\"\n        [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n    [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n    <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n    <ng-container *ngIf=\"activeTab === 'plain-text'\">\n      <cqa-custom-input\n        label=\"Value\"\n        [value]=\"editForm.get('value')?.value ?? ''\"\n        (valueChange)=\"onEditFormFieldChange('value', $event)\"\n        placeholder=\"https://example.com/dashboard\"\n        [fullWidth]=\"true\"\n        size=\"md\">\n      </cqa-custom-input>\n      <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n        Enter a static text value that won't change during execution.\n      </p>\n    </ng-container>\n\n    <!-- Parameter tab: Variable Library -->\n    <ng-container *ngIf=\"activeTab === 'parameter'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Variable Library header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Parameters\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search library'\"\n            [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search library'\"\n            (valueChange)=\"onParameterSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <div\n            *ngFor=\"let item of parameterListConfig\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"onParameterRowClick($event, item)\"\n            (keydown.enter)=\"onParameterRowClick($event, item)\"\n            (keydown.space)=\"onParameterRowClick($event, item)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n            [class.cqa-border]=\"selectedParameterId === item.id\"\n            [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n                <button\n                  *ngIf=\"item.showEdit\"\n                  type=\"button\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n                  (click)=\"onParameterEditClick($event, item.id)\"\n                  title=\"Edit\"\n                  aria-label=\"Edit\">\n                  <mat-icon\n                    class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n                    (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n          <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No parameters match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Environment tab: Variable library by environment -->\n    <ng-container *ngIf=\"activeTab === 'environment'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n        <!-- Section header -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n          <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n            Environment\n          </h3>\n          <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n            Create New +\n          </a>\n        </div>\n        <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-search-bar\n            [placeholder]=\"'Search Environment'\"\n            [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n            [fullWidth]=\"true\"\n            [showClear]=\"true\"\n            [ariaLabel]=\"'Search Environment'\"\n            (valueChange)=\"onEnvironmentSearchInput($event)\">\n          </cqa-search-bar>\n        </div>\n        <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n        <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n          <button\n            *ngFor=\"let item of environmentListConfig\"\n            type=\"button\"\n            (click)=\"onEnvironmentSelect(item.id)\"\n            [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n            [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n            class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n            <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n              <div class=\"cqa-flex-1 cqa-min-w-0\">\n                <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n                  {{ item.title }}\n                </p>\n                <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n                  {{ item.subtitle }}\n                </p>\n              </div>\n              <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n                <span *ngIf=\"item.badge\"\n                  class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n                  {{ item.badge }}\n                </span>\n              </div>\n            </div>\n          </button>\n          <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n            No environment variables match your search.\n          </p>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Runtime tab: dynamic value injector -->\n    <ng-container *ngIf=\"activeTab === 'runtime'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n        <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n          Runtime\n        </h3>\n        <div class=\"cqa-flex-shrink-0\">\n          <cqa-custom-input\n            [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n            (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n            placeholder=\"input text\"\n            [fullWidth]=\"true\"\n            size=\"md\">\n          </cqa-custom-input>\n          <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n            Values resolved during test execution based on session and step state.\n          </p>\n        </div>\n        <!-- Recommended: suggestion chips -->\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n            <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n            <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n          </div>\n          <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n            <cqa-button\n              *ngFor=\"let snippet of runtimeSuggestedValues\"\n              type=\"button\"\n              variant=\"outlined\"\n              btnSize=\"md\"\n              [text]=\"snippet\"\n              (clicked)=\"onRuntimeChipInsert(snippet)\"\n              [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Line below content (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Footer: Cancel, Apply (full width in one row) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n          [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n      </div>\n    </div>\n    <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: TestDataModalRef, decorators: [{
                     type: Inject,
                     args: [TEST_DATA_MODAL_REF]