@cqa-lib/cqa-ui 1.1.382 → 1.1.383
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/step-builder/step-builder-action/step-builder-action.component.mjs +5 -1
- package/esm2020/lib/step-builder/step-builder-condition/step-builder-condition.component.mjs +5 -1
- package/esm2020/lib/step-builder/step-builder-database/step-builder-database.component.mjs +19 -9
- package/esm2020/lib/step-builder/template-variables-form/template-variables-form.component.mjs +3 -3
- package/esm2020/lib/test-case-details/run-execution-alert/run-execution-alert.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +30 -12
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +30 -12
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/step-builder/step-builder-database/step-builder-database.component.d.ts +6 -1
- package/package.json +1 -1
|
@@ -28113,10 +28113,10 @@ class RunExecutionAlertComponent {
|
|
|
28113
28113
|
}
|
|
28114
28114
|
}
|
|
28115
28115
|
RunExecutionAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunExecutionAlertComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
28116
|
-
RunExecutionAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunExecutionAlertComponent, selector: "cqa-run-execution-alert", inputs: { title: "title", message: "message", prerequisiteForm: "prerequisiteForm", prerequisiteSelectConfig: "prerequisiteSelectConfig" }, outputs: { runWithPrerequisites: "runWithPrerequisites", runAnyway: "runAnyway", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n {{ message }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional prerequisite selector (rendered when inputs are provided) -->\n <div *ngIf=\"prerequisiteForm && prerequisiteSelectConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-font-medium cqa-text-[13px] cqa-text-[#374151]\">Select Prerequisites</label>\n <cqa-dynamic-select\n [form]=\"prerequisiteForm\"\n [config]=\"prerequisiteSelectConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Actions: Cancel | Run Anyway (right-aligned) -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run Anyway\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] cqa-text-white'\"\n (clicked)=\"onRunAnyway()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run with Prerequisites\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] cqa-text-white'\"\n [disabled]=\"disableRunWithPrereq\"\n (clicked)=\"onRunWithPrerequisites()\">\n </cqa-button>\n </div>\n</div>\n", 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
28116
|
+
RunExecutionAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunExecutionAlertComponent, selector: "cqa-run-execution-alert", inputs: { title: "title", message: "message", prerequisiteForm: "prerequisiteForm", prerequisiteSelectConfig: "prerequisiteSelectConfig" }, outputs: { runWithPrerequisites: "runWithPrerequisites", runAnyway: "runAnyway", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n {{ message }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional prerequisite selector (rendered when inputs are provided) -->\n <div *ngIf=\"prerequisiteForm && prerequisiteSelectConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-font-medium cqa-text-[13px] cqa-text-[#374151]\">Select Prerequisites</label>\n <cqa-dynamic-select\n [form]=\"prerequisiteForm\"\n [config]=\"prerequisiteSelectConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Actions: Cancel | Run Anyway (right-aligned) -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run Anyway\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] cqa-text-white'\"\n (clicked)=\"onRunAnyway()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run with Prerequisites\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] !cqa-text-white'\"\n [disabled]=\"disableRunWithPrereq\"\n (clicked)=\"onRunWithPrerequisites()\">\n </cqa-button>\n </div>\n</div>\n", 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
28117
28117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunExecutionAlertComponent, decorators: [{
|
|
28118
28118
|
type: Component,
|
|
28119
|
-
args: [{ selector: 'cqa-run-execution-alert', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n {{ message }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional prerequisite selector (rendered when inputs are provided) -->\n <div *ngIf=\"prerequisiteForm && prerequisiteSelectConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-font-medium cqa-text-[13px] cqa-text-[#374151]\">Select Prerequisites</label>\n <cqa-dynamic-select\n [form]=\"prerequisiteForm\"\n [config]=\"prerequisiteSelectConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Actions: Cancel | Run Anyway (right-aligned) -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run Anyway\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] cqa-text-white'\"\n (clicked)=\"onRunAnyway()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run with Prerequisites\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] cqa-text-white'\"\n [disabled]=\"disableRunWithPrereq\"\n (clicked)=\"onRunWithPrerequisites()\">\n </cqa-button>\n </div>\n</div>\n" }]
|
|
28119
|
+
args: [{ selector: 'cqa-run-execution-alert', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-full cqa-max-w-[500px] cqa-flex cqa-flex-col cqa-gap-4 cqa-p-6 cqa-box-border cqa-min-h-0\">\n <!-- Header: title + close (X) -->\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n <h2 class=\"cqa-font-medium cqa-text-[22px] cqa-leading-[28px] cqa-tracking-normal cqa-text-[#101828] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-font-normal cqa-text-[14px] cqa-leading-[21px] cqa-tracking-[-0.15px] cqa-text-[#4A5565] cqa-m-0\">\n {{ message }}\n </p>\n </div>\n <button\n type=\"button\"\n (click)=\"onCancel()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-7 cqa-min-w-7 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0 cqa-flex-shrink-0\"\n title=\"Close\"\n aria-label=\"Close\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" />\n </svg>\n </button>\n </div>\n\n <!-- Optional prerequisite selector (rendered when inputs are provided) -->\n <div *ngIf=\"prerequisiteForm && prerequisiteSelectConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-font-medium cqa-text-[13px] cqa-text-[#374151]\">Select Prerequisites</label>\n <cqa-dynamic-select\n [form]=\"prerequisiteForm\"\n [config]=\"prerequisiteSelectConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Actions: Cancel | Run Anyway (right-aligned) -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-w-full cqa-gap-3\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-white cqa-border cqa-border-solid cqa-border-[#414146] cqa-text-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run Anyway\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] cqa-text-white'\"\n (clicked)=\"onRunAnyway()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Run with Prerequisites\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-rounded-[8px] cqa-border-0 cqa-bg-[#3F43EE] !cqa-text-white'\"\n [disabled]=\"disableRunWithPrereq\"\n (clicked)=\"onRunWithPrerequisites()\">\n </cqa-button>\n </div>\n</div>\n" }]
|
|
28120
28120
|
}], ctorParameters: function () {
|
|
28121
28121
|
return [{ type: undefined, decorators: [{
|
|
28122
28122
|
type: Optional
|
|
@@ -32978,10 +32978,10 @@ class TemplateVariablesFormComponent {
|
|
|
32978
32978
|
}
|
|
32979
32979
|
}
|
|
32980
32980
|
TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
32981
|
-
TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Screen Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32981
|
+
TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32982
32982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
|
|
32983
32983
|
type: Component,
|
|
32984
|
-
args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Screen Name\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"] }]
|
|
32984
|
+
args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"variable.type === 'dropdown'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Number variables with number input -->\n <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n <!-- Element variables with cascading dropdowns (screen name + element) -->\n <ng-container *ngIf=\"isElementType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-template #elementManualInput>\n <ng-container *ngIf=\"variable.type === 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'number'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!isElementType(variable)\">\n <!-- Other dropdown variables (type, scrollTo, label) -->\n <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #defaultInput>\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Data Set<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div> \n </ng-container>\n <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-template>\n </ng-container>\n </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n <cqa-element-form\n [isCreateMode]=\"true\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [isEditInDepthAvailable]=\"false\"\n (createElement)=\"onCreateElement($event)\"\n (cancel)=\"onCancelElementForm()\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n </cqa-element-form>\n</div>", styles: ["\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n"] }]
|
|
32985
32985
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
|
|
32986
32986
|
type: Input
|
|
32987
32987
|
}], variablesForm: [{
|
|
@@ -33607,6 +33607,10 @@ class StepBuilderActionComponent {
|
|
|
33607
33607
|
return value !== null && value !== undefined && value !== '';
|
|
33608
33608
|
}
|
|
33609
33609
|
}
|
|
33610
|
+
if (variable.dataKey === 'element') {
|
|
33611
|
+
const value = variable.value;
|
|
33612
|
+
return value !== null && value !== undefined && value !== '';
|
|
33613
|
+
}
|
|
33610
33614
|
return true;
|
|
33611
33615
|
});
|
|
33612
33616
|
}
|
|
@@ -35428,6 +35432,10 @@ class StepBuilderConditionComponent {
|
|
|
35428
35432
|
return value !== null && value !== undefined && value !== '';
|
|
35429
35433
|
}
|
|
35430
35434
|
}
|
|
35435
|
+
if (variable.dataKey === 'element') {
|
|
35436
|
+
const value = variable.value;
|
|
35437
|
+
return value !== null && value !== undefined && value !== '';
|
|
35438
|
+
}
|
|
35431
35439
|
return true;
|
|
35432
35440
|
});
|
|
35433
35441
|
if (!allValidForCondition) {
|
|
@@ -35575,7 +35583,7 @@ class StepBuilderDatabaseComponent {
|
|
|
35575
35583
|
this.normalEnvironmentOptions = [];
|
|
35576
35584
|
/** Initial queries list */
|
|
35577
35585
|
this.queries = [];
|
|
35578
|
-
/** Query results data */
|
|
35586
|
+
/** Query results data (deprecated in favor of per-query queryResult) */
|
|
35579
35587
|
this.queryResults = [];
|
|
35580
35588
|
/** Loading state */
|
|
35581
35589
|
this.isLoading = false;
|
|
@@ -35875,6 +35883,7 @@ class StepBuilderDatabaseComponent {
|
|
|
35875
35883
|
currentQuery.query = query;
|
|
35876
35884
|
currentQuery.variable = variable;
|
|
35877
35885
|
this.runQuery.emit({
|
|
35886
|
+
currentQuery,
|
|
35878
35887
|
query,
|
|
35879
35888
|
variable,
|
|
35880
35889
|
dbEnvironment,
|
|
@@ -35912,9 +35921,9 @@ class StepBuilderDatabaseComponent {
|
|
|
35912
35921
|
}
|
|
35913
35922
|
}
|
|
35914
35923
|
onCopyResults() {
|
|
35915
|
-
|
|
35916
|
-
if (
|
|
35917
|
-
const text = JSON.stringify(
|
|
35924
|
+
const rows = this.getCurrentQueryResult();
|
|
35925
|
+
if (rows && rows.length > 0) {
|
|
35926
|
+
const text = JSON.stringify(rows, null, 2);
|
|
35918
35927
|
navigator.clipboard.writeText(text).then(() => {
|
|
35919
35928
|
// Could emit an event or show a toast notification
|
|
35920
35929
|
});
|
|
@@ -35974,10 +35983,19 @@ class StepBuilderDatabaseComponent {
|
|
|
35974
35983
|
this.createStep.emit(stepData);
|
|
35975
35984
|
}
|
|
35976
35985
|
getTableColumns() {
|
|
35977
|
-
|
|
35986
|
+
const rows = this.getCurrentQueryResult();
|
|
35987
|
+
if (!rows || rows.length === 0) {
|
|
35978
35988
|
return [];
|
|
35979
35989
|
}
|
|
35980
|
-
return Object.keys(
|
|
35990
|
+
return Object.keys(rows[0]);
|
|
35991
|
+
}
|
|
35992
|
+
/** Get result rows for currently selected query. */
|
|
35993
|
+
getCurrentQueryResult() {
|
|
35994
|
+
const current = this.queries[this.selectedQueryIndex];
|
|
35995
|
+
if (current && Array.isArray(current.queryResult) && current.queryResult.length > 0) {
|
|
35996
|
+
return current.queryResult;
|
|
35997
|
+
}
|
|
35998
|
+
return [];
|
|
35981
35999
|
}
|
|
35982
36000
|
/**
|
|
35983
36001
|
* Get assertion data for a specific query
|
|
@@ -36403,10 +36421,10 @@ class StepBuilderDatabaseComponent {
|
|
|
36403
36421
|
}
|
|
36404
36422
|
}
|
|
36405
36423
|
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 });
|
|
36406
|
-
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"] }] });
|
|
36424
|
+
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=\"getCurrentQueryResult().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 getCurrentQueryResult()\" 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=\"getCurrentQueryResult().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"] }] });
|
|
36407
36425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, decorators: [{
|
|
36408
36426
|
type: Component,
|
|
36409
|
-
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: [] }]
|
|
36427
|
+
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=\"getCurrentQueryResult().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 getCurrentQueryResult()\" 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=\"getCurrentQueryResult().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: [] }]
|
|
36410
36428
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dbEnvironmentOptions: [{
|
|
36411
36429
|
type: Input
|
|
36412
36430
|
}], normalEnvironmentOptions: [{
|