@cqa-lib/cqa-ui 1.1.375 → 1.1.376

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

@@ -35199,6 +35199,8 @@ class StepBuilderDatabaseComponent {
         this.cdr = cdr;
         /** Options for DB environment dropdown */
         this.dbEnvironmentOptions = [];
+        /** Options for Normal environment dropdown */
+        this.normalEnvironmentOptions = [];
         /** Initial queries list */
         this.queries = [];
         /** Query results data */
@@ -35213,6 +35215,10 @@ class StepBuilderDatabaseComponent {
         this.cancelled = new EventEmitter();
         /** Emit when query is run */
         this.runQuery = new EventEmitter();
+        /** Emit when DB environment search is triggered */
+        this.searchDbEnvironment = new EventEmitter();
+        /** Emit when Normal environment search is triggered */
+        this.searchNormalEnvironment = new EventEmitter();
         /** Emit when query is added */
         this.addQuery = new EventEmitter();
         /** Emit when query is deleted */
@@ -35283,6 +35289,7 @@ class StepBuilderDatabaseComponent {
         };
         this.databaseForm = this.fb.group({
             dbEnvironment: ['', Validators.required],
+            normalEnvironment: [''],
             queries: this.fb.array([])
         });
     }
@@ -35330,6 +35337,9 @@ class StepBuilderDatabaseComponent {
         if (changes['initialDbEnvironment'] && changes['initialDbEnvironment'].currentValue) {
             this.databaseForm.patchValue({ dbEnvironment: changes['initialDbEnvironment'].currentValue });
         }
+        if (changes['initialNormalEnvironment'] && changes['initialNormalEnvironment'].currentValue) {
+            this.databaseForm.patchValue({ normalEnvironment: changes['initialNormalEnvironment'].currentValue });
+        }
         // When parent updates advancedSettingsVariables, rebuild advanced form
         if (changes['advancedSettingsVariables'] && this.advancedSettingsVariables) {
             if (this.advancedSettingsVariables.length > 0) {
@@ -35345,6 +35355,10 @@ class StepBuilderDatabaseComponent {
         if (this.initialDbEnvironment) {
             this.databaseForm.patchValue({ dbEnvironment: this.initialDbEnvironment });
         }
+        // Set initial Normal environment if provided
+        if (this.initialNormalEnvironment) {
+            this.databaseForm.patchValue({ normalEnvironment: this.initialNormalEnvironment });
+        }
         // Initialize with queries if provided, otherwise add default query
         if (this.queries.length === 0) {
             this.addNewQuery();
@@ -35442,8 +35456,25 @@ class StepBuilderDatabaseComponent {
             key: 'dbEnvironment',
             placeholder: 'Select DB environment',
             multiple: false,
-            searchable: false,
-            options: this.dbEnvironmentOptions
+            searchable: true,
+            serverSearch: true,
+            options: this.dbEnvironmentOptions,
+            onSearch: (query) => {
+                this.searchDbEnvironment.emit(query);
+            }
+        };
+    }
+    getNormalEnvironmentConfig() {
+        return {
+            key: 'normalEnvironment',
+            placeholder: 'Select Normal environment',
+            multiple: false,
+            searchable: true,
+            serverSearch: true,
+            options: this.normalEnvironmentOptions,
+            onSearch: (query) => {
+                this.searchNormalEnvironment.emit(query);
+            }
         };
     }
     getCurrentQuery() {
@@ -35460,6 +35491,7 @@ class StepBuilderDatabaseComponent {
     }
     onRunQuery() {
         const dbEnvironment = this.databaseForm.get('dbEnvironment')?.value;
+        const normalEnvironment = this.databaseForm.get('normalEnvironment')?.value;
         const currentQuery = this.getCurrentQuery();
         const queryFormGroup = this.getCurrentQueryFormGroup();
         if (currentQuery && queryFormGroup && dbEnvironment) {
@@ -35471,7 +35503,8 @@ class StepBuilderDatabaseComponent {
             this.runQuery.emit({
                 query,
                 variable,
-                dbEnvironment
+                dbEnvironment,
+                normalEnvironment: normalEnvironment || undefined
             });
         }
     }
@@ -35549,6 +35582,7 @@ class StepBuilderDatabaseComponent {
         });
         const stepData = {
             dbEnvironment: formValue.dbEnvironment,
+            normalEnvironment: formValue.normalEnvironment || undefined,
             queries: this.queries.map((query, index) => {
                 const queryFormGroup = this.queriesFormArray.at(index);
                 return {
@@ -35865,11 +35899,11 @@ class StepBuilderDatabaseComponent {
     getExpectedValuePlaceholder(index) {
         const expectedType = this.getExpectedType(index);
         switch (expectedType) {
-            case 'string': return 'Expected Value in String';
-            case 'array': return 'Expected Value in Array (JSON format)';
-            case 'object': return 'Expected Value in Object (JSON format)';
-            case 'null': return 'No value required for null type';
-            default: return 'Expected Value';
+            case 'string': return 'Enter value';
+            case 'array': return 'Enter JSON array';
+            case 'object': return 'Enter JSON object';
+            case 'null': return 'No value required';
+            default: return 'Enter value';
         }
     }
     /**
@@ -35990,12 +36024,14 @@ class StepBuilderDatabaseComponent {
     }
 }
 StepBuilderDatabaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbEnvironment: "initialDbEnvironment", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", addQuery: "addQuery", deleteQuery: "deleteQuery", assertionDataChange: "assertionDataChange", selectedQueryIndexChange: "selectedQueryIndexChange", activeTabChange: "activeTabChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "assertionsTable", first: true, predicate: ["assertionsTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- DB Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n      DB Environment <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <div class=\"cqa-flex cqa-w-full cqa-flex-nowrap cqa-items-center cqa-justify-between cqa-gap-3\">\n      <div class=\"cqa-min-w-0\" style=\"width: 280px;\">\n        <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n        </cqa-dynamic-select>\n      </div>\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n    <p class=\"cqa-text-xs cqa-text-gray-500\">\n      Uses Database environments from Environments.\n    </p>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", normalEnvironmentOptions: "normalEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbEnvironment: "initialDbEnvironment", initialNormalEnvironment: "initialNormalEnvironment", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", searchDbEnvironment: "searchDbEnvironment", searchNormalEnvironment: "searchNormalEnvironment", addQuery: "addQuery", deleteQuery: "deleteQuery", assertionDataChange: "assertionDataChange", selectedQueryIndexChange: "selectedQueryIndexChange", activeTabChange: "activeTabChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "assertionsTable", first: true, predicate: ["assertionsTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-w-full cqa-justify-between cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <div class=\"cqa-flex cqa-gap-4 cqa-items-start\">\n      <!-- DB Environment -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n          DB Environment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"cqa-min-w-0\">\n          <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-gray-500\">\n          Uses Database environments from Environments.\n        </p>\n      </div>\n\n      <!-- Normal Environment -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n          Normal Environment\n        </label>\n        <div class=\"cqa-min-w-0\">\n          <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getNormalEnvironmentConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-gray-500\">\n          Uses Normal environments from Environments.\n        </p>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-database', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- DB Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n      DB Environment <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <div class=\"cqa-flex cqa-w-full cqa-flex-nowrap cqa-items-center cqa-justify-between cqa-gap-3\">\n      <div class=\"cqa-min-w-0\" style=\"width: 280px;\">\n        <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n        </cqa-dynamic-select>\n      </div>\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n    <p class=\"cqa-text-xs cqa-text-gray-500\">\n      Uses Database environments from Environments.\n    </p>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-database', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-w-full cqa-justify-between cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <div class=\"cqa-flex cqa-gap-4 cqa-items-start\">\n      <!-- DB Environment -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n          DB Environment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"cqa-min-w-0\">\n          <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-gray-500\">\n          Uses Database environments from Environments.\n        </p>\n      </div>\n\n      <!-- Normal Environment -->\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n          Normal Environment\n        </label>\n        <div class=\"cqa-min-w-0\">\n          <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getNormalEnvironmentConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-gray-500\">\n          Uses Normal environments from Environments.\n        </p>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dbEnvironmentOptions: [{
                 type: Input
+            }], normalEnvironmentOptions: [{
+                type: Input
             }], queries: [{
                 type: Input
             }], queryResults: [{
@@ -36004,6 +36040,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], initialDbEnvironment: [{
                 type: Input
+            }], initialNormalEnvironment: [{
+                type: Input
             }], editMode: [{
                 type: Input
             }], isCreatingStep: [{
@@ -36014,6 +36052,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], runQuery: [{
                 type: Output
+            }], searchDbEnvironment: [{
+                type: Output
+            }], searchNormalEnvironment: [{
+                type: Output
             }], addQuery: [{
                 type: Output
             }], deleteQuery: [{