@cqa-lib/cqa-ui 1.1.381 → 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/detail-side-panel/detail-side-panel.component.mjs +3 -3
- 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 +32 -14
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +32 -14
- 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: [{
|
|
@@ -37936,13 +37954,13 @@ class DetailSidePanelComponent {
|
|
|
37936
37954
|
}
|
|
37937
37955
|
}
|
|
37938
37956
|
DetailSidePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
37939
|
-
DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">{{ expanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">{{ tab.icon || 'circle' }}</mat-icon>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37957
|
+
DetailSidePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DetailSidePanelComponent, selector: "cqa-detail-side-panel", inputs: { tabs: "tabs", activeTab: "activeTab", showCloseButton: "showCloseButton", expanded: "expanded", expandedWidth: "expandedWidth", collapsedWidth: "collapsedWidth", expandTooltip: "expandTooltip", collapseTooltip: "collapseTooltip", closeTooltip: "closeTooltip" }, outputs: { back: "back", tabChange: "tabChange", expandToggle: "expandToggle", close: "close" }, host: { properties: { "style.width": "this.hostWidth", "style.min-width": "this.hostMinWidth", "style.max-width": "this.hostMaxWidth", "style.overflow": "this.hostOverflow" }, styleAttribute: "transition: width 0.3s ease-in-out", classAttribute: "cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <!-- Chevron left when expanded, right when collapsed -->\n <svg\n *ngIf=\"expanded\"\n class=\"cqa-w-4 cqa-h-4\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.33333\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <svg\n *ngIf=\"!expanded\"\n class=\"cqa-w-4 cqa-h-4\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.33333\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <!-- Custom SVGs for specific tabs to match Figma icons, centered -->\n <ng-container *ngIf=\"tab.icon === 'description'; else codeTabIcon\">\n <svg\n class=\"cqa-w-5 cqa-h-5\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.5002 1.66663H5.00016C4.55814 1.66663 4.13421 1.84222 3.82165 2.15478C3.50909 2.46734 3.3335 2.89127 3.3335 3.33329V16.6666C3.3335 17.1087 3.50909 17.5326 3.82165 17.8451C4.13421 18.1577 4.55814 18.3333 5.00016 18.3333H15.0002C15.4422 18.3333 15.8661 18.1577 16.1787 17.8451C16.4912 17.5326 16.6668 17.1087 16.6668 16.6666V5.83329L12.5002 1.66663Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.6665 1.66663V4.99996C11.6665 5.44199 11.8421 5.86591 12.1547 6.17847C12.4672 6.49103 12.8911 6.66663 13.3332 6.66663H16.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M8.33317 7.5H6.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M13.3332 10.8334H6.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M13.3332 14.1666H6.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n <ng-template #codeTabIcon>\n <ng-container *ngIf=\"tab.icon === 'code'; else defaultTabIcon\">\n <svg\n class=\"cqa-w-5 cqa-h-5\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.99984 11.6666L6.24984 9.24996C6.38573 8.98007 6.59244 8.75221 6.84785 8.59075C7.10325 8.42928 7.39775 8.34029 7.69984 8.33329H16.6665M16.6665 8.33329C16.9211 8.33284 17.1724 8.39074 17.4012 8.50253C17.63 8.61432 17.8301 8.77703 17.9861 8.97818C18.1422 9.17933 18.2502 9.41357 18.3017 9.66292C18.3531 9.91227 18.3468 10.1701 18.2832 10.4166L16.9998 15.4166C16.907 15.7763 16.6967 16.0946 16.4023 16.321C16.1079 16.5475 15.7463 16.6691 15.3748 16.6666H3.33317C2.89114 16.6666 2.46722 16.491 2.15466 16.1785C1.8421 15.8659 1.6665 15.442 1.6665 15V4.16662C1.6665 3.7246 1.8421 3.30067 2.15466 2.98811C2.46722 2.67555 2.89114 2.49996 3.33317 2.49996H6.58317C6.86191 2.49723 7.13688 2.56445 7.38292 2.69547C7.62896 2.8265 7.8382 3.01715 7.9915 3.24996L8.6665 4.24996C8.81826 4.4804 9.02486 4.66956 9.26775 4.80046C9.51065 4.93136 9.78225 4.99991 10.0582 4.99996H14.9998C15.4419 4.99996 15.8658 5.17555 16.1783 5.48811C16.4909 5.80067 16.6665 6.2246 16.6665 6.66662V8.33329Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </ng-template>\n <ng-template #defaultTabIcon>\n <!-- History and other icons fallback -->\n <ng-container *ngIf=\"tab.icon === 'history'; else matIconFallback\">\n <svg\n class=\"cqa-w-5 cqa-h-5\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M25.99 6C16.04 6 8 14.06 8 24H2l7.79 7.79.14.29L18 24h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.87 0-7.36-1.58-9.89-4.11l-2.83 2.83C16.53 39.98 21.02 42 25.99 42 35.94 42 44 33.94 44 24S35.94 6 25.99 6zM24 16v10l8.56 5.08L34 28.65l-7-4.15V16h-3z\"\n fill=\"currentColor\" />\n </svg>\n </ng-container>\n <ng-template #matIconFallback>\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">{{ tab.icon || 'circle' }}</mat-icon>\n </ng-template>\n </ng-template>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".detail-side-panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;-webkit-overflow-scrolling:touch}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
37940
37958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
|
|
37941
37959
|
type: Component,
|
|
37942
37960
|
args: [{ selector: 'cqa-detail-side-panel', styles: [DETAIL_SIDE_PANEL_SCROLL_STYLES], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
37943
37961
|
class: 'cqa-ui-root cqa-flex cqa-flex-col cqa-h-full cqa-flex-shrink-0 cqa-flex-grow-0 cqa-bg-white cqa-shadow-[-4px_0_6px_-1px_rgba(0,0,0,0.05)]',
|
|
37944
37962
|
style: 'transition: width 0.3s ease-in-out',
|
|
37945
|
-
}, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <
|
|
37963
|
+
}, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-min-w-0 cqa-bg-white\">\n <!-- Main content: Side menu + Scrollable content -->\n <div\n class=\"cqa-grid cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden\"\n [style.grid-template-columns]=\"expanded ? 'auto 1fr' : 'auto 0fr'\"\n style=\"transition: grid-template-columns 0.3s ease-in-out\">\n <!-- Left vertical icon menu -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-py-4 cqa-px-2 cqa-border-r cqa-border-[#F5F5F5] cqa-flex-shrink-0 cqa-text-[#0A0A0A]\"\n style=\"box-shadow: 1px 4px 12px 1px rgba(0, 0, 0, 0.05);\">\n <!-- Expand / Collapse button (always visible) -->\n <button\n type=\"button\"\n [matTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onExpandToggle()\">\n <!-- Chevron left when expanded, right when collapsed -->\n <svg\n *ngIf=\"expanded\"\n class=\"cqa-w-4 cqa-h-4\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.33333\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n <svg\n *ngIf=\"!expanded\"\n class=\"cqa-w-4 cqa-h-4\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.33333\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- Close button -->\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n [matTooltip]=\"closeTooltip\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg cqa-text-[#64748B] hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onClose()\">\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">close</mat-icon>\n </button>\n <!-- Tab buttons (1:1 with tabs) -->\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n [matTooltip]=\"tab.label\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded-lg hover:cqa-bg-[#E2E8F0] hover:cqa-text-[#334155] cqa-transition-colors focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n <!-- Custom SVGs for specific tabs to match Figma icons, centered -->\n <ng-container *ngIf=\"tab.icon === 'description'; else codeTabIcon\">\n <svg\n class=\"cqa-w-5 cqa-h-5\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.5002 1.66663H5.00016C4.55814 1.66663 4.13421 1.84222 3.82165 2.15478C3.50909 2.46734 3.3335 2.89127 3.3335 3.33329V16.6666C3.3335 17.1087 3.50909 17.5326 3.82165 17.8451C4.13421 18.1577 4.55814 18.3333 5.00016 18.3333H15.0002C15.4422 18.3333 15.8661 18.1577 16.1787 17.8451C16.4912 17.5326 16.6668 17.1087 16.6668 16.6666V5.83329L12.5002 1.66663Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.6665 1.66663V4.99996C11.6665 5.44199 11.8421 5.86591 12.1547 6.17847C12.4672 6.49103 12.8911 6.66663 13.3332 6.66663H16.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M8.33317 7.5H6.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M13.3332 10.8334H6.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M13.3332 14.1666H6.6665\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n <ng-template #codeTabIcon>\n <ng-container *ngIf=\"tab.icon === 'code'; else defaultTabIcon\">\n <svg\n class=\"cqa-w-5 cqa-h-5\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 20 20\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.99984 11.6666L6.24984 9.24996C6.38573 8.98007 6.59244 8.75221 6.84785 8.59075C7.10325 8.42928 7.39775 8.34029 7.69984 8.33329H16.6665M16.6665 8.33329C16.9211 8.33284 17.1724 8.39074 17.4012 8.50253C17.63 8.61432 17.8301 8.77703 17.9861 8.97818C18.1422 9.17933 18.2502 9.41357 18.3017 9.66292C18.3531 9.91227 18.3468 10.1701 18.2832 10.4166L16.9998 15.4166C16.907 15.7763 16.6967 16.0946 16.4023 16.321C16.1079 16.5475 15.7463 16.6691 15.3748 16.6666H3.33317C2.89114 16.6666 2.46722 16.491 2.15466 16.1785C1.8421 15.8659 1.6665 15.442 1.6665 15V4.16662C1.6665 3.7246 1.8421 3.30067 2.15466 2.98811C2.46722 2.67555 2.89114 2.49996 3.33317 2.49996H6.58317C6.86191 2.49723 7.13688 2.56445 7.38292 2.69547C7.62896 2.8265 7.8382 3.01715 7.9915 3.24996L8.6665 4.24996C8.81826 4.4804 9.02486 4.66956 9.26775 4.80046C9.51065 4.93136 9.78225 4.99991 10.0582 4.99996H14.9998C15.4419 4.99996 15.8658 5.17555 16.1783 5.48811C16.4909 5.80067 16.6665 6.2246 16.6665 6.66662V8.33329Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.66667\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </ng-container>\n </ng-template>\n <ng-template #defaultTabIcon>\n <!-- History and other icons fallback -->\n <ng-container *ngIf=\"tab.icon === 'history'; else matIconFallback\">\n <svg\n class=\"cqa-w-5 cqa-h-5\"\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M25.99 6C16.04 6 8 14.06 8 24H2l7.79 7.79.14.29L18 24h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.87 0-7.36-1.58-9.89-4.11l-2.83 2.83C16.53 39.98 21.02 42 25.99 42 35.94 42 44 33.94 44 24S35.94 6 25.99 6zM24 16v10l8.56 5.08L34 28.65l-7-4.15V16h-3z\"\n fill=\"currentColor\" />\n </svg>\n </ng-container>\n <ng-template #matIconFallback>\n <mat-icon class=\"cqa-text-[20px] cqa-w-5 cqa-h-5 cqa-leading-[19px]\">{{ tab.icon || 'circle' }}</mat-icon>\n </ng-template>\n </ng-template>\n </button>\n </div>\n\n <!-- Scrollable content area (collapses with animation when expanded is false) -->\n <div class=\"cqa-flex cqa-flex-col cqa-min-h-0 cqa-min-w-0 cqa-overflow-hidden cqa-w-full cqa-h-full\">\n <div class=\"detail-side-panel-scroll cqa-flex-1 cqa-min-h-0 cqa-min-w-0 cqa-overflow-y-auto cqa-overflow-x-hidden cqa-p-4 cqa-space-y-4\" style=\"overflow-y: auto; overflow-x: hidden; min-height: 0; -webkit-overflow-scrolling: touch;\">\n <!-- Tabs: equally distributed (Figma: purple active, gray inactive) -->\n <div class=\"cqa-flex cqa-gap-[3.5px] cqa-p-[3.5px] cqa-bg-[#F1F5F9] cqa-rounded-lg cqa-w-full\" role=\"tablist\">\n <button\n *ngFor=\"let tab of tabs; trackBy: trackByTabValue\"\n type=\"button\"\n role=\"tab\"\n [attr.aria-selected]=\"activeTab === tab.value\"\n [class.cqa-bg-[#3F43EE]]=\"activeTab === tab.value\"\n [class.cqa-text-white]=\"activeTab === tab.value\"\n [class.cqa-text-[#64748B]]=\"activeTab !== tab.value\"\n class=\"cqa-flex-1 cqa-flex cqa-justify-center cqa-items-center cqa-py-2 cqa-rounded-lg cqa-text-xs cqa-font-medium cqa-transition-colors hover:cqa-opacity-90 focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#3F43EE] focus-visible:cqa-ring-offset-2\"\n (click)=\"onTabClick(tab)\">\n {{ tab.label }}\n </button>\n </div>\n\n <!-- Tab content: fully provided by host via content projection. Host uses *ngIf per tab so only active content is projected. Add/remove tabs in the host without changing cqa-ui-lib. -->\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
37946
37964
|
}], propDecorators: { tabs: [{
|
|
37947
37965
|
type: Input
|
|
37948
37966
|
}], activeTab: [{
|