@cqa-lib/cqa-ui 1.1.548-gamma.20 → 1.1.548-gamma.21
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/custom-input/custom-input.component.mjs +20 -4
- package/esm2020/lib/dialogs/name-prompt-modal.component.mjs +1 -1
- package/esm2020/lib/export-code-modal/export-code-modal.component.mjs +1 -1
- package/esm2020/lib/manage-columns-dialog/manage-columns-dialog.component.mjs +1 -1
- package/esm2020/lib/new-db-config-dialog/new-db-config-dialog.component.mjs +1 -1
- package/esm2020/lib/new-environment-dialog/new-environment-dialog.component.mjs +1 -1
- package/esm2020/lib/new-environment-variable-dialog/new-environment-variable-dialog.component.mjs +5 -13
- package/esm2020/lib/new-global-variable-dialog/new-global-variable-dialog.component.mjs +1 -1
- package/esm2020/lib/new-test-data-profile-dialog/new-test-data-profile-dialog.component.mjs +172 -13
- package/esm2020/lib/new-test-data-profile-dialog/new-test-data-profile-dialog.models.mjs +1 -1
- package/esm2020/lib/questionnaire-list/questionnaire-list.component.mjs +1 -1
- package/esm2020/lib/step-builder/advanced-variables-form/advanced-variables-form.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-ai-agent/step-builder-ai-agent.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-custom-code/step-builder-custom-code.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-database/step-builder-database.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-document/step-builder-document.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-document-generation-template-step/step-builder-document-generation-template-step.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-group/step-builder-group.component.mjs +1 -1
- package/esm2020/lib/step-builder/step-builder-loop/step-builder-loop.component.mjs +1 -1
- package/esm2020/lib/step-builder/template-variables-form/template-variables-form.component.mjs +1 -1
- package/esm2020/lib/templates/modular-table-template/dialogs/new-folder-dialog.component.mjs +1 -1
- package/esm2020/lib/test-case-details/api-edit-step/api-edit-step.component.mjs +1 -1
- package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs +1 -1
- package/esm2020/lib/test-case-details/create-step-group/create-step-group.component.mjs +1 -1
- package/esm2020/lib/test-case-details/data-library-panel/data-library-panel.component.mjs +3 -3
- package/esm2020/lib/test-case-details/element-popup/element-form/element-form.component.mjs +1 -1
- package/esm2020/lib/test-case-details/step-details-drawer/step-details-drawer.component.mjs +1 -1
- package/esm2020/lib/test-case-details/test-case-details-edit/test-case-details-edit.component.mjs +1 -1
- package/esm2020/lib/test-case-details/test-data-modal/test-data-modal.component.mjs +1 -1
- package/esm2020/lib/viewport-selector/viewport-selector.component.mjs +1 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +218 -53
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +217 -53
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/custom-input/custom-input.component.d.ts +6 -1
- package/lib/new-test-data-profile-dialog/new-test-data-profile-dialog.component.d.ts +39 -5
- package/lib/new-test-data-profile-dialog/new-test-data-profile-dialog.models.d.ts +18 -0
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -6832,12 +6832,25 @@ class CustomInputComponent {
|
|
|
6832
6832
|
this.size = 'md';
|
|
6833
6833
|
this.fullWidth = false;
|
|
6834
6834
|
this.showCharCount = false;
|
|
6835
|
+
this.showPasswordToggle = false;
|
|
6835
6836
|
this.valueChange = new EventEmitter();
|
|
6836
6837
|
this.blurred = new EventEmitter();
|
|
6837
6838
|
this.focused = new EventEmitter();
|
|
6838
6839
|
this.enterPressed = new EventEmitter();
|
|
6839
6840
|
this.inputValue = '';
|
|
6840
6841
|
this.isFocused = false;
|
|
6842
|
+
this.passwordVisible = false;
|
|
6843
|
+
}
|
|
6844
|
+
get effectiveType() {
|
|
6845
|
+
return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
|
|
6846
|
+
}
|
|
6847
|
+
get isPasswordToggleVisible() {
|
|
6848
|
+
return this.showPasswordToggle && this.type === 'password' && !this.disabled;
|
|
6849
|
+
}
|
|
6850
|
+
togglePasswordVisible(event) {
|
|
6851
|
+
event.preventDefault();
|
|
6852
|
+
event.stopPropagation();
|
|
6853
|
+
this.passwordVisible = !this.passwordVisible;
|
|
6841
6854
|
}
|
|
6842
6855
|
ngOnChanges(changes) {
|
|
6843
6856
|
if (changes['value'] && changes['value'].currentValue !== undefined) {
|
|
@@ -6911,10 +6924,10 @@ class CustomInputComponent {
|
|
|
6911
6924
|
}
|
|
6912
6925
|
}
|
|
6913
6926
|
CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6914
|
-
CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomInputComponent, selector: "cqa-custom-input", inputs: { inputId: "inputId", label: "label", type: "type", placeholder: "placeholder", value: "value", disabled: "disabled", errors: "errors", required: "required", ariaLabel: "ariaLabel", size: "size", fullWidth: "fullWidth", maxLength: "maxLength", showCharCount: "showCharCount", inputInlineStyle: "inputInlineStyle", labelInlineStyle: "labelInlineStyle" }, outputs: { valueChange: "valueChange", blurred: "blurred", focused: "focused", enterPressed: "enterPressed" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <label \n *ngIf=\"label\"\n class=\"cqa-font-medium cqa-text-[#374151]\"\n [ngClass]=\"labelSizeClasses\"\n [style]=\"labelStyles\">\n {{ label }}\n <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n\n <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <input\n [attr.id]=\"inputId\"\n [attr.name]=\"inputId\"\n [type]=\"
|
|
6927
|
+
CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomInputComponent, selector: "cqa-custom-input", inputs: { inputId: "inputId", label: "label", type: "type", placeholder: "placeholder", value: "value", disabled: "disabled", errors: "errors", required: "required", ariaLabel: "ariaLabel", size: "size", fullWidth: "fullWidth", maxLength: "maxLength", showCharCount: "showCharCount", inputInlineStyle: "inputInlineStyle", labelInlineStyle: "labelInlineStyle", showPasswordToggle: "showPasswordToggle" }, outputs: { valueChange: "valueChange", blurred: "blurred", focused: "focused", enterPressed: "enterPressed" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <label \n *ngIf=\"label\"\n class=\"cqa-font-medium cqa-text-[#374151]\"\n [ngClass]=\"labelSizeClasses\"\n [style]=\"labelStyles\">\n {{ label }}\n <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n\n <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <input\n [attr.id]=\"inputId\"\n [attr.name]=\"inputId\"\n [type]=\"effectiveType\"\n class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none {{ inputSizeClasses }}\"\n [ngClass]=\"{\n 'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n 'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n 'cqa-outline-none': true,\n 'cqa-pr-10': isPasswordToggleVisible\n }\"\n [style]=\"inputStyles\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel || label\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-required]=\"required\"\n autocomplete=\"off\"\n />\n <button\n *ngIf=\"isPasswordToggleVisible\"\n type=\"button\"\n class=\"cqa-absolute cqa-inset-y-0 cqa-right-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-bg-transparent cqa-border-0 cqa-cursor-pointer cqa-text-[#64748B] hover:cqa-text-[#0F172A]\"\n [attr.aria-label]=\"passwordVisible ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"passwordVisible\"\n tabindex=\"-1\"\n (click)=\"togglePasswordVisible($event)\">\n <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px]\" style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">\n {{ passwordVisible ? 'visibility_off' : 'visibility' }}\n </mat-icon>\n </button>\n </div>\n\n <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n {{ inputValue.length }}/{{ maxLength }}\n </span>\n </div>\n\n <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg \n xmlns=\"http://www.w3.org/2000/svg\" \n width=\"14\" \n height=\"14\" \n viewBox=\"0 0 14 14\" \n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n {{ error }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6915
6928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, decorators: [{
|
|
6916
6929
|
type: Component,
|
|
6917
|
-
args: [{ selector: 'cqa-custom-input', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <label \n *ngIf=\"label\"\n class=\"cqa-font-medium cqa-text-[#374151]\"\n [ngClass]=\"labelSizeClasses\"\n [style]=\"labelStyles\">\n {{ label }}\n <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n\n <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <input\n [attr.id]=\"inputId\"\n [attr.name]=\"inputId\"\n [type]=\"
|
|
6930
|
+
args: [{ selector: 'cqa-custom-input', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <label \n *ngIf=\"label\"\n class=\"cqa-font-medium cqa-text-[#374151]\"\n [ngClass]=\"labelSizeClasses\"\n [style]=\"labelStyles\">\n {{ label }}\n <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n\n <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <input\n [attr.id]=\"inputId\"\n [attr.name]=\"inputId\"\n [type]=\"effectiveType\"\n class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none {{ inputSizeClasses }}\"\n [ngClass]=\"{\n 'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n 'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n 'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n 'cqa-outline-none': true,\n 'cqa-pr-10': isPasswordToggleVisible\n }\"\n [style]=\"inputStyles\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel || label\"\n [attr.aria-invalid]=\"hasError\"\n [attr.aria-required]=\"required\"\n autocomplete=\"off\"\n />\n <button\n *ngIf=\"isPasswordToggleVisible\"\n type=\"button\"\n class=\"cqa-absolute cqa-inset-y-0 cqa-right-0 cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-bg-transparent cqa-border-0 cqa-cursor-pointer cqa-text-[#64748B] hover:cqa-text-[#0F172A]\"\n [attr.aria-label]=\"passwordVisible ? 'Hide password' : 'Show password'\"\n [attr.aria-pressed]=\"passwordVisible\"\n tabindex=\"-1\"\n (click)=\"togglePasswordVisible($event)\">\n <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px]\" style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">\n {{ passwordVisible ? 'visibility_off' : 'visibility' }}\n </mat-icon>\n </button>\n </div>\n\n <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n {{ inputValue.length }}/{{ maxLength }}\n </span>\n </div>\n\n <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg \n xmlns=\"http://www.w3.org/2000/svg\" \n width=\"14\" \n height=\"14\" \n viewBox=\"0 0 14 14\" \n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n {{ error }}\n </span>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6918
6931
|
}], propDecorators: { inputId: [{
|
|
6919
6932
|
type: Input
|
|
6920
6933
|
}], label: [{
|
|
@@ -6945,6 +6958,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6945
6958
|
type: Input
|
|
6946
6959
|
}], labelInlineStyle: [{
|
|
6947
6960
|
type: Input
|
|
6961
|
+
}], showPasswordToggle: [{
|
|
6962
|
+
type: Input
|
|
6948
6963
|
}], valueChange: [{
|
|
6949
6964
|
type: Output
|
|
6950
6965
|
}], blurred: [{
|
|
@@ -7070,7 +7085,7 @@ class ExportCodeModalComponent {
|
|
|
7070
7085
|
}
|
|
7071
7086
|
}
|
|
7072
7087
|
ExportCodeModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExportCodeModalComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$5.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
7073
|
-
ExportCodeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: { isOpen: "isOpen", cases: "cases", disabled: "disabled" }, outputs: { closeModal: "closeModal", export: "export" }, ngImport: i0, template: "<div *ngIf=\"isOpen || isDialogMode\"\n [class.modal-backdrop]=\"!isDialogMode\"\n [class.cqa-fixed]=\"!isDialogMode\"\n [class.cqa-inset-0]=\"!isDialogMode\"\n [class.cqa-bg-black]=\"!isDialogMode\"\n [class.cqa-bg-opacity-50]=\"!isDialogMode\"\n [class.cqa-flex]=\"!isDialogMode\"\n [class.cqa-items-center]=\"!isDialogMode\"\n [class.cqa-justify-center]=\"!isDialogMode\"\n [class.cqa-p-4]=\"!isDialogMode\"\n (click)=\"!isDialogMode && onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[600px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh]\"\n [style.box-shadow]=\"'0px 8px 8px -4px #10182808'\" \n (click)=\"!isDialogMode && $event.stopPropagation()\">\n\n <!-- Sticky Header -->\n <div class=\"cqa-sticky cqa-top-0 cqa-bg-white cqa-mt-2 cqa-z-10 cqa-px-4 cqa-pt-2 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C]\">\n Export Code\n </h2>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'md'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Framework Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2\">Choose automation framework:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-border-gray-300]=\"framework !== 'WEBDRIVER_IO'\"\n (click)=\"framework = 'WEBDRIVER_IO'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'WEBDRIVER_IO'\"\n (click)=\"$event.stopPropagation()\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">WebdriverIO</span>\n </div>\n </div>\n </div>\n\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-border-gray-300]=\"framework !== 'SELENIUM_JAVA'\"\n (click)=\"framework = 'SELENIUM_JAVA'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'SELENIUM_JAVA'\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Selenium Java</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Export Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2 cqa-mt-3\">Choose how you want to export the test case code:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"exportOnLocal\"\n [class.cqa-border-gray-300]=\"!exportOnLocal\"\n (click)=\"exportOnLocal = true\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"exportOnLocal\" \n (click)=\"$event.stopPropagation()\"\n name=\"exportType\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Download in Local</span>\n </div>\n </div>\n </div>\n \n <div \n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"!exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"!exportOnLocal\"\n [class.cqa-border-gray-300]=\"exportOnLocal\"\n (click)=\"exportOnLocal = false\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"!exportOnLocal\" \n name=\"exportType\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Via Email</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Email Input Section (only shown when Via Email is selected) -->\n <div class=\"cqa-mt-2\" *ngIf=\"!exportOnLocal\">\n <div class=\"cqa-px-4 cqa-py-2 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Email Addresses:</div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [type]=\"'email'\"\n [placeholder]=\"'Type email and press Enter or Add button'\"\n [value]=\"emailInputControl.value || ''\"\n [fullWidth]=\"true\"\n [errors]=\"getEmailErrors()\"\n (valueChange)=\"emailInputControl.setValue($event)\"\n (enterPressed)=\"addEmail()\">\n </cqa-custom-input>\n <cqa-button \n [variant]=\"'outlined'\"\n [icon]=\"'add'\"\n [btnSize]=\"'lg'\"\n [disabled]=\"!emailInputControl.valid || !emailInputControl.value?.trim()\"\n (clicked)=\"addEmail()\">\n </cqa-button>\n </div>\n\n <!-- Email Validation Error for Empty List -->\n <div class=\"cqa-text-red-600 cqa-text-xs cqa-mb-2\" *ngIf=\"!exportOnLocal && emailList.length === 0 && showEmailError\">\n At least one email address is required\n </div>\n\n <!-- Email Chips -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-mt-2\" *ngIf=\"emailList.length > 0\">\n <div *ngFor=\"let email of emailList; let i = index\" \n class=\"cqa-px-2 cqa-py-1 cqa-bg-[#DFDFFD] cqa-border cqa-border-[#DFDFFD] cqa-rounded-md cqa-flex cqa-items-center\">\n <span class=\"cqa-text-[#6366F1] cqa-text-[12px]\">{{email}}</span>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'sm'\"\n [iconColor]=\"'#6366F1'\"\n (clicked)=\"removeEmail(i)\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Cases List -->\n <div class=\"cqa-mt-1\" *ngIf=\"cases.length > 0\">\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Test Cases to Export ({{cases.length}}):</div>\n <div class=\"cqa-max-h-[150px] cqa-overflow-y-auto cqa-pr-4\">\n <div class=\"cqa-py-2 cqa-border-b cqa-border-b-[1px] cqa-border-t-[0px] cqa-border-l-[0px] cqa-border-r-[0px] cqa-border-solid cqa-border-gray-200 cqa-flex cqa-items-center cqa-gap-2\" *ngFor=\"let case of cases; let i = index\">\n <span class=\"cqa-font-medium cqa-text-[12px] cqa-text-[#3f43ee] cqa-min-w-[24px]\">{{i + 1}}.</span>\n <span class=\"cqa-flex-1 cqa-text-[12px] cqa-text-[#0B0B0C]\">{{case.name || 'Unnamed Test Case'}}</span>\n <span class=\"cqa-text-xs cqa-text-gray-500\" *ngIf=\"case.id\">(TC-{{case.id}})</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-4 cqa-py-3 cqa-border-t cqa-border-gray-200 cqa-flex cqa-justify-end cqa-gap-3\">\n <cqa-button \n [variant]=\"'outlined'\"\n [text]=\"'Cancel'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n <cqa-button \n [variant]=\"'filled'\"\n [text]=\"exportOnLocal ? 'Export' : 'Send'\"\n [disabled]=\"disabled || isExportDisabled()\"\n (clicked)=\"handleExport()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7088
|
+
ExportCodeModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: { isOpen: "isOpen", cases: "cases", disabled: "disabled" }, outputs: { closeModal: "closeModal", export: "export" }, ngImport: i0, template: "<div *ngIf=\"isOpen || isDialogMode\"\n [class.modal-backdrop]=\"!isDialogMode\"\n [class.cqa-fixed]=\"!isDialogMode\"\n [class.cqa-inset-0]=\"!isDialogMode\"\n [class.cqa-bg-black]=\"!isDialogMode\"\n [class.cqa-bg-opacity-50]=\"!isDialogMode\"\n [class.cqa-flex]=\"!isDialogMode\"\n [class.cqa-items-center]=\"!isDialogMode\"\n [class.cqa-justify-center]=\"!isDialogMode\"\n [class.cqa-p-4]=\"!isDialogMode\"\n (click)=\"!isDialogMode && onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[600px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh]\"\n [style.box-shadow]=\"'0px 8px 8px -4px #10182808'\" \n (click)=\"!isDialogMode && $event.stopPropagation()\">\n\n <!-- Sticky Header -->\n <div class=\"cqa-sticky cqa-top-0 cqa-bg-white cqa-mt-2 cqa-z-10 cqa-px-4 cqa-pt-2 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C]\">\n Export Code\n </h2>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'md'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Framework Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2\">Choose automation framework:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-border-gray-300]=\"framework !== 'WEBDRIVER_IO'\"\n (click)=\"framework = 'WEBDRIVER_IO'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'WEBDRIVER_IO'\"\n (click)=\"$event.stopPropagation()\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">WebdriverIO</span>\n </div>\n </div>\n </div>\n\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-border-gray-300]=\"framework !== 'SELENIUM_JAVA'\"\n (click)=\"framework = 'SELENIUM_JAVA'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'SELENIUM_JAVA'\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Selenium Java</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Export Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2 cqa-mt-3\">Choose how you want to export the test case code:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"exportOnLocal\"\n [class.cqa-border-gray-300]=\"!exportOnLocal\"\n (click)=\"exportOnLocal = true\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"exportOnLocal\" \n (click)=\"$event.stopPropagation()\"\n name=\"exportType\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Download in Local</span>\n </div>\n </div>\n </div>\n \n <div \n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"!exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"!exportOnLocal\"\n [class.cqa-border-gray-300]=\"exportOnLocal\"\n (click)=\"exportOnLocal = false\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"!exportOnLocal\" \n name=\"exportType\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Via Email</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Email Input Section (only shown when Via Email is selected) -->\n <div class=\"cqa-mt-2\" *ngIf=\"!exportOnLocal\">\n <div class=\"cqa-px-4 cqa-py-2 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Email Addresses:</div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [type]=\"'email'\"\n [placeholder]=\"'Type email and press Enter or Add button'\"\n [value]=\"emailInputControl.value || ''\"\n [fullWidth]=\"true\"\n [errors]=\"getEmailErrors()\"\n (valueChange)=\"emailInputControl.setValue($event)\"\n (enterPressed)=\"addEmail()\">\n </cqa-custom-input>\n <cqa-button \n [variant]=\"'outlined'\"\n [icon]=\"'add'\"\n [btnSize]=\"'lg'\"\n [disabled]=\"!emailInputControl.valid || !emailInputControl.value?.trim()\"\n (clicked)=\"addEmail()\">\n </cqa-button>\n </div>\n\n <!-- Email Validation Error for Empty List -->\n <div class=\"cqa-text-red-600 cqa-text-xs cqa-mb-2\" *ngIf=\"!exportOnLocal && emailList.length === 0 && showEmailError\">\n At least one email address is required\n </div>\n\n <!-- Email Chips -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-mt-2\" *ngIf=\"emailList.length > 0\">\n <div *ngFor=\"let email of emailList; let i = index\" \n class=\"cqa-px-2 cqa-py-1 cqa-bg-[#DFDFFD] cqa-border cqa-border-[#DFDFFD] cqa-rounded-md cqa-flex cqa-items-center\">\n <span class=\"cqa-text-[#6366F1] cqa-text-[12px]\">{{email}}</span>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'sm'\"\n [iconColor]=\"'#6366F1'\"\n (clicked)=\"removeEmail(i)\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Cases List -->\n <div class=\"cqa-mt-1\" *ngIf=\"cases.length > 0\">\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Test Cases to Export ({{cases.length}}):</div>\n <div class=\"cqa-max-h-[150px] cqa-overflow-y-auto cqa-pr-4\">\n <div class=\"cqa-py-2 cqa-border-b cqa-border-b-[1px] cqa-border-t-[0px] cqa-border-l-[0px] cqa-border-r-[0px] cqa-border-solid cqa-border-gray-200 cqa-flex cqa-items-center cqa-gap-2\" *ngFor=\"let case of cases; let i = index\">\n <span class=\"cqa-font-medium cqa-text-[12px] cqa-text-[#3f43ee] cqa-min-w-[24px]\">{{i + 1}}.</span>\n <span class=\"cqa-flex-1 cqa-text-[12px] cqa-text-[#0B0B0C]\">{{case.name || 'Unnamed Test Case'}}</span>\n <span class=\"cqa-text-xs cqa-text-gray-500\" *ngIf=\"case.id\">(TC-{{case.id}})</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-4 cqa-py-3 cqa-border-t cqa-border-gray-200 cqa-flex cqa-justify-end cqa-gap-3\">\n <cqa-button \n [variant]=\"'outlined'\"\n [text]=\"'Cancel'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n <cqa-button \n [variant]=\"'filled'\"\n [text]=\"exportOnLocal ? 'Export' : 'Send'\"\n [disabled]=\"disabled || isExportDisabled()\"\n (clicked)=\"handleExport()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
7074
7089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExportCodeModalComponent, decorators: [{
|
|
7075
7090
|
type: Component,
|
|
7076
7091
|
args: [{ selector: 'cqa-export-code-modal', template: "<div *ngIf=\"isOpen || isDialogMode\"\n [class.modal-backdrop]=\"!isDialogMode\"\n [class.cqa-fixed]=\"!isDialogMode\"\n [class.cqa-inset-0]=\"!isDialogMode\"\n [class.cqa-bg-black]=\"!isDialogMode\"\n [class.cqa-bg-opacity-50]=\"!isDialogMode\"\n [class.cqa-flex]=\"!isDialogMode\"\n [class.cqa-items-center]=\"!isDialogMode\"\n [class.cqa-justify-center]=\"!isDialogMode\"\n [class.cqa-p-4]=\"!isDialogMode\"\n (click)=\"!isDialogMode && onBackdropClick($event)\">\n <div\n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[600px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh]\"\n [style.box-shadow]=\"'0px 8px 8px -4px #10182808'\" \n (click)=\"!isDialogMode && $event.stopPropagation()\">\n\n <!-- Sticky Header -->\n <div class=\"cqa-sticky cqa-top-0 cqa-bg-white cqa-mt-2 cqa-z-10 cqa-px-4 cqa-pt-2 cqa-pb-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#0B0B0C]\">\n Export Code\n </h2>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'md'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Framework Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2\">Choose automation framework:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'WEBDRIVER_IO'\"\n [class.cqa-border-gray-300]=\"framework !== 'WEBDRIVER_IO'\"\n (click)=\"framework = 'WEBDRIVER_IO'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'WEBDRIVER_IO'\"\n (click)=\"$event.stopPropagation()\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">WebdriverIO</span>\n </div>\n </div>\n </div>\n\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-bg-[#F0F0FF]]=\"framework === 'SELENIUM_JAVA'\"\n [class.cqa-border-gray-300]=\"framework !== 'SELENIUM_JAVA'\"\n (click)=\"framework = 'SELENIUM_JAVA'\">\n <div class=\"cqa-flex cqa-items-center\">\n <input\n type=\"radio\"\n [checked]=\"framework === 'SELENIUM_JAVA'\"\n name=\"framework\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Selenium Java</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Export Options -->\n <p class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-2 cqa-mt-3\">Choose how you want to export the test case code:</p>\n <div class=\"cqa-flex cqa-gap-4 cqa-mb-2\">\n <div\n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"exportOnLocal\"\n [class.cqa-border-gray-300]=\"!exportOnLocal\"\n (click)=\"exportOnLocal = true\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"exportOnLocal\" \n (click)=\"$event.stopPropagation()\"\n name=\"exportType\"\n style=\"pointer-events: none;\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Download in Local</span>\n </div>\n </div>\n </div>\n \n <div \n class=\"cqa-flex-1 cqa-border cqa-rounded-lg cqa-px-4 cqa-py-1 cqa-cursor-pointer cqa-transition-all\"\n [class.cqa-border-[#3f43ee]]=\"!exportOnLocal\"\n [class.cqa-bg-[#F0F0FF]]=\"!exportOnLocal\"\n [class.cqa-border-gray-300]=\"exportOnLocal\"\n (click)=\"exportOnLocal = false\">\n <div class=\"cqa-flex cqa-items-center\">\n <input \n type=\"radio\" \n [checked]=\"!exportOnLocal\" \n name=\"exportType\"\n style=\"pointer-events: none;\"\n (click)=\"$event.stopPropagation()\"\n class=\"cqa-mr-2 cqa-cursor-pointer\">\n <div>\n <span class=\"cqa-block cqa-font-medium cqa-text-[#0B0B0C]\">Via Email</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Email Input Section (only shown when Via Email is selected) -->\n <div class=\"cqa-mt-2\" *ngIf=\"!exportOnLocal\">\n <div class=\"cqa-px-4 cqa-py-2 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Email Addresses:</div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [type]=\"'email'\"\n [placeholder]=\"'Type email and press Enter or Add button'\"\n [value]=\"emailInputControl.value || ''\"\n [fullWidth]=\"true\"\n [errors]=\"getEmailErrors()\"\n (valueChange)=\"emailInputControl.setValue($event)\"\n (enterPressed)=\"addEmail()\">\n </cqa-custom-input>\n <cqa-button \n [variant]=\"'outlined'\"\n [icon]=\"'add'\"\n [btnSize]=\"'lg'\"\n [disabled]=\"!emailInputControl.valid || !emailInputControl.value?.trim()\"\n (clicked)=\"addEmail()\">\n </cqa-button>\n </div>\n\n <!-- Email Validation Error for Empty List -->\n <div class=\"cqa-text-red-600 cqa-text-xs cqa-mb-2\" *ngIf=\"!exportOnLocal && emailList.length === 0 && showEmailError\">\n At least one email address is required\n </div>\n\n <!-- Email Chips -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-mt-2\" *ngIf=\"emailList.length > 0\">\n <div *ngFor=\"let email of emailList; let i = index\" \n class=\"cqa-px-2 cqa-py-1 cqa-bg-[#DFDFFD] cqa-border cqa-border-[#DFDFFD] cqa-rounded-md cqa-flex cqa-items-center\">\n <span class=\"cqa-text-[#6366F1] cqa-text-[12px]\">{{email}}</span>\n <cqa-button \n [variant]=\"'text'\"\n [icon]=\"'close'\"\n [btnSize]=\"'sm'\"\n [iconColor]=\"'#6366F1'\"\n (clicked)=\"removeEmail(i)\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Cases List -->\n <div class=\"cqa-mt-1\" *ngIf=\"cases.length > 0\">\n <div class=\"cqa-p-4 cqa-bg-gray-50 cqa-rounded-lg\">\n <div class=\"cqa-font-medium cqa-text-sm cqa-text-[#0B0B0C] cqa-mb-2\">Test Cases to Export ({{cases.length}}):</div>\n <div class=\"cqa-max-h-[150px] cqa-overflow-y-auto cqa-pr-4\">\n <div class=\"cqa-py-2 cqa-border-b cqa-border-b-[1px] cqa-border-t-[0px] cqa-border-l-[0px] cqa-border-r-[0px] cqa-border-solid cqa-border-gray-200 cqa-flex cqa-items-center cqa-gap-2\" *ngFor=\"let case of cases; let i = index\">\n <span class=\"cqa-font-medium cqa-text-[12px] cqa-text-[#3f43ee] cqa-min-w-[24px]\">{{i + 1}}.</span>\n <span class=\"cqa-flex-1 cqa-text-[12px] cqa-text-[#0B0B0C]\">{{case.name || 'Unnamed Test Case'}}</span>\n <span class=\"cqa-text-xs cqa-text-gray-500\" *ngIf=\"case.id\">(TC-{{case.id}})</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-4 cqa-py-3 cqa-border-t cqa-border-gray-200 cqa-flex cqa-justify-end cqa-gap-3\">\n <cqa-button \n [variant]=\"'outlined'\"\n [text]=\"'Cancel'\"\n (clicked)=\"onClose()\">\n </cqa-button>\n <cqa-button \n [variant]=\"'filled'\"\n [text]=\"exportOnLocal ? 'Export' : 'Send'\"\n [disabled]=\"disabled || isExportDisabled()\"\n (clicked)=\"handleExport()\">\n </cqa-button>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -8441,7 +8456,7 @@ NewFolderDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
|
|
|
8441
8456
|
</div>
|
|
8442
8457
|
</div>
|
|
8443
8458
|
</div>
|
|
8444
|
-
`, isInline: true, components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: MoveToFolderDialogComponent, selector: "cqa-move-to-folder-dialog", inputs: ["folders", "labels", "currentFolderId", "pickedFolderId", "initialExpandedIds", "rootDisabled", "pickerHeight"], outputs: ["folderPicked", "pickedFolderIdChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8459
|
+
`, isInline: true, components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: MoveToFolderDialogComponent, selector: "cqa-move-to-folder-dialog", inputs: ["folders", "labels", "currentFolderId", "pickedFolderId", "initialExpandedIds", "rootDisabled", "pickerHeight"], outputs: ["folderPicked", "pickedFolderIdChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8445
8460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewFolderDialogComponent, decorators: [{
|
|
8446
8461
|
type: Component,
|
|
8447
8462
|
args: [{ selector: 'cqa-new-folder-dialog', template: `
|
|
@@ -11495,7 +11510,7 @@ class NamePromptModalComponent {
|
|
|
11495
11510
|
}
|
|
11496
11511
|
}
|
|
11497
11512
|
NamePromptModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NamePromptModalComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
11498
|
-
NamePromptModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NamePromptModalComponent, selector: "cqa-name-prompt-modal", inputs: { isOpen: "isOpen", title: "title", description: "description", label: "label", placeholder: "placeholder", submitButtonText: "submitButtonText", cancelButtonText: "cancelButtonText", isSubmitting: "isSubmitting", name: "name" }, outputs: { nameChange: "nameChange", submitted: "submitted", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n id=\"cqa-ui-root\"\n style=\"position: fixed; inset: 0; z-index: 1000;\">\n <div class=\"cqa-fixed cqa-inset-0 cqa-bg-black/40\"\n (click)=\"onBackdropClick()\"></div>\n\n <div class=\"cqa-fixed cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-pointer-events-none\">\n <div class=\"cqa-relative cqa-w-full cqa-max-w-[480px] cqa-bg-white cqa-rounded-2xl cqa-shadow-md cqa-border cqa-border-border-default cqa-pointer-events-auto\"\n (keydown.escape)=\"onEscape($event)\"\n tabindex=\"-1\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-p-6 cqa-pb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-title cqa-m-0\">{{ title }}</h2>\n <p *ngIf=\"description\"\n class=\"cqa-text-sm cqa-text-description cqa-m-0\">\n {{ description }}\n </p>\n </div>\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-bg-transparent cqa-border-0 cqa-text-description hover:cqa-text-title\"\n [class.cqa-cursor-pointer]=\"!isSubmitting\"\n [class.cqa-cursor-not-allowed]=\"isSubmitting\"\n [class.cqa-opacity-50]=\"isSubmitting\"\n [disabled]=\"isSubmitting\"\n (click)=\"onClose()\"\n aria-label=\"Close\">\n <mat-icon class=\"cqa-text-[20px] cqa-leading-5 cqa-h-5 cqa-w-5\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"cqa-px-6 cqa-pb-5\">\n <cqa-custom-input\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrors\"\n (valueChange)=\"onNameChange($event)\"\n (enterPressed)=\"submit()\">\n </cqa-custom-input>\n </div>\n\n <div class=\"cqa-border-t cqa-border-border-default cqa-px-6 cqa-py-4 cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <cqa-button variant=\"outlined\"\n [text]=\"cancelButtonText\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button variant=\"filled\"\n [text]=\"submitButtonText\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [loading]=\"isSubmitting\"\n [disabled]=\"!isValid || isSubmitting\"\n (clicked)=\"submit()\">\n </cqa-button>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11513
|
+
NamePromptModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NamePromptModalComponent, selector: "cqa-name-prompt-modal", inputs: { isOpen: "isOpen", title: "title", description: "description", label: "label", placeholder: "placeholder", submitButtonText: "submitButtonText", cancelButtonText: "cancelButtonText", isSubmitting: "isSubmitting", name: "name" }, outputs: { nameChange: "nameChange", submitted: "submitted", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div *ngIf=\"isOpen\"\n id=\"cqa-ui-root\"\n style=\"position: fixed; inset: 0; z-index: 1000;\">\n <div class=\"cqa-fixed cqa-inset-0 cqa-bg-black/40\"\n (click)=\"onBackdropClick()\"></div>\n\n <div class=\"cqa-fixed cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-pointer-events-none\">\n <div class=\"cqa-relative cqa-w-full cqa-max-w-[480px] cqa-bg-white cqa-rounded-2xl cqa-shadow-md cqa-border cqa-border-border-default cqa-pointer-events-auto\"\n (keydown.escape)=\"onEscape($event)\"\n tabindex=\"-1\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-p-6 cqa-pb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-title cqa-m-0\">{{ title }}</h2>\n <p *ngIf=\"description\"\n class=\"cqa-text-sm cqa-text-description cqa-m-0\">\n {{ description }}\n </p>\n </div>\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-bg-transparent cqa-border-0 cqa-text-description hover:cqa-text-title\"\n [class.cqa-cursor-pointer]=\"!isSubmitting\"\n [class.cqa-cursor-not-allowed]=\"isSubmitting\"\n [class.cqa-opacity-50]=\"isSubmitting\"\n [disabled]=\"isSubmitting\"\n (click)=\"onClose()\"\n aria-label=\"Close\">\n <mat-icon class=\"cqa-text-[20px] cqa-leading-5 cqa-h-5 cqa-w-5\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"cqa-px-6 cqa-pb-5\">\n <cqa-custom-input\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrors\"\n (valueChange)=\"onNameChange($event)\"\n (enterPressed)=\"submit()\">\n </cqa-custom-input>\n </div>\n\n <div class=\"cqa-border-t cqa-border-border-default cqa-px-6 cqa-py-4 cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <cqa-button variant=\"outlined\"\n [text]=\"cancelButtonText\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button variant=\"filled\"\n [text]=\"submitButtonText\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [loading]=\"isSubmitting\"\n [disabled]=\"!isValid || isSubmitting\"\n (clicked)=\"submit()\">\n </cqa-button>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11499
11514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NamePromptModalComponent, decorators: [{
|
|
11500
11515
|
type: Component,
|
|
11501
11516
|
args: [{ selector: 'cqa-name-prompt-modal', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div *ngIf=\"isOpen\"\n id=\"cqa-ui-root\"\n style=\"position: fixed; inset: 0; z-index: 1000;\">\n <div class=\"cqa-fixed cqa-inset-0 cqa-bg-black/40\"\n (click)=\"onBackdropClick()\"></div>\n\n <div class=\"cqa-fixed cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-p-4 cqa-pointer-events-none\">\n <div class=\"cqa-relative cqa-w-full cqa-max-w-[480px] cqa-bg-white cqa-rounded-2xl cqa-shadow-md cqa-border cqa-border-border-default cqa-pointer-events-auto\"\n (keydown.escape)=\"onEscape($event)\"\n tabindex=\"-1\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-p-6 cqa-pb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-title cqa-m-0\">{{ title }}</h2>\n <p *ngIf=\"description\"\n class=\"cqa-text-sm cqa-text-description cqa-m-0\">\n {{ description }}\n </p>\n </div>\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-6 cqa-w-6 cqa-rounded cqa-bg-transparent cqa-border-0 cqa-text-description hover:cqa-text-title\"\n [class.cqa-cursor-pointer]=\"!isSubmitting\"\n [class.cqa-cursor-not-allowed]=\"isSubmitting\"\n [class.cqa-opacity-50]=\"isSubmitting\"\n [disabled]=\"isSubmitting\"\n (click)=\"onClose()\"\n aria-label=\"Close\">\n <mat-icon class=\"cqa-text-[20px] cqa-leading-5 cqa-h-5 cqa-w-5\">close</mat-icon>\n </button>\n </div>\n\n <div class=\"cqa-px-6 cqa-pb-5\">\n <cqa-custom-input\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrors\"\n (valueChange)=\"onNameChange($event)\"\n (enterPressed)=\"submit()\">\n </cqa-custom-input>\n </div>\n\n <div class=\"cqa-border-t cqa-border-border-default cqa-px-6 cqa-py-4 cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n <cqa-button variant=\"outlined\"\n [text]=\"cancelButtonText\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSubmitting\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button variant=\"filled\"\n [text]=\"submitButtonText\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [loading]=\"isSubmitting\"\n [disabled]=\"!isValid || isSubmitting\"\n (clicked)=\"submit()\">\n </cqa-button>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
@@ -28301,7 +28316,7 @@ class ElementFormComponent {
|
|
|
28301
28316
|
}
|
|
28302
28317
|
}
|
|
28303
28318
|
ElementFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, deps: [{ token: i1$1.FormBuilder, optional: true }, { token: i0.ChangeDetectorRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
28304
|
-
ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", elements: "elements", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", searchElements: "searchElements", loadMoreElements: "loadMoreElements", searchElementsByScreenName: "searchElementsByScreenName", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n Label Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n Label<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"hasSelectedScreenName() && !isNewScreenNameSelected; else labelTextInput\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"elementSelectConfig\" class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </ng-container>\n <ng-template #labelTextInput>\n <cqa-custom-input\n class=\"cqa-w-full\"\n placeholder=\"default-element\"\n [inputInlineStyle]=\"'padding: 7px 11px; border: 1px solid #E5E5E5; border-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); box-sizing: border-box; font-size: 14px; line-height: 20px;'\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Label is required'] : []\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div\n class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n *ngIf=\"formLabels?.length; else noTagsContainer\">\n <span *ngFor=\"let tag of visibleTags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n [matTooltip]=\"tag\"\n matTooltipPosition=\"above\"\n style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n <ng-template #noTagsContainer>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </ng-template>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : ((isEditMode || !hasSelectedScreenName()) ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28319
|
+
ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", elements: "elements", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", searchElements: "searchElements", loadMoreElements: "loadMoreElements", searchElementsByScreenName: "searchElementsByScreenName", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n Label Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n Label<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"hasSelectedScreenName() && !isNewScreenNameSelected; else labelTextInput\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"elementSelectConfig\" class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </ng-container>\n <ng-template #labelTextInput>\n <cqa-custom-input\n class=\"cqa-w-full\"\n placeholder=\"default-element\"\n [inputInlineStyle]=\"'padding: 7px 11px; border: 1px solid #E5E5E5; border-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); box-sizing: border-box; font-size: 14px; line-height: 20px;'\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Label is required'] : []\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div\n class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n *ngIf=\"formLabels?.length; else noTagsContainer\">\n <span *ngFor=\"let tag of visibleTags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n [matTooltip]=\"tag\"\n matTooltipPosition=\"above\"\n style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n <ng-template #noTagsContainer>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </ng-template>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : ((isEditMode || !hasSelectedScreenName()) ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28305
28320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, decorators: [{
|
|
28306
28321
|
type: Component,
|
|
28307
28322
|
args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n Label Screen Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-w-1/2\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1 cqa-leading-[1.4]\">\n Label<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"hasSelectedScreenName() && !isNewScreenNameSelected; else labelTextInput\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"elementSelectConfig\" class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </ng-container>\n <ng-template #labelTextInput>\n <cqa-custom-input\n class=\"cqa-w-full\"\n placeholder=\"default-element\"\n [inputInlineStyle]=\"'padding: 7px 11px; border: 1px solid #E5E5E5; border-radius: 8px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); box-sizing: border-box; font-size: 14px; line-height: 20px;'\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Label is required'] : []\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div\n class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n *ngIf=\"formLabels?.length; else noTagsContainer\">\n <span *ngFor=\"let tag of visibleTags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n [matTooltip]=\"tag\"\n matTooltipPosition=\"above\"\n style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n <ng-template #noTagsContainer>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </ng-template>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : ((isEditMode || !hasSelectedScreenName()) ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n" }]
|
|
@@ -29380,7 +29395,7 @@ class TestDataModalComponent {
|
|
|
29380
29395
|
}
|
|
29381
29396
|
}
|
|
29382
29397
|
TestDataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: TEST_DATA_MODAL_REF }, { token: TEST_DATA_MODAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
29383
|
-
TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", globalVariables: "globalVariables", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseTestDataId: "testCaseTestDataId", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit", searchGlobalVariables: "searchGlobalVariables" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime' || activeTab === 'global'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Test Data Profile tab (legacy \"parameter\" key): Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Test Data Profile\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0 cqa-flex-shrink-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Global Data tab: workspace-scoped global variables (mirrors Environment listing) -->\n <ng-container *ngIf=\"activeTab === 'global'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Global Data\n </h3>\n </div>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search global variables'\"\n [value]=\"editForm.get('globalVariableSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search global variables'\"\n (valueChange)=\"onGlobalVariableSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <p *ngIf=\"isLoadingGlobalVariables\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n Loading global variables\u2026\n </p>\n <button\n *ngFor=\"let item of globalVariableListConfig\"\n type=\"button\"\n (click)=\"onGlobalVariableSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-solid]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedGlobalVariableId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"!isLoadingGlobalVariables && globalVariableListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No global variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29398
|
+
TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", globalVariables: "globalVariables", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseTestDataId: "testCaseTestDataId", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit", searchGlobalVariables: "searchGlobalVariables" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime' || activeTab === 'global'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Test Data Profile tab (legacy \"parameter\" key): Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Test Data Profile\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0 cqa-flex-shrink-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Global Data tab: workspace-scoped global variables (mirrors Environment listing) -->\n <ng-container *ngIf=\"activeTab === 'global'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Global Data\n </h3>\n </div>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search global variables'\"\n [value]=\"editForm.get('globalVariableSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search global variables'\"\n (valueChange)=\"onGlobalVariableSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <p *ngIf=\"isLoadingGlobalVariables\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n Loading global variables\u2026\n </p>\n <button\n *ngFor=\"let item of globalVariableListConfig\"\n type=\"button\"\n (click)=\"onGlobalVariableSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-solid]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedGlobalVariableId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"!isLoadingGlobalVariables && globalVariableListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No global variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29384
29399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, decorators: [{
|
|
29385
29400
|
type: Component,
|
|
29386
29401
|
args: [{ selector: 'cqa-test-data-modal', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime' || activeTab === 'global'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Test Data Profile tab (legacy \"parameter\" key): Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Test Data Profile\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0 cqa-flex-shrink-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Global Data tab: workspace-scoped global variables (mirrors Environment listing) -->\n <ng-container *ngIf=\"activeTab === 'global'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Global Data\n </h3>\n </div>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search global variables'\"\n [value]=\"editForm.get('globalVariableSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search global variables'\"\n (valueChange)=\"onGlobalVariableSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <p *ngIf=\"isLoadingGlobalVariables\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n Loading global variables\u2026\n </p>\n <button\n *ngFor=\"let item of globalVariableListConfig\"\n type=\"button\"\n (click)=\"onGlobalVariableSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-solid]=\"selectedGlobalVariableId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedGlobalVariableId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"!isLoadingGlobalVariables && globalVariableListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No global variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n" }]
|
|
@@ -33379,7 +33394,7 @@ class TestCaseConditionStepComponent {
|
|
|
33379
33394
|
}
|
|
33380
33395
|
}
|
|
33381
33396
|
TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
33382
|
-
TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideForLoop: "isInsideForLoop", testCaseTestDataId: "testCaseTestDataId", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", isParentSkipped: "isParentSkipped", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\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\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE IF\n </button>\n <!-- Add Else button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + ((config?.shouldSkip || isParentSkipped) ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"(config?.shouldSkip || isParentSkipped) ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <!-- Lock: inside step row (same background/border as row when in group) -->\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n CONDITION\n </span>\n\n <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n <ng-container *ngIf=\"editContext !== 'stepRow'\">\n <!-- First condition text as plain text (no HTML) -->\n <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n <button\n *ngIf=\"editable && !isInsideStepGroup && !isReorder\"\n type=\"button\"\n (click)=\"onSkipToggle(); $event.stopPropagation()\"\n [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n [style.color]=\"config?.shouldSkip ? '#1447E6' : null\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n <span *ngFor=\"let badge of getBranchTypeBadges()\"\n [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n {{ badge.label }}\n <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n </span>\n </div>\n <div\n class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n {{ getStepsSummary() }}\n </div>\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n </ng-container>\n\n <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n <ng-container *ngIf=\"editContext === 'stepRow'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n <div\n *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span\n *ngIf=\"getBranchConditionDisplay(branch)\"\n [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n (click)=\"onConditionActionClick($event, branch)\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n <!-- Right section: step-actions then date (same order as other step types) -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n </div>\n\n <!-- Empty branch inside a step group: no START/END markers -->\n <div\n *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n\n <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isParentSkipped]=\"config?.shouldSkip || isParentSkipped\"\n [isInsideForLoop]=\"isInsideForLoop\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isParentSkipped]=\"config?.shouldSkip || isParentSkipped\"\n [isInsideForLoop]=\"isInsideForLoop\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END marker per branch - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n </div>\n </div>\n\n <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n <ng-container *ngIf=\"isEditing\">\n <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(elseIfBranch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field -->\n <cqa-autocomplete\n *ngIf=\"elseIfBranch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n [compact]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- ELSE IF Template Variables Section -->\n <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select\n [form]=\"elseIfBranch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container><!-- end branch ng-container -->\n <!-- END CONDITION: final marker after all branches -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n", ".nested-step-drop-list:has(.step-drag-placeholder-nested:only-child){min-height:52px}.condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$3.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideForLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "isParentSkipped", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "testCaseTestDataId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe, "cqaSafeHtml": SafeHtmlPipe } });
|
|
33397
|
+
TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideForLoop: "isInsideForLoop", testCaseTestDataId: "testCaseTestDataId", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", isParentSkipped: "isParentSkipped", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\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\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE IF\n </button>\n <!-- Add Else button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + ((config?.shouldSkip || isParentSkipped) ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"(config?.shouldSkip || isParentSkipped) ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <!-- Lock: inside step row (same background/border as row when in group) -->\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n CONDITION\n </span>\n\n <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n <ng-container *ngIf=\"editContext !== 'stepRow'\">\n <!-- First condition text as plain text (no HTML) -->\n <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n <button\n *ngIf=\"editable && !isInsideStepGroup && !isReorder\"\n type=\"button\"\n (click)=\"onSkipToggle(); $event.stopPropagation()\"\n [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n [style.color]=\"config?.shouldSkip ? '#1447E6' : null\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n <span *ngFor=\"let badge of getBranchTypeBadges()\"\n [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n {{ badge.label }}\n <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n </span>\n </div>\n <div\n class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n {{ getStepsSummary() }}\n </div>\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n </ng-container>\n\n <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n <ng-container *ngIf=\"editContext === 'stepRow'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n <div\n *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span\n *ngIf=\"getBranchConditionDisplay(branch)\"\n [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n (click)=\"onConditionActionClick($event, branch)\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n <!-- Right section: step-actions then date (same order as other step types) -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n </div>\n\n <!-- Empty branch inside a step group: no START/END markers -->\n <div\n *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n\n <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isParentSkipped]=\"config?.shouldSkip || isParentSkipped\"\n [isInsideForLoop]=\"isInsideForLoop\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isParentSkipped]=\"config?.shouldSkip || isParentSkipped\"\n [isInsideForLoop]=\"isInsideForLoop\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n [testCaseTestDataId]=\"testCaseTestDataId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END marker per branch - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n </div>\n </div>\n\n <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n <ng-container *ngIf=\"isEditing\">\n <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(elseIfBranch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field -->\n <cqa-autocomplete\n *ngIf=\"elseIfBranch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n [compact]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- ELSE IF Template Variables Section -->\n <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select\n [form]=\"elseIfBranch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container><!-- end branch ng-container -->\n <!-- END CONDITION: final marker after all branches -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n", ".nested-step-drop-list:has(.step-drag-placeholder-nested:only-child){min-height:52px}.condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$3.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideForLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "isParentSkipped", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "testCaseTestDataId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe, "cqaSafeHtml": SafeHtmlPipe } });
|
|
33383
33398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
|
|
33384
33399
|
type: Component,
|
|
33385
33400
|
args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
|
|
@@ -35598,7 +35613,7 @@ class CreateStepGroupComponent {
|
|
|
35598
35613
|
}
|
|
35599
35614
|
}
|
|
35600
35615
|
CreateStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
35601
|
-
CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup", stepLabels: "stepLabels" }, outputs: { createGroup: "createGroup", 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-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\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 <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span [innerHTML]=\"getStepDisplayLabel(step, i)\" class=\"cqa-action-format cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group | Create and replace -->\n <div class=\"cqa-flex cqa-items-center 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-border-[#414146] cqa-whitespace-nowrap'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE] cqa-whitespace-nowrap'\"\n (clicked)=\"onCreateGroup(false)\">\n </cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create and replace\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE] cqa-whitespace-nowrap'\"\n (clicked)=\"onCreateGroup(true)\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
35616
|
+
CreateStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CreateStepGroupComponent, selector: "cqa-create-step-group", inputs: { stepsToGroup: "stepsToGroup", stepLabels: "stepLabels" }, outputs: { createGroup: "createGroup", 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-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\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 <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span [innerHTML]=\"getStepDisplayLabel(step, i)\" class=\"cqa-action-format cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group | Create and replace -->\n <div class=\"cqa-flex cqa-items-center 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-border-[#414146] cqa-whitespace-nowrap'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE] cqa-whitespace-nowrap'\"\n (clicked)=\"onCreateGroup(false)\">\n </cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create and replace\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE] cqa-whitespace-nowrap'\"\n (clicked)=\"onCreateGroup(true)\">\n </cqa-button>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
35602
35617
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, decorators: [{
|
|
35603
35618
|
type: Component,
|
|
35604
35619
|
args: [{ selector: 'cqa-create-step-group', 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-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0\">\n Create step group\n </h2>\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#64748B] cqa-m-0\">\n {{ subtitleText }}\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 <!-- Group name * -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#161617]\">\n Group name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"e.g., Authentication flow\"\n [value]=\"form.get('groupName')?.value\"\n [fullWidth]=\"true\"\n size=\"md\"\n (valueChange)=\"form.get('groupName')?.setValue($event); form.get('groupName')?.updateValueAndValidity()\">\n </cqa-custom-input>\n <p *ngIf=\"form.get('groupName')?.invalid && form.get('groupName')?.touched\" class=\"cqa-text-xs cqa-text-red-500 cqa-m-0\">\n Group name is required.\n </p>\n </div>\n\n <!-- Steps to group (N) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[100%] cqa-tracking-normal cqa-text-[#0A0A0A] cqa-align-middle\">\n Steps to group ({{ stepsCount }})\n </label>\n <div class=\"cqa-scrollbar-hide cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[200px] cqa-overflow-y-auto cqa-rounded-[8px] cqa-p-[6px] cqa-border cqa-border-solid cqa-border-[rgba(0,0,0,0.1)]\">\n <div\n *ngFor=\"let step of stepsToGroup; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-rounded-[4px] cqa-py-[4px] cqa-px-[8px] cqa-bg-[rgba(216,217,252,0.3)]\">\n <!-- Numbered badge -->\n <span\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded-full cqa-bg-[#3F43EE] cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex-shrink-0\">\n {{ i + 1 }}\n </span>\n <span [innerHTML]=\"getStepDisplayLabel(step, i)\" class=\"cqa-action-format cqa-font-medium cqa-text-[10px] cqa-leading-[15px] cqa-tracking-[0px] cqa-text-[#0B0B0C] cqa-flex-1 cqa-min-w-0 cqa-truncate\">\n </span>\n </div>\n </div>\n </div>\n\n <!-- Actions: Cancel | Create group | Create and replace -->\n <div class=\"cqa-flex cqa-items-center 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-border-[#414146] cqa-whitespace-nowrap'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE] cqa-whitespace-nowrap'\"\n (clicked)=\"onCreateGroup(false)\">\n </cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create and replace\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE] cqa-whitespace-nowrap'\"\n (clicked)=\"onCreateGroup(true)\">\n </cqa-button>\n </div>\n </div>\n</div>\n" }]
|
|
@@ -35966,7 +35981,7 @@ class AdvancedVariablesFormComponent {
|
|
|
35966
35981
|
}
|
|
35967
35982
|
}
|
|
35968
35983
|
AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35969
|
-
AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <!-- Empty-state add button: no rows exist yet, so the usual per-row add icon isn't rendered.\n Placing the add button next to the label is the only way to get the first entry back. -->\n <div\n *ngIf=\"formArray.length === 0\"\n class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\"\n (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"display: flex; align-items: center; justify-content: center; font-size: 20px;\">add</mat-icon>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input\n [placeholder]=\"'Enter locator'\"\n [value]=\"control.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <!-- Delete icon is always available so the user can remove ANY row, including the last one. -->\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", components: [{ type: i3$3.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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35984
|
+
AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <!-- Empty-state add button: no rows exist yet, so the usual per-row add icon isn't rendered.\n Placing the add button next to the label is the only way to get the first entry back. -->\n <div\n *ngIf=\"formArray.length === 0\"\n class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\"\n (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"display: flex; align-items: center; justify-content: center; font-size: 20px;\">add</mat-icon>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input\n [placeholder]=\"'Enter locator'\"\n [value]=\"control.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <!-- Delete icon is always available so the user can remove ANY row, including the last one. -->\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", components: [{ type: i3$3.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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35970
35985
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
|
|
35971
35986
|
type: Component,
|
|
35972
35987
|
args: [{ selector: 'cqa-advanced-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap advanced-variables-form cqa-mb-4\">\n <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"isBooleanType(variable)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n <mat-slide-toggle \n [checked]=\"getBooleanValue(variable, i)\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n </div>\n </ng-container>\n\n <!-- str_list variables with dynamic list -->\n <ng-container *ngIf=\"isStrListType(variable)\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label }}\n </label>\n <!-- Empty-state add button: no rows exist yet, so the usual per-row add icon isn't rendered.\n Placing the add button next to the label is the only way to get the first entry back. -->\n <div\n *ngIf=\"formArray.length === 0\"\n class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\"\n (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"display: flex; align-items: center; justify-content: center; font-size: 20px;\">add</mat-icon>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n <cqa-custom-input\n [placeholder]=\"'Enter locator'\"\n [value]=\"control.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n </cqa-custom-input>\n <!-- Delete icon is always available so the user can remove ANY row, including the last one. -->\n <div class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n </div>\n <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", styles: [] }]
|
|
@@ -38219,7 +38234,7 @@ ApiEditStepComponent.DEFAULT_STATUS_VERIFICATION_OPTIONS = [
|
|
|
38219
38234
|
{ id: 'greater-than', value: 'greater-than', name: 'Greater than', label: 'Greater than' },
|
|
38220
38235
|
];
|
|
38221
38236
|
ApiEditStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
38222
|
-
ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialSummary: "initialSummary", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n </h2>\n\n <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n [class.cqa-justify-start]=\"stepLabels.length === 1\"\n [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n <cqa-button type=\"button\" variant=\"text\"\n customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n (clicked)=\"setStep(step.index)\">\n <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n {{ step.index }}\n </span>\n <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n {{ step.label }}\n </span>\n <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n </cqa-button>\n </ng-container>\n </div>\n\n <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n <!-- Env banner \u2014 surfaces which environment scopes the API URL + variables. -->\n <div *ngIf=\"testCaseEnvironmentName && currentStep === 1\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and URL options are resolved from this environment.</span>\n </div>\n <!-- Step 1: Environment, request, body, response -->\n <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <!-- Summary field: label on top, input below (above Environment) -->\n <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n <cqa-custom-input [(value)]=\"summary\"\n [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Summary\">\n </cqa-custom-input>\n </div>\n <!-- Environment row: label on top, select below (aligned right on desktop).\n Hidden under Tier 1 (testCase.environmentId set) \u2014 banner above states the env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n <cqa-dynamic-select *ngIf=\"environmentForm\"\n [form]=\"environmentForm\"\n [config]=\"environmentSelectConfig\"\n class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n aria-label=\"Environment\"\n (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </span>\n </div>\n\n <!-- Request row: method, URL, buttons -->\n <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n (selectionChange)=\"onMethodSelectionChange($event)\">\n </cqa-dynamic-select>\n <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n <cqa-autocomplete\n [value]=\"url\"\n (valueChange)=\"url = $event\"\n [options]=\"urlOptions\"\n [placeholder]=\"urlPlaceholder\"\n ariaLabel=\"Enter URL or select Parameter\"\n [fullWidth]=\"true\"\n (optionSelect)=\"onUrlOptionSelect($event)\">\n </cqa-autocomplete>\n <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n {{ urlError }}\n </div>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n </cqa-button>\n </div>\n <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n [disabled]=\"!isUrlValid\"\n customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n </cqa-button>\n </div>\n\n\n\n <!-- Body content: header section (default) OR import cURL section -->\n <ng-container *ngIf=\"bodyView === 'import-curl'\">\n <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-body\">\n <cqa-custom-textarea [value]=\"importCurlControl.value\"\n (valueChange)=\"importCurlControl.setValue($event)\"\n placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n class=\"cqa-api-edit-step-import-curl-textarea\">\n </cqa-custom-textarea>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-footer\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"bodyView === 'headers'\">\n <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-api-edit-step-tabs\">\n <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n (clicked)=\"setPayloadTab(tab.value)\">\n </cqa-button>\n </div>\n\n <!-- Payload content (Authorization) -->\n <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n [attr.style]=\"'min-width: 160px;'\">\n </cqa-dynamic-select>\n </div>\n <!-- No Auth: centered message -->\n <div *ngIf=\"selectedAuthType === 'no-auth'\"\n [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n <div aria-hidden=\"true\"\n [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n </svg>\n </div>\n <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </div>\n </div>\n <!-- Bearer Token: Token label + textarea -->\n <div *ngIf=\"selectedAuthType === 'bearer'\"\n [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n <cqa-custom-textarea [(value)]=\"bearerToken\"\n placeholder=\"Enter bearer token\"\n [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n </cqa-custom-textarea>\n </div>\n <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n class=\"cqa-api-edit-step-oauth2-grid\"\n [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n [attr.style]=\"'min-width: 0; width: 100%;'\">\n </cqa-dynamic-select>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Access Token URL\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Client ID\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Client Secret\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Scope\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n [attr.style]=\"'min-width: 0; width: 100%;'\">\n </cqa-dynamic-select>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Payload content (Headers) -->\n <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n <div class=\"cqa-api-edit-step-headers-grid\">\n <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-header-row\">\n <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-add-header-wrap\">\n <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Payload content (Body only): type, format, text area, Back/Next -->\n <div *ngIf=\"activePayloadTab === 'body'\"\n class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n <div class=\"cqa-api-edit-step-payload-type-row\">\n <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n <div class=\"cqa-api-edit-step-payload-type-radios\">\n <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n (valueChange)=\"onPayloadTypeChange($event)\"\n class=\"cqa-api-edit-step-payload-type-segment\">\n </cqa-segment-control>\n </div>\n <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n aria-label=\"Format\">\n </cqa-dynamic-select>\n </div>\n </div>\n <!-- Raw: text area with line numbers (Postman-style payload body) -->\n <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n aria-label=\"Parse error on this line\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n </span>\n </div>\n <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n <textarea #payloadTextareaRef\n class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n [value]=\"payloadText\"\n placeholder=\"\"\n [attr.aria-label]=\"'Payload'\"\n [attr.aria-invalid]=\"!!payloadJsonError\"\n (input)=\"onPayloadInput($event)\"\n (keydown)=\"onPayloadKeydown($event)\">\n </textarea>\n </div>\n </div>\n </div>\n <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n Invalid JSON format. Please check your syntax.\n </p>\n </div>\n\n <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n <div class=\"cqa-api-edit-step-key-type-value-header\">\n <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-type-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Advanced settings (step-level) -->\n <div class=\"cqa-mt-4\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\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\n </div>\n <!-- Step 2: Variable Name: input, validation, Back / Next -->\n <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <div class=\"cqa-api-edit-step-variable-section\">\n <div class=\"cqa-api-edit-step-variable-input-wrap\">\n <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n </cqa-custom-input>\n </div>\n <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n </div>\n </div>\n <!-- Step 3: Response Body / Status tabs -->\n <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-api-edit-step-tabs\">\n <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n (clicked)=\"setResponseVerificationTab(tab.value)\">\n </cqa-button>\n </div>\n\n <!-- Response Body tab content: verification grid -->\n <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n <span></span>\n <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-verification\">\n <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-verification-row\">\n <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n </cqa-dynamic-select>\n <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n [config]=\"verificationExpectedValueBooleanSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n </ng-container>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n <span></span>\n <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-status-verification\">\n <div class=\"cqa-api-edit-step-status-verification-header\">\n <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Response Preview -->\n <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n </div>\n\n <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n <div class=\"cqa-api-edit-step-actions\">\n <ng-container [ngSwitch]=\"currentStep\">\n <ng-container *ngSwitchCase=\"1\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n </cqa-button>\n </ng-container>\n <ng-container *ngSwitchCase=\"2\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n </cqa-button>\n </ng-container>\n <ng-container *ngSwitchCase=\"3\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n </cqa-button>\n <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { 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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
38237
|
+
ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialSummary: "initialSummary", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n </h2>\n\n <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n [class.cqa-justify-start]=\"stepLabels.length === 1\"\n [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n <cqa-button type=\"button\" variant=\"text\"\n customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n (clicked)=\"setStep(step.index)\">\n <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n {{ step.index }}\n </span>\n <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n {{ step.label }}\n </span>\n <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n </cqa-button>\n </ng-container>\n </div>\n\n <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n <!-- Env banner \u2014 surfaces which environment scopes the API URL + variables. -->\n <div *ngIf=\"testCaseEnvironmentName && currentStep === 1\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and URL options are resolved from this environment.</span>\n </div>\n <!-- Step 1: Environment, request, body, response -->\n <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <!-- Summary field: label on top, input below (above Environment) -->\n <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n <cqa-custom-input [(value)]=\"summary\"\n [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Summary\">\n </cqa-custom-input>\n </div>\n <!-- Environment row: label on top, select below (aligned right on desktop).\n Hidden under Tier 1 (testCase.environmentId set) \u2014 banner above states the env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n <cqa-dynamic-select *ngIf=\"environmentForm\"\n [form]=\"environmentForm\"\n [config]=\"environmentSelectConfig\"\n class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n aria-label=\"Environment\"\n (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </span>\n </div>\n\n <!-- Request row: method, URL, buttons -->\n <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n (selectionChange)=\"onMethodSelectionChange($event)\">\n </cqa-dynamic-select>\n <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n <cqa-autocomplete\n [value]=\"url\"\n (valueChange)=\"url = $event\"\n [options]=\"urlOptions\"\n [placeholder]=\"urlPlaceholder\"\n ariaLabel=\"Enter URL or select Parameter\"\n [fullWidth]=\"true\"\n (optionSelect)=\"onUrlOptionSelect($event)\">\n </cqa-autocomplete>\n <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n {{ urlError }}\n </div>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n </cqa-button>\n </div>\n <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n [disabled]=\"!isUrlValid\"\n customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n </cqa-button>\n </div>\n\n\n\n <!-- Body content: header section (default) OR import cURL section -->\n <ng-container *ngIf=\"bodyView === 'import-curl'\">\n <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-body\">\n <cqa-custom-textarea [value]=\"importCurlControl.value\"\n (valueChange)=\"importCurlControl.setValue($event)\"\n placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n class=\"cqa-api-edit-step-import-curl-textarea\">\n </cqa-custom-textarea>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-footer\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"bodyView === 'headers'\">\n <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-api-edit-step-tabs\">\n <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n (clicked)=\"setPayloadTab(tab.value)\">\n </cqa-button>\n </div>\n\n <!-- Payload content (Authorization) -->\n <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n [attr.style]=\"'min-width: 160px;'\">\n </cqa-dynamic-select>\n </div>\n <!-- No Auth: centered message -->\n <div *ngIf=\"selectedAuthType === 'no-auth'\"\n [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n <div aria-hidden=\"true\"\n [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n </svg>\n </div>\n <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </div>\n </div>\n <!-- Bearer Token: Token label + textarea -->\n <div *ngIf=\"selectedAuthType === 'bearer'\"\n [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n <cqa-custom-textarea [(value)]=\"bearerToken\"\n placeholder=\"Enter bearer token\"\n [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n </cqa-custom-textarea>\n </div>\n <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n class=\"cqa-api-edit-step-oauth2-grid\"\n [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n [attr.style]=\"'min-width: 0; width: 100%;'\">\n </cqa-dynamic-select>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Access Token URL\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Client ID\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Client Secret\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Scope\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n [attr.style]=\"'min-width: 0; width: 100%;'\">\n </cqa-dynamic-select>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Payload content (Headers) -->\n <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n <div class=\"cqa-api-edit-step-headers-grid\">\n <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-header-row\">\n <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-add-header-wrap\">\n <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Payload content (Body only): type, format, text area, Back/Next -->\n <div *ngIf=\"activePayloadTab === 'body'\"\n class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n <div class=\"cqa-api-edit-step-payload-type-row\">\n <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n <div class=\"cqa-api-edit-step-payload-type-radios\">\n <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n (valueChange)=\"onPayloadTypeChange($event)\"\n class=\"cqa-api-edit-step-payload-type-segment\">\n </cqa-segment-control>\n </div>\n <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n aria-label=\"Format\">\n </cqa-dynamic-select>\n </div>\n </div>\n <!-- Raw: text area with line numbers (Postman-style payload body) -->\n <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n aria-label=\"Parse error on this line\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n </span>\n </div>\n <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n <textarea #payloadTextareaRef\n class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n [value]=\"payloadText\"\n placeholder=\"\"\n [attr.aria-label]=\"'Payload'\"\n [attr.aria-invalid]=\"!!payloadJsonError\"\n (input)=\"onPayloadInput($event)\"\n (keydown)=\"onPayloadKeydown($event)\">\n </textarea>\n </div>\n </div>\n </div>\n <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n Invalid JSON format. Please check your syntax.\n </p>\n </div>\n\n <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n <div class=\"cqa-api-edit-step-key-type-value-header\">\n <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-type-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Advanced settings (step-level) -->\n <div class=\"cqa-mt-4\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\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\n </div>\n <!-- Step 2: Variable Name: input, validation, Back / Next -->\n <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <div class=\"cqa-api-edit-step-variable-section\">\n <div class=\"cqa-api-edit-step-variable-input-wrap\">\n <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n </cqa-custom-input>\n </div>\n <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n </div>\n </div>\n <!-- Step 3: Response Body / Status tabs -->\n <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-api-edit-step-tabs\">\n <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n (clicked)=\"setResponseVerificationTab(tab.value)\">\n </cqa-button>\n </div>\n\n <!-- Response Body tab content: verification grid -->\n <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n <span></span>\n <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-verification\">\n <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-verification-row\">\n <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n </cqa-dynamic-select>\n <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n [config]=\"verificationExpectedValueBooleanSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n </ng-container>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n <span></span>\n <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-status-verification\">\n <div class=\"cqa-api-edit-step-status-verification-header\">\n <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Response Preview -->\n <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n </div>\n\n <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n <div class=\"cqa-api-edit-step-actions\">\n <ng-container [ngSwitch]=\"currentStep\">\n <ng-container *ngSwitchCase=\"1\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n </cqa-button>\n </ng-container>\n <ng-container *ngSwitchCase=\"2\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n </cqa-button>\n </ng-container>\n <ng-container *ngSwitchCase=\"3\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n </cqa-button>\n <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { 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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
38223
38238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, decorators: [{
|
|
38224
38239
|
type: Component,
|
|
38225
38240
|
args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n </h2>\n\n <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n [class.cqa-justify-start]=\"stepLabels.length === 1\"\n [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n <cqa-button type=\"button\" variant=\"text\"\n customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n (clicked)=\"setStep(step.index)\">\n <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n {{ step.index }}\n </span>\n <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n {{ step.label }}\n </span>\n <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n </cqa-button>\n </ng-container>\n </div>\n\n <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n <!-- Env banner \u2014 surfaces which environment scopes the API URL + variables. -->\n <div *ngIf=\"testCaseEnvironmentName && currentStep === 1\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and URL options are resolved from this environment.</span>\n </div>\n <!-- Step 1: Environment, request, body, response -->\n <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <!-- Summary field: label on top, input below (above Environment) -->\n <div class=\"cqa-api-edit-step-summary-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-stretch\">\n <label class=\"cqa-api-edit-step-summary-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Summary</label>\n <cqa-custom-input [(value)]=\"summary\"\n [label]=\"''\" placeholder=\"Enter Request summary\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Summary\">\n </cqa-custom-input>\n </div>\n <!-- Environment row: label on top, select below (aligned right on desktop).\n Hidden under Tier 1 (testCase.environmentId set) \u2014 banner above states the env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n <cqa-dynamic-select *ngIf=\"environmentForm\"\n [form]=\"environmentForm\"\n [config]=\"environmentSelectConfig\"\n class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n aria-label=\"Environment\"\n (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </span>\n </div>\n\n <!-- Request row: method, URL, buttons -->\n <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-start cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n (selectionChange)=\"onMethodSelectionChange($event)\">\n </cqa-dynamic-select>\n <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n <cqa-autocomplete\n [value]=\"url\"\n (valueChange)=\"url = $event\"\n [options]=\"urlOptions\"\n [placeholder]=\"urlPlaceholder\"\n ariaLabel=\"Enter URL or select Parameter\"\n [fullWidth]=\"true\"\n (optionSelect)=\"onUrlOptionSelect($event)\">\n </cqa-autocomplete>\n <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n {{ urlError }}\n </div>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full cqa-mt-1\">\n </cqa-button>\n </div>\n <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n [disabled]=\"!isUrlValid\"\n customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full cqa-mt-1\"\n [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n </cqa-button>\n </div>\n\n\n\n <!-- Body content: header section (default) OR import cURL section -->\n <ng-container *ngIf=\"bodyView === 'import-curl'\">\n <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n <div class=\"cqa-api-edit-step-import-curl-note cqa-px-5 cqa-pt-3\">\n <cqa-badge label=\"cURL is supported in Bash format only.\" icon=\"info\" variant=\"info\" size=\"small\" [fullWidth]=\"true\"></cqa-badge>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-body\">\n <cqa-custom-textarea [value]=\"importCurlControl.value\"\n (valueChange)=\"importCurlControl.setValue($event)\"\n placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n class=\"cqa-api-edit-step-import-curl-textarea\">\n </cqa-custom-textarea>\n </div>\n <div class=\"cqa-api-edit-step-import-curl-footer\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"bodyView === 'headers'\">\n <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-api-edit-step-tabs\">\n <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n (clicked)=\"setPayloadTab(tab.value)\">\n </cqa-button>\n </div>\n\n <!-- Payload content (Authorization) -->\n <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n [attr.style]=\"'min-width: 160px;'\">\n </cqa-dynamic-select>\n </div>\n <!-- No Auth: centered message -->\n <div *ngIf=\"selectedAuthType === 'no-auth'\"\n [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center; border: 1px solid #E5E7EB; border-radius: 8px; padding-top: 16px; padding-bottom: 16px;'\">\n <div aria-hidden=\"true\"\n [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n </svg>\n </div>\n <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n </div>\n </div>\n <!-- Bearer Token: Token label + textarea -->\n <div *ngIf=\"selectedAuthType === 'bearer'\"\n [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n <cqa-custom-textarea [(value)]=\"bearerToken\"\n placeholder=\"Enter bearer token\"\n [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n </cqa-custom-textarea>\n </div>\n <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n class=\"cqa-api-edit-step-oauth2-grid\"\n [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n [attr.style]=\"'min-width: 0; width: 100%;'\">\n </cqa-dynamic-select>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Access Token URL\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Client ID\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Client Secret\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n ariaLabel=\"Scope\">\n </cqa-custom-input>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n </div>\n <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n [attr.style]=\"'min-width: 0; width: 100%;'\">\n </cqa-dynamic-select>\n <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Payload content (Headers) -->\n <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n <div class=\"cqa-api-edit-step-headers-grid\">\n <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-header-row\">\n <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-add-header-wrap\">\n <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Payload content (Body only): type, format, text area, Back/Next -->\n <div *ngIf=\"activePayloadTab === 'body'\"\n class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n <div class=\"cqa-api-edit-step-payload-type-row\">\n <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n <div class=\"cqa-api-edit-step-payload-type-radios\">\n <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n (valueChange)=\"onPayloadTypeChange($event)\"\n class=\"cqa-api-edit-step-payload-type-segment\">\n </cqa-segment-control>\n </div>\n <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n aria-label=\"Format\">\n </cqa-dynamic-select>\n </div>\n </div>\n <!-- Raw: text area with line numbers (Postman-style payload body) -->\n <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n aria-label=\"Parse error on this line\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n </span>\n </div>\n <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n <textarea #payloadTextareaRef\n class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n [value]=\"payloadText\"\n placeholder=\"\"\n [attr.aria-label]=\"'Payload'\"\n [attr.aria-invalid]=\"!!payloadJsonError\"\n (input)=\"onPayloadInput($event)\"\n (keydown)=\"onPayloadKeydown($event)\">\n </textarea>\n </div>\n </div>\n </div>\n <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n Invalid JSON format. Please check your syntax.\n </p>\n </div>\n\n <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n <div class=\"cqa-api-edit-step-key-type-value-header\">\n <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-key-type-value-row\">\n <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Advanced settings (step-level) -->\n <div class=\"cqa-mt-4\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\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\n </div>\n <!-- Step 2: Variable Name: input, validation, Back / Next -->\n <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <div class=\"cqa-api-edit-step-variable-section\">\n <div class=\"cqa-api-edit-step-variable-input-wrap\">\n <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n </cqa-custom-input>\n </div>\n <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n </div>\n </div>\n <!-- Step 3: Response Body / Status tabs -->\n <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-api-edit-step-tabs\">\n <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n (clicked)=\"setResponseVerificationTab(tab.value)\">\n </cqa-button>\n </div>\n\n <!-- Response Body tab content: verification grid -->\n <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n <span></span>\n <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-verification\">\n <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n class=\"cqa-api-edit-step-verification-row\">\n <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n </cqa-custom-input>\n <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n </cqa-dynamic-select>\n <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n [config]=\"verificationExpectedValueBooleanSelectConfig\"\n class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n </ng-container>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n <span></span>\n <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n </cqa-button>\n </div>\n <div class=\"cqa-api-edit-step-status-verification\">\n <div class=\"cqa-api-edit-step-status-verification-header\">\n <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n aria-hidden=\"true\"></span>\n </div>\n <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n </cqa-dynamic-select>\n <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n ariaLabel=\"Expected Value\">\n </cqa-custom-input>\n <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n </svg>\n </cqa-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Response Preview -->\n <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n </div>\n\n <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n <div class=\"cqa-api-edit-step-actions\">\n <ng-container [ngSwitch]=\"currentStep\">\n <ng-container *ngSwitchCase=\"1\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n </cqa-button>\n </ng-container>\n <ng-container *ngSwitchCase=\"2\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n </cqa-button>\n </ng-container>\n <ng-container *ngSwitchCase=\"3\">\n <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n </cqa-button>\n <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</div>" }]
|
|
@@ -41648,7 +41663,7 @@ class TemplateVariablesFormComponent {
|
|
|
41648
41663
|
}
|
|
41649
41664
|
}
|
|
41650
41665
|
TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
41651
|
-
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", globalVariableOptions: "globalVariableOptions", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", testCaseTestDataId: "testCaseTestDataId", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", 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", searchGlobalVariables: "searchGlobalVariables", 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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Environment-name dropdown (synthetic var injected for AI Ask / AI Verify only).\n Hidden under Tier 1 (testCase.environmentId set) \u2014 banner above already names the env.\n Tier 2 (legacy step env): visible + editable + deprecation note.\n Tier 3 (workspace default): visible + locked + '(default)' suffix on option labels + deprecation note. -->\n <ng-container *ngIf=\"isEnvironmentNameType(variable) && !hideEnvironmentNameField\">\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 | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentNameSelectConfig(variable)\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\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 | cqaCamelToTitle }}\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 !== 'textarea' && variable.type !== 'environment-name' && !(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 | cqaCamelToTitle }} 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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}\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 Value Source segment strip -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n <ng-container *ngIf=\"variable.forceValueSourcePicker; else defaultSourceLabel\">{{ variable.label | cqaCamelToTitle }} Source</ng-container>\n <ng-template #defaultSourceLabel>Value Source</ng-template>\n <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-segment-control\n *ngIf=\"!isEditInDepth\"\n [segments]=\"segmentsForVariable(variable.name)\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\n <cqa-dynamic-select\n *ngIf=\"isEditInDepth\"\n [form]=\"getFormGroupAt(i)!\"\n [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable) && !hideEnvironmentNameField\" 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 <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [style.height]=\"'fit-content'\" [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=\"isGlobalType(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 Global Data<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getGlobalVariableSelectConfig(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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\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 | cqaCamelToTitle }}\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: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$3.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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange", "validityChange"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "elements", "hasMoreScreenNames", "isLoadingScreenNames", "hasMoreElements", "isLoadingElements", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "searchElements", "loadMoreElements", "searchElementsByScreenName", "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"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
41666
|
+
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", globalVariableOptions: "globalVariableOptions", isLoadingGlobalVariables: "isLoadingGlobalVariables", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", testCaseTestDataId: "testCaseTestDataId", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", 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", searchGlobalVariables: "searchGlobalVariables", 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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Environment-name dropdown (synthetic var injected for AI Ask / AI Verify only).\n Hidden under Tier 1 (testCase.environmentId set) \u2014 banner above already names the env.\n Tier 2 (legacy step env): visible + editable + deprecation note.\n Tier 3 (workspace default): visible + locked + '(default)' suffix on option labels + deprecation note. -->\n <ng-container *ngIf=\"isEnvironmentNameType(variable) && !hideEnvironmentNameField\">\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 | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentNameSelectConfig(variable)\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\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 | cqaCamelToTitle }}\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 !== 'textarea' && variable.type !== 'environment-name' && !(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 | cqaCamelToTitle }} 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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}\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 Value Source segment strip -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n <ng-container *ngIf=\"variable.forceValueSourcePicker; else defaultSourceLabel\">{{ variable.label | cqaCamelToTitle }} Source</ng-container>\n <ng-template #defaultSourceLabel>Value Source</ng-template>\n <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-segment-control\n *ngIf=\"!isEditInDepth\"\n [segments]=\"segmentsForVariable(variable.name)\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\n <cqa-dynamic-select\n *ngIf=\"isEditInDepth\"\n [form]=\"getFormGroupAt(i)!\"\n [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable) && !hideEnvironmentNameField\" 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 <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [style.height]=\"'fit-content'\" [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=\"isGlobalType(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 Global Data<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getGlobalVariableSelectConfig(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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\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 | cqaCamelToTitle }}\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: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$3.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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange", "validityChange"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "elements", "hasMoreScreenNames", "isLoadingScreenNames", "hasMoreElements", "isLoadingElements", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "searchElements", "loadMoreElements", "searchElementsByScreenName", "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"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
41652
41667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
|
|
41653
41668
|
type: Component,
|
|
41654
41669
|
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 | cqaCamelToTitle }}\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 | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n\n <!-- Textarea variables -->\n <ng-container *ngIf=\"variable.type === 'textarea'\">\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 | cqaCamelToTitle }}\n </label>\n <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n [value]=\"variable.value || ''\"\n rows=\"4\"\n style=\"min-height: 42px;\"\n (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n </div>\n </ng-container>\n\n <!-- Environment-name dropdown (synthetic var injected for AI Ask / AI Verify only).\n Hidden under Tier 1 (testCase.environmentId set) \u2014 banner above already names the env.\n Tier 2 (legacy step env): visible + editable + deprecation note.\n Tier 3 (workspace default): visible + locked + '(default)' suffix on option labels + deprecation note. -->\n <ng-container *ngIf=\"isEnvironmentNameType(variable) && !hideEnvironmentNameField\">\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 | cqaCamelToTitle }}\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentNameSelectConfig(variable)\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\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 | cqaCamelToTitle }}\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 !== 'textarea' && variable.type !== 'environment-name' && !(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 | cqaCamelToTitle }} 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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}\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 Value Source segment strip -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n <ng-container *ngIf=\"variable.forceValueSourcePicker; else defaultSourceLabel\">{{ variable.label | cqaCamelToTitle }} Source</ng-container>\n <ng-template #defaultSourceLabel>Value Source</ng-template>\n <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-segment-control\n *ngIf=\"!isEditInDepth\"\n [segments]=\"segmentsForVariable(variable.name)\"\n [value]=\"variable.dataType || 'plain-text'\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDataTypeChange(variable.name, $any($event))\">\n </cqa-segment-control>\n <cqa-dynamic-select\n *ngIf=\"isEditInDepth\"\n [form]=\"getFormGroupAt(i)!\"\n [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable) && !hideEnvironmentNameField\" 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 <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [style.height]=\"'fit-content'\" [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=\"isGlobalType(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 Global Data<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getGlobalVariableSelectConfig(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) && !isInsideForLoopStep\" 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=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 Start<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" 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 End<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\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 | cqaCamelToTitle }}<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 | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n </label>\n <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n <cqa-mixed-variable-input\n [placeholder]=\"'Text Input'\"\n [value]=\"getRawValue(variable)\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\"\n (validityChange)=\"onTestDataValidityChange(variable.name, $event)\">\n </cqa-mixed-variable-input>\n </ng-container>\n <ng-template #runtimePlainInput>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </ng-template>\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 | cqaCamelToTitle }}\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"] }]
|
|
@@ -43454,7 +43469,7 @@ class StepBuilderLoopComponent {
|
|
|
43454
43469
|
}
|
|
43455
43470
|
}
|
|
43456
43471
|
StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
43457
|
-
StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment", manageProfilesClicked: "manageProfilesClicked" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2 for-loop-builder\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Empty state: env has no attached TDPs. Mirrors the design from CON-1305 follow-ups. -->\n <ng-container *ngIf=\"(dataProfileOptions?.length ?? 0) === 0 && !isLoadingDataProfiles; else dataProfileForm\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-items-center cqa-text-center cqa-gap-2 cqa-p-6 cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-gray-300 cqa-bg-gray-50\">\n <div class=\"cqa-text-base cqa-font-semibold cqa-text-gray-800\">\n No test data profiles assigned to\n <ng-container *ngIf=\"testCaseEnvironmentName\">{{ testCaseEnvironmentName }} </ng-container>Environment\n </div>\n <div class=\"cqa-text-xs cqa-text-gray-500 cqa-max-w-md\">\n For Loops need a test data profile linked to the active environment.\n Assign a profile in Environment & Data Management or switch environment.\n </div>\n <cqa-button\n class=\"cqa-mt-2\"\n variant=\"filled\"\n text=\"Manage profiles\"\n (clicked)=\"manageProfilesClicked.emit()\">\n </cqa-button>\n </div>\n </ng-container>\n <ng-template #dataProfileForm>\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <!-- Env banner \u2014 placed below the loop dropdowns per design. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and data profiles are resolved from this environment.</span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\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</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseEnvironmentLabelSuffix]=\"testCaseEnvironmentLabelSuffix\"\n [environmentLegacyDeprecationMessage]=\"environmentLegacyDeprecationMessage\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [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>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "globalVariableOptions", "isLoadingGlobalVariables", "testCaseEnvironmentName", "testCaseEnvironmentLabelSuffix", "environmentLegacyDeprecationMessage", "testCaseTestDataId", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "searchGlobalVariables", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
43472
|
+
StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment", manageProfilesClicked: "manageProfilesClicked" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2 for-loop-builder\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Empty state: env has no attached TDPs. Mirrors the design from CON-1305 follow-ups. -->\n <ng-container *ngIf=\"(dataProfileOptions?.length ?? 0) === 0 && !isLoadingDataProfiles; else dataProfileForm\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-items-center cqa-text-center cqa-gap-2 cqa-p-6 cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-gray-300 cqa-bg-gray-50\">\n <div class=\"cqa-text-base cqa-font-semibold cqa-text-gray-800\">\n No test data profiles assigned to\n <ng-container *ngIf=\"testCaseEnvironmentName\">{{ testCaseEnvironmentName }} </ng-container>Environment\n </div>\n <div class=\"cqa-text-xs cqa-text-gray-500 cqa-max-w-md\">\n For Loops need a test data profile linked to the active environment.\n Assign a profile in Environment & Data Management or switch environment.\n </div>\n <cqa-button\n class=\"cqa-mt-2\"\n variant=\"filled\"\n text=\"Manage profiles\"\n (clicked)=\"manageProfilesClicked.emit()\">\n </cqa-button>\n </div>\n </ng-container>\n <ng-template #dataProfileForm>\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <!-- Env banner \u2014 placed below the loop dropdowns per design. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and data profiles are resolved from this environment.</span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\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</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseEnvironmentLabelSuffix]=\"testCaseEnvironmentLabelSuffix\"\n [environmentLegacyDeprecationMessage]=\"environmentLegacyDeprecationMessage\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [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>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "globalVariableOptions", "isLoadingGlobalVariables", "testCaseEnvironmentName", "testCaseEnvironmentLabelSuffix", "environmentLegacyDeprecationMessage", "testCaseTestDataId", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "searchGlobalVariables", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
43458
43473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
|
|
43459
43474
|
type: Component,
|
|
43460
43475
|
args: [{ selector: 'cqa-step-builder-loop', 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 for-loop-builder\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n </h2>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"swap_horiz\"\n text=\"Change Template\"\n (clicked)=\"onWhileChangeTemplate()\">\n </cqa-button>\n <cqa-button\n *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n variant=\"text\"\n btnSize=\"sm\"\n text=\"Cancel\"\n (clicked)=\"onWhileCancelChangeTemplate()\">\n </cqa-button>\n </div>\n\n <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n <div class=\"cqa-mb-4 cqa-w-full\">\n <div *ngIf=\"isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n </div>\n <div *ngIf=\"!isEditMode\" class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('for')\">\n For\n </button>\n <button\n type=\"button\"\n class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n [style.border-radius]=\"'8px'\"\n [style.height]=\"'22px'\"\n (click)=\"onLoopTypeChange('while')\">\n While\n </button>\n </div>\n </div>\n\n <!-- Form Fields -->\n <ng-container *ngIf=\"selectedLoopType === 'for'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Dropdown Fields Row -->\n <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n <!-- Select Option -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Select Option\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"selectOptionConfig\">\n </cqa-dynamic-select>\n </div>\n\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n <!-- Empty state: env has no attached TDPs. Mirrors the design from CON-1305 follow-ups. -->\n <ng-container *ngIf=\"(dataProfileOptions?.length ?? 0) === 0 && !isLoadingDataProfiles; else dataProfileForm\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-items-center cqa-text-center cqa-gap-2 cqa-p-6 cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-gray-300 cqa-bg-gray-50\">\n <div class=\"cqa-text-base cqa-font-semibold cqa-text-gray-800\">\n No test data profiles assigned to\n <ng-container *ngIf=\"testCaseEnvironmentName\">{{ testCaseEnvironmentName }} </ng-container>Environment\n </div>\n <div class=\"cqa-text-xs cqa-text-gray-500 cqa-max-w-md\">\n For Loops need a test data profile linked to the active environment.\n Assign a profile in Environment & Data Management or switch environment.\n </div>\n <cqa-button\n class=\"cqa-mt-2\"\n variant=\"filled\"\n text=\"Manage profiles\"\n (clicked)=\"manageProfilesClicked.emit()\">\n </cqa-button>\n </div>\n </ng-container>\n <ng-template #dataProfileForm>\n <!-- Data Profile -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Data Profile\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"dataProfileConfig\"\n (searchChange)=\"onSearchDataProfiles($event.query)\"\n (loadMore)=\"onLoadMoreDataProfiles($event)\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop Start -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop Start\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopStartConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Loop End -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Loop End\n </label>\n <cqa-dynamic-select\n [form]=\"loopForm\"\n [config]=\"loopEndConfig\">\n </cqa-dynamic-select>\n </div>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n <!-- Run Time Input Field -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n Run Time\n </label>\n <cqa-custom-input\n [placeholder]=\"'Enter Run Time'\"\n [value]=\"loopForm.get('runTime')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </div>\n\n <!-- Env banner \u2014 placed below the loop dropdowns per design. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and data profiles are resolved from this environment.</span>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\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</ng-container>\n <ng-container *ngIf=\"selectedLoopType === 'while'\">\n <cqa-step-builder-action\n [showHeader]=\"false\"\n [isCreatingStep]=\"isCreatingStep\"\n [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n [templates]=\"whileTemplates\"\n [setTemplateVariables]=\"setWhileTemplateVariables\"\n [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n [editMode]=\"isEditMode\"\n [isDebug]=\"isDebug\"\n [initialTemplate]=\"selectedWhileTemplate\"\n [initialDescription]=\"selectedWhileDescription\"\n [initialMetadata]=\"selectedWhileMetadata\"\n [searchPlaceholder]=\"whileSearchPlaceholder\"\n [elementOptions]=\"elementOptions\"\n [hasMoreElements]=\"hasMoreElements\"\n [isLoadingElements]=\"isLoadingElements\"\n [screenNameOptions]=\"screenNameOptions\"\n [hasMoreScreenNames]=\"hasMoreScreenNames\"\n [isLoadingScreenNames]=\"isLoadingScreenNames\"\n [parameterOptions]=\"parameterOptions\"\n [hasMoreParameters]=\"hasMoreParameters\"\n [isLoadingParameters]=\"isLoadingParameters\"\n [environmentOptions]=\"environmentOptions\"\n [hasMoreEnvironments]=\"hasMoreEnvironments\"\n [isLoadingEnvironments]=\"isLoadingEnvironments\"\n [testCaseEnvironmentName]=\"testCaseEnvironmentName\"\n [testCaseEnvironmentLabelSuffix]=\"testCaseEnvironmentLabelSuffix\"\n [environmentLegacyDeprecationMessage]=\"environmentLegacyDeprecationMessage\"\n [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\n [hasTestDataProfile]=\"hasTestDataProfile\"\n (templateChanged)=\"selectWhileTemplate($event)\"\n (cancelled)=\"onCancel()\"\n (createStep)=\"createWhileStep($event)\"\n (loadMoreElements)=\"loadMoreElements.emit()\"\n (searchElements)=\"searchElements.emit($event)\"\n (searchElementsByScreenName)=\"searchElementsByScreenName.emit($event)\"\n (createElement)=\"createElement.emit($event)\"\n (searchScreenName)=\"searchScreenName.emit($event)\"\n (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n (searchParameters)=\"searchParameters.emit($event)\"\n (loadMoreParameters)=\"loadMoreParameters.emit()\"\n (searchEnvironments)=\"searchEnvironments.emit($event)\"\n (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n (redirectToParameter)=\"redirectToParameter.emit()\"\n (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n (cancelElementForm)=\"cancelElementForm.emit()\">\n </cqa-step-builder-action>\n </ng-container>\n\n <!-- Action Buttons: Apply only when isDebug + existing step (isEditMode), else Create Step -->\n <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button\n class=\"cqa-w-1/2\"\n variant=\"outlined\"\n text=\"Cancel\"\n [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\"\n class=\"cqa-w-1/2\"\n variant=\"filled\"\n [text]=\"isEditMode ? 'Update Step' : 'Create Step'\"\n [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>\n\n", styles: [] }]
|
|
@@ -45302,7 +45317,7 @@ class StepBuilderDatabaseComponent {
|
|
|
45302
45317
|
}
|
|
45303
45318
|
}
|
|
45304
45319
|
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 });
|
|
45305
|
-
StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbConfigOptions: "dbConfigOptions", isLoadingDbConfigs: "isLoadingDbConfigs", normalEnvironmentOptions: "normalEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbConfigId: "initialDbConfigId", initialNormalEnvironment: "initialNormalEnvironment", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", searchDbConfig: "searchDbConfig", 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 <!-- Env banner \u2014 surfaces which environment scopes the DB Config + Normal Env. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and DB configs are resolved from this environment.</span>\n </div>\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 Config -->\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 Config <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"dbConfigSelectConfig\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n DB configs attached to the active environment.\n </p>\n </div>\n\n <!-- Normal Environment \u2014 hidden under Tier 1 (testCase.environmentId set);\n the env banner above already names the active env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" 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]=\"normalEnvSelectConfig\">\n </cqa-dynamic-select>\n </div>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n <p *ngIf=\"!environmentLegacyDeprecationMessage\" 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('dbConfigId')?.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('dbConfigId')?.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", "loading", "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: ["inputId", "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$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
|
|
45320
|
+
StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbConfigOptions: "dbConfigOptions", isLoadingDbConfigs: "isLoadingDbConfigs", normalEnvironmentOptions: "normalEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbConfigId: "initialDbConfigId", initialNormalEnvironment: "initialNormalEnvironment", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", searchDbConfig: "searchDbConfig", 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 <!-- Env banner \u2014 surfaces which environment scopes the DB Config + Normal Env. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and DB configs are resolved from this environment.</span>\n </div>\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 Config -->\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 Config <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"dbConfigSelectConfig\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n DB configs attached to the active environment.\n </p>\n </div>\n\n <!-- Normal Environment \u2014 hidden under Tier 1 (testCase.environmentId set);\n the env banner above already names the active env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" 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]=\"normalEnvSelectConfig\">\n </cqa-dynamic-select>\n </div>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n <p *ngIf=\"!environmentLegacyDeprecationMessage\" 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('dbConfigId')?.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('dbConfigId')?.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", "loading", "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: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], 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$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
|
|
45306
45321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, decorators: [{
|
|
45307
45322
|
type: Component,
|
|
45308
45323
|
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 <!-- Env banner \u2014 surfaces which environment scopes the DB Config + Normal Env. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables and DB configs are resolved from this environment.</span>\n </div>\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 Config -->\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 Config <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"dbConfigSelectConfig\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n DB configs attached to the active environment.\n </p>\n </div>\n\n <!-- Normal Environment \u2014 hidden under Tier 1 (testCase.environmentId set);\n the env banner above already names the active env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" 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]=\"normalEnvSelectConfig\">\n </cqa-dynamic-select>\n </div>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-m-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n <p *ngIf=\"!environmentLegacyDeprecationMessage\" 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('dbConfigId')?.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('dbConfigId')?.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: [] }]
|
|
@@ -45767,7 +45782,7 @@ class StepBuilderAiAgentComponent {
|
|
|
45767
45782
|
}
|
|
45768
45783
|
}
|
|
45769
45784
|
StepBuilderAiAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
45770
|
-
StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- Env banner \u2014 surfaces which environment scopes variables for this agent step. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables are resolved from this environment.</span>\n </div>\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown \u2014 hidden under Tier 1 (testCase.environmentId set);\n the env banner above already names the active env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Environments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"environmentSelectConfig\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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 <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\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>\n\n", components: [{ 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
45785
|
+
StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", testCaseEnvironmentName: "testCaseEnvironmentName", testCaseEnvironmentLabelSuffix: "testCaseEnvironmentLabelSuffix", environmentLegacyDeprecationMessage: "environmentLegacyDeprecationMessage", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- Env banner \u2014 surfaces which environment scopes variables for this agent step. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables are resolved from this environment.</span>\n </div>\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown \u2014 hidden under Tier 1 (testCase.environmentId set);\n the env banner above already names the active env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Environments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"environmentSelectConfig\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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 <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\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>\n\n", components: [{ 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
45771
45786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
|
|
45772
45787
|
type: Component,
|
|
45773
45788
|
args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n <!-- Env banner \u2014 surfaces which environment scopes variables for this agent step. -->\n <div *ngIf=\"testCaseEnvironmentName\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-xs cqa-text-gray-700 cqa-bg-gray-50 cqa-border cqa-border-gray-200\">\n Using <strong class=\"cqa-font-semibold\">{{ testCaseEnvironmentName }} Environment</strong>\n <span class=\"cqa-text-gray-500\">\u00B7</span>\n <span class=\"cqa-text-gray-500\">Environment variables are resolved from this environment.</span>\n </div>\n <!-- What should the agent achieve? -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-textarea\n class=\"cqa-step-builder-ai-agent-textarea\"\n [placeholder]=\"'What should the agent achieve?'\"\n [value]=\"aiAgentForm.get('query')?.value\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n Tip: Use numbered steps or bullet points for complex tasks.\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Type Dropdown -->\n <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Environments Dropdown \u2014 hidden under Tier 1 (testCase.environmentId set);\n the env banner above already names the active env. -->\n <div *ngIf=\"!hideEnvironmentNameField\" class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Environments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"environmentSelectConfig\">\n </cqa-dynamic-select>\n <p *ngIf=\"environmentLegacyDeprecationMessage\"\n class=\"cqa-text-xs cqa-italic cqa-text-amber-600 cqa-mt-1 cqa-mb-0\"\n [innerHTML]=\"environmentLegacyDeprecationMessage\"></p>\n </div>\n\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2 \">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"aiAgentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n\n <!-- Advanced Section -->\n <div class=\"cqa-mb-2\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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 <!-- Continue on Error -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Don't fail the test if this step fails.\n </label>\n </div>\n </div> -->\n\n <!-- Disabled -->\n <!-- <div class=\"cqa-mb-1\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n class=\"cqa-step-builder-toggle-section\"\n [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n Skip this step during execution.\n </label>\n </div>\n </div> -->\n\n <!-- Retry Count -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Retry Count\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Iframe locator -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Iframe locator\n </label>\n <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n </cqa-dynamic-select>\n </div> -->\n\n <!-- Other Locators -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n Other Locators\n </label>\n <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n </cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!aiAgentForm.valid\"\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>\n\n", styles: [] }]
|
|
@@ -46090,7 +46105,7 @@ class StepBuilderCustomCodeComponent {
|
|
|
46090
46105
|
}
|
|
46091
46106
|
}
|
|
46092
46107
|
StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
46093
|
-
StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\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: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\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>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$3.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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
46108
|
+
StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\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: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\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>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$3.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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
46094
46109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
|
|
46095
46110
|
type: Component,
|
|
46096
46111
|
args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n Custom Code Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n \n\n <!-- Language Dropdown -->\n <div class=\"cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Code Editor -->\n <div class=\"cqa-mb-3\">\n <cqa-code-editor\n [label]=\"'Code'\"\n [required]=\"true\"\n [value]=\"customCodeForm.get('code')?.value\"\n [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n [minHeight]=\"'220px'\"\n [fullWidth]=\"true\"\n [errors]=\"codeFieldErrors\"\n (valueChange)=\"onCodeValueChange($event)\"\n (validationChange)=\"onCodeValidationChange($event)\"\n (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n </cqa-code-editor>\n </div>\n\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Metadata Input -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('metadata')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description Input -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input\n [placeholder]=\"'Text Input'\"\n [value]=\"customCodeForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Template Variables Section -->\n <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n <!-- Template Variables Form Fields -->\n <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n <ng-container *ngFor=\"let variable of templateVariables\">\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: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean, non-custom_code variables -->\n <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-template #defaultInput>\n <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!customCodeForm.valid || hasCodeSyntaxErrors\"\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>\n\n", styles: [] }]
|
|
@@ -46298,7 +46313,7 @@ class StepBuilderDocumentGenerationTemplateStepComponent {
|
|
|
46298
46313
|
}
|
|
46299
46314
|
}
|
|
46300
46315
|
StepBuilderDocumentGenerationTemplateStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentGenerationTemplateStepComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
46301
|
-
StepBuilderDocumentGenerationTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentGenerationTemplateStepComponent, selector: "cqa-step-builder-document-generation-template-step", inputs: { documentTypeOptions: "documentTypeOptions", templateSourceOptions: "templateSourceOptions", valueTypeOptions: "valueTypeOptions" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col 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 Document Generation Template Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Document Type -->\n <div class=\"cqa-mb-3 cqa-w-1/2 cqa-custom-form-fields\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"documentForm\" [config]=\"documentTypeConfig\">\n </cqa-dynamic-select>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] cqa-mt-1\">\n Choose the file format you want to generate.\n </p>\n </div>\n <!-- Output Variable -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'Input'\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] cqa-mt-1\">\n Stores the generated file so it can be used in later steps\n </p>\n </div>\n\n </div>\n <!-- Template Source -->\n <div class=\"cqa-mb-3 cqa-w-full cqa-custom-form-fields\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Source\n </label>\n <div>\n <cqa-segment-control\n [segments]=\"templateSegments\"\n [value]=\"selectedTemplateOption\"\n (valueChange)=\"onTemplateOptionChange($event)\">\n </cqa-segment-control>\n </div> \n </div>\n \n <!-- Use Existing Template -->\n <div *ngIf=\"selectedTemplateOption === 'use-existing'\">\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"documentForm\" [config]=\"templateSourceConfig\">\n </cqa-dynamic-select>\n </div>\n \n <!-- Upload Template -->\n <div *ngIf=\"selectedTemplateOption === 'upload'\">\n <cqa-file-upload\n accept=\".pdf,.doc,.docx,.txt\"\n acceptedFileTypes=\"PDF, DOC, or TXT files\"\n (fileSelected)=\"onFileSelected($event)\">\n </cqa-file-upload>\n </div>\n \n <!-- Create New Template -->\n <div *ngIf=\"selectedTemplateOption === 'create-new'\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields cqa-mb-3\">\n <!-- Template Name -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'PDF Document (.pdf)'\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n \n <!-- Template Description -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'PDF Document (.pdf)'\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n \n <!-- Create Template Button -->\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n text=\"Create Template\"\n [customClass]=\"'cqa-px-4 cqa-py-2'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Document Mapper Section -->\n <div class=\"cqa-mb-3\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <div>\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Document Mapper\n </label>\n <p class=\"cqa-text-[12px] cqa-text-[#64748B] cqa-m-0\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <a href=\"#\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#111827] cqa-text-[10px] cqa-no-underline hover:cqa-underline\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1712_21527)\">\n <path d=\"M8.49984 14.6666C12.4119 14.6666 15.5832 11.6818 15.5832 7.99992C15.5832 4.31802 12.4119 1.33325 8.49984 1.33325C4.58782 1.33325 1.4165 4.31802 1.4165 7.99992C1.4165 11.6818 4.58782 14.6666 8.49984 14.6666Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43896 5.99989C6.6055 5.55434 6.9342 5.17863 7.36685 4.93931C7.7995 4.7 8.30818 4.61252 8.8028 4.69237C9.29741 4.77222 9.74604 5.01424 10.0692 5.37558C10.3924 5.73691 10.5693 6.19424 10.5685 6.66656C10.5685 7.99989 8.44355 8.66656 8.44355 8.66656\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.3333H8.50966\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1712_21527\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n \n Need help?\n </a>\n </div>\n\n <!-- Mapper Table -->\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full\" style=\"table-layout: fixed;\">\n <thead>\n <tr class=\"cqa-bg-[#D8D9FC4D] cqa-border-b cqa-border-gray-200\">\n <th class=\"cqa-w-[40px] cqa-p-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <input type=\"checkbox\" class=\"cqa-w-4 cqa-h-4\">\n </div>\n </th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Key</th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Value Type</th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Value</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\" class=\"cqa-border-b cqa-border-gray-200 cqa-last:border-b-0\">\n <!-- Checkbox -->\n <td class=\"cqa-w-[40px] cqa-p-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <input type=\"checkbox\" class=\"cqa-w-4 cqa-h-4\">\n </div>\n </td>\n\n <!-- Key Input -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <cqa-custom-input\n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; border-radius: 5px;\"\n [placeholder]=\"'Key'\"\n [value]=\"getMappingGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n\n <!-- Value Type Dropdown -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <cqa-dynamic-select \n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; box-shadow: none !important;\n border-radius: 5px !important;\"\n [form]=\"getMappingGroup(i)\" \n [config]=\"valueTypeConfig\">\n </cqa-dynamic-select>\n </td>\n\n <!-- Value Input with Delete Button -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-input\n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; border-radius: 5px;\"\n [placeholder]=\"'Value'\"\n [value]=\"getMappingGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n <button\n type=\"button\"\n (click)=\"removeMapping(i)\"\n class=\"cqa-text-red-500 hover:cqa-text-red-700 cqa-p-1 cqa-flex-shrink-0\"\n [disabled]=\"mappingsFormArray.length === 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.6668 6V12.6667H5.3335V6H10.6668ZM9.66683 2H6.3335L5.66683 2.66667H3.3335V4H12.6668V2.66667H10.3335L9.66683 2ZM12.0002 4.66667H4.00016V12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V4.66667Z\" fill=\"#F9BFBF\"/>\n</svg>\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Add Mapping Button -->\n <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n <button\n type=\"button\"\n (click)=\"addMapping()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>+</span>\n <span>Add Mapping</span>\n </button>\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "cqa-file-upload", inputs: ["accept", "acceptedFileTypes", "disabled"], outputs: ["fileSelected", "cancelled"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
46316
|
+
StepBuilderDocumentGenerationTemplateStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentGenerationTemplateStepComponent, selector: "cqa-step-builder-document-generation-template-step", inputs: { documentTypeOptions: "documentTypeOptions", templateSourceOptions: "templateSourceOptions", valueTypeOptions: "valueTypeOptions" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col 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 Document Generation Template Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Document Type -->\n <div class=\"cqa-mb-3 cqa-w-1/2 cqa-custom-form-fields\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"documentForm\" [config]=\"documentTypeConfig\">\n </cqa-dynamic-select>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] cqa-mt-1\">\n Choose the file format you want to generate.\n </p>\n </div>\n <!-- Output Variable -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'Input'\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] cqa-mt-1\">\n Stores the generated file so it can be used in later steps\n </p>\n </div>\n\n </div>\n <!-- Template Source -->\n <div class=\"cqa-mb-3 cqa-w-full cqa-custom-form-fields\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Source\n </label>\n <div>\n <cqa-segment-control\n [segments]=\"templateSegments\"\n [value]=\"selectedTemplateOption\"\n (valueChange)=\"onTemplateOptionChange($event)\">\n </cqa-segment-control>\n </div> \n </div>\n \n <!-- Use Existing Template -->\n <div *ngIf=\"selectedTemplateOption === 'use-existing'\">\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"documentForm\" [config]=\"templateSourceConfig\">\n </cqa-dynamic-select>\n </div>\n \n <!-- Upload Template -->\n <div *ngIf=\"selectedTemplateOption === 'upload'\">\n <cqa-file-upload\n accept=\".pdf,.doc,.docx,.txt\"\n acceptedFileTypes=\"PDF, DOC, or TXT files\"\n (fileSelected)=\"onFileSelected($event)\">\n </cqa-file-upload>\n </div>\n \n <!-- Create New Template -->\n <div *ngIf=\"selectedTemplateOption === 'create-new'\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields cqa-mb-3\">\n <!-- Template Name -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'PDF Document (.pdf)'\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n \n <!-- Template Description -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'PDF Document (.pdf)'\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n \n <!-- Create Template Button -->\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n text=\"Create Template\"\n [customClass]=\"'cqa-px-4 cqa-py-2'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Document Mapper Section -->\n <div class=\"cqa-mb-3\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <div>\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Document Mapper\n </label>\n <p class=\"cqa-text-[12px] cqa-text-[#64748B] cqa-m-0\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <a href=\"#\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#111827] cqa-text-[10px] cqa-no-underline hover:cqa-underline\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1712_21527)\">\n <path d=\"M8.49984 14.6666C12.4119 14.6666 15.5832 11.6818 15.5832 7.99992C15.5832 4.31802 12.4119 1.33325 8.49984 1.33325C4.58782 1.33325 1.4165 4.31802 1.4165 7.99992C1.4165 11.6818 4.58782 14.6666 8.49984 14.6666Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43896 5.99989C6.6055 5.55434 6.9342 5.17863 7.36685 4.93931C7.7995 4.7 8.30818 4.61252 8.8028 4.69237C9.29741 4.77222 9.74604 5.01424 10.0692 5.37558C10.3924 5.73691 10.5693 6.19424 10.5685 6.66656C10.5685 7.99989 8.44355 8.66656 8.44355 8.66656\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.3333H8.50966\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1712_21527\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n \n Need help?\n </a>\n </div>\n\n <!-- Mapper Table -->\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full\" style=\"table-layout: fixed;\">\n <thead>\n <tr class=\"cqa-bg-[#D8D9FC4D] cqa-border-b cqa-border-gray-200\">\n <th class=\"cqa-w-[40px] cqa-p-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <input type=\"checkbox\" class=\"cqa-w-4 cqa-h-4\">\n </div>\n </th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Key</th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Value Type</th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Value</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\" class=\"cqa-border-b cqa-border-gray-200 cqa-last:border-b-0\">\n <!-- Checkbox -->\n <td class=\"cqa-w-[40px] cqa-p-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <input type=\"checkbox\" class=\"cqa-w-4 cqa-h-4\">\n </div>\n </td>\n\n <!-- Key Input -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <cqa-custom-input\n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; border-radius: 5px;\"\n [placeholder]=\"'Key'\"\n [value]=\"getMappingGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n\n <!-- Value Type Dropdown -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <cqa-dynamic-select \n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; box-shadow: none !important;\n border-radius: 5px !important;\"\n [form]=\"getMappingGroup(i)\" \n [config]=\"valueTypeConfig\">\n </cqa-dynamic-select>\n </td>\n\n <!-- Value Input with Delete Button -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-input\n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; border-radius: 5px;\"\n [placeholder]=\"'Value'\"\n [value]=\"getMappingGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n <button\n type=\"button\"\n (click)=\"removeMapping(i)\"\n class=\"cqa-text-red-500 hover:cqa-text-red-700 cqa-p-1 cqa-flex-shrink-0\"\n [disabled]=\"mappingsFormArray.length === 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.6668 6V12.6667H5.3335V6H10.6668ZM9.66683 2H6.3335L5.66683 2.66667H3.3335V4H12.6668V2.66667H10.3335L9.66683 2ZM12.0002 4.66667H4.00016V12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V4.66667Z\" fill=\"#F9BFBF\"/>\n</svg>\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Add Mapping Button -->\n <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n <button\n type=\"button\"\n (click)=\"addMapping()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>+</span>\n <span>Add Mapping</span>\n </button>\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "cqa-file-upload", inputs: ["accept", "acceptedFileTypes", "disabled"], outputs: ["fileSelected", "cancelled"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
46302
46317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentGenerationTemplateStepComponent, decorators: [{
|
|
46303
46318
|
type: Component,
|
|
46304
46319
|
args: [{ selector: 'cqa-step-builder-document-generation-template-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col 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 Document Generation Template Step\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n <!-- Document Type -->\n <div class=\"cqa-mb-3 cqa-w-1/2 cqa-custom-form-fields\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"documentForm\" [config]=\"documentTypeConfig\">\n </cqa-dynamic-select>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] cqa-mt-1\">\n Choose the file format you want to generate.\n </p>\n </div>\n <!-- Output Variable -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'Input'\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] cqa-mt-1\">\n Stores the generated file so it can be used in later steps\n </p>\n </div>\n\n </div>\n <!-- Template Source -->\n <div class=\"cqa-mb-3 cqa-w-full cqa-custom-form-fields\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Source\n </label>\n <div>\n <cqa-segment-control\n [segments]=\"templateSegments\"\n [value]=\"selectedTemplateOption\"\n (valueChange)=\"onTemplateOptionChange($event)\">\n </cqa-segment-control>\n </div> \n </div>\n \n <!-- Use Existing Template -->\n <div *ngIf=\"selectedTemplateOption === 'use-existing'\">\n <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"documentForm\" [config]=\"templateSourceConfig\">\n </cqa-dynamic-select>\n </div>\n \n <!-- Upload Template -->\n <div *ngIf=\"selectedTemplateOption === 'upload'\">\n <cqa-file-upload\n accept=\".pdf,.doc,.docx,.txt\"\n acceptedFileTypes=\"PDF, DOC, or TXT files\"\n (fileSelected)=\"onFileSelected($event)\">\n </cqa-file-upload>\n </div>\n \n <!-- Create New Template -->\n <div *ngIf=\"selectedTemplateOption === 'create-new'\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields cqa-mb-3\">\n <!-- Template Name -->\n <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'PDF Document (.pdf)'\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n \n <!-- Template Description -->\n <div class=\"cqa-w-1/2 cqa-pl-2\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n [placeholder]=\"'PDF Document (.pdf)'\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n \n <!-- Create Template Button -->\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n text=\"Create Template\"\n [customClass]=\"'cqa-px-4 cqa-py-2'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Document Mapper Section -->\n <div class=\"cqa-mb-3\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <div>\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Document Mapper\n </label>\n <p class=\"cqa-text-[12px] cqa-text-[#64748B] cqa-m-0\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <a href=\"#\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#111827] cqa-text-[10px] cqa-no-underline hover:cqa-underline\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_1712_21527)\">\n <path d=\"M8.49984 14.6666C12.4119 14.6666 15.5832 11.6818 15.5832 7.99992C15.5832 4.31802 12.4119 1.33325 8.49984 1.33325C4.58782 1.33325 1.4165 4.31802 1.4165 7.99992C1.4165 11.6818 4.58782 14.6666 8.49984 14.6666Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43896 5.99989C6.6055 5.55434 6.9342 5.17863 7.36685 4.93931C7.7995 4.7 8.30818 4.61252 8.8028 4.69237C9.29741 4.77222 9.74604 5.01424 10.0692 5.37558C10.3924 5.73691 10.5693 6.19424 10.5685 6.66656C10.5685 7.99989 8.44355 8.66656 8.44355 8.66656\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.3333H8.50966\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_1712_21527\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n \n Need help?\n </a>\n </div>\n\n <!-- Mapper Table -->\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full\" style=\"table-layout: fixed;\">\n <thead>\n <tr class=\"cqa-bg-[#D8D9FC4D] cqa-border-b cqa-border-gray-200\">\n <th class=\"cqa-w-[40px] cqa-p-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <input type=\"checkbox\" class=\"cqa-w-4 cqa-h-4\">\n </div>\n </th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Key</th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Value Type</th>\n <th class=\"cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">Value</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\" class=\"cqa-border-b cqa-border-gray-200 cqa-last:border-b-0\">\n <!-- Checkbox -->\n <td class=\"cqa-w-[40px] cqa-p-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n <input type=\"checkbox\" class=\"cqa-w-4 cqa-h-4\">\n </div>\n </td>\n\n <!-- Key Input -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <cqa-custom-input\n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; border-radius: 5px;\"\n [placeholder]=\"'Key'\"\n [value]=\"getMappingGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n\n <!-- Value Type Dropdown -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <cqa-dynamic-select \n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; box-shadow: none !important;\n border-radius: 5px !important;\"\n [form]=\"getMappingGroup(i)\" \n [config]=\"valueTypeConfig\">\n </cqa-dynamic-select>\n </td>\n\n <!-- Value Input with Delete Button -->\n <td class=\"cqa-p-2\" style=\"width: calc((100% - 40px) / 3);\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-input\n inputInlineStyle=\"height: 36px;color: #0A0A0A; font-size: 14px; border-radius: 5px;\"\n [placeholder]=\"'Value'\"\n [value]=\"getMappingGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n <button\n type=\"button\"\n (click)=\"removeMapping(i)\"\n class=\"cqa-text-red-500 hover:cqa-text-red-700 cqa-p-1 cqa-flex-shrink-0\"\n [disabled]=\"mappingsFormArray.length === 1\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.6668 6V12.6667H5.3335V6H10.6668ZM9.66683 2H6.3335L5.66683 2.66667H3.3335V4H12.6668V2.66667H10.3335L9.66683 2ZM12.0002 4.66667H4.00016V12.6667C4.00016 13.4 4.60016 14 5.3335 14H10.6668C11.4002 14 12.0002 13.4 12.0002 12.6667V4.66667Z\" fill=\"#F9BFBF\"/>\n</svg>\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <!-- Add Mapping Button -->\n <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n <button\n type=\"button\"\n (click)=\"addMapping()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n <span>+</span>\n <span>Add Mapping</span>\n </button>\n </div>\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n </div>\n</div>\n\n", styles: [] }]
|
|
@@ -46767,7 +46782,7 @@ class StepBuilderDocumentComponent {
|
|
|
46767
46782
|
}
|
|
46768
46783
|
}
|
|
46769
46784
|
StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
46770
|
-
StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete row</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"getValueFormGroup(i, j)\"\n [config]=\"getValueTypeConfig(i, j)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n [disabled]=\"getValuesFormArray(i).length <= 1\"\n (click)=\"removeValueEntry(i, j)\"\n [attr.aria-label]=\"'Remove value'\"\n [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n </button>\n </div>\n <button\n type=\"button\"\n class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n (click)=\"addValueEntry(i)\"\n [attr.aria-label]=\"'Add value'\">\n <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n Add value\n </button>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete key row'\"\n title=\"Delete this key and all its values\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"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>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
46785
|
+
StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete row</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"getValueFormGroup(i, j)\"\n [config]=\"getValueTypeConfig(i, j)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n [disabled]=\"getValuesFormArray(i).length <= 1\"\n (click)=\"removeValueEntry(i, j)\"\n [attr.aria-label]=\"'Remove value'\"\n [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n </button>\n </div>\n <button\n type=\"button\"\n class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n (click)=\"addValueEntry(i)\"\n [attr.aria-label]=\"'Add value'\">\n <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n Add value\n </button>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete key row'\"\n title=\"Delete this key and all its values\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"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>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
46771
46786
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
|
|
46772
46787
|
type: Component,
|
|
46773
46788
|
args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete row</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"getValueFormGroup(i, j)\"\n [config]=\"getValueTypeConfig(i, j)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n [disabled]=\"getValuesFormArray(i).length <= 1\"\n (click)=\"removeValueEntry(i, j)\"\n [attr.aria-label]=\"'Remove value'\"\n [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n </button>\n </div>\n <button\n type=\"button\"\n class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n (click)=\"addValueEntry(i)\"\n [attr.aria-label]=\"'Add value'\">\n <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n Add value\n </button>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete key row'\"\n title=\"Delete this key and all its values\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"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>\n</div>\n" }]
|
|
@@ -48519,7 +48534,7 @@ class TestCaseDetailsEditComponent {
|
|
|
48519
48534
|
}
|
|
48520
48535
|
}
|
|
48521
48536
|
TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
48522
|
-
TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout", viewportCategoryOptions: "viewportCategoryOptions" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange", configureApiMocking: "configureApiMocking" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Environment</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('environment', environmentSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('environment')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- Viewport selector \u2014 replaces single dropdown -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n <cqa-radio-card-group\n class=\"viewport-selector\"\n [options]=\"viewportModeOptions\"\n [ngModel]=\"viewportMode\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onViewportModeChange($event)\">\n </cqa-radio-card-group>\n <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportDesktopDeviceForm\"\n [config]=\"desktopViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportLaptopDeviceForm\"\n [config]=\"laptopViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportTabletDeviceForm\"\n [config]=\"tabletViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device</span>\n <cqa-dynamic-select\n [form]=\"viewportMobileDeviceForm\"\n [config]=\"mobileViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: RadioCardGroupComponent, selector: "cqa-radio-card-group", inputs: ["options", "wrap", "disabled"], outputs: ["selectionChange"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48537
|
+
TestCaseDetailsEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsEditComponent, selector: "cqa-test-case-details-edit", inputs: { descriptionTitle: "descriptionTitle", descriptionContent: "descriptionContent", enableMarkdown: "enableMarkdown", metadataItems: "metadataItems", labels: "labels", configTitle: "configTitle", configSections: "configSections", configSectionsRow2: "configSectionsRow2", isSaving: "isSaving", prerequisiteCaseOptions: "prerequisiteCaseOptions", platform: "platform", isStepGroup: "isStepGroup", selectConfigOverrides: "selectConfigOverrides", showApiMockingCard: "showApiMockingCard", apiMockingTitle: "apiMockingTitle", apiMockingStatusLabel: "apiMockingStatusLabel", apiMockingCaptureLabel: "apiMockingCaptureLabel", apiMockingCaptureHint: "apiMockingCaptureHint", apiMockingRenewLabel: "apiMockingRenewLabel", apiMockingRenewHint: "apiMockingRenewHint", apiMockingRestoreMock: "apiMockingRestoreMock", apiMockingStoreMock: "apiMockingStoreMock", apiMockingMockedApisCount: "apiMockingMockedApisCount", apiMockingTotalApisCount: "apiMockingTotalApisCount", apiMockingProgressPercent: "apiMockingProgressPercent", apiMockingShowProgress: "apiMockingShowProgress", apiMockingSummaryText: "apiMockingSummaryText", apiMockingPercentText: "apiMockingPercentText", orgLevelTestCaseTimeout: "orgLevelTestCaseTimeout", viewportCategoryOptions: "viewportCategoryOptions" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded", apiMockingRestoreMockChange: "apiMockingRestoreMockChange", apiMockingStoreMockChange: "apiMockingStoreMockChange", configureApiMocking: "configureApiMocking" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Environment</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('environment', environmentSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('environment')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- Viewport selector \u2014 replaces single dropdown -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n <cqa-radio-card-group\n class=\"viewport-selector\"\n [options]=\"viewportModeOptions\"\n [ngModel]=\"viewportMode\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onViewportModeChange($event)\">\n </cqa-radio-card-group>\n <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportDesktopDeviceForm\"\n [config]=\"desktopViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportLaptopDeviceForm\"\n [config]=\"laptopViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportTabletDeviceForm\"\n [config]=\"tabletViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device</span>\n <cqa-dynamic-select\n [form]=\"viewportMobileDeviceForm\"\n [config]=\"mobileViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: RadioCardGroupComponent, selector: "cqa-radio-card-group", inputs: ["options", "wrap", "disabled"], outputs: ["selectionChange"] }, { type: ApiMockingCardComponent, selector: "cqa-api-mocking-card", inputs: ["title", "statusLabel", "captureLabel", "captureHint", "renewLabel", "renewHint", "restoreMock", "storeMock", "mockedApisCount", "totalApisCount", "progressPercent", "summaryText", "percentText", "configureButtonLabel", "editing", "showProgress", "noDataHint"], outputs: ["configure", "restoreMockChange", "storeMockChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
48523
48538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
|
|
48524
48539
|
type: Component,
|
|
48525
48540
|
args: [{ selector: 'cqa-test-case-details-edit', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-text-sm cqa-leading-[19.6px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-py-4\">\n <!-- Basic details: Description, Status/Priority/Type, Labels (light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-4 cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <!-- Description (Figma: document icon, textarea with light purple bg) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">description</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.6px]\">{{ descriptionTitle }}</span>\n </div>\n <cqa-custom-textarea\n [value]=\"editDescription\"\n (valueChange)=\"editDescription = $event\"\n [fullWidth]=\"true\"\n [rows]=\"4\"\n [enableMarkdown]=\"enableMarkdown\"\n placeholder=\"Enter description...\"\n textareaInlineStyle=\"padding: 12px; font-size: 12px; line-height: 100%\"\n class=\"cqa-w-full\">\n </cqa-custom-textarea>\n </div>\n\n <!-- Status, Priority & Type (Figma: side-by-side dropdowns, cqa-dynamic-select) -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Status</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('status', statusSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('status')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Priority</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('priority', prioritySelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('priority')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-[#6B7280] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Type</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('type', typeSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('type')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n\n <!-- Labels (Figma: Current Labels with Clear All, cqa-badge with x, Frequently used, Search) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <span class=\"cqa-text-[#374151] cqa-text-[15px] cqa-leading-[19.6px] cqa-font-medium\">Current Labels ({{ editLabels.length }})</span>\n <button\n type=\"button\"\n *ngIf=\"editLabels.length > 0\"\n class=\"cqa-text-xs cqa-text-[#DC2626] hover:cqa-underline cqa-font-normal\"\n (click)=\"onClearAllLabels()\">\n Clear All\n </button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\" *ngIf=\"editLabels.length > 0\">\n <div\n *ngFor=\"let label of editLabels; trackBy: trackByLabel\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-px-2.5 cqa-py-1 cqa-text-xs cqa-font-medium cqa-rounded-md cqa-border\"\n [ngStyle]=\"getCurrentLabelChipStyle(label)\">\n <span>{{ label }}</span>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-3.5 cqa-h-3.5 cqa-rounded hover:cqa-opacity-80 cqa-transition-opacity cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n [style.color]=\"getLabelCloseIconColor(label)\"\n (click)=\"onRemoveLabel(label)\"\n [attr.aria-label]=\"'Remove ' + label\">\n <mat-icon class=\"cqa-text-[14px] cqa-w-3.5 cqa-h-3.5\">close</mat-icon>\n </button>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Frequently used</span>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <button\n *ngFor=\"let label of frequentlyUsedLabels; trackBy: trackByLabel\"\n type=\"button\"\n class=\"cqa-cursor-pointer\"\n (click)=\"onAddFrequentLabel(label)\">\n <cqa-badge\n [label]=\"label\"\n variant=\"default\"\n size=\"small\"\n backgroundColor=\"#E8E9FF\"\n textColor=\"#3F43EE\"\n borderColor=\"#E8E9FF\">\n </cqa-badge>\n </button>\n </div>\n </div>\n <label class=\"cqa-text-[#374151] cqa-text-sm cqa-leading-[19.6px] cqa-font-medium\">Add labels</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"labelsSelectConfig\"\n (searchChange)=\"onSelectSearch($event)\"\n (selectClick)=\"onSelectOpened('labels')\"\n (selectionChange)=\"onSelectionChange($event)\"\n (addCustomValue)=\"onLabelsAddCustomValue($event)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n\n\n <!-- Configuration (Figma: collapsible, gear icon, light background container) -->\n <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-gap-[12px] cqa-rounded-lg cqa-border cqa-border-[#E2E8F0] cqa-bg-[#F8F9FE] cqa-p-4\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-left cqa-w-full\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">settings</mat-icon>\n </div>\n <span class=\"cqa-text-[#374151] cqa-text-sm cqa-font-semibold cqa-leading-[19.5px]\">{{ configTitle }}</span>\n </div>\n\n <div *ngIf=\"configExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-5 cqa-text-xs\">\n <!-- Execution -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"executionExpanded = !executionExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">play_circle</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Execution</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ executionExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"executionExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- <div *ngIf=\"hasPrerequisiteCaseConfig\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\"> \n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('prerequisiteCases', prerequisiteCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('prerequisiteCases')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Environment</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('environment', environmentSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('environment')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Test Data Profile</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataProfile', testDataProfileSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataProfile')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div *ngIf=\"!isStepGroup\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#687389] cqa-text-xs cqa-font-medium\">Test Data Set</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('testDataSet', testDataSetSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('testDataSet')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-text-[#6B7280] cqa-text-xs cqa-font-medium\">Video Recording</label>\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('videoRecording', videoRecordingSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('videoRecording')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div> -->\n </div>\n </div>\n <!-- AI Configuration -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"aiConfigExpanded = !aiConfigExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">smart_toy</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">AI Configuration</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ aiConfigExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"aiConfigExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-py-0 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('enableAiSmartness', enableAiSmartnessSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('enableAiSmartness')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultAiAction', defaultAiActionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultAiAction')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('knowledgeBaseDefaultTestCase', knowledgeBaseDefaultTestCaseSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('knowledgeBaseDefaultTestCase')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('useAiMetadata', aiMetadataCollectionSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('useAiMetadata')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n </div>\n </div>\n <!-- Waits & Retries-->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"waitsRetriesExpanded = !waitsRetriesExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">timer</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Wait and Retries</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ waitsRetriesExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"waitsRetriesExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"autoWaitEnabled\" (checkedChange)=\"autoWaitEnabled = $event\" ariaLabel=\"Enable Avoid Auto wait for steps\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Enable Avoid Auto wait for steps</span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Retry Failed Steps\"\n [value]=\"retryFailedSteps\"\n (valueChange)=\"retryFailedSteps = onlyDigits($event)\"\n placeholder=\"0\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <label class=\"cqa-font-medium cqa-text-[#374151] cqa-text-xs cqa-mb-1\" style=\"font-size: 14px; line-height: 19.6px\">\n Test Case Timeout (minutes)\n </label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0 cqa-w-full\">\n <div class=\"cqa-inline-flex cqa-rounded-md cqa-border cqa-border-solid cqa-border-gray-200\">\n <cqa-dropdown-button\n [options]=\"testCaseTimeoutModeOptions\"\n [selectedValue]=\"testCaseTimeoutMode\"\n (selectionChange)=\"onTestCaseTimeoutModeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n type=\"number\"\n [value]=\"testCaseTimeoutDisplayValue\"\n [disabled]=\"testCaseTimeoutMode === 'org'\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\n [fullWidth]=\"true\"\n size=\"sm\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-w-0 cqa-w-full\">\n <cqa-custom-input\n type=\"number\"\n label=\"Wait Timeout for Locators (sec)\"\n [value]=\"waitTimeoutLocators\"\n (valueChange)=\"waitTimeoutLocators = onlyDigits($event)\"\n placeholder=\"15\"\n [fullWidth]=\"true\"\n size=\"sm\"\n labelInlineStyle=\"font-size: 14px; line-height: 19.6px\">\n </cqa-custom-input>\n </div>\n </div>\n </div>\n <div *ngIf=\"platform !== 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-4 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"deviceExpanded = !deviceExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">devices</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Device Settings</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ deviceExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"deviceExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-w-0 cqa-w-full\">\n <!-- Web only: mobile Device Settings hidden temporarily -->\n <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultBrowser', defaultBrowserSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultBrowser')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\n </div>\n <!-- Viewport selector \u2014 replaces single dropdown -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <span class=\"cqa-text-[13px] cqa-font-medium cqa-text-[#374151] cqa-leading-[18.2px]\">Viewport</span>\n <cqa-radio-card-group\n class=\"viewport-selector\"\n [options]=\"viewportModeOptions\"\n [ngModel]=\"viewportMode\"\n [ngModelOptions]=\"{ standalone: true }\"\n (ngModelChange)=\"onViewportModeChange($event)\">\n </cqa-radio-card-group>\n <div *ngIf=\"viewportMode === 'desktop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportDesktopDeviceForm\"\n [config]=\"desktopViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'laptop'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportLaptopDeviceForm\"\n [config]=\"laptopViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'tablet'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Resolution</span>\n <cqa-dynamic-select\n [form]=\"viewportTabletDeviceForm\"\n [config]=\"tabletViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"viewportMode === 'mobile'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6b7280]\">Device</span>\n <cqa-dynamic-select\n [form]=\"viewportMobileDeviceForm\"\n [config]=\"mobileViewportConfig\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n </div>\n </div>\n </div>\n </div>\n <!-- Key Flags -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2.5 cqa-min-w-0 cqa-rounded-lg cqa-p-4 cqa-mb-0 cqa-border cqa-border-solid cqa-border-[#E2E8F0]\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer\"\n (click)=\"keyFlagsExpanded = !keyFlagsExpanded\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-w-5 cqa-h-5 cqa-p-1 cqa-flex-shrink-0 cqa-bg-[#3F43EE1A] cqa-rounded-md cqa-inline-flex cqa-justify-center cqa-items-center\">\n <mat-icon class=\"cqa-text-[#1B1FEB] cqa-text-[12px] cqa-w-3 cqa-h-3 cqa-leading-none cqa-block\">flag</mat-icon>\n </div>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-semibold cqa-text-[#111827]\">Key Flags</span>\n </div>\n <mat-icon class=\"cqa-text-[#64748B] cqa-text-xl cqa-w-5 cqa-h-5\">\n {{ keyFlagsExpanded ? 'expand_less' : 'expand_more' }}\n </mat-icon>\n </button>\n <div *ngIf=\"keyFlagsExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"mobileTestingEnabled\" (checkedChange)=\"mobileTestingEnabled = $event\" ariaLabel=\"Mobile Testing\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Mobile Testing</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"extensionUseEnabled\" (checkedChange)=\"extensionUseEnabled = $event\" ariaLabel=\"Extension Use\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Extension Use</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2.5 cqa-rounded-lg\">\n <cqa-custom-toggle [checked]=\"dataDrivenEnabled\" (checkedChange)=\"dataDrivenEnabled = $event\" ariaLabel=\"Data Driven\"></cqa-custom-toggle>\n <span class=\"cqa-text-sm cqa-leading-[19.6px] cqa-font-normal cqa-text-[#111827]\">Data Driven</span>\n </div>\n </div>\n </div>\n\n \n <!-- API Mocking Card (edit mode: mutually-exclusive toggles driven by one boolean) -->\n <cqa-api-mocking-card\n *ngIf=\"showApiMockingCard\"\n style=\"width: 100%;\"\n [title]=\"apiMockingTitle\"\n [statusLabel]=\"apiMockingStatusLabel\"\n [captureLabel]=\"apiMockingCaptureLabel\"\n [captureHint]=\"apiMockingCaptureHint\"\n [renewLabel]=\"apiMockingRenewLabel\"\n [renewHint]=\"apiMockingRenewHint\"\n [restoreMock]=\"editApiMockingRestoreMock\"\n [storeMock]=\"editApiMockingStoreMock\"\n [mockedApisCount]=\"apiMockingMockedApisCount\"\n [totalApisCount]=\"apiMockingTotalApisCount\"\n [progressPercent]=\"apiMockingProgressPercent\"\n [showProgress]=\"apiMockingShowProgress\"\n [summaryText]=\"apiMockingSummaryText\"\n [percentText]=\"apiMockingPercentText\"\n [editing]=\"true\"\n (restoreMockChange)=\"onApiMockingRestoreMockChange($event)\"\n (storeMockChange)=\"onApiMockingStoreMockChange($event)\"\n (configure)=\"configureApiMocking.emit()\">\n </cqa-api-mocking-card>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-gap-3 cqa-pt-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n [text]=\"'Cancel'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n *ngIf=\"!isSaving\"\n variant=\"filled\"\n [text]=\"'Save Changes'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n [disabled]=\"!hasUnsavedChanges\"\n (clicked)=\"onSave()\">\n </cqa-button>\n <div *ngIf=\"isSaving\" class=\"cqa-w-full\">\n <cqa-badge\n label=\"Saving\u2026\"\n icon=\"autorenew\"\n [isLoading]=\"true\"\n [fullWidth]=\"true\"\n [centerContent]=\"true\"\n variant=\"info\"\n size=\"medium\">\n </cqa-badge>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
@@ -49105,7 +49120,7 @@ class StepBuilderGroupComponent {
|
|
|
49105
49120
|
}
|
|
49106
49121
|
}
|
|
49107
49122
|
StepBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
49108
|
-
StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep", showNestedStepGroupWarning: "showNestedStepGroupWarning", nestedStepGroupWarning: "nestedStepGroupWarning" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n\n \n <!-- Nested-step-group warning. Visible only when the consumer flips\n `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n <div *ngIf=\"showNestedStepGroupWarning\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n role=\"alert\">\n <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n <span>{{ nestedStepGroupWarning }}</span>\n </div>\n <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [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>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
49123
|
+
StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep", showNestedStepGroupWarning: "showNestedStepGroupWarning", nestedStepGroupWarning: "nestedStepGroupWarning" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n\n \n <!-- Nested-step-group warning. Visible only when the consumer flips\n `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n <div *ngIf=\"showNestedStepGroupWarning\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n role=\"alert\">\n <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n <span>{{ nestedStepGroupWarning }}</span>\n </div>\n <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [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>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
49109
49124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, decorators: [{
|
|
49110
49125
|
type: Component,
|
|
49111
49126
|
args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n </h2>\n\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n <!-- Step Group Selection -->\n <div class=\"cqa-mb-6\">\n <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"stepGroupForm\"\n [config]=\"stepGroupConfig\">\n </cqa-dynamic-select>\n </div>\n\n <!-- Step Group Description -->\n <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n <div class=\"cqa-mb-2\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n </div>\n <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n </div>\n </div>\n </div> -->\n\n <!-- Runtime Variables Section -->\n <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n Set Parameters Default Value\n </h3>\n\n \n <!-- Nested-step-group warning. Visible only when the consumer flips\n `showNestedStepGroupWarning` (i.e. the host test case is itself a step group). -->\n <div *ngIf=\"showNestedStepGroupWarning\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-mb-3 cqa-px-3 cqa-py-2.5 cqa-rounded-md cqa-border cqa-border-[#FCD34D] cqa-border-l-[3px] cqa-border-l-[#F59E0B] cqa-bg-[#FEF3C7] cqa-text-[#92400E] cqa-text-[12px] cqa-leading-[18px]\"\n role=\"alert\">\n <mat-icon class=\"cqa-text-[#B45309] !cqa-text-[18px] !cqa-w-[18px] !cqa-h-[18px] cqa-mt-px cqa-flex-shrink-0\">warning_amber</mat-icon>\n <span>{{ nestedStepGroupWarning }}</span>\n </div>\n <!-- TODO: ADD warning message here if the host test case is itself a step group -->\n <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n <!-- Loading State -->\n <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n </div>\n\n <!-- Runtime Variables Tables -->\n <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n ( {{i + 1}} ) {{ childGroup.name }}\n </h4>\n <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n <table class=\"cqa-w-full cqa-text-left\">\n <thead class=\"cqa-bg-gray-50\">\n <tr>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Name\n </th>\n <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n Parameter Value\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n {{ variable.name }}\n </td>\n <td class=\"cqa-px-4 cqa-py-2\">\n <cqa-custom-input \n [placeholder]=\"'Enter value'\"\n [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n </cqa-custom-input>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </ng-container>\n <ng-template #noVariables>\n <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n No step groups available\n </div>\n </div>\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 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [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>\n\n", styles: [] }]
|
|
@@ -49566,7 +49581,7 @@ class StepDetailsDrawerComponent {
|
|
|
49566
49581
|
}
|
|
49567
49582
|
}
|
|
49568
49583
|
StepDetailsDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, deps: [{ token: STEP_DETAILS_DRAWER_REF }, { token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: STEP_DETAILS_DRAWER_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
49569
|
-
StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n <!-- Header: back chevron, title, Step N pill, close -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n style=\"border-bottom: 1px solid #E5E5E5;\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button type=\"button\" (click)=\"onBack()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n aria-label=\"Back\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n {{ displayTitle }}\n </h2>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n Step {{ stepNumber }}\n </span>\n </div>\n <button type=\"button\" (click)=\"onClose()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n title=\"Close\" aria-label=\"Close\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <ng-container *ngIf=\"dynamicFields.length > 0\">\n <!-- All non-advanced fields in array order with section headers -->\n <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n <ng-container *ngIf=\"isNonAdvancedField(i)\">\n <p *ngIf=\"isFirstInSection(i, 'main')\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n <!-- string / undefined \u2192 text input -->\n <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- number -->\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- textarea -->\n <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <span *ngIf=\"field.required\"\n class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n </div>\n <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n </div>\n\n <!-- code -->\n <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- boolean \u2192 toggle -->\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div>\n <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n field.subLabel }}</span>\n </div>\n <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n </div>\n\n <!-- dropdown -->\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Advanced: expandable (all advanced fields from array) -->\n <ng-container *ngIf=\"advancedFields.length > 0\">\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span>Advanced</span>\n <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n expand_less\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n <ng-container *ngFor=\"let field of advancedFields\">\n <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n \n <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n </div>\n </div>\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Other Locators section (matching old UI) -->\n <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n style=\"padding-left: 26px;\">\n <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n title=\"Click to Copy\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n </button>\n <button type=\"button\" (click)=\"deleteLocator(i)\"\n class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n title=\"Delete\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n </p>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n <!-- Footer -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n</div>", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49584
|
+
StepDetailsDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepDetailsDrawerComponent, selector: "cqa-step-details-drawer", inputs: { stepData: "stepData", stepNumberInput: "stepNumberInput", dynamicFieldsInput: "dynamicFieldsInput", drawerTitle: "drawerTitle" }, outputs: { saveChanges: "saveChanges", cancel: "cancel", saveAsTemplate: "saveAsTemplate" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n <!-- Header: back chevron, title, Step N pill, close -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n style=\"border-bottom: 1px solid #E5E5E5;\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button type=\"button\" (click)=\"onBack()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n aria-label=\"Back\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n {{ displayTitle }}\n </h2>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n Step {{ stepNumber }}\n </span>\n </div>\n <button type=\"button\" (click)=\"onClose()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n title=\"Close\" aria-label=\"Close\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <ng-container *ngIf=\"dynamicFields.length > 0\">\n <!-- All non-advanced fields in array order with section headers -->\n <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n <ng-container *ngIf=\"isNonAdvancedField(i)\">\n <p *ngIf=\"isFirstInSection(i, 'main')\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n <!-- string / undefined \u2192 text input -->\n <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- number -->\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- textarea -->\n <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <span *ngIf=\"field.required\"\n class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n </div>\n <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n </div>\n\n <!-- code -->\n <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- boolean \u2192 toggle -->\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div>\n <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n field.subLabel }}</span>\n </div>\n <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n </div>\n\n <!-- dropdown -->\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Advanced: expandable (all advanced fields from array) -->\n <ng-container *ngIf=\"advancedFields.length > 0\">\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span>Advanced</span>\n <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n expand_less\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n <ng-container *ngFor=\"let field of advancedFields\">\n <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n \n <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n </div>\n </div>\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Other Locators section (matching old UI) -->\n <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n style=\"padding-left: 26px;\">\n <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n title=\"Click to Copy\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n </button>\n <button type=\"button\" (click)=\"deleteLocator(i)\"\n class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n title=\"Delete\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n </p>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n <!-- Footer -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n</div>", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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: CustomToggleComponent, selector: "cqa-custom-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange", "change"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49570
49585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, decorators: [{
|
|
49571
49586
|
type: Component,
|
|
49572
49587
|
args: [{ selector: 'cqa-step-details-drawer', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Step Details Drawer \u2013 Edit In Depth. Fully dynamic from DynamicFieldConfig[]. -->\n<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-w-full cqa-max-w-[480px] cqa-box-border\">\n <!-- Header: back chevron, title, Step N pill, close -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-bg-white\"\n style=\"border-bottom: 1px solid #E5E5E5;\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button type=\"button\" (click)=\"onBack()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n aria-label=\"Back\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 20L14 16L18 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n <h2 class=\"cqa-text-[16px] cqa-leading-[19px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-1\">\n {{ displayTitle }}\n </h2>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[5px] cqa-bg-[#D8D9FC] cqa-text-[#090A60] cqa-text-[12px]\">\n Step {{ stepNumber }}\n </span>\n </div>\n <button type=\"button\" (click)=\"onClose()\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[28px] cqa-min-w-[28px] cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-p-0\"\n title=\"Close\" aria-label=\"Close\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M19 9L9 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M9 9L19 19\" stroke=\"#4A5565\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Content: all fields from dynamicFields array (main + constraints in order, then advanced grouped) -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-bg-white cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <ng-container *ngIf=\"dynamicFields.length > 0\">\n <!-- All non-advanced fields in array order with section headers -->\n <ng-container *ngFor=\"let field of dynamicFields; let i = index\">\n <ng-container *ngIf=\"isNonAdvancedField(i)\">\n <p *ngIf=\"isFirstInSection(i, 'main')\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Attributes</p>\n <p *ngIf=\"isFirstInSection(i, 'constraints')\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text[#0A0A0A] cqa-mb-1\">Constraints</p>\n\n <!-- string / undefined \u2192 text input -->\n <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Test-data, source-value, or target-value with data type dropdown -->\n <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }} Type</label>\n <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n\n <!-- number -->\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- textarea -->\n <div *ngIf=\"field.type === 'textarea'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-medium cqa-text-[#161617]\">{{ field.label }}</label>\n <span *ngIf=\"field.required\"\n class=\"cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-bg-[#FEE2E2] cqa-text-[#DC2626] cqa-text-[10px] cqa-font-medium\">Required</span>\n </div>\n <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" [rows]=\"field.rows || 4\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n <p *ngIf=\"field.tip\" class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa--mt-1.5\">{{ field.tip }}</p>\n </div>\n\n <!-- code -->\n <div *ngIf=\"field.type === 'code'\" class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-textarea [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" customClass=\"cqa-p-2 cqa-text-[14px] cqa-leading-[20px]\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n\n <!-- boolean \u2192 toggle -->\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div>\n <p class=\"cqa-text-[12px] cqa-text-[#111827] cqa-m-0\">{{ field.label }}</p>\n <span *ngIf=\"field.subLabel\" class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{\n field.subLabel }}</span>\n </div>\n <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n </div>\n\n <!-- dropdown -->\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </ng-container>\n\n <!-- Advanced: expandable (all advanced fields from array) -->\n <ng-container *ngIf=\"advancedFields.length > 0\">\n <button type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-[#111827] cqa-py-2 cqa-border-b cqa-border-[#E5E7EB]\"\n (click)=\"advancedExpanded = !advancedExpanded\">\n <span>Advanced</span>\n <mat-icon class=\"cqa-text-[20px] cqa-transition-transform\" [class.cqa-rotate-180]=\"!advancedExpanded\">\n expand_less\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2\">\n <ng-container *ngFor=\"let field of advancedFields\">\n <div *ngIf=\"(field.type ?? 'string') === 'string' && !needsDataTypeDropdown(field)\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"form.get(field.key)?.value\"\n [fullWidth]=\"true\" (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n \n <!-- Test-data, source-value, or target-value with data type dropdown in advanced section -->\n <ng-container *ngIf=\"(field.type ?? 'string') === 'string' && needsDataTypeDropdown(field)\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }} Type</label>\n <cqa-dynamic-select *ngIf=\"getDataTypeSelectConfig(field) && form.contains(field.key + '_dataType')\" \n [form]=\"form\" [config]=\"getDataTypeSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input [placeholder]=\"field.placeholder || ''\" [value]=\"getRawValue(field)\"\n [fullWidth]=\"true\" (valueChange)=\"onTestDataValueChange(field.key, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <div *ngIf=\"field.type === 'number'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-custom-input type=\"number\" [placeholder]=\"field.placeholder || ''\"\n [value]=\"form.get(field.key)?.value\" [fullWidth]=\"true\"\n (valueChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div *ngIf=\"field.type === 'boolean'\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-custom-toggle [checked]=\"form.get(field.key)?.value\"\n (checkedChange)=\"form.get(field.key)?.setValue($event)\">\n </cqa-custom-toggle>\n <div class=\"cqa-flex cqa-flex-col\">\n <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#737373]\">{{ field.label }}</span>\n <span class=\"cqa-text-[12px] cqa-text-[#0A0A0A]\" *ngIf=\"field.subLabel\">{{ field.subLabel }}</span>\n </div>\n </div>\n <div *ngIf=\"field.type === 'dropdown' && getSelectConfig(field) && form.contains(field.key)\"\n class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-step-details-drawer-select\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#374151]\">{{ field.label }}</label>\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(field)!\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n </div>\n </ng-container>\n\n <!-- Other Locators section (matching old UI) -->\n <ng-container *ngIf=\"pwLocator && pwLocator.length > 0\">\n <p class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#6B7280] cqa-mb-3 cqa-mt-0\">Other Locators</p>\n <div *ngFor=\"let locator of pwLocator; let i = index\" class=\"cqa-mb-3\">\n <div *ngIf=\"locator !== ''\" class=\"cqa-relative cqa-flex cqa-items-center\">\n <input type=\"text\" [value]=\"locator\" #locatorInput readonly\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-pr-20 cqa-border cqa-border-[#E5E7EB] cqa-rounded cqa-text-[14px] cqa-bg-white\"\n style=\"padding-left: 26px;\">\n <button type=\"button\" (click)=\"copyLocator(locatorInput)\"\n class=\"cqa-absolute cqa-left-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#374151]\"\n title=\"Click to Copy\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">content_copy</mat-icon>\n </button>\n <button type=\"button\" (click)=\"deleteLocator(i)\"\n class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-p-1 cqa-text-[#6B7280] hover:cqa-text-[#DC2626]\"\n title=\"Delete\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">delete</mat-icon>\n </button>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n <p *ngIf=\"dynamicFields.length === 0\" class=\"cqa-text-[14px] cqa-text-[#6B7280]\">No fields configured for this step.\n </p>\n </div>\n <div class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5]\"> </div>\n <!-- Footer -->\n <div\n class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-2 cqa-px-4 cqa-py-4 cqa-border-t cqa-border-[#E5E7EB] cqa-bg-white\">\n <cqa-button variant=\"text\" btnSize=\"lg\" [text]=\"'Cancel'\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-text-[#374151]'\"></cqa-button>\n <div class=\"cqa-flex-1 cqa-min-w-0\"></div>\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Save as Template'\" (clicked)=\"onSaveAsTemplate()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Save Changes'\" (clicked)=\"onSaveChanges()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-bg-[#3F43EE] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n</div>" }]
|
|
@@ -51090,7 +51105,7 @@ class QuestionnaireListComponent {
|
|
|
51090
51105
|
}
|
|
51091
51106
|
}
|
|
51092
51107
|
QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51093
|
-
QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
51108
|
+
QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
51094
51109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
51095
51110
|
type: Component,
|
|
51096
51111
|
args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [] }]
|
|
@@ -51951,7 +51966,7 @@ ViewportSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
|
|
|
51951
51966
|
useExisting: forwardRef(() => ViewportSelectorComponent),
|
|
51952
51967
|
multi: true,
|
|
51953
51968
|
},
|
|
51954
|
-
], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"'100%'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n <label\n *ngIf=\"label\"\n class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151]\">\n {{ label }}\n <span *ngIf=\"required\" class=\"cqa-text-[#EF4444]\">*</span>\n </label>\n\n <cqa-radio-card-group\n [options]=\"modeOptions\"\n [disabled]=\"disabled\"\n [ngModel]=\"internalValue.mode\"\n (ngModelChange)=\"onModeChange($event)\">\n </cqa-radio-card-group>\n\n <div *ngIf=\"isDesktopMode\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ desktopDeviceLabel }}</span>\n <cqa-dynamic-select\n class=\"cqa-w-full\"\n [form]=\"desktopDeviceForm\"\n [config]=\"desktopDeviceConfig\"\n (selectionChange)=\"onDesktopSelectionChange($event)\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"isLaptopMode\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ laptopDeviceLabel }}</span>\n <cqa-dynamic-select\n class=\"cqa-w-full\"\n [form]=\"laptopDeviceForm\"\n [config]=\"laptopDeviceConfig\"\n (selectionChange)=\"onLaptopSelectionChange($event)\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"isMobileMode\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ mobileDeviceLabel }}</span>\n <cqa-dynamic-select\n class=\"cqa-w-full\"\n [form]=\"mobileDeviceForm\"\n [config]=\"mobileDeviceConfig\"\n (selectionChange)=\"onMobileSelectionChange($event)\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"isCustomMode\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ customValueLabel }}</span>\n\n <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-w-full\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [fullWidth]=\"true\"\n [placeholder]=\"customValuePlaceholder\"\n [value]=\"customInputValue\"\n [disabled]=\"disabled\"\n (valueChange)=\"customInputValue = $event\"\n (enterPressed)=\"addCustomValue($event)\">\n </cqa-custom-input>\n\n <button\n type=\"button\"\n class=\"cqa-h-[42px] cqa-rounded-md cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-bg-white cqa-px-3 cqa-text-sm cqa-font-medium cqa-text-[#111827] hover:cqa-bg-[#F9FAFB] disabled:cqa-cursor-not-allowed disabled:cqa-opacity-60\"\n [disabled]=\"disabled || !customInputValue.trim()\"\n (click)=\"addCustomValue()\">\n Add\n </button>\n </div>\n\n <span class=\"cqa-text-xs cqa-text-[#6B7280]\">{{ customValueHint }}</span>\n\n <div *ngIf=\"internalValue.customValue\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-rounded-full cqa-bg-[#EEF2FF] cqa-px-3 cqa-py-1 cqa-text-sm cqa-font-medium cqa-text-[#3730A3]\">\n {{ internalValue.customValue }}\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-h-4 cqa-w-4 cqa-items-center cqa-justify-center cqa-rounded-full cqa-text-xs cqa-text-[#3730A3] hover:cqa-bg-[#E0E7FF]\"\n [disabled]=\"disabled\"\n (click)=\"clearCustomValue()\">\n x\n </button>\n </span>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: RadioCardGroupComponent, selector: "cqa-radio-card-group", inputs: ["options", "wrap", "disabled"], outputs: ["selectionChange"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
51969
|
+
], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"'100%'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n <label\n *ngIf=\"label\"\n class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151]\">\n {{ label }}\n <span *ngIf=\"required\" class=\"cqa-text-[#EF4444]\">*</span>\n </label>\n\n <cqa-radio-card-group\n [options]=\"modeOptions\"\n [disabled]=\"disabled\"\n [ngModel]=\"internalValue.mode\"\n (ngModelChange)=\"onModeChange($event)\">\n </cqa-radio-card-group>\n\n <div *ngIf=\"isDesktopMode\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ desktopDeviceLabel }}</span>\n <cqa-dynamic-select\n class=\"cqa-w-full\"\n [form]=\"desktopDeviceForm\"\n [config]=\"desktopDeviceConfig\"\n (selectionChange)=\"onDesktopSelectionChange($event)\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"isLaptopMode\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ laptopDeviceLabel }}</span>\n <cqa-dynamic-select\n class=\"cqa-w-full\"\n [form]=\"laptopDeviceForm\"\n [config]=\"laptopDeviceConfig\"\n (selectionChange)=\"onLaptopSelectionChange($event)\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"isMobileMode\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ mobileDeviceLabel }}</span>\n <cqa-dynamic-select\n class=\"cqa-w-full\"\n [form]=\"mobileDeviceForm\"\n [config]=\"mobileDeviceConfig\"\n (selectionChange)=\"onMobileSelectionChange($event)\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"isCustomMode\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-w-full\">\n <span class=\"cqa-text-xs cqa-font-medium cqa-text-[#6B7280]\">{{ customValueLabel }}</span>\n\n <div class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-w-full\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [fullWidth]=\"true\"\n [placeholder]=\"customValuePlaceholder\"\n [value]=\"customInputValue\"\n [disabled]=\"disabled\"\n (valueChange)=\"customInputValue = $event\"\n (enterPressed)=\"addCustomValue($event)\">\n </cqa-custom-input>\n\n <button\n type=\"button\"\n class=\"cqa-h-[42px] cqa-rounded-md cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-bg-white cqa-px-3 cqa-text-sm cqa-font-medium cqa-text-[#111827] hover:cqa-bg-[#F9FAFB] disabled:cqa-cursor-not-allowed disabled:cqa-opacity-60\"\n [disabled]=\"disabled || !customInputValue.trim()\"\n (click)=\"addCustomValue()\">\n Add\n </button>\n </div>\n\n <span class=\"cqa-text-xs cqa-text-[#6B7280]\">{{ customValueHint }}</span>\n\n <div *ngIf=\"internalValue.customValue\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-rounded-full cqa-bg-[#EEF2FF] cqa-px-3 cqa-py-1 cqa-text-sm cqa-font-medium cqa-text-[#3730A3]\">\n {{ internalValue.customValue }}\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-h-4 cqa-w-4 cqa-items-center cqa-justify-center cqa-rounded-full cqa-text-xs cqa-text-[#3730A3] hover:cqa-bg-[#E0E7FF]\"\n [disabled]=\"disabled\"\n (click)=\"clearCustomValue()\">\n x\n </button>\n </span>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: RadioCardGroupComponent, selector: "cqa-radio-card-group", inputs: ["options", "wrap", "disabled"], outputs: ["selectionChange"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
51955
51970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewportSelectorComponent, decorators: [{
|
|
51956
51971
|
type: Component,
|
|
51957
51972
|
args: [{ selector: 'cqa-viewport-selector', host: { class: 'cqa-ui-root cqa-block' }, providers: [
|
|
@@ -52613,7 +52628,7 @@ class NewGlobalVariableDialogComponent {
|
|
|
52613
52628
|
}
|
|
52614
52629
|
}
|
|
52615
52630
|
NewGlobalVariableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewGlobalVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
52616
|
-
NewGlobalVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewGlobalVariableDialogComponent, selector: "cqa-new-global-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", availableTags: "availableTags" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Tags (optional) \u2014 between Value and Description per design -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">\n Tags <span class=\"cqa-text-xs cqa-font-normal cqa-text-gray-500\">(optional \u2014 for filtering & grouping)</span>\n </label>\n <lib-global-variable-tags-input\n [tags]=\"tags\"\n [availableTags]=\"availableTags\"\n (tagsChange)=\"onTagsChange($event)\">\n </lib-global-variable-tags-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "displayOnly", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: GlobalVariableTagsInputComponent, selector: "lib-global-variable-tags-input", inputs: ["tags", "availableTags"], outputs: ["tagsChange"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52631
|
+
NewGlobalVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewGlobalVariableDialogComponent, selector: "cqa-new-global-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", availableTags: "availableTags" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Tags (optional) \u2014 between Value and Description per design -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">\n Tags <span class=\"cqa-text-xs cqa-font-normal cqa-text-gray-500\">(optional \u2014 for filtering & grouping)</span>\n </label>\n <lib-global-variable-tags-input\n [tags]=\"tags\"\n [availableTags]=\"availableTags\"\n (tagsChange)=\"onTagsChange($event)\">\n </lib-global-variable-tags-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "displayOnly", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: GlobalVariableTagsInputComponent, selector: "lib-global-variable-tags-input", inputs: ["tags", "availableTags"], outputs: ["tagsChange"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52617
52632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewGlobalVariableDialogComponent, decorators: [{
|
|
52618
52633
|
type: Component,
|
|
52619
52634
|
args: [{ selector: 'cqa-new-global-variable-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. api_key\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names must be unique across the entire workspace (primary key \u2014 no duplicates).\n </span>\n </div>\n\n <!-- Type + Permission row -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n <!-- Tags (optional) \u2014 between Value and Description per design -->\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">\n Tags <span class=\"cqa-text-xs cqa-font-normal cqa-text-gray-500\">(optional \u2014 for filtering & grouping)</span>\n </label>\n <lib-global-variable-tags-input\n [tags]=\"tags\"\n [availableTags]=\"availableTags\"\n (tagsChange)=\"onTagsChange($event)\">\n </lib-global-variable-tags-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-textarea\n label=\"Description\"\n placeholder=\"What is this variable used for?\"\n [value]=\"description\"\n [rows]=\"2\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-textarea>\n </div>\n\n</div>\n" }]
|
|
@@ -52803,7 +52818,7 @@ class NewEnvironmentDialogComponent {
|
|
|
52803
52818
|
}
|
|
52804
52819
|
}
|
|
52805
52820
|
NewEnvironmentDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
52806
|
-
NewEnvironmentDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewEnvironmentDialogComponent, selector: "cqa-new-environment-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", allowDefaultToggle: "allowDefaultToggle", defaultAlreadySet: "defaultAlreadySet", showDescription: "showDescription", showAccentColor: "showAccentColor" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Environment name\"\n placeholder=\"e.g. QA, SIT, UAT, Prod, Demo\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names are user-defined. Be concise \u2014 you'll see this on every test run.\n </span>\n </div>\n\n <!-- Description (rich-text editor) -->\n <div *ngIf=\"showDescription\" class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Description</label>\n <cqa-rich-text-editor\n [formCtrl]=\"descriptionControl\"\n placeholder=\"What is this environment for?\">\n </cqa-rich-text-editor>\n </div>\n\n <!-- Accent color -->\n <div *ngIf=\"showAccentColor\" class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-2 cqa-font-medium cqa-text-gray-700\">Accent color</label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n *ngFor=\"let swatch of colors\"\n type=\"button\"\n class=\"cqa-w-7 cqa-h-7 cqa-rounded-lg cqa-cursor-pointer cqa-transition-all\"\n [attr.aria-label]=\"'Select ' + swatch\"\n [attr.aria-pressed]=\"color === swatch\"\n [style.background]=\"swatch\"\n [style.border]=\"color === swatch ? '2px solid #0F172A' : '2px solid transparent'\"\n [style.boxShadow]=\"color === swatch ? '0 0 0 2px rgba(15,23,42,0.12)' : '0 0 0 1px rgba(0,0,0,0.05)'\"\n (click)=\"onColorSelect(swatch)\">\n </button>\n </div>\n </div>\n\n <!-- Make default -->\n <label\n *ngIf=\"allowDefaultToggle\"\n class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2.5 cqa-px-3 cqa-bg-indigo-50\"\n [class.cqa-cursor-pointer]=\"!isDefaultLocked\"\n [class.cqa-cursor-not-allowed]=\"isDefaultLocked\"\n style=\"border-radius: 10px; border: 1px solid rgb(216, 217, 252);\">\n <input\n type=\"checkbox\"\n class=\"cqa-flex-shrink-0\"\n [class.cqa-cursor-pointer]=\"!isDefaultLocked\"\n [class.cqa-cursor-not-allowed]=\"isDefaultLocked\"\n style=\"width: 16px; height: 16px; accent-color: #4F46E5;\"\n [checked]=\"isDefault\"\n [disabled]=\"isDefaultLocked\"\n (change)=\"onDefaultCheckboxChange($event)\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span style=\"font-size: 13px; font-weight: 500; color: #0F172A; line-height: 1.3;\">\n Make this the default environment\n </span>\n <span style=\"font-size: 11px; color: #64748B; margin-top: 2px; line-height: 1.4;\">\n {{ defaultHelperText }}\n </span>\n </div>\n </label>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: RichTextEditorComponent, selector: "cqa-rich-text-editor", inputs: ["formCtrl", "placeholder"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52821
|
+
NewEnvironmentDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewEnvironmentDialogComponent, selector: "cqa-new-environment-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", allowDefaultToggle: "allowDefaultToggle", defaultAlreadySet: "defaultAlreadySet", showDescription: "showDescription", showAccentColor: "showAccentColor" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Environment name\"\n placeholder=\"e.g. QA, SIT, UAT, Prod, Demo\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names are user-defined. Be concise \u2014 you'll see this on every test run.\n </span>\n </div>\n\n <!-- Description (rich-text editor) -->\n <div *ngIf=\"showDescription\" class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Description</label>\n <cqa-rich-text-editor\n [formCtrl]=\"descriptionControl\"\n placeholder=\"What is this environment for?\">\n </cqa-rich-text-editor>\n </div>\n\n <!-- Accent color -->\n <div *ngIf=\"showAccentColor\" class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-2 cqa-font-medium cqa-text-gray-700\">Accent color</label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n *ngFor=\"let swatch of colors\"\n type=\"button\"\n class=\"cqa-w-7 cqa-h-7 cqa-rounded-lg cqa-cursor-pointer cqa-transition-all\"\n [attr.aria-label]=\"'Select ' + swatch\"\n [attr.aria-pressed]=\"color === swatch\"\n [style.background]=\"swatch\"\n [style.border]=\"color === swatch ? '2px solid #0F172A' : '2px solid transparent'\"\n [style.boxShadow]=\"color === swatch ? '0 0 0 2px rgba(15,23,42,0.12)' : '0 0 0 1px rgba(0,0,0,0.05)'\"\n (click)=\"onColorSelect(swatch)\">\n </button>\n </div>\n </div>\n\n <!-- Make default -->\n <label\n *ngIf=\"allowDefaultToggle\"\n class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2.5 cqa-px-3 cqa-bg-indigo-50\"\n [class.cqa-cursor-pointer]=\"!isDefaultLocked\"\n [class.cqa-cursor-not-allowed]=\"isDefaultLocked\"\n style=\"border-radius: 10px; border: 1px solid rgb(216, 217, 252);\">\n <input\n type=\"checkbox\"\n class=\"cqa-flex-shrink-0\"\n [class.cqa-cursor-pointer]=\"!isDefaultLocked\"\n [class.cqa-cursor-not-allowed]=\"isDefaultLocked\"\n style=\"width: 16px; height: 16px; accent-color: #4F46E5;\"\n [checked]=\"isDefault\"\n [disabled]=\"isDefaultLocked\"\n (change)=\"onDefaultCheckboxChange($event)\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span style=\"font-size: 13px; font-weight: 500; color: #0F172A; line-height: 1.3;\">\n Make this the default environment\n </span>\n <span style=\"font-size: 11px; color: #64748B; margin-top: 2px; line-height: 1.4;\">\n {{ defaultHelperText }}\n </span>\n </div>\n </label>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: RichTextEditorComponent, selector: "cqa-rich-text-editor", inputs: ["formCtrl", "placeholder"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
52807
52822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentDialogComponent, decorators: [{
|
|
52808
52823
|
type: Component,
|
|
52809
52824
|
args: [{ selector: 'cqa-new-environment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Environment name\"\n placeholder=\"e.g. QA, SIT, UAT, Prod, Demo\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Names are user-defined. Be concise \u2014 you'll see this on every test run.\n </span>\n </div>\n\n <!-- Description (rich-text editor) -->\n <div *ngIf=\"showDescription\" class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Description</label>\n <cqa-rich-text-editor\n [formCtrl]=\"descriptionControl\"\n placeholder=\"What is this environment for?\">\n </cqa-rich-text-editor>\n </div>\n\n <!-- Accent color -->\n <div *ngIf=\"showAccentColor\" class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-2 cqa-font-medium cqa-text-gray-700\">Accent color</label>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <button\n *ngFor=\"let swatch of colors\"\n type=\"button\"\n class=\"cqa-w-7 cqa-h-7 cqa-rounded-lg cqa-cursor-pointer cqa-transition-all\"\n [attr.aria-label]=\"'Select ' + swatch\"\n [attr.aria-pressed]=\"color === swatch\"\n [style.background]=\"swatch\"\n [style.border]=\"color === swatch ? '2px solid #0F172A' : '2px solid transparent'\"\n [style.boxShadow]=\"color === swatch ? '0 0 0 2px rgba(15,23,42,0.12)' : '0 0 0 1px rgba(0,0,0,0.05)'\"\n (click)=\"onColorSelect(swatch)\">\n </button>\n </div>\n </div>\n\n <!-- Make default -->\n <label\n *ngIf=\"allowDefaultToggle\"\n class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-py-2.5 cqa-px-3 cqa-bg-indigo-50\"\n [class.cqa-cursor-pointer]=\"!isDefaultLocked\"\n [class.cqa-cursor-not-allowed]=\"isDefaultLocked\"\n style=\"border-radius: 10px; border: 1px solid rgb(216, 217, 252);\">\n <input\n type=\"checkbox\"\n class=\"cqa-flex-shrink-0\"\n [class.cqa-cursor-pointer]=\"!isDefaultLocked\"\n [class.cqa-cursor-not-allowed]=\"isDefaultLocked\"\n style=\"width: 16px; height: 16px; accent-color: #4F46E5;\"\n [checked]=\"isDefault\"\n [disabled]=\"isDefaultLocked\"\n (change)=\"onDefaultCheckboxChange($event)\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <span style=\"font-size: 13px; font-weight: 500; color: #0F172A; line-height: 1.3;\">\n Make this the default environment\n </span>\n <span style=\"font-size: 11px; color: #64748B; margin-top: 2px; line-height: 1.4;\">\n {{ defaultHelperText }}\n </span>\n </div>\n </label>\n\n</div>\n" }]
|
|
@@ -52853,9 +52868,6 @@ class NewEnvironmentVariableDialogComponent {
|
|
|
52853
52868
|
if (this.type === 'Boolean' && this.value !== 'true' && this.value !== 'false') {
|
|
52854
52869
|
this.value = 'false';
|
|
52855
52870
|
}
|
|
52856
|
-
if (this.mode === 'edit' && this.type === 'Password') {
|
|
52857
|
-
this.value = '';
|
|
52858
|
-
}
|
|
52859
52871
|
}
|
|
52860
52872
|
get title() {
|
|
52861
52873
|
return this.mode === 'edit' ? 'Edit variable' : 'New variable';
|
|
@@ -52870,9 +52882,6 @@ class NewEnvironmentVariableDialogComponent {
|
|
|
52870
52882
|
get isPassword() { return this.type === 'Password'; }
|
|
52871
52883
|
get isNumber() { return this.type === 'Number'; }
|
|
52872
52884
|
get valuePlaceholder() {
|
|
52873
|
-
if (this.isPassword && this.mode === 'edit') {
|
|
52874
|
-
return '•••••• (leave blank to keep existing)';
|
|
52875
|
-
}
|
|
52876
52885
|
if (this.readWriteMode === 'RW') {
|
|
52877
52886
|
return 'Leave blank to populate during test execution';
|
|
52878
52887
|
}
|
|
@@ -52928,11 +52937,9 @@ class NewEnvironmentVariableDialogComponent {
|
|
|
52928
52937
|
if (next === 'Number' && this.value && !this.isValidNumber(this.value)) {
|
|
52929
52938
|
this.value = '';
|
|
52930
52939
|
}
|
|
52931
|
-
if (next === 'Password') {
|
|
52940
|
+
if (next === 'Password' && prev !== 'Password') {
|
|
52932
52941
|
this.passwordTouched = false;
|
|
52933
|
-
|
|
52934
|
-
this.value = '';
|
|
52935
|
-
}
|
|
52942
|
+
this.value = '';
|
|
52936
52943
|
}
|
|
52937
52944
|
this.valueError = null;
|
|
52938
52945
|
this.cdr.markForCheck();
|
|
@@ -53017,10 +53024,10 @@ class NewEnvironmentVariableDialogComponent {
|
|
|
53017
53024
|
}
|
|
53018
53025
|
}
|
|
53019
53026
|
NewEnvironmentVariableDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentVariableDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
53020
|
-
NewEnvironmentVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewEnvironmentVariableDialogComponent, selector: "cqa-new-environment-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. order_id\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n {{ nameHelperText }}\n </span>\n </div>\n\n <!-- Type + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n <span class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">{{ permissionHelperText }}</span>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "displayOnly", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53027
|
+
NewEnvironmentVariableDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewEnvironmentVariableDialogComponent, selector: "cqa-new-environment-variable-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. order_id\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n {{ nameHelperText }}\n </span>\n </div>\n\n <!-- Type + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n <span class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">{{ permissionHelperText }}</span>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n [showPasswordToggle]=\"isPassword\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "displayOnly", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53021
53028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewEnvironmentVariableDialogComponent, decorators: [{
|
|
53022
53029
|
type: Component,
|
|
53023
|
-
args: [{ selector: 'cqa-new-environment-variable-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. order_id\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n {{ nameHelperText }}\n </span>\n </div>\n\n <!-- Type + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n <span class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">{{ permissionHelperText }}</span>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n</div>\n" }]
|
|
53030
|
+
args: [{ selector: 'cqa-new-environment-variable-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Name\"\n placeholder=\"e.g. order_id\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n <span *ngIf=\"!nameError\"\n class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n {{ nameHelperText }}\n </span>\n </div>\n\n <!-- Type + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Type</label>\n <cqa-dropdown-button\n [options]=\"typeDropdownOptions\"\n [selectedValue]=\"type\"\n (selectionChange)=\"onTypeChange($event)\">\n </cqa-dropdown-button>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <div class=\"cqa-pt-0.5\">\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n <span class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">{{ permissionHelperText }}</span>\n </div>\n </div>\n\n <!-- Value -->\n <div class=\"cqa-flex cqa-flex-col\">\n <ng-container *ngIf=\"isBoolean; else nonBooleanValue\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Value</label>\n <cqa-dropdown-button\n [options]=\"booleanDropdownOptions\"\n [selectedValue]=\"value\"\n (selectionChange)=\"onBooleanValueChange($event)\">\n </cqa-dropdown-button>\n </ng-container>\n <ng-template #nonBooleanValue>\n <cqa-custom-input\n label=\"Value\"\n [type]=\"isPassword ? 'password' : (isNumber ? 'number' : 'text')\"\n [value]=\"value\"\n [placeholder]=\"valuePlaceholder\"\n [required]=\"isValueRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"valueErrorsArray\"\n [showPasswordToggle]=\"isPassword\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onValueChange($event)\">\n </cqa-custom-input>\n </ng-template>\n </div>\n\n</div>\n" }]
|
|
53024
53031
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { mode: [{
|
|
53025
53032
|
type: Input
|
|
53026
53033
|
}], initialValue: [{
|
|
@@ -53305,7 +53312,7 @@ class NewDbConfigDialogComponent {
|
|
|
53305
53312
|
}
|
|
53306
53313
|
}
|
|
53307
53314
|
NewDbConfigDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewDbConfigDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
53308
|
-
NewDbConfigDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewDbConfigDialogComponent, selector: "cqa-new-db-config-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName", testFn: "testFn" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Row: Connection name + Driver -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Connection name\"\n placeholder=\"e.g. Primary (bookings)\"\n type=\"text\"\n [value]=\"connectionName\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"connectionNameErrorsArray\"\n (valueChange)=\"onConnectionNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Driver</label>\n <cqa-dropdown-button\n [options]=\"driverOptions\"\n [selectedValue]=\"driver\"\n (selectionChange)=\"onDriverChange($event)\">\n </cqa-dropdown-button>\n </div>\n </div>\n\n <!-- Row: Host + Port -->\n <div class=\"cqa-grid cqa-grid-cols-4 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-3\">\n <cqa-custom-input\n label=\"Host\"\n placeholder=\"db.example.com\"\n type=\"text\"\n [value]=\"host\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"hostErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onHostChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-1\">\n <cqa-custom-input\n label=\"Port\"\n type=\"number\"\n [value]=\"port != null ? port.toString() : ''\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"portErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onPortChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Database -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Database\"\n placeholder=\"bookings_qa\"\n type=\"text\"\n [value]=\"database\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"databaseErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onDatabaseChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Row: Username + Password -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Username\"\n type=\"text\"\n [value]=\"username\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"usernameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onUsernameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Password\"\n type=\"password\"\n [value]=\"password\"\n [placeholder]=\"passwordPlaceholder\"\n [required]=\"isPasswordRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"passwordErrorsArray\"\n (valueChange)=\"onPasswordChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Test connection action + result -->\n <div *ngIf=\"testFn\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <span class=\"cqa-text-xs cqa-text-gray-600\">\n Validate the connection without saving. The credentials are sent over the wire only for this check.\n </span>\n <cqa-button\n class=\"cqa-shrink-0\"\n style=\"min-width: max-content;\"\n variant=\"outlined\"\n btnSize=\"md\"\n icon=\"bolt\"\n text=\"Test connection\"\n [loading]=\"isTesting\"\n [disabled]=\"!canTest\"\n (clicked)=\"onTestClick()\">\n </cqa-button>\n </div>\n\n <div *ngIf=\"testResult\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-sm\"\n [ngClass]=\"testResult.status === 'success'\n ? 'cqa-bg-[#ECFDF5] cqa-text-[#065F46] cqa-border cqa-border-[#A7F3D0]'\n : 'cqa-bg-[#FEF2F2] cqa-text-[#991B1B] cqa-border cqa-border-[#FECACA]'\">\n <mat-icon class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\">\n {{ testResult.status === 'success' ? 'check_circle' : 'error' }}\n </mat-icon>\n <span>{{ testResult.message }}</span>\n </div>\n </div>\n\n <!-- Encryption notice -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#EEF2FF] cqa-border cqa-border-[#C7D2FE] cqa-text-xs cqa-text-[#3730A3]\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">lock</mat-icon>\n <span>Credentials are encrypted at rest and masked in the audit log.</span>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53315
|
+
NewDbConfigDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewDbConfigDialogComponent, selector: "cqa-new-db-config-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", envName: "envName", testFn: "testFn" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Row: Connection name + Driver -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Connection name\"\n placeholder=\"e.g. Primary (bookings)\"\n type=\"text\"\n [value]=\"connectionName\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"connectionNameErrorsArray\"\n (valueChange)=\"onConnectionNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Driver</label>\n <cqa-dropdown-button\n [options]=\"driverOptions\"\n [selectedValue]=\"driver\"\n (selectionChange)=\"onDriverChange($event)\">\n </cqa-dropdown-button>\n </div>\n </div>\n\n <!-- Row: Host + Port -->\n <div class=\"cqa-grid cqa-grid-cols-4 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-3\">\n <cqa-custom-input\n label=\"Host\"\n placeholder=\"db.example.com\"\n type=\"text\"\n [value]=\"host\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"hostErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onHostChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-1\">\n <cqa-custom-input\n label=\"Port\"\n type=\"number\"\n [value]=\"port != null ? port.toString() : ''\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"portErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onPortChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Database -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Database\"\n placeholder=\"bookings_qa\"\n type=\"text\"\n [value]=\"database\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"databaseErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onDatabaseChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Row: Username + Password -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Username\"\n type=\"text\"\n [value]=\"username\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"usernameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onUsernameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Password\"\n type=\"password\"\n [value]=\"password\"\n [placeholder]=\"passwordPlaceholder\"\n [required]=\"isPasswordRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"passwordErrorsArray\"\n (valueChange)=\"onPasswordChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Test connection action + result -->\n <div *ngIf=\"testFn\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <span class=\"cqa-text-xs cqa-text-gray-600\">\n Validate the connection without saving. The credentials are sent over the wire only for this check.\n </span>\n <cqa-button\n class=\"cqa-shrink-0\"\n style=\"min-width: max-content;\"\n variant=\"outlined\"\n btnSize=\"md\"\n icon=\"bolt\"\n text=\"Test connection\"\n [loading]=\"isTesting\"\n [disabled]=\"!canTest\"\n (clicked)=\"onTestClick()\">\n </cqa-button>\n </div>\n\n <div *ngIf=\"testResult\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-sm\"\n [ngClass]=\"testResult.status === 'success'\n ? 'cqa-bg-[#ECFDF5] cqa-text-[#065F46] cqa-border cqa-border-[#A7F3D0]'\n : 'cqa-bg-[#FEF2F2] cqa-text-[#991B1B] cqa-border cqa-border-[#FECACA]'\">\n <mat-icon class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\">\n {{ testResult.status === 'success' ? 'check_circle' : 'error' }}\n </mat-icon>\n <span>{{ testResult.message }}</span>\n </div>\n </div>\n\n <!-- Encryption notice -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#EEF2FF] cqa-border cqa-border-[#C7D2FE] cqa-text-xs cqa-text-[#3730A3]\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">lock</mat-icon>\n <span>Credentials are encrypted at rest and masked in the audit log.</span>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: ["label", "options", "selectedValue", "disabled", "placeholder"], outputs: ["selectionChange", "opened", "closed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53309
53316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewDbConfigDialogComponent, decorators: [{
|
|
53310
53317
|
type: Component,
|
|
53311
53318
|
args: [{ selector: 'cqa-new-db-config-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Row: Connection name + Driver -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Connection name\"\n placeholder=\"e.g. Primary (bookings)\"\n type=\"text\"\n [value]=\"connectionName\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"connectionNameErrorsArray\"\n (valueChange)=\"onConnectionNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Driver</label>\n <cqa-dropdown-button\n [options]=\"driverOptions\"\n [selectedValue]=\"driver\"\n (selectionChange)=\"onDriverChange($event)\">\n </cqa-dropdown-button>\n </div>\n </div>\n\n <!-- Row: Host + Port -->\n <div class=\"cqa-grid cqa-grid-cols-4 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-3\">\n <cqa-custom-input\n label=\"Host\"\n placeholder=\"db.example.com\"\n type=\"text\"\n [value]=\"host\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"hostErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onHostChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-col-span-1\">\n <cqa-custom-input\n label=\"Port\"\n type=\"number\"\n [value]=\"port != null ? port.toString() : ''\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"portErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onPortChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Database -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Database\"\n placeholder=\"bookings_qa\"\n type=\"text\"\n [value]=\"database\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"databaseErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onDatabaseChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Row: Username + Password -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Username\"\n type=\"text\"\n [value]=\"username\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"usernameErrorsArray\"\n inputInlineStyle=\"font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onUsernameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Password\"\n type=\"password\"\n [value]=\"password\"\n [placeholder]=\"passwordPlaceholder\"\n [required]=\"isPasswordRequiredVisually\"\n [fullWidth]=\"true\"\n [errors]=\"passwordErrorsArray\"\n (valueChange)=\"onPasswordChange($event)\">\n </cqa-custom-input>\n </div>\n </div>\n\n <!-- Test connection action + result -->\n <div *ngIf=\"testFn\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <span class=\"cqa-text-xs cqa-text-gray-600\">\n Validate the connection without saving. The credentials are sent over the wire only for this check.\n </span>\n <cqa-button\n class=\"cqa-shrink-0\"\n style=\"min-width: max-content;\"\n variant=\"outlined\"\n btnSize=\"md\"\n icon=\"bolt\"\n text=\"Test connection\"\n [loading]=\"isTesting\"\n [disabled]=\"!canTest\"\n (clicked)=\"onTestClick()\">\n </cqa-button>\n </div>\n\n <div *ngIf=\"testResult\"\n class=\"cqa-flex cqa-items-start cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-text-sm\"\n [ngClass]=\"testResult.status === 'success'\n ? 'cqa-bg-[#ECFDF5] cqa-text-[#065F46] cqa-border cqa-border-[#A7F3D0]'\n : 'cqa-bg-[#FEF2F2] cqa-text-[#991B1B] cqa-border cqa-border-[#FECACA]'\">\n <mat-icon class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\">\n {{ testResult.status === 'success' ? 'check_circle' : 'error' }}\n </mat-icon>\n <span>{{ testResult.message }}</span>\n </div>\n </div>\n\n <!-- Encryption notice -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-[#EEF2FF] cqa-border cqa-border-[#C7D2FE] cqa-text-xs cqa-text-[#3730A3]\">\n <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">lock</mat-icon>\n <span>Credentials are encrypted at rest and masked in the audit log.</span>\n </div>\n\n</div>\n" }]
|
|
@@ -53327,6 +53334,7 @@ class NewTestDataProfileDialogComponent {
|
|
|
53327
53334
|
this.mode = 'create';
|
|
53328
53335
|
this.existingNames = [];
|
|
53329
53336
|
this.environments = [];
|
|
53337
|
+
this.pageSize = 50;
|
|
53330
53338
|
this.name = '';
|
|
53331
53339
|
this.description = '';
|
|
53332
53340
|
this.readWriteMode = 'RW';
|
|
@@ -53335,10 +53343,23 @@ class NewTestDataProfileDialogComponent {
|
|
|
53335
53343
|
this.envForm = new FormGroup({
|
|
53336
53344
|
environmentIds: new FormControl([]),
|
|
53337
53345
|
});
|
|
53338
|
-
this.envConfig = this.
|
|
53346
|
+
this.envConfig = this.buildStaticEnvConfig([]);
|
|
53339
53347
|
this.nameError = null;
|
|
53340
53348
|
this.matrixError = null;
|
|
53341
53349
|
this.envsError = null;
|
|
53350
|
+
// Server-search state — populated only when `searchFn` is provided.
|
|
53351
|
+
this.currentEnvOptions = [];
|
|
53352
|
+
this.totalEnvElements = 0;
|
|
53353
|
+
this.currentSearchTerm = '';
|
|
53354
|
+
this.currentPageIndex = 0;
|
|
53355
|
+
this.isLoadingEnvs = false;
|
|
53356
|
+
/** Cache of every env the user has selected at any point during this dialog
|
|
53357
|
+
* session — keyed by id. Merged into the visible options on every page
|
|
53358
|
+
* refresh so the multi-select trigger always shows the right names even
|
|
53359
|
+
* after the user types a search that filters the selection out. */
|
|
53360
|
+
this.selectedEnvCache = new Map();
|
|
53361
|
+
this.searchInput$ = new Subject();
|
|
53362
|
+
this.destroy$ = new Subject();
|
|
53342
53363
|
}
|
|
53343
53364
|
ngOnInit() {
|
|
53344
53365
|
if (this.initialValue) {
|
|
@@ -53352,15 +53373,38 @@ class NewTestDataProfileDialogComponent {
|
|
|
53352
53373
|
const ids = this.initialValue.environmentIds ?? [];
|
|
53353
53374
|
this.envForm.get('environmentIds').setValue(ids);
|
|
53354
53375
|
}
|
|
53355
|
-
|
|
53376
|
+
if (this.searchFn) {
|
|
53377
|
+
this.envConfig = this.buildServerSearchEnvConfig();
|
|
53378
|
+
// Debounced typing pipeline. Each new term resets to page 0 and replaces
|
|
53379
|
+
// the visible options. switchMap drops in-flight responses for stale terms.
|
|
53380
|
+
this.searchInput$
|
|
53381
|
+
.pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => this.fetchPage(term, 0)), takeUntil(this.destroy$))
|
|
53382
|
+
.subscribe(({ term, page, payload }) => {
|
|
53383
|
+
this.applyPage(term, page, /* append */ false, payload);
|
|
53384
|
+
});
|
|
53385
|
+
// Pre-fetch page 0 so the dropdown is populated by the time the user opens it.
|
|
53386
|
+
this.runFetch('', 0, /* append */ false);
|
|
53387
|
+
}
|
|
53388
|
+
else {
|
|
53389
|
+
this.envConfig = this.buildStaticEnvConfig(this.environments ?? []);
|
|
53390
|
+
}
|
|
53356
53391
|
// Clear envs error as soon as the user picks something.
|
|
53357
|
-
this.envForm.get('environmentIds').valueChanges
|
|
53392
|
+
this.envForm.get('environmentIds').valueChanges
|
|
53393
|
+
.pipe(takeUntil(this.destroy$))
|
|
53394
|
+
.subscribe(value => {
|
|
53358
53395
|
if (this.envsError) {
|
|
53359
53396
|
this.envsError = null;
|
|
53360
53397
|
this.cdr.markForCheck();
|
|
53361
53398
|
}
|
|
53399
|
+
if (this.searchFn) {
|
|
53400
|
+
this.rememberSelectedEnvs(value);
|
|
53401
|
+
}
|
|
53362
53402
|
});
|
|
53363
53403
|
}
|
|
53404
|
+
ngOnDestroy() {
|
|
53405
|
+
this.destroy$.next();
|
|
53406
|
+
this.destroy$.complete();
|
|
53407
|
+
}
|
|
53364
53408
|
get title() {
|
|
53365
53409
|
return this.mode === 'edit' ? 'Edit test data profile' : 'New test data profile';
|
|
53366
53410
|
}
|
|
@@ -53459,14 +53503,9 @@ class NewTestDataProfileDialogComponent {
|
|
|
53459
53503
|
this.matrixError = null;
|
|
53460
53504
|
return { rows, cols };
|
|
53461
53505
|
}
|
|
53462
|
-
|
|
53463
|
-
|
|
53464
|
-
|
|
53465
|
-
value: e.id,
|
|
53466
|
-
name: e.name,
|
|
53467
|
-
label: e.name,
|
|
53468
|
-
statusColor: e.color,
|
|
53469
|
-
}));
|
|
53506
|
+
// -- Static-options mode (legacy) ---------------------------------------
|
|
53507
|
+
buildStaticEnvConfig(envs) {
|
|
53508
|
+
const options = (envs || []).map(e => this.toSelectOption(e));
|
|
53470
53509
|
return {
|
|
53471
53510
|
key: 'environmentIds',
|
|
53472
53511
|
label: '',
|
|
@@ -53478,6 +53517,127 @@ class NewTestDataProfileDialogComponent {
|
|
|
53478
53517
|
options,
|
|
53479
53518
|
};
|
|
53480
53519
|
}
|
|
53520
|
+
// -- Server-search mode ---------------------------------------------------
|
|
53521
|
+
buildServerSearchEnvConfig() {
|
|
53522
|
+
const merged = this.mergeSelectedIntoOptions(this.currentEnvOptions);
|
|
53523
|
+
return {
|
|
53524
|
+
key: 'environmentIds',
|
|
53525
|
+
label: '',
|
|
53526
|
+
placeholder: 'Select environments…',
|
|
53527
|
+
multiple: true,
|
|
53528
|
+
searchable: true,
|
|
53529
|
+
optionStyle: 'checkbox',
|
|
53530
|
+
showSelectAll: false,
|
|
53531
|
+
serverSearch: true,
|
|
53532
|
+
isLoading: this.isLoadingEnvs,
|
|
53533
|
+
hasMore: this.currentEnvOptions.length < this.totalEnvElements,
|
|
53534
|
+
options: merged,
|
|
53535
|
+
onSearch: (q) => this.searchInput$.next(q ?? ''),
|
|
53536
|
+
onLoadMore: () => this.onEnvLoadMore(),
|
|
53537
|
+
};
|
|
53538
|
+
}
|
|
53539
|
+
onEnvLoadMore() {
|
|
53540
|
+
if (this.isLoadingEnvs) {
|
|
53541
|
+
return;
|
|
53542
|
+
}
|
|
53543
|
+
if (this.currentEnvOptions.length >= this.totalEnvElements) {
|
|
53544
|
+
return;
|
|
53545
|
+
}
|
|
53546
|
+
this.runFetch(this.currentSearchTerm, this.currentPageIndex + 1, /* append */ true);
|
|
53547
|
+
}
|
|
53548
|
+
runFetch(term, page, append) {
|
|
53549
|
+
this.isLoadingEnvs = true;
|
|
53550
|
+
this.envConfig = this.buildServerSearchEnvConfig();
|
|
53551
|
+
this.cdr.markForCheck();
|
|
53552
|
+
this.fetchPage(term, page)
|
|
53553
|
+
.pipe(takeUntil(this.destroy$))
|
|
53554
|
+
.subscribe(({ term: t, page: p, payload }) => {
|
|
53555
|
+
this.applyPage(t, p, append, payload);
|
|
53556
|
+
});
|
|
53557
|
+
}
|
|
53558
|
+
fetchPage(term, page) {
|
|
53559
|
+
if (!this.searchFn) {
|
|
53560
|
+
return of({ term, page, payload: { items: [], total: 0 } });
|
|
53561
|
+
}
|
|
53562
|
+
return this.searchFn(term, page, this.pageSize).pipe(catchError(() => of({ items: [], total: 0 })), switchMap(payload => of({ term, page, payload })));
|
|
53563
|
+
}
|
|
53564
|
+
applyPage(term, page, append, payload) {
|
|
53565
|
+
// Drop stale load-more responses — if the user typed a new search term
|
|
53566
|
+
// while a load-more was in flight, this append is for an old term and
|
|
53567
|
+
// would corrupt the freshly-replaced options list. The search$ pipeline
|
|
53568
|
+
// already drops stale typing-debounce responses via switchMap.
|
|
53569
|
+
if (append && term !== this.currentSearchTerm) {
|
|
53570
|
+
return;
|
|
53571
|
+
}
|
|
53572
|
+
if (!append) {
|
|
53573
|
+
this.currentSearchTerm = term;
|
|
53574
|
+
}
|
|
53575
|
+
const items = (payload?.items ?? []).map(e => this.toSelectOption(e));
|
|
53576
|
+
const total = payload?.total ?? items.length;
|
|
53577
|
+
if (append) {
|
|
53578
|
+
// Dedupe by id so a re-fetch can't double up an already-rendered env.
|
|
53579
|
+
const seen = new Set(this.currentEnvOptions.map(o => Number(o.id)));
|
|
53580
|
+
const fresh = items.filter(o => !seen.has(Number(o.id)));
|
|
53581
|
+
this.currentEnvOptions = [...this.currentEnvOptions, ...fresh];
|
|
53582
|
+
}
|
|
53583
|
+
else {
|
|
53584
|
+
this.currentEnvOptions = items;
|
|
53585
|
+
}
|
|
53586
|
+
this.totalEnvElements = total;
|
|
53587
|
+
this.currentPageIndex = page;
|
|
53588
|
+
this.isLoadingEnvs = false;
|
|
53589
|
+
this.envConfig = this.buildServerSearchEnvConfig();
|
|
53590
|
+
this.cdr.markForCheck();
|
|
53591
|
+
}
|
|
53592
|
+
/** Merge cached selected options with the visible page so the multi-select
|
|
53593
|
+
* trigger always shows the right names — even when the user types a query
|
|
53594
|
+
* that filters previously selected envs out of view. Selected ones come
|
|
53595
|
+
* first to keep the state visible. */
|
|
53596
|
+
mergeSelectedIntoOptions(visible) {
|
|
53597
|
+
if (this.selectedEnvCache.size === 0) {
|
|
53598
|
+
return visible;
|
|
53599
|
+
}
|
|
53600
|
+
const visibleIds = new Set(visible.map(o => Number(o.id)));
|
|
53601
|
+
const onlyCached = [];
|
|
53602
|
+
for (const opt of this.selectedEnvCache.values()) {
|
|
53603
|
+
if (!visibleIds.has(Number(opt.id))) {
|
|
53604
|
+
onlyCached.push(opt);
|
|
53605
|
+
}
|
|
53606
|
+
}
|
|
53607
|
+
return [...onlyCached, ...visible];
|
|
53608
|
+
}
|
|
53609
|
+
/** Update the selected-env cache from the FormControl value so the trigger
|
|
53610
|
+
* display + future merges reflect the latest selection. We cache the full
|
|
53611
|
+
* SelectOption (id + name) by looking up either the visible page or the
|
|
53612
|
+
* prior cache. Selections are accumulated, never removed — even unselect →
|
|
53613
|
+
* reselect works without a fresh fetch. */
|
|
53614
|
+
rememberSelectedEnvs(value) {
|
|
53615
|
+
const ids = Array.isArray(value)
|
|
53616
|
+
? value.map(v => Number(v)).filter(n => !Number.isNaN(n))
|
|
53617
|
+
: [];
|
|
53618
|
+
if (ids.length === 0) {
|
|
53619
|
+
return;
|
|
53620
|
+
}
|
|
53621
|
+
for (const id of ids) {
|
|
53622
|
+
if (this.selectedEnvCache.has(id)) {
|
|
53623
|
+
continue;
|
|
53624
|
+
}
|
|
53625
|
+
const fromVisible = this.currentEnvOptions.find(o => Number(o.id) === id);
|
|
53626
|
+
if (fromVisible) {
|
|
53627
|
+
this.selectedEnvCache.set(id, fromVisible);
|
|
53628
|
+
}
|
|
53629
|
+
}
|
|
53630
|
+
}
|
|
53631
|
+
// -- Helpers --------------------------------------------------------------
|
|
53632
|
+
toSelectOption(e) {
|
|
53633
|
+
return {
|
|
53634
|
+
id: e.id,
|
|
53635
|
+
value: e.id,
|
|
53636
|
+
name: e.name,
|
|
53637
|
+
label: e.name,
|
|
53638
|
+
statusColor: e.color,
|
|
53639
|
+
};
|
|
53640
|
+
}
|
|
53481
53641
|
isDuplicateName(candidate) {
|
|
53482
53642
|
const existing = (this.existingNames ?? []).map(n => (n ?? '').trim().toLowerCase());
|
|
53483
53643
|
const lowered = candidate.toLowerCase();
|
|
@@ -53491,7 +53651,7 @@ class NewTestDataProfileDialogComponent {
|
|
|
53491
53651
|
NewTestDataProfileDialogComponent.INTEGER_REGEX = /^\s*(\d+)\s*$/;
|
|
53492
53652
|
NewTestDataProfileDialogComponent.MAX_DIM = 100;
|
|
53493
53653
|
NewTestDataProfileDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewTestDataProfileDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
53494
|
-
NewTestDataProfileDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewTestDataProfileDialogComponent, selector: "cqa-new-test-data-profile-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", environments: "environments" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-[1fr_auto] cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Profile name\"\n placeholder=\"e.g. Guest Personas\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What data is this profile for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Rows + Columns matrix -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <cqa-custom-input\n label=\"Rows\"\n placeholder=\"e.g. 2\"\n type=\"number\"\n [value]=\"rowsInput\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRowsChange($event)\">\n </cqa-custom-input>\n <cqa-custom-input\n label=\"Columns\"\n placeholder=\"e.g. 3\"\n type=\"number\"\n [value]=\"columnsInput\"\n [fullWidth]=\"true\"\n (valueChange)=\"onColumnsChange($event)\">\n </cqa-custom-input>\n </div>\n <span *ngIf=\"matrixError\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-xs cqa-text-red-600\">\n <mat-icon class=\"cqa-flex-none\" style=\"font-size:14px;width:14px;height:14px;line-height:14px;\">error</mat-icon>\n <span>{{ matrixError }}</span>\n </span>\n </div>\n\n <!-- Assign to environments -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n Assign to environments <span class=\"cqa-text-red-600\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"envForm\"\n [config]=\"envConfig\">\n </cqa-dynamic-select>\n <span *ngIf=\"envsError\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-xs cqa-text-red-600\">\n <mat-icon class=\"cqa-flex-none\" style=\"font-size:14px;width:14px;height:14px;line-height:14px;\">error</mat-icon>\n <span>{{ envsError }}</span>\n </span>\n <span *ngIf=\"!envsError\" class=\"cqa-text-xs cqa-text-gray-500\">\n Each environment gets an independent copy of the data (same columns, separate rows).\n </span>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "displayOnly", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53654
|
+
NewTestDataProfileDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewTestDataProfileDialogComponent, selector: "cqa-new-test-data-profile-dialog", inputs: { mode: "mode", initialValue: "initialValue", existingNames: "existingNames", environments: "environments", searchFn: "searchFn", pageSize: "pageSize" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-[1fr_auto] cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Profile name\"\n placeholder=\"e.g. Guest Personas\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What data is this profile for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Rows + Columns matrix -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <cqa-custom-input\n label=\"Rows\"\n placeholder=\"e.g. 2\"\n type=\"number\"\n [value]=\"rowsInput\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRowsChange($event)\">\n </cqa-custom-input>\n <cqa-custom-input\n label=\"Columns\"\n placeholder=\"e.g. 3\"\n type=\"number\"\n [value]=\"columnsInput\"\n [fullWidth]=\"true\"\n (valueChange)=\"onColumnsChange($event)\">\n </cqa-custom-input>\n </div>\n <span *ngIf=\"matrixError\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-xs cqa-text-red-600\">\n <mat-icon class=\"cqa-flex-none\" style=\"font-size:14px;width:14px;height:14px;line-height:14px;\">error</mat-icon>\n <span>{{ matrixError }}</span>\n </span>\n </div>\n\n <!-- Assign to environments -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n Assign to environments <span class=\"cqa-text-red-600\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"envForm\"\n [config]=\"envConfig\">\n </cqa-dynamic-select>\n <span *ngIf=\"envsError\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-xs cqa-text-red-600\">\n <mat-icon class=\"cqa-flex-none\" style=\"font-size:14px;width:14px;height:14px;line-height:14px;\">error</mat-icon>\n <span>{{ envsError }}</span>\n </span>\n <span *ngIf=\"!envsError\" class=\"cqa-text-xs cqa-text-gray-500\">\n Each environment gets an independent copy of the data (same columns, separate rows).\n </span>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: PermissionToggleComponent, selector: "cqa-permission-toggle", inputs: ["value", "disabled", "displayOnly", "roTooltip", "rwTooltip"], outputs: ["valueChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53495
53655
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewTestDataProfileDialogComponent, decorators: [{
|
|
53496
53656
|
type: Component,
|
|
53497
53657
|
args: [{ selector: 'cqa-new-test-data-profile-dialog', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-w-full\">\n\n <!-- Name + Permission -->\n <div class=\"cqa-grid cqa-grid-cols-[1fr_auto] cqa-gap-4 cqa-items-start\">\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Profile name\"\n placeholder=\"e.g. Guest Personas\"\n type=\"text\"\n [value]=\"name\"\n [required]=\"true\"\n [fullWidth]=\"true\"\n [errors]=\"nameErrorsArray\"\n (valueChange)=\"onNameChange($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex cqa-flex-col\">\n <label class=\"cqa-text-sm cqa-mb-1.5 cqa-font-medium cqa-text-gray-700\">Permission</label>\n <cqa-permission-toggle\n [value]=\"readWriteMode\"\n (valueChange)=\"onPermissionChange($event)\">\n </cqa-permission-toggle>\n </div>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-custom-input\n label=\"Description\"\n placeholder=\"What data is this profile for?\"\n type=\"text\"\n [value]=\"description\"\n [fullWidth]=\"true\"\n (valueChange)=\"onDescriptionChange($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Rows + Columns matrix -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <cqa-custom-input\n label=\"Rows\"\n placeholder=\"e.g. 2\"\n type=\"number\"\n [value]=\"rowsInput\"\n [fullWidth]=\"true\"\n (valueChange)=\"onRowsChange($event)\">\n </cqa-custom-input>\n <cqa-custom-input\n label=\"Columns\"\n placeholder=\"e.g. 3\"\n type=\"number\"\n [value]=\"columnsInput\"\n [fullWidth]=\"true\"\n (valueChange)=\"onColumnsChange($event)\">\n </cqa-custom-input>\n </div>\n <span *ngIf=\"matrixError\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-xs cqa-text-red-600\">\n <mat-icon class=\"cqa-flex-none\" style=\"font-size:14px;width:14px;height:14px;line-height:14px;\">error</mat-icon>\n <span>{{ matrixError }}</span>\n </span>\n </div>\n\n <!-- Assign to environments -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n Assign to environments <span class=\"cqa-text-red-600\">*</span>\n </label>\n <cqa-dynamic-select\n [form]=\"envForm\"\n [config]=\"envConfig\">\n </cqa-dynamic-select>\n <span *ngIf=\"envsError\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-xs cqa-text-red-600\">\n <mat-icon class=\"cqa-flex-none\" style=\"font-size:14px;width:14px;height:14px;line-height:14px;\">error</mat-icon>\n <span>{{ envsError }}</span>\n </span>\n <span *ngIf=\"!envsError\" class=\"cqa-text-xs cqa-text-gray-500\">\n Each environment gets an independent copy of the data (same columns, separate rows).\n </span>\n </div>\n\n</div>\n" }]
|
|
@@ -53503,6 +53663,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
53503
53663
|
type: Input
|
|
53504
53664
|
}], environments: [{
|
|
53505
53665
|
type: Input
|
|
53666
|
+
}], searchFn: [{
|
|
53667
|
+
type: Input
|
|
53668
|
+
}], pageSize: [{
|
|
53669
|
+
type: Input
|
|
53506
53670
|
}] } });
|
|
53507
53671
|
|
|
53508
53672
|
class ManageColumnsDialogComponent {
|
|
@@ -53621,7 +53785,7 @@ class ManageColumnsDialogComponent {
|
|
|
53621
53785
|
}
|
|
53622
53786
|
}
|
|
53623
53787
|
ManageColumnsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ManageColumnsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53624
|
-
ManageColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ManageColumnsDialogComponent, selector: "cqa-manage-columns-dialog", inputs: { columns: "columns", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
53788
|
+
ManageColumnsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ManageColumnsDialogComponent, selector: "cqa-manage-columns-dialog", inputs: { columns: "columns", lockedColumns: "lockedColumns" }, host: { styleAttribute: "display:block;width:100%;", classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle", "showPasswordToggle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
53625
53789
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ManageColumnsDialogComponent, decorators: [{
|
|
53626
53790
|
type: Component,
|
|
53627
53791
|
args: [{ selector: 'cqa-manage-columns-dialog', host: { class: 'cqa-ui-root', style: 'display:block;width:100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-w-full\">\n\n <div class=\"manage-cols-drop-list cqa-flex cqa-flex-col cqa-gap-2\"\n [dndDropzone]=\"['col']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"manage-cols-placeholder\">Drop here</div>\n <div *ngFor=\"let item of items; let i = index; trackBy: trackByUid\"\n class=\"manage-cols-row cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1.5 cqa-rounded-md cqa-border cqa-border-gray-200 cqa-bg-gray-50\">\n <span class=\"manage-cols-handle cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400\"\n [dndDraggable]=\"item\"\n [dndDisableIf]=\"isLocked(item)\"\n dndType=\"col\"\n dndEffectAllowed=\"move\">\n <mat-icon style=\"font-size:18px;width:18px;height:18px;line-height:18px;\">drag_indicator</mat-icon>\n </span>\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"item.name\"\n [fullWidth]=\"true\"\n [disabled]=\"isLocked(item)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onRename(i, $event)\">\n </cqa-custom-input>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move up\"\n [disabled]=\"i === 0\"\n (click)=\"onMove(i, -1)\">\n <mat-icon>arrow_upward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn\"\n title=\"Move down\"\n [disabled]=\"i === items.length - 1\"\n (click)=\"onMove(i, 1)\">\n <mat-icon>arrow_downward</mat-icon>\n </button>\n <button type=\"button\" class=\"manage-cols-icon-btn manage-cols-icon-btn-danger\"\n title=\"Delete column\"\n [disabled]=\"isLocked(item)\"\n (click)=\"onRemove(i)\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pt-3 cqa-mt-1 cqa-border-t cqa-border-dashed cqa-border-gray-200\">\n <cqa-custom-input\n class=\"cqa-flex-1\"\n [value]=\"newColName\"\n [fullWidth]=\"true\"\n placeholder=\"New column name (e.g. currency)\"\n inputInlineStyle=\"font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;\"\n (valueChange)=\"onNewColNameChange($event)\"\n (enterPressed)=\"onAdd()\">\n </cqa-custom-input>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"add\"\n text=\"Add column\"\n [disabled]=\"!canAdd\"\n (clicked)=\"onAdd()\">\n </cqa-button>\n </div>\n\n <span *ngIf=\"columnsError\" class=\"cqa-text-xs cqa-text-red-600\">{{ columnsError }}</span>\n\n <div class=\"cqa-px-3 cqa-py-2 cqa-rounded-md cqa-bg-primary-surface cqa-border cqa-border-success-100 cqa-text-xs cqa-text-gray-700\">\n <strong class=\"cqa-text-gray-900\">Heads up:</strong>\n Deleting a column removes its data from every environment. Renaming keeps the data in place.\n </div>\n\n</div>\n" }]
|
|
@@ -54267,10 +54431,10 @@ class DataLibraryPanelComponent {
|
|
|
54267
54431
|
}
|
|
54268
54432
|
}
|
|
54269
54433
|
DataLibraryPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DataLibraryPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
54270
|
-
DataLibraryPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DataLibraryPanelComponent, selector: "cqa-data-library-panel", inputs: { searchTerm: "searchTerm", searchPlaceholder: "searchPlaceholder", environmentName: "environmentName", activeSubTab: "activeSubTab", elements: "elements", profiles: "profiles", isLoadingElements: "isLoadingElements", isLoadingProfiles: "isLoadingProfiles", selectedElementId: "selectedElementId", hasEnvironment: "hasEnvironment", showElementsLink: "showElementsLink", showManageProfilesLink: "showManageProfilesLink" }, outputs: { searchTermChange: "searchTermChange", search: "search", searchCleared: "searchCleared", activeSubTabChange: "activeSubTabChange", elementCardClick: "elementCardClick", viewFullElementsClick: "viewFullElementsClick", manageProfilesClick: "manageProfilesClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-bg-white\">\n <!-- Sticky region: search + env banner + segment. position:sticky pins inside the\n host scroll container (cqa-detail-side-panel scrolls our content) so only the\n cards below scroll past while these stay anchored. -->\n <div class=\"cqa-sticky cqa-top-0 cqa-z-10 cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2 cqa-pb-3 cqa-bg-white\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchTerm\"\n [showClear]=\"true\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\"\n (search)=\"onSearchSubmit($event)\"\n (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n\n <div class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F8FAFC] cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-md cqa-px-3 cqa-py-2\">\n Showing data for <span class=\"cqa-font-semibold cqa-text-[#0F172A]\">{{ bannerLabel }}</span> Environment\n </div>\n\n <cqa-segment-control\n [segments]=\"segments\"\n [value]=\"activeSubTab\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Scrollable region: section header + cards / empty / loading.\n Scrolling is owned by the host's scroll container; this div is just a normal block. -->\n <div class=\"cqa-pt-3 cqa-pb-6\">\n <ng-container *ngIf=\"activeSubTab === 'elements'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Elements</span>\n <a\n *ngIf=\"showElementsLink\"\n href=\"#\"\n (click)=\"onViewFullElements($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n View full library<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingElements && elements.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-element-card\n *ngFor=\"let el of elements; trackBy: trackByElementId\"\n [name]=\"el.name\"\n [screen]=\"el.screen\"\n [updatedRelative]=\"el.updatedRelative\"\n [locatorBadge]=\"el.locatorBadge\"\n [selected]=\"selectedElementId === el.id\"\n (cardClick)=\"onElementClick(el.id)\">\n </cqa-element-card>\n </div>\n\n <div *ngIf=\"!isLoadingElements && !elements.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"searchTerm; else noElementsAtAll\">\n No elements match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noElementsAtAll>No elements yet for this workspace.</ng-template>\n </div>\n\n <div *ngIf=\"isLoadingElements\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading elements\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-2 cqa-w-1/4 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"activeSubTab === 'profiles'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Test Data Profiles</span>\n <a\n *ngIf=\"showManageProfilesLink\"\n href=\"#\"\n (click)=\"onManageProfiles($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n Manage<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && profiles.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-test-data-profile-card\n *ngFor=\"let p of profiles; trackBy: trackByAttachmentId\"\n [name]=\"p.name\"\n [rowsCount]=\"p.rowsCount\"\n [columnsCount]=\"p.columnsCount\"\n [environmentName]=\"environmentName\"\n [permission]=\"p.permission\"\n [activeOnTestCase]=\"p.activeOnTestCase\">\n </cqa-test-data-profile-card>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && !profiles.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"!hasEnvironment; else noAttachments\">\n Set an environment on this test case to see its test data profiles.\n </ng-container>\n <ng-template #noAttachments>\n <ng-container *ngIf=\"searchTerm; else noProfilesAtAll\">\n No profiles match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noProfilesAtAll>No test data profiles attached to this environment yet.</ng-template>\n </ng-template>\n </div>\n\n <div *ngIf=\"isLoadingProfiles\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading test data profiles\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-12 cqa-rounded-full cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: ElementCardComponent, selector: "cqa-element-card", inputs: ["name", "screen", "updatedRelative", "locatorBadge", "selected"], outputs: ["cardClick"] }, { type: TestDataProfileCardComponent, selector: "cqa-test-data-profile-card", inputs: ["name", "rowsCount", "columnsCount", "environmentName", "permission", "activeOnTestCase"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54434
|
+
DataLibraryPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DataLibraryPanelComponent, selector: "cqa-data-library-panel", inputs: { searchTerm: "searchTerm", searchPlaceholder: "searchPlaceholder", environmentName: "environmentName", activeSubTab: "activeSubTab", elements: "elements", profiles: "profiles", isLoadingElements: "isLoadingElements", isLoadingProfiles: "isLoadingProfiles", selectedElementId: "selectedElementId", hasEnvironment: "hasEnvironment", showElementsLink: "showElementsLink", showManageProfilesLink: "showManageProfilesLink" }, outputs: { searchTermChange: "searchTermChange", search: "search", searchCleared: "searchCleared", activeSubTabChange: "activeSubTabChange", elementCardClick: "elementCardClick", viewFullElementsClick: "viewFullElementsClick", manageProfilesClick: "manageProfilesClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-bg-white\">\n <!-- Sticky region: search + env banner + segment. position:sticky pins inside the\n host scroll container (cqa-detail-side-panel scrolls our content) so only the\n cards below scroll past while these stay anchored. -->\n <div class=\"cqa-sticky cqa-top-0 cqa-z-10 cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2 cqa-pb-3 cqa-bg-white\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchTerm\"\n [showClear]=\"true\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\"\n (search)=\"onSearchSubmit($event)\"\n (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n\n <div *ngIf=\"activeSubTab === 'profiles'\" class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F8FAFC] cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-md cqa-px-3 cqa-py-2\">\n Showing data for <span class=\"cqa-font-semibold cqa-text-[#0F172A]\">{{ bannerLabel }}</span> Environment\n </div>\n\n <cqa-segment-control\n [segments]=\"segments\"\n [value]=\"activeSubTab\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Scrollable region: section header + cards / empty / loading.\n Scrolling is owned by the host's scroll container; this div is just a normal block. -->\n <div class=\"cqa-pt-3 cqa-pb-6\">\n <ng-container *ngIf=\"activeSubTab === 'elements'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Elements</span>\n <a\n *ngIf=\"showElementsLink\"\n href=\"#\"\n (click)=\"onViewFullElements($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n View full library<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingElements && elements.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-element-card\n *ngFor=\"let el of elements; trackBy: trackByElementId\"\n [name]=\"el.name\"\n [screen]=\"el.screen\"\n [updatedRelative]=\"el.updatedRelative\"\n [locatorBadge]=\"el.locatorBadge\"\n [selected]=\"selectedElementId === el.id\"\n (cardClick)=\"onElementClick(el.id)\">\n </cqa-element-card>\n </div>\n\n <div *ngIf=\"!isLoadingElements && !elements.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"searchTerm; else noElementsAtAll\">\n No elements match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noElementsAtAll>No elements yet for this workspace.</ng-template>\n </div>\n\n <div *ngIf=\"isLoadingElements\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading elements\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-2 cqa-w-1/4 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"activeSubTab === 'profiles'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Test Data Profiles</span>\n <a\n *ngIf=\"showManageProfilesLink\"\n href=\"#\"\n (click)=\"onManageProfiles($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n Manage<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && profiles.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-test-data-profile-card\n *ngFor=\"let p of profiles; trackBy: trackByAttachmentId\"\n [name]=\"p.name\"\n [rowsCount]=\"p.rowsCount\"\n [columnsCount]=\"p.columnsCount\"\n [environmentName]=\"environmentName\"\n [permission]=\"p.permission\"\n [activeOnTestCase]=\"p.activeOnTestCase\">\n </cqa-test-data-profile-card>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && !profiles.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"!hasEnvironment; else noAttachments\">\n Set an environment on this test case to see its test data profiles.\n </ng-container>\n <ng-template #noAttachments>\n <ng-container *ngIf=\"searchTerm; else noProfilesAtAll\">\n No profiles match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noProfilesAtAll>No test data profiles attached to this environment yet.</ng-template>\n </ng-template>\n </div>\n\n <div *ngIf=\"isLoadingProfiles\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading test data profiles\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-12 cqa-rounded-full cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor", "fullWidth", "size"], outputs: ["valueChange"] }, { type: ElementCardComponent, selector: "cqa-element-card", inputs: ["name", "screen", "updatedRelative", "locatorBadge", "selected"], outputs: ["cardClick"] }, { type: TestDataProfileCardComponent, selector: "cqa-test-data-profile-card", inputs: ["name", "rowsCount", "columnsCount", "environmentName", "permission", "activeOnTestCase"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54271
54435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DataLibraryPanelComponent, decorators: [{
|
|
54272
54436
|
type: Component,
|
|
54273
|
-
args: [{ selector: 'cqa-data-library-panel', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-bg-white\">\n <!-- Sticky region: search + env banner + segment. position:sticky pins inside the\n host scroll container (cqa-detail-side-panel scrolls our content) so only the\n cards below scroll past while these stay anchored. -->\n <div class=\"cqa-sticky cqa-top-0 cqa-z-10 cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2 cqa-pb-3 cqa-bg-white\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchTerm\"\n [showClear]=\"true\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\"\n (search)=\"onSearchSubmit($event)\"\n (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n\n <div class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F8FAFC] cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-md cqa-px-3 cqa-py-2\">\n Showing data for <span class=\"cqa-font-semibold cqa-text-[#0F172A]\">{{ bannerLabel }}</span> Environment\n </div>\n\n <cqa-segment-control\n [segments]=\"segments\"\n [value]=\"activeSubTab\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Scrollable region: section header + cards / empty / loading.\n Scrolling is owned by the host's scroll container; this div is just a normal block. -->\n <div class=\"cqa-pt-3 cqa-pb-6\">\n <ng-container *ngIf=\"activeSubTab === 'elements'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Elements</span>\n <a\n *ngIf=\"showElementsLink\"\n href=\"#\"\n (click)=\"onViewFullElements($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n View full library<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingElements && elements.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-element-card\n *ngFor=\"let el of elements; trackBy: trackByElementId\"\n [name]=\"el.name\"\n [screen]=\"el.screen\"\n [updatedRelative]=\"el.updatedRelative\"\n [locatorBadge]=\"el.locatorBadge\"\n [selected]=\"selectedElementId === el.id\"\n (cardClick)=\"onElementClick(el.id)\">\n </cqa-element-card>\n </div>\n\n <div *ngIf=\"!isLoadingElements && !elements.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"searchTerm; else noElementsAtAll\">\n No elements match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noElementsAtAll>No elements yet for this workspace.</ng-template>\n </div>\n\n <div *ngIf=\"isLoadingElements\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading elements\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-2 cqa-w-1/4 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"activeSubTab === 'profiles'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Test Data Profiles</span>\n <a\n *ngIf=\"showManageProfilesLink\"\n href=\"#\"\n (click)=\"onManageProfiles($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n Manage<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && profiles.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-test-data-profile-card\n *ngFor=\"let p of profiles; trackBy: trackByAttachmentId\"\n [name]=\"p.name\"\n [rowsCount]=\"p.rowsCount\"\n [columnsCount]=\"p.columnsCount\"\n [environmentName]=\"environmentName\"\n [permission]=\"p.permission\"\n [activeOnTestCase]=\"p.activeOnTestCase\">\n </cqa-test-data-profile-card>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && !profiles.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"!hasEnvironment; else noAttachments\">\n Set an environment on this test case to see its test data profiles.\n </ng-container>\n <ng-template #noAttachments>\n <ng-container *ngIf=\"searchTerm; else noProfilesAtAll\">\n No profiles match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noProfilesAtAll>No test data profiles attached to this environment yet.</ng-template>\n </ng-template>\n </div>\n\n <div *ngIf=\"isLoadingProfiles\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading test data profiles\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-12 cqa-rounded-full cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n" }]
|
|
54437
|
+
args: [{ selector: 'cqa-data-library-panel', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-w-full cqa-bg-white\">\n <!-- Sticky region: search + env banner + segment. position:sticky pins inside the\n host scroll container (cqa-detail-side-panel scrolls our content) so only the\n cards below scroll past while these stay anchored. -->\n <div class=\"cqa-sticky cqa-top-0 cqa-z-10 cqa-flex cqa-flex-col cqa-gap-3 cqa-pt-2 cqa-pb-3 cqa-bg-white\">\n <cqa-search-bar\n [placeholder]=\"searchPlaceholder\"\n [value]=\"searchTerm\"\n [showClear]=\"true\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSearchValueChange($event)\"\n (search)=\"onSearchSubmit($event)\"\n (cleared)=\"onSearchCleared()\">\n </cqa-search-bar>\n\n <div *ngIf=\"activeSubTab === 'profiles'\" class=\"cqa-text-xs cqa-text-[#475569] cqa-bg-[#F8FAFC] cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-md cqa-px-3 cqa-py-2\">\n Showing data for <span class=\"cqa-font-semibold cqa-text-[#0F172A]\">{{ bannerLabel }}</span> Environment\n </div>\n\n <cqa-segment-control\n [segments]=\"segments\"\n [value]=\"activeSubTab\"\n [fullWidth]=\"true\"\n (valueChange)=\"onSegmentChange($event)\">\n </cqa-segment-control>\n </div>\n\n <!-- Scrollable region: section header + cards / empty / loading.\n Scrolling is owned by the host's scroll container; this div is just a normal block. -->\n <div class=\"cqa-pt-3 cqa-pb-6\">\n <ng-container *ngIf=\"activeSubTab === 'elements'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Elements</span>\n <a\n *ngIf=\"showElementsLink\"\n href=\"#\"\n (click)=\"onViewFullElements($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n View full library<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingElements && elements.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-element-card\n *ngFor=\"let el of elements; trackBy: trackByElementId\"\n [name]=\"el.name\"\n [screen]=\"el.screen\"\n [updatedRelative]=\"el.updatedRelative\"\n [locatorBadge]=\"el.locatorBadge\"\n [selected]=\"selectedElementId === el.id\"\n (cardClick)=\"onElementClick(el.id)\">\n </cqa-element-card>\n </div>\n\n <div *ngIf=\"!isLoadingElements && !elements.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"searchTerm; else noElementsAtAll\">\n No elements match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noElementsAtAll>No elements yet for this workspace.</ng-template>\n </div>\n\n <div *ngIf=\"isLoadingElements\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading elements\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-2 cqa-w-1/4 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"activeSubTab === 'profiles'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[13px] cqa-font-semibold cqa-text-[#0F172A]\">Test Data Profiles</span>\n <a\n *ngIf=\"showManageProfilesLink\"\n href=\"#\"\n (click)=\"onManageProfiles($event)\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[2px] cqa-text-xs cqa-font-medium cqa-text-[#4F46E5] cqa-no-underline hover:cqa-underline\">\n Manage<span class=\"cqa-text-sm cqa-leading-none\">›</span>\n </a>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && profiles.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <cqa-test-data-profile-card\n *ngFor=\"let p of profiles; trackBy: trackByAttachmentId\"\n [name]=\"p.name\"\n [rowsCount]=\"p.rowsCount\"\n [columnsCount]=\"p.columnsCount\"\n [environmentName]=\"environmentName\"\n [permission]=\"p.permission\"\n [activeOnTestCase]=\"p.activeOnTestCase\">\n </cqa-test-data-profile-card>\n </div>\n\n <div *ngIf=\"!isLoadingProfiles && !profiles.length\" class=\"cqa-text-xs cqa-text-[#94A3B8] cqa-py-3 cqa-px-1\">\n <ng-container *ngIf=\"!hasEnvironment; else noAttachments\">\n Set an environment on this test case to see its test data profiles.\n </ng-container>\n <ng-template #noAttachments>\n <ng-container *ngIf=\"searchTerm; else noProfilesAtAll\">\n No profiles match “{{ searchTerm }}”.\n </ng-container>\n <ng-template #noProfilesAtAll>No test data profiles attached to this environment yet.</ng-template>\n </ng-template>\n </div>\n\n <div *ngIf=\"isLoadingProfiles\" class=\"cqa-flex cqa-flex-col cqa-gap-2\" aria-busy=\"true\" aria-label=\"Loading test data profiles\">\n <div *ngFor=\"let _ of skeletonCards\"\n class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-3 cqa-py-[10px] cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-white\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-3 cqa-w-1/2 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-8 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-h-2 cqa-w-1/3 cqa-rounded cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n <div class=\"cqa-h-3 cqa-w-12 cqa-rounded-full cqa-bg-[#E2E8F0] cqa-animate-pulse\"></div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</div>\n" }]
|
|
54274
54438
|
}], propDecorators: { searchTerm: [{
|
|
54275
54439
|
type: Input
|
|
54276
54440
|
}], searchPlaceholder: [{
|