@cqa-lib/cqa-ui 1.1.441 → 1.1.443
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/change-history/change-history.component.mjs +79 -0
- package/esm2020/lib/change-history/change-history.types.mjs +2 -0
- package/esm2020/lib/custom-input/custom-input.component.mjs +6 -4
- package/esm2020/lib/export-code-modal/export-code-modal.component.mjs +1 -1
- package/esm2020/lib/questionnaire-list/questionnaire-list.component.mjs +105 -0
- package/esm2020/lib/questionnaire-list/questionnaire-list.types.mjs +2 -0
- 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/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/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/ui-kit.module.mjs +11 -1
- package/esm2020/lib/version-history/new-version-history-detail/new-version-history-detail.component.mjs +3 -3
- package/esm2020/public-api.mjs +6 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +207 -23
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +206 -23
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/change-history/change-history.component.d.ts +15 -0
- package/lib/change-history/change-history.types.d.ts +14 -0
- package/lib/custom-input/custom-input.component.d.ts +2 -1
- package/lib/questionnaire-list/questionnaire-list.component.d.ts +31 -0
- package/lib/questionnaire-list/questionnaire-list.types.d.ts +6 -0
- package/lib/ui-kit.module.d.ts +33 -31
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
|
@@ -6466,11 +6466,13 @@ class CustomInputComponent {
|
|
|
6466
6466
|
}
|
|
6467
6467
|
}
|
|
6468
6468
|
CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6469
|
-
CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomInputComponent, selector: "cqa-custom-input", inputs: { 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 [type]=\"type\"\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 }\"\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 </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", 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"] }] });
|
|
6469
|
+
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]=\"type\"\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 }\"\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 </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", 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"] }] });
|
|
6470
6470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, decorators: [{
|
|
6471
6471
|
type: Component,
|
|
6472
|
-
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 [type]=\"type\"\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 }\"\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 </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: [] }]
|
|
6473
|
-
}], propDecorators: {
|
|
6472
|
+
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]=\"type\"\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 }\"\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 </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: [] }]
|
|
6473
|
+
}], propDecorators: { inputId: [{
|
|
6474
|
+
type: Input
|
|
6475
|
+
}], label: [{
|
|
6474
6476
|
type: Input
|
|
6475
6477
|
}], type: [{
|
|
6476
6478
|
type: Input
|
|
@@ -6622,7 +6624,7 @@ class ExportCodeModalComponent {
|
|
|
6622
6624
|
}
|
|
6623
6625
|
}
|
|
6624
6626
|
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 });
|
|
6625
|
-
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 <p class=\"cqa-text-sm cqa-text-[#4A5565]\">Choose how you want to export the test case code:</p>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Export Options -->\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\">(C-{{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", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6627
|
+
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 <p class=\"cqa-text-sm cqa-text-[#4A5565]\">Choose how you want to export the test case code:</p>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Export Options -->\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\">(C-{{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", "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"] }] });
|
|
6626
6628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExportCodeModalComponent, decorators: [{
|
|
6627
6629
|
type: Component,
|
|
6628
6630
|
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 <p class=\"cqa-text-sm cqa-text-[#4A5565]\">Choose how you want to export the test case code:</p>\n </div>\n\n <!-- Content -->\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-4 cqa-pb-4\">\n <!-- Export Options -->\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\">(C-{{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: [] }]
|
|
@@ -21611,7 +21613,7 @@ class ElementFormComponent {
|
|
|
21611
21613
|
}
|
|
21612
21614
|
}
|
|
21613
21615
|
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 });
|
|
21614
|
-
ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div\n class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n *ngIf=\"formLabels?.length; else noTagsContainer\">\n <span *ngFor=\"let tag of visibleTags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n [matTooltip]=\"tag\"\n matTooltipPosition=\"above\"\n style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n <ng-template #noTagsContainer>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </ng-template>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21616
|
+
ElementFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ElementFormComponent, selector: "cqa-element-form", inputs: { elementId: "elementId", element: "element", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", isElementLoading: "isElementLoading", isEditMode: "isEditMode", isCreateMode: "isCreateMode", isEditInDepthAvailable: "isEditInDepthAvailable" }, outputs: { createElement: "createElement", updateElement: "updateElement", createScreenNameRequest: "createScreenNameRequest", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div\n class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n *ngIf=\"formLabels?.length; else noTagsContainer\">\n <span *ngFor=\"let tag of visibleTags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n [matTooltip]=\"tag\"\n matTooltipPosition=\"above\"\n style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n <ng-template #noTagsContainer>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </ng-template>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
21615
21617
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ElementFormComponent, decorators: [{
|
|
21616
21618
|
type: Component,
|
|
21617
21619
|
args: [{ selector: 'cqa-element-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-1 cqa-pt-3\">\n <div *ngIf=\"isElementLoading && isEditMode\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-py-8\">\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading element data...</span>\n </div>\n <div *ngIf=\"!isElementLoading\" class=\"cqa-flex cqa-gap-1.5\">\n <cqa-custom-input \n class=\"cqa-w-1/2\" \n label=\"Name\" \n placeholder=\"default-element\"\n [value]=\"getFormControlValue('name')\"\n [errors]=\"getFormControl('name')?.touched && getFormControl('name')?.invalid ? ['Name is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('name', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-1/2\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"screenNameSelectConfig\"\n (addCustomValue)=\"createScreenNameRequest.emit($event.value)\"\n class=\"cqa-w-full\">\n </cqa-dynamic-select>\n <div *ngIf=\"getFormControl('screenNameId')?.touched && getFormControl('screenNameId')?.invalid\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n <div class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n </svg>\n <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n Screen Name is required\n </span>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"!isElementLoading\">\n <cqa-custom-input \n class=\"cqa-w-full\" \n label=\"Enter Value\" \n placeholder=\"#default_id or xpath\"\n [value]=\"getFormControlValue('value')\"\n [errors]=\"getFormControl('value')?.touched && getFormControl('value')?.invalid ? ['Value is required'] : []\"\n [required]=\"true\"\n (valueChange)=\"onFormControlChange('value', $event)\">\n </cqa-custom-input>\n <div class=\"cqa-w-full\">\n <label class=\"cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#374151] cqa-mb-1\">Labels (tags)</label>\n <div\n class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px] cqa-max-h-[80px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-scrollbar-track-transparent cqa-scrollbar-thumb-[#E5E7EB] cqa-scrollbar-thumb-rounded-full cqa-scrollbar-thumb-hover:cqa-bg-[#D1D5DB]\"\n *ngIf=\"formLabels?.length; else noTagsContainer\">\n <span *ngFor=\"let tag of visibleTags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-bg-[#eff6ff] cqa-border cqa-border-[#c8e0ff] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#3F43EE]\"\n [matTooltip]=\"tag\"\n matTooltipPosition=\"above\"\n style=\"max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\">\n <span class=\"cqa-max-w-full cqa-truncate\">{{ tag }}</span>\n <button type=\"button\" (click)=\"removeTag(tag)\" class=\"cqa-p-0.5 hover:cqa-bg-[#c8e0ff] cqa-rounded cqa-cursor-pointer cqa-h-[16px] cqa-w-[16px]\">\n <mat-icon class=\"!cqa-w-3 !cqa-h-3 !cqa-text-[14px]\">close</mat-icon>\n </button>\n </span>\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n <ng-template #noTagsContainer>\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-p-2 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-min-h-[42px]\">\n <input type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-[120px] cqa-px-2 cqa-py-1 cqa-text-sm cqa-border-0 cqa-outline-none cqa-bg-transparent\"\n placeholder=\"Type and press Enter to add\"\n [(ngModel)]=\"tagInputValue\"\n (keydown)=\"onTagInputKeydown($event)\"\n (blur)=\"addTag()\"\n [ngModelOptions]=\"{standalone: true}\">\n </div>\n </ng-template>\n </div>\n\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"(elementId ? 'Cancel' : 'Select from Element list')\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"saving ? 'Saving...' : (isEditMode ? 'Update' : 'Create')\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\" [disabled]=\"saving\"></cqa-button>\n </div>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" *ngIf=\"isEditInDepthAvailable\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </ng-container>\n</div>\n\n\n" }]
|
|
@@ -22554,7 +22556,7 @@ class TestDataModalComponent {
|
|
|
22554
22556
|
}
|
|
22555
22557
|
}
|
|
22556
22558
|
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 });
|
|
22557
|
-
TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22559
|
+
TestDataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDataModalComponent, selector: "cqa-test-data-modal", inputs: { parameters: "parameters", environmentItems: "environmentItems", activeTab: "activeTab", value: "value", helpUrl: "helpUrl" }, outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth", parameterCreate: "parameterCreate", parameterEdit: "parameterEdit", environmentCreate: "environmentCreate", environmentEdit: "environmentEdit" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["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 });
|
|
22558
22560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDataModalComponent, decorators: [{
|
|
22559
22561
|
type: Component,
|
|
22560
22562
|
args: [{ selector: 'cqa-test-data-modal', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-max-h-[77vh] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border cqa-min-h-0\">\n <!-- Header: title left; Need help? + close icon right (no overflow here so tooltip is not clipped) -->\n <div class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n Test Data\n </h2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-h-[28px]\">\n <!-- Need help? with custom tooltip: show below trigger so it is not clipped by modal overflow-y-auto -->\n <div class=\"cqa-relative cqa-inline-flex cqa-items-center\"\n (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#test-data-help-clip-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"test-data-help-clip-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <!-- Tooltip above trigger (same as element-popup); header has no overflow so tooltip is not clipped -->\n <div *ngIf=\"showHelpTooltip\"\n class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-bottom-[100%] cqa-mb-1 cqa-top-[22px]\"\n role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-left cqa-w-[306px] cqa-max-w-[306px] cqa-min-h-[20px] cqa-rounded-[6px] cqa-py-1 cqa-px-2 cqa-bg-[#0A0A0A] cqa-leading-[20px] cqa-text-[8px] cqa-break-words\">\n {{ helpTooltipText }}\n </div>\n </div>\n </div>\n <cqa-button type=\"button\" variant=\"text\" btnSize=\"md\"\n [text]=\"''\"\n icon=\"close\"\n (clicked)=\"onClose()\"\n [customClass]=\"'cqa-min-h-[28px] cqa-min-w-[28px] cqa-p-0 cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6]'\"\n title=\"Close\"\n aria-label=\"Close\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Line below header (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Tabs: Plain Text, Parameter, Environment, Runtime (full-width, cqa-button) -->\n <div class=\"cqa-w-full cqa-min-w-0 cqa-test-data-modal-tabs cqa-flex cqa-flex-row cqa-p-[3.5px] cqa-h-[31.5px] cqa-rounded-[8px] cqa-bg-[#F3F4F6] cqa-gap-0\" role=\"tablist\">\n <div *ngFor=\"let segment of tabSegments\" class=\"cqa-flex-1 cqa-min-w-0 cqa-flex\">\n <cqa-button\n type=\"button\"\n [attr.role]=\"'tab'\"\n [attr.aria-selected]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value\"\n [text]=\"segment.label\"\n [variant]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'filled' : 'text'\"\n btnSize=\"md\"\n [fullWidth]=\"true\"\n (clicked)=\"onTabChange(segment.value)\"\n [customClass]=\"(editForm.get('activeTab')?.value ?? activeTab) === segment.value ? 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-bg-[#3F43EE] cqa-text-white cqa-font-medium' : 'cqa-h-[25px] cqa-rounded-[8px] cqa-text-[12px] cqa-text-[#6B7280] hover:cqa-text-[#111827]'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Content per tab: only this section scrolls (overflow here, not on root), so header tooltip is never clipped -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-min-h-0 cqa-overflow-y-auto\"\n [class.cqa-flex-1]=\"activeTab === 'parameter' || activeTab === 'environment' || activeTab === 'runtime'\">\n <!-- Plain Text tab (form-bound like Loop Step editForm + onEditFormFieldChange) -->\n <ng-container *ngIf=\"activeTab === 'plain-text'\">\n <cqa-custom-input\n label=\"Value\"\n [value]=\"editForm.get('value')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('value', $event)\"\n placeholder=\"https://example.com/dashboard\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n Enter a static text value that won't change during execution.\n </p>\n </ng-container>\n\n <!-- Parameter tab: Variable Library -->\n <ng-container *ngIf=\"activeTab === 'parameter'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Variable Library header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Parameters\n </h3>\n <a href=\"#\" (click)=\"onCreateNewVariable($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search library'\"\n [value]=\"editForm.get('parameterSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search library'\"\n (valueChange)=\"onParameterSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Parameter list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[200px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <div\n *ngFor=\"let item of parameterListConfig\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"onParameterRowClick($event, item)\"\n (keydown.enter)=\"onParameterRowClick($event, item)\"\n (keydown.space)=\"onParameterRowClick($event, item)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedParameterId === item.id\"\n [class.cqa-border]=\"selectedParameterId === item.id\"\n [class.cqa-border-solid]=\"selectedParameterId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedParameterId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC] cqa-cursor-pointer\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n <button\n *ngIf=\"item.showEdit\"\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-p-1 cqa-min-w-0 cqa-text-[#1447E6] hover:cqa-bg-[#E5E7EB] cqa-bg-transparent cqa-border-none cqa-rounded-[6px] cqa-cursor-pointer\"\n (click)=\"onParameterEditClick($event, item.id)\"\n title=\"Edit\"\n aria-label=\"Edit\">\n <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n (click)=\"onParameterEditClick($event, item.id)\">edit</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <p *ngIf=\"parameterListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No parameters match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Environment tab: Variable library by environment -->\n <ng-container *ngIf=\"activeTab === 'environment'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-min-h-0 cqa-flex-1 cqa-min-h-[18rem]\">\n <!-- Section header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-shrink-0\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0\">\n Environment\n </h3>\n <a href=\"#\" (click)=\"onCreateNewEnvironment($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-no-underline hover:cqa-opacity-90 cqa-cursor-pointer\">\n Create New +\n </a>\n </div>\n <!-- Search: bound to editForm (same pattern as Loop Step control binding) -->\n <div class=\"cqa-flex-shrink-0\">\n <cqa-search-bar\n [placeholder]=\"'Search Environment'\"\n [value]=\"editForm.get('environmentSearchQuery')?.value ?? ''\"\n [fullWidth]=\"true\"\n [showClear]=\"true\"\n [ariaLabel]=\"'Search Environment'\"\n (valueChange)=\"onEnvironmentSearchInput($event)\">\n </cqa-search-bar>\n </div>\n <!-- Environment list (scrollable, search-integrated via filtered list binding) -->\n <div class=\"cqa-min-h-[220px] cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1 cqa-min-h-0 cqa-overflow-y-auto\">\n <button\n *ngFor=\"let item of environmentListConfig\"\n type=\"button\"\n (click)=\"onEnvironmentSelect(item.id)\"\n [class.cqa-bg-[#D8D9FC]]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-solid]=\"selectedEnvironmentId === item.id\"\n [class.cqa-border-[#3F43EE]]=\"selectedEnvironmentId === item.id\"\n class=\"cqa-w-full cqa-text-left cqa-rounded-lg cqa-p-1 cqa-transition-colors cqa-bg-white hover:cqa-bg-[#F9FAFB] focus:cqa-outline-none focus-visible:cqa-ring-2 focus-visible:cqa-ring-[#D8D9FC]\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-font-semibold cqa-text-[12px] cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-truncate\">\n {{ item.title }}\n </p>\n <p *ngIf=\"item.subtitle\" class=\"cqa-text-[10px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5 cqa-truncate\">\n {{ item.subtitle }}\n </p>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-end cqa-gap-1 cqa-flex-shrink-0\">\n <span *ngIf=\"item.badge\"\n class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-rounded-[8px] cqa-text-[10px] cqa-font-normal cqa-whitespace-nowrap cqa-bg-[#eff6ff] cqa-text-[#1447E6] cqa-border cqa-border-solid cqa-border-[#c8e0ff]\">\n {{ item.badge }}\n </span>\n </div>\n </div>\n </button>\n <p *ngIf=\"environmentListConfig.length === 0\" class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-m-0 cqa-py-4 cqa-text-center\">\n No environment variables match your search.\n </p>\n </div>\n </div>\n </ng-container>\n\n <!-- Runtime tab: dynamic value injector -->\n <ng-container *ngIf=\"activeTab === 'runtime'\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0 cqa-h-full cqa-overflow-y-auto\">\n <h3 class=\"cqa-text-[12px] cqa-leading-[20px] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-flex-shrink-0\">\n Runtime\n </h3>\n <div class=\"cqa-flex-shrink-0\">\n <cqa-custom-input\n [value]=\"editForm.get('runtimeValue')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('runtimeValue', $event)\"\n placeholder=\"input text\"\n [fullWidth]=\"true\"\n size=\"md\">\n </cqa-custom-input>\n <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#6B7280] cqa-mt-1.5 cqa-mb-0\">\n Values resolved during test execution based on session and step state.\n </p>\n </div>\n <!-- Recommended: suggestion chips -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#9CA3AF]\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#6B7280]\">Recommended</span>\n </div>\n <div class=\"cqa-test-data-runtime-chips-scroll cqa-flex cqa-gap-2 cqa-overflow-x-auto cqa-min-w-0 cqa-pb-1\">\n <cqa-button\n *ngFor=\"let snippet of runtimeSuggestedValues\"\n type=\"button\"\n variant=\"outlined\"\n btnSize=\"md\"\n [text]=\"snippet\"\n (clicked)=\"onRuntimeChipInsert(snippet)\"\n [customClass]=\"'cqa-flex-shrink-0 cqa-px-2 cqa-py-1 cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-text-[#374151] cqa-bg-[#FFFFFF] cqa-border-[#E5E7EB] cqa-rounded-[8px] cqa-whitespace-nowrap'\">\n </cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Line below content (full width of modal, no side margin) -->\n <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n </div>\n\n <!-- Footer: Cancel, Apply (full width in one row) -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n [customClass]=\"'cqa-text-[12px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n </div>\n </div>\n <a role=\"button\" tabindex=\"0\" href=\"javascript:void(0)\" (click)=\"onEditInDepth($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center cqa-cursor-pointer\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n Edit in depth (open detailed right panel)\n </a>\n </div>\n</div>\n" }]
|
|
@@ -26464,7 +26466,7 @@ class TestCaseConditionStepComponent {
|
|
|
26464
26466
|
}
|
|
26465
26467
|
}
|
|
26466
26468
|
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 });
|
|
26467
|
-
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", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", 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 ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '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 [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\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 [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 (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 [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 (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$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "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: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.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 } });
|
|
26469
|
+
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", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", 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 ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '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 [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\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 [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 (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 [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 (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$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: 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", "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", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "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: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.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 } });
|
|
26468
26470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
|
|
26469
26471
|
type: Component,
|
|
26470
26472
|
args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
|
|
@@ -28668,7 +28670,7 @@ class CreateStepGroupComponent {
|
|
|
28668
28670
|
}
|
|
28669
28671
|
}
|
|
28670
28672
|
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 });
|
|
28671
|
-
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: ["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", "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"] }] });
|
|
28673
|
+
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", "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"] }] });
|
|
28672
28674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CreateStepGroupComponent, decorators: [{
|
|
28673
28675
|
type: Component,
|
|
28674
28676
|
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" }]
|
|
@@ -29036,7 +29038,7 @@ class AdvancedVariablesFormComponent {
|
|
|
29036
29038
|
}
|
|
29037
29039
|
}
|
|
29038
29040
|
AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
29039
|
-
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 <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\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 <div *ngIf=\"formArray.length > 1\" 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 </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", components: [{ type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29041
|
+
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 <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\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 <div *ngIf=\"formArray.length > 1\" 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 </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", components: [{ type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: 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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29040
29042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, decorators: [{
|
|
29041
29043
|
type: Component,
|
|
29042
29044
|
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 <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label }}\n </label>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\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 <div *ngIf=\"formArray.length > 1\" 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 </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n</div>\n\n", styles: [] }]
|
|
@@ -31239,7 +31241,7 @@ ApiEditStepComponent.DEFAULT_STATUS_VERIFICATION_OPTIONS = [
|
|
|
31239
31241
|
{ id: 'greater-than', value: 'greater-than', name: 'Greater than', label: 'Greater than' },
|
|
31240
31242
|
];
|
|
31241
31243
|
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 });
|
|
31242
|
-
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", 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 <!-- 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 <div 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 </span>\n </div>\n\n <!-- Request row: method, URL, buttons -->\n <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center 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\">\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\"\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-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", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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: 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"], 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"] }, { 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.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 });
|
|
31244
|
+
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", 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 <!-- 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 <div 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 </span>\n </div>\n\n <!-- Request row: method, URL, buttons -->\n <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center 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\">\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\"\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-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", "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: 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"], 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"] }, { 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.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 });
|
|
31243
31245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, decorators: [{
|
|
31244
31246
|
type: Component,
|
|
31245
31247
|
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 <!-- 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 <div 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 </span>\n </div>\n\n <!-- Request row: method, URL, buttons -->\n <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center 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\">\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\"\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-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>" }]
|
|
@@ -34108,7 +34110,7 @@ class TemplateVariablesFormComponent {
|
|
|
34108
34110
|
}
|
|
34109
34111
|
}
|
|
34110
34112
|
TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
34111
|
-
TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label | 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 <!-- 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 === '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 data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !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 <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | 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: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34113
|
+
TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n .capitalize-first::first-letter {\n text-transform: uppercase;\n }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n \n <!-- Metadata - Only show if element is available in form -->\n <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Metadata\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n (valueChange)=\"metadataChange.emit($event)\">\n </cqa-custom-input>\n </div>\n\n <!-- Description -->\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Description\n </label>\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n (valueChange)=\"descriptionChange.emit($event)\">\n </cqa-custom-input>\n </div>\n \n <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n {{ variable.label | 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 <!-- 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 === '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 data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !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 <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | 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$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34112
34114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
|
|
34113
34115
|
type: Component,
|
|
34114
34116
|
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 <!-- 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 === '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 data type dropdown -->\n <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <ng-container *ngIf=\"isEnvironmentType(variable)\">\n <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Name<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Environment Value<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isParameterType(variable)\">\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n </cqa-dynamic-select>\n </div>\n <div *ngIf=\"hasSelectedTestDataProfile(variable) && !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 <!-- Show custom input for plain-text type -->\n <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #regularInput>\n <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n {{ variable.label | 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"] }]
|
|
@@ -35825,7 +35827,7 @@ class StepBuilderLoopComponent {
|
|
|
35825
35827
|
}
|
|
35826
35828
|
}
|
|
35827
35829
|
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 });
|
|
35828
|
-
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", isDebug: "isDebug", testStep: "testStep" }, 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" }, 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 <!-- 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-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 <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 [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 [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\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", "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: ["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", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "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"] }] });
|
|
35830
|
+
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", isDebug: "isDebug", testStep: "testStep" }, 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" }, 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 <!-- 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-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 <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 [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 [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\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", "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", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "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"] }] });
|
|
35829
35831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
|
|
35830
35832
|
type: Component,
|
|
35831
35833
|
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 <!-- 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-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 <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 [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 [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n [isInsideForLoopStep]=\"isInsideForLoopStep\"\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: [] }]
|
|
@@ -37609,7 +37611,7 @@ class StepBuilderDatabaseComponent {
|
|
|
37609
37611
|
}
|
|
37610
37612
|
}
|
|
37611
37613
|
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 });
|
|
37612
|
-
StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", normalEnvironmentOptions: "normalEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbEnvironment: "initialDbEnvironment", initialNormalEnvironment: "initialNormalEnvironment", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", searchDbEnvironment: "searchDbEnvironment", searchNormalEnvironment: "searchNormalEnvironment", addQuery: "addQuery", deleteQuery: "deleteQuery", assertionDataChange: "assertionDataChange", selectedQueryIndexChange: "selectedQueryIndexChange", activeTabChange: "activeTabChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "assertionsTable", first: true, predicate: ["assertionsTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n </h2>\n\n <!-- Environment Section (separator line only on bottom) -->\n <div class=\"cqa-flex cqa-w-full cqa-justify-between cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-gap-4 cqa-items-start\">\n <!-- DB Environment -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n DB Environment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n Uses Database environments from Environments.\n </p>\n </div>\n\n <!-- Normal Environment -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n Normal Environment\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getNormalEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n Uses Normal environments from Environments.\n </p>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Main Content: Two Column Layout -->\n <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n <!-- Left Panel: Query List -->\n <div\n class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n <div *ngFor=\"let query of queries; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n [class.cqa-border]=\"selectedQueryIndex === i\"\n [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n (click)=\"onSelectQuery(i)\"\n style=\"height: 49px; min-height: 49px;\">\n <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n <cqa-badge *ngIf=\"query.status\"\n [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n size=\"small\">\n </cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Right Panel: Query Editor -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n <div class=\"\">\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n </div>\n\n <div class=\"cqa-flex cqa-justify-between\">\n <!-- SQL Query Textarea -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n [textareaInlineStyle]=\"'padding: 1rem;'\"\n (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n <!-- Variable Input -->\n <div class=\"cqa-flex cqa-gap-4\">\n <div class=\"cqa-flex-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-input [placeholder]=\"'Variable name'\"\n [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n </p>\n </div>\n </div>\n <!-- Action Buttons (pinned to bottom) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n [iconColor]=\"'#414146'\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"text\"\n [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n fill=\"#6B7280\" />\n </svg>\n </cqa-button>\n <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n [iconColor]=\"'#FBFCFF'\">\n </cqa-button>\n </div>\n </div>\n </div>\n <!-- Results Section -->\n <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n <!-- Tabs -->\n <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n Output\n </button>\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n Verification\n </button>\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n Advanced\n </button>\n </div>\n\n <!-- Tab Content -->\n <div class=\"cqa-p-4\">\n <!-- Output Tab -->\n <div *ngIf=\"selectedTab === 'output'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n (clicked)=\"onCopyResults()\">\n </cqa-button>\n </div>\n\n <!-- Results Table -->\n <div *ngIf=\"getCurrentQueryResult().length > 0\" class=\"cqa-overflow-x-auto\">\n <table class=\"cqa-w-full cqa-border-collapse\">\n <thead>\n <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n <th *ngFor=\"let key of getTableColumns()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n {{ key }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of getCurrentQueryResult()\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n {{ row[key] }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"getCurrentQueryResult().length === 0\"\n class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n No results yet. Run a query to see results.\n </div>\n </div>\n\n <!-- Verification Tab -->\n <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n <!-- Header Section -->\n <div class=\"assertions-header\">\n <div class=\"header-content\">\n <h3 class=\"header-title\">Assertions</h3>\n <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n </div>\n <button \n mat-stroked-button \n color=\"primary\" \n class=\"add-assertion-button\"\n (click)=\"addAssertion()\">\n <mat-icon>add</mat-icon>\n Add Assertion\n </button>\n </div>\n\n <!-- Table Section -->\n <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n <div formArrayName=\"assertions\">\n <div class=\"table-scroll-container\">\n <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n <!-- JSONPath Column -->\n <ng-container matColumnDef=\"jsonPath\">\n <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <input \n matInput \n formControlName=\"jsonPath\"\n placeholder=\"username\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n getFormControlAt(i, 'jsonPath')?.touched\">\n JSONPath is required\n </mat-error>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Verification Type Column -->\n <ng-container matColumnDef=\"verificationType\">\n <th mat-header-cell *matHeaderCellDef>verificationType</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <mat-select formControlName=\"verificationType\">\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"not_equals\">Not Equals</mat-option>\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"not_contains\">Not Contains</mat-option>\n <mat-option value=\"greater_than\">Greater Than</mat-option>\n <mat-option value=\"less_than\">Less Than</mat-option>\n <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n <mat-option value=\"exists\">Exists</mat-option>\n <mat-option value=\"not_exists\">Not Exists</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Expected Type Column -->\n <ng-container matColumnDef=\"expectedType\">\n <th mat-header-cell *matHeaderCellDef>expectedType</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <mat-select \n formControlName=\"expectedType\"\n (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n <mat-option value=\"string\">String</mat-option>\n <mat-option value=\"number\">Number</mat-option>\n <mat-option value=\"boolean\">Boolean</mat-option>\n <mat-option value=\"object\">Object</mat-option>\n <mat-option value=\"array\">Array</mat-option>\n <mat-option value=\"null\">Null</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Expected Value Column -->\n <ng-container matColumnDef=\"expectedValue\">\n <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <!-- String, Array, Object Input -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <textarea \n *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n rows=\"3\"\n required></textarea>\n <input \n *ngIf=\"getExpectedType(i) === 'string'\"\n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n </mat-error>\n </mat-form-field>\n\n <!-- Null Type Display -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'null'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <input \n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n [disabled]=\"true\">\n </mat-form-field>\n\n <!-- Number Input -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'number'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <input \n matInput \n type=\"number\"\n formControlName=\"expectedValue\"\n placeholder=\"Expected Value in Number\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n </mat-form-field>\n\n <!-- Boolean Select -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'boolean'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <mat-select formControlName=\"expectedValue\" required>\n <mat-option value=\"true\">true</mat-option>\n <mat-option value=\"false\">false</mat-option>\n </mat-select>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <button \n mat-icon-button \n color=\"warn\"\n class=\"delete-button\"\n (click)=\"removeAssertion(i)\"\n [matTooltip]=\"'Delete assertion'\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n </div>\n </div>\n </form>\n </div>\n\n <div *ngIf=\"selectedTab === 'advanced'\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
|
|
37614
|
+
StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", normalEnvironmentOptions: "normalEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbEnvironment: "initialDbEnvironment", initialNormalEnvironment: "initialNormalEnvironment", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", searchDbEnvironment: "searchDbEnvironment", searchNormalEnvironment: "searchNormalEnvironment", addQuery: "addQuery", deleteQuery: "deleteQuery", assertionDataChange: "assertionDataChange", selectedQueryIndexChange: "selectedQueryIndexChange", activeTabChange: "activeTabChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "assertionsTable", first: true, predicate: ["assertionsTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n </h2>\n\n <!-- Environment Section (separator line only on bottom) -->\n <div class=\"cqa-flex cqa-w-full cqa-justify-between cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-gap-4 cqa-items-start\">\n <!-- DB Environment -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n DB Environment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n Uses Database environments from Environments.\n </p>\n </div>\n\n <!-- Normal Environment -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n Normal Environment\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getNormalEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n Uses Normal environments from Environments.\n </p>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Main Content: Two Column Layout -->\n <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n <!-- Left Panel: Query List -->\n <div\n class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n <div *ngFor=\"let query of queries; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n [class.cqa-border]=\"selectedQueryIndex === i\"\n [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n (click)=\"onSelectQuery(i)\"\n style=\"height: 49px; min-height: 49px;\">\n <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n <cqa-badge *ngIf=\"query.status\"\n [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n size=\"small\">\n </cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Right Panel: Query Editor -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n <div class=\"\">\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n </div>\n\n <div class=\"cqa-flex cqa-justify-between\">\n <!-- SQL Query Textarea -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n [textareaInlineStyle]=\"'padding: 1rem;'\"\n (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n <!-- Variable Input -->\n <div class=\"cqa-flex cqa-gap-4\">\n <div class=\"cqa-flex-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-input [placeholder]=\"'Variable name'\"\n [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n </p>\n </div>\n </div>\n <!-- Action Buttons (pinned to bottom) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n [iconColor]=\"'#414146'\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"text\"\n [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n fill=\"#6B7280\" />\n </svg>\n </cqa-button>\n <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n [iconColor]=\"'#FBFCFF'\">\n </cqa-button>\n </div>\n </div>\n </div>\n <!-- Results Section -->\n <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n <!-- Tabs -->\n <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n Output\n </button>\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n Verification\n </button>\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n Advanced\n </button>\n </div>\n\n <!-- Tab Content -->\n <div class=\"cqa-p-4\">\n <!-- Output Tab -->\n <div *ngIf=\"selectedTab === 'output'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n (clicked)=\"onCopyResults()\">\n </cqa-button>\n </div>\n\n <!-- Results Table -->\n <div *ngIf=\"getCurrentQueryResult().length > 0\" class=\"cqa-overflow-x-auto\">\n <table class=\"cqa-w-full cqa-border-collapse\">\n <thead>\n <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n <th *ngFor=\"let key of getTableColumns()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n {{ key }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of getCurrentQueryResult()\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n {{ row[key] }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"getCurrentQueryResult().length === 0\"\n class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n No results yet. Run a query to see results.\n </div>\n </div>\n\n <!-- Verification Tab -->\n <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n <!-- Header Section -->\n <div class=\"assertions-header\">\n <div class=\"header-content\">\n <h3 class=\"header-title\">Assertions</h3>\n <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n </div>\n <button \n mat-stroked-button \n color=\"primary\" \n class=\"add-assertion-button\"\n (click)=\"addAssertion()\">\n <mat-icon>add</mat-icon>\n Add Assertion\n </button>\n </div>\n\n <!-- Table Section -->\n <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n <div formArrayName=\"assertions\">\n <div class=\"table-scroll-container\">\n <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n <!-- JSONPath Column -->\n <ng-container matColumnDef=\"jsonPath\">\n <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <input \n matInput \n formControlName=\"jsonPath\"\n placeholder=\"username\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n getFormControlAt(i, 'jsonPath')?.touched\">\n JSONPath is required\n </mat-error>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Verification Type Column -->\n <ng-container matColumnDef=\"verificationType\">\n <th mat-header-cell *matHeaderCellDef>verificationType</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <mat-select formControlName=\"verificationType\">\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"not_equals\">Not Equals</mat-option>\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"not_contains\">Not Contains</mat-option>\n <mat-option value=\"greater_than\">Greater Than</mat-option>\n <mat-option value=\"less_than\">Less Than</mat-option>\n <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n <mat-option value=\"exists\">Exists</mat-option>\n <mat-option value=\"not_exists\">Not Exists</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Expected Type Column -->\n <ng-container matColumnDef=\"expectedType\">\n <th mat-header-cell *matHeaderCellDef>expectedType</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <mat-select \n formControlName=\"expectedType\"\n (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n <mat-option value=\"string\">String</mat-option>\n <mat-option value=\"number\">Number</mat-option>\n <mat-option value=\"boolean\">Boolean</mat-option>\n <mat-option value=\"object\">Object</mat-option>\n <mat-option value=\"array\">Array</mat-option>\n <mat-option value=\"null\">Null</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Expected Value Column -->\n <ng-container matColumnDef=\"expectedValue\">\n <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <!-- String, Array, Object Input -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <textarea \n *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n rows=\"3\"\n required></textarea>\n <input \n *ngIf=\"getExpectedType(i) === 'string'\"\n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n </mat-error>\n </mat-form-field>\n\n <!-- Null Type Display -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'null'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <input \n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n [disabled]=\"true\">\n </mat-form-field>\n\n <!-- Number Input -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'number'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <input \n matInput \n type=\"number\"\n formControlName=\"expectedValue\"\n placeholder=\"Expected Value in Number\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n </mat-form-field>\n\n <!-- Boolean Select -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'boolean'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <mat-select formControlName=\"expectedValue\" required>\n <mat-option value=\"true\">true</mat-option>\n <mat-option value=\"false\">false</mat-option>\n </mat-select>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <button \n mat-icon-button \n color=\"warn\"\n class=\"delete-button\"\n (click)=\"removeAssertion(i)\"\n [matTooltip]=\"'Delete assertion'\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n </div>\n </div>\n </form>\n </div>\n\n <div *ngIf=\"selectedTab === 'advanced'\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["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$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
|
|
37613
37615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, decorators: [{
|
|
37614
37616
|
type: Component,
|
|
37615
37617
|
args: [{ selector: 'cqa-step-builder-database', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n <!-- Header -->\n <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n </h2>\n\n <!-- Environment Section (separator line only on bottom) -->\n <div class=\"cqa-flex cqa-w-full cqa-justify-between cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-gap-4 cqa-items-start\">\n <!-- DB Environment -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n DB Environment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n Uses Database environments from Environments.\n </p>\n </div>\n\n <!-- Normal Environment -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n Normal Environment\n </label>\n <div class=\"cqa-min-w-0\">\n <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getNormalEnvironmentConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-gray-500\">\n Uses Normal environments from Environments.\n </p>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end cqa-mt-2\">\n <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n </cqa-button>\n </div>\n </div>\n\n <!-- Main Content: Two Column Layout -->\n <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n <!-- Left Panel: Query List -->\n <div\n class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n <div *ngFor=\"let query of queries; let i = index\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n [class.cqa-border]=\"selectedQueryIndex === i\"\n [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n (click)=\"onSelectQuery(i)\"\n style=\"height: 49px; min-height: 49px;\">\n <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n <cqa-badge *ngIf=\"query.status\"\n [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n size=\"small\">\n </cqa-badge>\n </div>\n </div>\n </div>\n\n <!-- Right Panel: Query Editor -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n <div class=\"\">\n <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n </div>\n\n <div class=\"cqa-flex cqa-justify-between\">\n <!-- SQL Query Textarea -->\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n [textareaInlineStyle]=\"'padding: 1rem;'\"\n (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n </cqa-custom-textarea>\n </div>\n </div>\n </div>\n\n <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n <!-- Variable Input -->\n <div class=\"cqa-flex cqa-gap-4\">\n <div class=\"cqa-flex-1\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n </label>\n <cqa-custom-input [placeholder]=\"'Variable name'\"\n [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n </p>\n </div>\n </div>\n <!-- Action Buttons (pinned to bottom) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n [iconColor]=\"'#414146'\">\n </cqa-button>\n <cqa-button type=\"button\" variant=\"text\"\n [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n fill=\"#6B7280\" />\n </svg>\n </cqa-button>\n <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n [iconColor]=\"'#FBFCFF'\">\n </cqa-button>\n </div>\n </div>\n </div>\n <!-- Results Section -->\n <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n <!-- Tabs -->\n <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n Output\n </button>\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n Verification\n </button>\n <button type=\"button\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n Advanced\n </button>\n </div>\n\n <!-- Tab Content -->\n <div class=\"cqa-p-4\">\n <!-- Output Tab -->\n <div *ngIf=\"selectedTab === 'output'\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n (clicked)=\"onCopyResults()\">\n </cqa-button>\n </div>\n\n <!-- Results Table -->\n <div *ngIf=\"getCurrentQueryResult().length > 0\" class=\"cqa-overflow-x-auto\">\n <table class=\"cqa-w-full cqa-border-collapse\">\n <thead>\n <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n <th *ngFor=\"let key of getTableColumns()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n {{ key }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let row of getCurrentQueryResult()\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n {{ row[key] }}\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n\n <div *ngIf=\"getCurrentQueryResult().length === 0\"\n class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n No results yet. Run a query to see results.\n </div>\n </div>\n\n <!-- Verification Tab -->\n <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n <!-- Header Section -->\n <div class=\"assertions-header\">\n <div class=\"header-content\">\n <h3 class=\"header-title\">Assertions</h3>\n <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n </div>\n <button \n mat-stroked-button \n color=\"primary\" \n class=\"add-assertion-button\"\n (click)=\"addAssertion()\">\n <mat-icon>add</mat-icon>\n Add Assertion\n </button>\n </div>\n\n <!-- Table Section -->\n <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n <div formArrayName=\"assertions\">\n <div class=\"table-scroll-container\">\n <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n <!-- JSONPath Column -->\n <ng-container matColumnDef=\"jsonPath\">\n <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <input \n matInput \n formControlName=\"jsonPath\"\n placeholder=\"username\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n getFormControlAt(i, 'jsonPath')?.touched\">\n JSONPath is required\n </mat-error>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Verification Type Column -->\n <ng-container matColumnDef=\"verificationType\">\n <th mat-header-cell *matHeaderCellDef>verificationType</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <mat-select formControlName=\"verificationType\">\n <mat-option value=\"equals\">Equals</mat-option>\n <mat-option value=\"not_equals\">Not Equals</mat-option>\n <mat-option value=\"contains\">Contains</mat-option>\n <mat-option value=\"not_contains\">Not Contains</mat-option>\n <mat-option value=\"greater_than\">Greater Than</mat-option>\n <mat-option value=\"less_than\">Less Than</mat-option>\n <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n <mat-option value=\"exists\">Exists</mat-option>\n <mat-option value=\"not_exists\">Not Exists</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Expected Type Column -->\n <ng-container matColumnDef=\"expectedType\">\n <th mat-header-cell *matHeaderCellDef>expectedType</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n <mat-select \n formControlName=\"expectedType\"\n (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n <mat-option value=\"string\">String</mat-option>\n <mat-option value=\"number\">Number</mat-option>\n <mat-option value=\"boolean\">Boolean</mat-option>\n <mat-option value=\"object\">Object</mat-option>\n <mat-option value=\"array\">Array</mat-option>\n <mat-option value=\"null\">Null</mat-option>\n </mat-select>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Expected Value Column -->\n <ng-container matColumnDef=\"expectedValue\">\n <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <ng-container [formGroupName]=\"i\">\n <!-- String, Array, Object Input -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <textarea \n *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n rows=\"3\"\n required></textarea>\n <input \n *ngIf=\"getExpectedType(i) === 'string'\"\n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n </mat-error>\n </mat-form-field>\n\n <!-- Null Type Display -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'null'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <input \n matInput \n formControlName=\"expectedValue\"\n [placeholder]=\"getExpectedValuePlaceholder(i)\"\n [disabled]=\"true\">\n </mat-form-field>\n\n <!-- Number Input -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'number'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <input \n matInput \n type=\"number\"\n formControlName=\"expectedValue\"\n placeholder=\"Expected Value in Number\"\n required>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n </mat-form-field>\n\n <!-- Boolean Select -->\n <mat-form-field \n *ngIf=\"getExpectedType(i) === 'boolean'\"\n appearance=\"outline\" \n class=\"full-width-field\">\n <mat-select formControlName=\"expectedValue\" required>\n <mat-option value=\"true\">true</mat-option>\n <mat-option value=\"false\">false</mat-option>\n </mat-select>\n <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n getFormControlAt(i, 'expectedValue')?.touched\">\n Expected value is required\n </mat-error>\n </mat-form-field>\n </ng-container>\n </td>\n </ng-container>\n\n <!-- Actions Column -->\n <ng-container matColumnDef=\"actions\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let assertion; let i = index\">\n <button \n mat-icon-button \n color=\"warn\"\n class=\"delete-button\"\n (click)=\"removeAssertion(i)\"\n [matTooltip]=\"'Delete assertion'\">\n <mat-icon>delete</mat-icon>\n </button>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n </table>\n </div>\n\n <!-- Empty State -->\n <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n </div>\n </div>\n </form>\n </div>\n\n <div *ngIf=\"selectedTab === 'advanced'\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n [disabled]=\"!isFormValid()\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n</div>", styles: [] }]
|
|
@@ -38036,7 +38038,7 @@ class StepBuilderAiAgentComponent {
|
|
|
38036
38038
|
}
|
|
38037
38039
|
}
|
|
38038
38040
|
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 });
|
|
38039
|
-
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", 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 <!-- 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 -->\n <div 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]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\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: ["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", "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"] }] });
|
|
38041
|
+
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", 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 <!-- 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 -->\n <div 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]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\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", "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"] }] });
|
|
38040
38042
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
|
|
38041
38043
|
type: Component,
|
|
38042
38044
|
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 <!-- 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 -->\n <div 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]=\"getEnvironmentConfig()\">\n </cqa-dynamic-select>\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: [] }]
|
|
@@ -38353,7 +38355,7 @@ class StepBuilderCustomCodeComponent {
|
|
|
38353
38355
|
}
|
|
38354
38356
|
}
|
|
38355
38357
|
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 });
|
|
38356
|
-
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: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: 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", "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"] }] });
|
|
38358
|
+
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$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: 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", "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"] }] });
|
|
38357
38359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
|
|
38358
38360
|
type: Component,
|
|
38359
38361
|
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: [] }]
|
|
@@ -38561,7 +38563,7 @@ class StepBuilderDocumentGenerationTemplateStepComponent {
|
|
|
38561
38563
|
}
|
|
38562
38564
|
}
|
|
38563
38565
|
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 });
|
|
38564
|
-
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: ["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"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "cqa-file-upload", inputs: ["accept", "acceptedFileTypes", "disabled"], outputs: ["fileSelected", "cancelled"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
38566
|
+
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"], outputs: ["valueChange"] }, { type: FileUploadComponent, selector: "cqa-file-upload", inputs: ["accept", "acceptedFileTypes", "disabled"], outputs: ["fileSelected", "cancelled"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
38565
38567
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentGenerationTemplateStepComponent, decorators: [{
|
|
38566
38568
|
type: Component,
|
|
38567
38569
|
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: [] }]
|
|
@@ -39000,7 +39002,7 @@ class StepBuilderDocumentComponent {
|
|
|
39000
39002
|
}
|
|
39001
39003
|
}
|
|
39002
39004
|
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 });
|
|
39003
|
-
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</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-middle 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-middle 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 class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle 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 mapping'\">\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: ["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$3.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", "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"] }] });
|
|
39005
|
+
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</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-middle 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-middle 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 class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle 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 mapping'\">\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$3.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", "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"] }] });
|
|
39004
39006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
|
|
39005
39007
|
type: Component,
|
|
39006
39008
|
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</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-middle 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-middle 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 class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle 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 mapping'\">\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" }]
|
|
@@ -40242,7 +40244,7 @@ class TestCaseDetailsEditComponent {
|
|
|
40242
40244
|
}
|
|
40243
40245
|
}
|
|
40244
40246
|
TestCaseDetailsEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
40245
|
-
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" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, 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 <!-- 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\">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 <cqa-custom-input\n type=\"number\"\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\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 <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 <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\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 </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 (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: ["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", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40247
|
+
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" }, outputs: { save: "save", cancel: "cancel", selectSearch: "selectSearch", selectLoadMore: "selectLoadMore", selectOpened: "selectOpened", selectionChange: "selectionChange", labelAdded: "labelAdded" }, 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 <!-- 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\">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 <cqa-custom-input\n type=\"number\"\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\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 <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 <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\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 </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 (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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
40246
40248
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsEditComponent, decorators: [{
|
|
40247
40249
|
type: Component,
|
|
40248
40250
|
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 <!-- 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\">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 <cqa-custom-input\n type=\"number\"\n label=\"Test Case Timeout (minutes)\"\n [value]=\"testCaseTimeout\"\n (valueChange)=\"testCaseTimeout = onlyDigits($event)\"\n placeholder=\"30\"\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 <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 <div class=\"cqa-min-w-0 cqa-w-full\">\n <cqa-dynamic-select\n [form]=\"editForm\"\n [config]=\"getConfigForSelect('defaultViewport', defaultViewportSelectConfig)\"\n (searchChange)=\"onSelectSearch($event)\"\n (loadMore)=\"onSelectLoadMore($event)\"\n (selectClick)=\"onSelectOpened('defaultViewport')\"\n (selectionChange)=\"onSelectionChange($event)\"\n class=\"cqa-w-full\"></cqa-dynamic-select>\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 </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 (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" }]
|
|
@@ -40652,7 +40654,7 @@ class StepBuilderGroupComponent {
|
|
|
40652
40654
|
}
|
|
40653
40655
|
}
|
|
40654
40656
|
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 });
|
|
40655
|
-
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" }, 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 <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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
40657
|
+
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" }, 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 <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: 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", "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"] }] });
|
|
40656
40658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, decorators: [{
|
|
40657
40659
|
type: Component,
|
|
40658
40660
|
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 <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: [] }]
|
|
@@ -41109,7 +41111,7 @@ class StepDetailsDrawerComponent {
|
|
|
41109
41111
|
}
|
|
41110
41112
|
}
|
|
41111
41113
|
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 });
|
|
41112
|
-
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: ["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", "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 });
|
|
41114
|
+
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", "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 });
|
|
41113
41115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepDetailsDrawerComponent, decorators: [{
|
|
41114
41116
|
type: Component,
|
|
41115
41117
|
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>" }]
|
|
@@ -42513,6 +42515,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42513
42515
|
type: Output
|
|
42514
42516
|
}] } });
|
|
42515
42517
|
|
|
42518
|
+
class QuestionnaireListComponent {
|
|
42519
|
+
constructor() {
|
|
42520
|
+
this.items = [];
|
|
42521
|
+
this.defaultPageSize = 6;
|
|
42522
|
+
this.pageSizeOptions = [6, 10, 20, 50];
|
|
42523
|
+
this.inputPlaceholder = 'Type your answer here...';
|
|
42524
|
+
this.answerChange = new EventEmitter();
|
|
42525
|
+
this.currentPage = 1;
|
|
42526
|
+
this.pageSize = 6;
|
|
42527
|
+
}
|
|
42528
|
+
ngOnChanges(changes) {
|
|
42529
|
+
if (changes['defaultPageSize'] && changes['defaultPageSize'].currentValue) {
|
|
42530
|
+
this.pageSize = this.defaultPageSize;
|
|
42531
|
+
this.currentPage = 1;
|
|
42532
|
+
}
|
|
42533
|
+
}
|
|
42534
|
+
get totalItems() {
|
|
42535
|
+
return this.items.length;
|
|
42536
|
+
}
|
|
42537
|
+
get totalPages() {
|
|
42538
|
+
return Math.max(1, Math.ceil(this.totalItems / this.pageSize));
|
|
42539
|
+
}
|
|
42540
|
+
get startIndex() {
|
|
42541
|
+
return (this.currentPage - 1) * this.pageSize;
|
|
42542
|
+
}
|
|
42543
|
+
get endIndex() {
|
|
42544
|
+
return Math.min(this.startIndex + this.pageSize, this.totalItems);
|
|
42545
|
+
}
|
|
42546
|
+
get visibleItems() {
|
|
42547
|
+
return this.items.slice(this.startIndex, this.endIndex);
|
|
42548
|
+
}
|
|
42549
|
+
get isPrevDisabled() {
|
|
42550
|
+
return this.currentPage === 1;
|
|
42551
|
+
}
|
|
42552
|
+
get isNextDisabled() {
|
|
42553
|
+
return this.currentPage === this.totalPages;
|
|
42554
|
+
}
|
|
42555
|
+
onPageSizeChange(size) {
|
|
42556
|
+
this.pageSize = size;
|
|
42557
|
+
this.currentPage = 1;
|
|
42558
|
+
}
|
|
42559
|
+
prevPage() {
|
|
42560
|
+
if (!this.isPrevDisabled) {
|
|
42561
|
+
this.currentPage--;
|
|
42562
|
+
}
|
|
42563
|
+
}
|
|
42564
|
+
nextPage() {
|
|
42565
|
+
if (!this.isNextDisabled) {
|
|
42566
|
+
this.currentPage++;
|
|
42567
|
+
}
|
|
42568
|
+
}
|
|
42569
|
+
onAnswerInput(id, value) {
|
|
42570
|
+
this.answerChange.emit({ id, value });
|
|
42571
|
+
}
|
|
42572
|
+
getInputId(id) {
|
|
42573
|
+
return `question-input-${id}`;
|
|
42574
|
+
}
|
|
42575
|
+
trackById(_index, item) {
|
|
42576
|
+
return item.id;
|
|
42577
|
+
}
|
|
42578
|
+
}
|
|
42579
|
+
QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42580
|
+
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: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\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 <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\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=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n", styles: [":host{display:block;width:100%}.ql-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ql-header{margin-bottom:20px}.ql-title{font-size:16px;font-weight:600;color:#1a1d23;margin:0 0 4px;line-height:1.4}.ql-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0;line-height:1.5}.ql-body{display:flex;flex-direction:column}.ql-item{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #f3f4f6}.ql-item.ql-item--last{border-bottom:none;margin-bottom:0}.ql-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef0ff;color:#4f46e5;font-size:12px;font-weight:600;flex-shrink:0}.ql-label{display:block;font-size:13px;font-weight:500;color:#374151}.ql-input{width:100%}.ql-empty{padding:24px 0;font-size:13px;color:#6b7280;text-align:center}.ql-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:1px solid #f3f4f6}.ql-footer-left{display:flex;align-items:center}.ql-footer-label{font-size:13px;color:#6b7280;margin-right:8px}.ql-page-size-select{width:72px;height:28px;border:1px solid #e5e7eb;border-radius:4px;padding:0 6px;font-size:13px;color:#374151;background:#ffffff;cursor:pointer;outline:none}.ql-page-size-select:focus{border-color:#6366f1}.ql-footer-right{display:flex;align-items:center;gap:4px}.ql-range-label{font-size:13px;color:#374151;margin-right:8px}.ql-nav-btn{width:28px;height:28px}\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", "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: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
42581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
42582
|
+
type: Component,
|
|
42583
|
+
args: [{ selector: 'cqa-questionnaire-list', styles: [`
|
|
42584
|
+
:host { display: block; width: 100%; }
|
|
42585
|
+
.ql-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
|
|
42586
|
+
.ql-header { margin-bottom: 20px; }
|
|
42587
|
+
.ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
|
|
42588
|
+
.ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
|
|
42589
|
+
.ql-body { display: flex; flex-direction: column; }
|
|
42590
|
+
.ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
|
|
42591
|
+
.ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
|
|
42592
|
+
.ql-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef0ff; color: #4f46e5; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
|
42593
|
+
.ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
|
|
42594
|
+
.ql-input { width: 100%; }
|
|
42595
|
+
.ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
|
|
42596
|
+
.ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
|
|
42597
|
+
.ql-footer-left { display: flex; align-items: center; }
|
|
42598
|
+
.ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
|
|
42599
|
+
.ql-page-size-select { width: 72px; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 6px; font-size: 13px; color: #374151; background: #ffffff; cursor: pointer; outline: none; }
|
|
42600
|
+
.ql-page-size-select:focus { border-color: #6366f1; }
|
|
42601
|
+
.ql-footer-right { display: flex; align-items: center; gap: 4px; }
|
|
42602
|
+
.ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
|
|
42603
|
+
.ql-nav-btn { width: 28px; height: 28px; }
|
|
42604
|
+
`], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\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 <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\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=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n" }]
|
|
42605
|
+
}], propDecorators: { items: [{
|
|
42606
|
+
type: Input
|
|
42607
|
+
}], defaultPageSize: [{
|
|
42608
|
+
type: Input
|
|
42609
|
+
}], pageSizeOptions: [{
|
|
42610
|
+
type: Input
|
|
42611
|
+
}], inputPlaceholder: [{
|
|
42612
|
+
type: Input
|
|
42613
|
+
}], answerChange: [{
|
|
42614
|
+
type: Output
|
|
42615
|
+
}] } });
|
|
42616
|
+
|
|
42617
|
+
/** Maps known eventType strings to Material icon names. */
|
|
42618
|
+
const EVENT_ICON_MAP = {
|
|
42619
|
+
initial_upload: 'upload',
|
|
42620
|
+
ai_analysis_completed: 'description',
|
|
42621
|
+
test_cases_generated: 'edit',
|
|
42622
|
+
questionnaire_generated: 'assignment',
|
|
42623
|
+
};
|
|
42624
|
+
const DEFAULT_ICON = 'description';
|
|
42625
|
+
class ChangeHistoryComponent {
|
|
42626
|
+
constructor() {
|
|
42627
|
+
this.items = [];
|
|
42628
|
+
this.title = 'Change History';
|
|
42629
|
+
this.viewDetails = new EventEmitter();
|
|
42630
|
+
this.revert = new EventEmitter();
|
|
42631
|
+
}
|
|
42632
|
+
getEventIcon(eventType) {
|
|
42633
|
+
return EVENT_ICON_MAP[eventType] ?? DEFAULT_ICON;
|
|
42634
|
+
}
|
|
42635
|
+
onViewDetails(id) {
|
|
42636
|
+
this.viewDetails.emit(id);
|
|
42637
|
+
}
|
|
42638
|
+
onRevert(id) {
|
|
42639
|
+
this.revert.emit(id);
|
|
42640
|
+
}
|
|
42641
|
+
trackById(_index, item) {
|
|
42642
|
+
return item.id;
|
|
42643
|
+
}
|
|
42644
|
+
}
|
|
42645
|
+
ChangeHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChangeHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42646
|
+
ChangeHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChangeHistoryComponent, selector: "cqa-change-history", inputs: { items: "items", title: "title" }, outputs: { viewDetails: "viewDetails", revert: "revert" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n", styles: [":host{display:block;width:100%}.ch-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ch-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px}.ch-header-icon{display:inline-flex;align-items:center;color:#6b7280;flex-shrink:0}.ch-header-icon mat-icon{font-size:20px;width:20px;height:20px}.ch-title{font-size:15px;font-weight:600;color:#1a1d23;margin:0 0 2px;line-height:1.4}.ch-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0}.ch-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.ch-empty p{font-size:14px;color:#9ca3af;margin:0}.ch-empty-icon{font-size:32px;width:32px;height:32px;color:#d1d5db}.ch-timeline{list-style:none;margin:0;padding:0}.ch-event{display:flex;align-items:flex-start}.ch-track{width:24px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.ch-track:after{content:\"\";width:2px;flex:1;background-color:#e5e7eb;margin-top:4px}.ch-event--last .ch-track:after{display:none}.ch-dot{display:block;width:10px;height:10px;border-radius:50%;background:#ffffff;border:2px solid #d1d5db;margin-top:4px;z-index:1;flex-shrink:0}.ch-card{display:flex;align-items:flex-start;gap:12px;padding:0 0 28px 12px;width:100%}.ch-event-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#f3f4f6;flex-shrink:0}.ch-event-icon mat-icon{font-size:16px;width:16px;height:16px;color:#6b7280}.ch-event-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ch-event-title{font-size:14px;font-weight:600;color:#1a1d23}.ch-event-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280}.ch-meta-icon{font-size:12px;width:12px;height:12px;color:#9ca3af}.ch-meta-actor,.ch-meta-timestamp{font-size:12px;color:#6b7280}.ch-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.ch-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.ch-badge--added{background:#dcfce7;color:#15803d}.ch-badge--modified{background:#fef9c3;color:#854d0e}.ch-badge--removed{background:#fee2e2;color:#b91c1c}.ch-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
42647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChangeHistoryComponent, decorators: [{
|
|
42648
|
+
type: Component,
|
|
42649
|
+
args: [{ selector: 'cqa-change-history', styles: [`
|
|
42650
|
+
:host { display: block; width: 100%; }
|
|
42651
|
+
.ch-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
|
|
42652
|
+
.ch-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
|
|
42653
|
+
.ch-header-icon { display: inline-flex; align-items: center; color: #6b7280; flex-shrink: 0; }
|
|
42654
|
+
.ch-header-icon mat-icon { font-size: 20px; width: 20px; height: 20px; }
|
|
42655
|
+
.ch-title { font-size: 15px; font-weight: 600; color: #1a1d23; margin: 0 0 2px 0; line-height: 1.4; }
|
|
42656
|
+
.ch-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; }
|
|
42657
|
+
.ch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; }
|
|
42658
|
+
.ch-empty p { font-size: 14px; color: #9ca3af; margin: 0; }
|
|
42659
|
+
.ch-empty-icon { font-size: 32px; width: 32px; height: 32px; color: #d1d5db; }
|
|
42660
|
+
.ch-timeline { list-style: none; margin: 0; padding: 0; }
|
|
42661
|
+
.ch-event { display: flex; align-items: flex-start; }
|
|
42662
|
+
.ch-track { width: 24px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
|
|
42663
|
+
.ch-track::after { content: ''; width: 2px; flex: 1; background-color: #e5e7eb; margin-top: 4px; }
|
|
42664
|
+
.ch-event--last .ch-track::after { display: none; }
|
|
42665
|
+
.ch-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #d1d5db; margin-top: 4px; z-index: 1; flex-shrink: 0; }
|
|
42666
|
+
.ch-card { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 28px 12px; width: 100%; }
|
|
42667
|
+
.ch-event-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #f3f4f6; flex-shrink: 0; }
|
|
42668
|
+
.ch-event-icon mat-icon { font-size: 16px; width: 16px; height: 16px; color: #6b7280; }
|
|
42669
|
+
.ch-event-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
42670
|
+
.ch-event-title { font-size: 14px; font-weight: 600; color: #1a1d23; }
|
|
42671
|
+
.ch-event-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
|
|
42672
|
+
.ch-meta-icon { font-size: 12px; width: 12px; height: 12px; color: #9ca3af; }
|
|
42673
|
+
.ch-meta-actor, .ch-meta-timestamp { font-size: 12px; color: #6b7280; }
|
|
42674
|
+
.ch-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
|
|
42675
|
+
.ch-badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
|
|
42676
|
+
.ch-badge--added { background: #dcfce7; color: #15803d; }
|
|
42677
|
+
.ch-badge--modified { background: #fef9c3; color: #854d0e; }
|
|
42678
|
+
.ch-badge--removed { background: #fee2e2; color: #b91c1c; }
|
|
42679
|
+
.ch-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
|
|
42680
|
+
`], host: { class: 'cqa-ui-root' }, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n" }]
|
|
42681
|
+
}], propDecorators: { items: [{
|
|
42682
|
+
type: Input
|
|
42683
|
+
}], title: [{
|
|
42684
|
+
type: Input
|
|
42685
|
+
}], viewDetails: [{
|
|
42686
|
+
type: Output
|
|
42687
|
+
}], revert: [{
|
|
42688
|
+
type: Output
|
|
42689
|
+
}] } });
|
|
42690
|
+
|
|
42516
42691
|
class VersionHistoryListComponent {
|
|
42517
42692
|
constructor() {
|
|
42518
42693
|
this.versions = [];
|
|
@@ -42885,10 +43060,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
42885
43060
|
}
|
|
42886
43061
|
}
|
|
42887
43062
|
NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42888
|
-
NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button>\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field) }}</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\">\n <div class=\"cqa-nvh-obj-header\">\n <span></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", styles: [".cqa-nvh-detail-header{padding:16px 0 12px;border-bottom:1px solid #E4E7EC;margin-bottom:16px}.cqa-nvh-detail-version-number{font-size:18px;font-weight:600;color:#101828;margin:0}.cqa-nvh-detail-meta{font-size:13px;color:#667085}.cqa-nvh-detail-summary{font-size:13px;color:#344054;margin-top:4px}.cqa-nvh-detail-actions{display:flex;gap:8px;flex-shrink:0}.cqa-nvh-detail-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cqa-nvh-summary-chip{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;border:1px solid}.cqa-nvh-summary-chip--added{background-color:#ecfdf3;color:#027a48;border-color:#a7f3d0}.cqa-nvh-summary-chip--modified{background-color:#fffaeb;color:#b54708;border-color:#fedf89}.cqa-nvh-summary-chip--removed{background-color:#fef3f2;color:#b42318;border-color:#fecdca}.cqa-nvh-summary-chip--unchanged{background-color:#f2f4f7;color:#667085;border-color:#e4e7ec}.cqa-nvh-section-header{display:flex;align-items:center;gap:8px;margin:20px 0 10px}.cqa-nvh-section-label{font-size:14px;font-weight:600;color:#344054}.cqa-nvh-changes-list{display:flex;flex-direction:column;gap:8px}.cqa-nvh-change-card{border:1px solid #E4E7EC;border-radius:8px;padding:12px 16px;background:#fff}.cqa-nvh-change-card--added{border-left:3px solid #027A48}.cqa-nvh-change-card--removed{border-left:3px solid #B42318}.cqa-nvh-step-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cqa-nvh-step-prefix{font-size:13px;font-weight:600;color:#344054;white-space:nowrap}.cqa-nvh-step-action{font-size:14px;line-height:18px;color:#111827;min-width:0;flex:1}.cqa-nvh-field-diff{padding:8px 0;border-top:1px solid #F2F4F7}.cqa-nvh-field-diff:first-child{border-top:none}.cqa-nvh-change-field-label{font-size:12px;font-weight:600;color:#667085;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.cqa-nvh-before-after{display:flex;flex-direction:column;gap:4px}.cqa-nvh-value-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.cqa-nvh-value-row--before .cqa-nvh-value-text{color:#b42318}.cqa-nvh-value-row--after .cqa-nvh-value-text{color:#027a48}.cqa-nvh-value-text{font-size:13px;color:#344054;word-break:break-word;line-height:1.5}.cqa-nvh-obj-table{width:100%;border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;font-size:13px}.cqa-nvh-obj-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:#F9FAFB;border-bottom:1px solid #E4E7EC;padding:6px 10px}.cqa-nvh-obj-col-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.cqa-nvh-obj-col-label--before{color:#b42318}.cqa-nvh-obj-col-label--after{color:#027a48}.cqa-nvh-obj-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 10px;border-bottom:1px solid #F2F4F7;align-items:baseline}.cqa-nvh-obj-row:last-child{border-bottom:none}.cqa-nvh-obj-row--changed{background:#FFFAEB}.cqa-nvh-obj-row--changed .cqa-nvh-obj-key{font-weight:600;color:#101828}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--before{color:#b42318}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--after{color:#027a48}.cqa-nvh-obj-key{font-size:12px;color:#667085;font-weight:500;word-break:break-all}.cqa-nvh-obj-val{font-size:12px;color:#344054;word-break:break-all;white-space:pre-line}.cqa-nvh-detail-empty{padding:40px 0;text-align:center}.cqa-nvh-detail-no-selection{display:flex;align-items:center;justify-content:center;height:200px;color:#98a2b3;font-size:14px}\n"], components: [{ 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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
|
|
43063
|
+
NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button>\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field) }}</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n <div class=\"cqa-nvh-obj-header\">\n <span></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", styles: [".cqa-nvh-detail-header{padding:16px 0 12px;border-bottom:1px solid #E4E7EC;margin-bottom:16px}.cqa-nvh-detail-version-number{font-size:18px;font-weight:600;color:#101828;margin:0}.cqa-nvh-detail-meta{font-size:13px;color:#667085}.cqa-nvh-detail-summary{font-size:13px;color:#344054;margin-top:4px}.cqa-nvh-detail-actions{display:flex;gap:8px;flex-shrink:0}.cqa-nvh-detail-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cqa-nvh-summary-chip{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;border:1px solid}.cqa-nvh-summary-chip--added{background-color:#ecfdf3;color:#027a48;border-color:#a7f3d0}.cqa-nvh-summary-chip--modified{background-color:#fffaeb;color:#b54708;border-color:#fedf89}.cqa-nvh-summary-chip--removed{background-color:#fef3f2;color:#b42318;border-color:#fecdca}.cqa-nvh-summary-chip--unchanged{background-color:#f2f4f7;color:#667085;border-color:#e4e7ec}.cqa-nvh-section-header{display:flex;align-items:center;gap:8px;margin:20px 0 10px}.cqa-nvh-section-label{font-size:14px;font-weight:600;color:#344054}.cqa-nvh-changes-list{display:flex;flex-direction:column;gap:8px}.cqa-nvh-change-card{border:1px solid #E4E7EC;border-radius:8px;padding:12px 16px;background:#fff}.cqa-nvh-change-card--added{border-left:3px solid #027A48}.cqa-nvh-change-card--removed{border-left:3px solid #B42318}.cqa-nvh-step-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cqa-nvh-step-prefix{font-size:14px;font-weight:600;color:#344054;white-space:nowrap}.cqa-nvh-step-action{font-size:14px;line-height:18px;color:#111827;min-width:0;flex:1;display:flex;align-items:center}.cqa-nvh-field-diff{padding:8px 0;border-top:1px solid #F2F4F7}.cqa-nvh-field-diff:first-child{border-top:none}.cqa-nvh-change-field-label{font-size:12px;font-weight:600;color:#667085;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.cqa-nvh-before-after{display:flex;flex-direction:column;gap:4px}.cqa-nvh-value-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.cqa-nvh-value-row--before .cqa-nvh-value-text{color:#b42318}.cqa-nvh-value-row--after .cqa-nvh-value-text{color:#027a48}.cqa-nvh-value-text{font-size:13px;color:#344054;word-break:break-word;line-height:1.5}.cqa-nvh-obj-table{width:100%;border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;font-size:13px}.cqa-nvh-obj-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:#F9FAFB;border-bottom:1px solid #E4E7EC;padding:6px 10px}.cqa-nvh-obj-col-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.cqa-nvh-obj-col-label--before{color:#b42318}.cqa-nvh-obj-col-label--after{color:#027a48}.cqa-nvh-obj-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 10px;border-bottom:1px solid #F2F4F7;align-items:baseline}.cqa-nvh-obj-row:last-child{border-bottom:none}.cqa-nvh-obj-row--changed{background:#FFFAEB}.cqa-nvh-obj-row--changed .cqa-nvh-obj-key{font-weight:600;color:#101828}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--before{color:#b42318}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--after{color:#027a48}.cqa-nvh-obj-key{font-size:12px;color:#667085;font-weight:500;word-break:break-all}.cqa-nvh-obj-val{font-size:12px;color:#344054;word-break:break-all;white-space:pre-line}.cqa-nvh-detail-empty{padding:40px 0;text-align:center}.cqa-nvh-detail-no-selection{display:flex;align-items:center;justify-content:center;height:200px;color:#98a2b3;font-size:14px}\n"], components: [{ 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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
|
|
42889
43064
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
|
|
42890
43065
|
type: Component,
|
|
42891
|
-
args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button>\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field) }}</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\">\n <div class=\"cqa-nvh-obj-header\">\n <span></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", styles: [".cqa-nvh-detail-header{padding:16px 0 12px;border-bottom:1px solid #E4E7EC;margin-bottom:16px}.cqa-nvh-detail-version-number{font-size:18px;font-weight:600;color:#101828;margin:0}.cqa-nvh-detail-meta{font-size:13px;color:#667085}.cqa-nvh-detail-summary{font-size:13px;color:#344054;margin-top:4px}.cqa-nvh-detail-actions{display:flex;gap:8px;flex-shrink:0}.cqa-nvh-detail-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cqa-nvh-summary-chip{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;border:1px solid}.cqa-nvh-summary-chip--added{background-color:#ecfdf3;color:#027a48;border-color:#a7f3d0}.cqa-nvh-summary-chip--modified{background-color:#fffaeb;color:#b54708;border-color:#fedf89}.cqa-nvh-summary-chip--removed{background-color:#fef3f2;color:#b42318;border-color:#fecdca}.cqa-nvh-summary-chip--unchanged{background-color:#f2f4f7;color:#667085;border-color:#e4e7ec}.cqa-nvh-section-header{display:flex;align-items:center;gap:8px;margin:20px 0 10px}.cqa-nvh-section-label{font-size:14px;font-weight:600;color:#344054}.cqa-nvh-changes-list{display:flex;flex-direction:column;gap:8px}.cqa-nvh-change-card{border:1px solid #E4E7EC;border-radius:8px;padding:12px 16px;background:#fff}.cqa-nvh-change-card--added{border-left:3px solid #027A48}.cqa-nvh-change-card--removed{border-left:3px solid #B42318}.cqa-nvh-step-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cqa-nvh-step-prefix{font-size:13px;font-weight:600;color:#344054;white-space:nowrap}.cqa-nvh-step-action{font-size:14px;line-height:18px;color:#111827;min-width:0;flex:1}.cqa-nvh-field-diff{padding:8px 0;border-top:1px solid #F2F4F7}.cqa-nvh-field-diff:first-child{border-top:none}.cqa-nvh-change-field-label{font-size:12px;font-weight:600;color:#667085;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.cqa-nvh-before-after{display:flex;flex-direction:column;gap:4px}.cqa-nvh-value-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.cqa-nvh-value-row--before .cqa-nvh-value-text{color:#b42318}.cqa-nvh-value-row--after .cqa-nvh-value-text{color:#027a48}.cqa-nvh-value-text{font-size:13px;color:#344054;word-break:break-word;line-height:1.5}.cqa-nvh-obj-table{width:100%;border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;font-size:13px}.cqa-nvh-obj-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:#F9FAFB;border-bottom:1px solid #E4E7EC;padding:6px 10px}.cqa-nvh-obj-col-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.cqa-nvh-obj-col-label--before{color:#b42318}.cqa-nvh-obj-col-label--after{color:#027a48}.cqa-nvh-obj-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 10px;border-bottom:1px solid #F2F4F7;align-items:baseline}.cqa-nvh-obj-row:last-child{border-bottom:none}.cqa-nvh-obj-row--changed{background:#FFFAEB}.cqa-nvh-obj-row--changed .cqa-nvh-obj-key{font-weight:600;color:#101828}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--before{color:#b42318}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--after{color:#027a48}.cqa-nvh-obj-key{font-size:12px;color:#667085;font-weight:500;word-break:break-all}.cqa-nvh-obj-val{font-size:12px;color:#344054;word-break:break-all;white-space:pre-line}.cqa-nvh-detail-empty{padding:40px 0;text-align:center}.cqa-nvh-detail-no-selection{display:flex;align-items:center;justify-content:center;height:200px;color:#98a2b3;font-size:14px}\n"] }]
|
|
43066
|
+
args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button>\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field) }}</span>\n </div>\n </div>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n <div class=\"cqa-nvh-obj-header\">\n <span></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", styles: [".cqa-nvh-detail-header{padding:16px 0 12px;border-bottom:1px solid #E4E7EC;margin-bottom:16px}.cqa-nvh-detail-version-number{font-size:18px;font-weight:600;color:#101828;margin:0}.cqa-nvh-detail-meta{font-size:13px;color:#667085}.cqa-nvh-detail-summary{font-size:13px;color:#344054;margin-top:4px}.cqa-nvh-detail-actions{display:flex;gap:8px;flex-shrink:0}.cqa-nvh-detail-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cqa-nvh-summary-chip{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;border:1px solid}.cqa-nvh-summary-chip--added{background-color:#ecfdf3;color:#027a48;border-color:#a7f3d0}.cqa-nvh-summary-chip--modified{background-color:#fffaeb;color:#b54708;border-color:#fedf89}.cqa-nvh-summary-chip--removed{background-color:#fef3f2;color:#b42318;border-color:#fecdca}.cqa-nvh-summary-chip--unchanged{background-color:#f2f4f7;color:#667085;border-color:#e4e7ec}.cqa-nvh-section-header{display:flex;align-items:center;gap:8px;margin:20px 0 10px}.cqa-nvh-section-label{font-size:14px;font-weight:600;color:#344054}.cqa-nvh-changes-list{display:flex;flex-direction:column;gap:8px}.cqa-nvh-change-card{border:1px solid #E4E7EC;border-radius:8px;padding:12px 16px;background:#fff}.cqa-nvh-change-card--added{border-left:3px solid #027A48}.cqa-nvh-change-card--removed{border-left:3px solid #B42318}.cqa-nvh-step-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cqa-nvh-step-prefix{font-size:14px;font-weight:600;color:#344054;white-space:nowrap}.cqa-nvh-step-action{font-size:14px;line-height:18px;color:#111827;min-width:0;flex:1;display:flex;align-items:center}.cqa-nvh-field-diff{padding:8px 0;border-top:1px solid #F2F4F7}.cqa-nvh-field-diff:first-child{border-top:none}.cqa-nvh-change-field-label{font-size:12px;font-weight:600;color:#667085;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.cqa-nvh-before-after{display:flex;flex-direction:column;gap:4px}.cqa-nvh-value-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.cqa-nvh-value-row--before .cqa-nvh-value-text{color:#b42318}.cqa-nvh-value-row--after .cqa-nvh-value-text{color:#027a48}.cqa-nvh-value-text{font-size:13px;color:#344054;word-break:break-word;line-height:1.5}.cqa-nvh-obj-table{width:100%;border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;font-size:13px}.cqa-nvh-obj-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:#F9FAFB;border-bottom:1px solid #E4E7EC;padding:6px 10px}.cqa-nvh-obj-col-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.cqa-nvh-obj-col-label--before{color:#b42318}.cqa-nvh-obj-col-label--after{color:#027a48}.cqa-nvh-obj-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 10px;border-bottom:1px solid #F2F4F7;align-items:baseline}.cqa-nvh-obj-row:last-child{border-bottom:none}.cqa-nvh-obj-row--changed{background:#FFFAEB}.cqa-nvh-obj-row--changed .cqa-nvh-obj-key{font-weight:600;color:#101828}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--before{color:#b42318}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--after{color:#027a48}.cqa-nvh-obj-key{font-size:12px;color:#667085;font-weight:500;word-break:break-all}.cqa-nvh-obj-val{font-size:12px;color:#344054;word-break:break-all;white-space:pre-line}.cqa-nvh-detail-empty{padding:40px 0;text-align:center}.cqa-nvh-detail-no-selection{display:flex;align-items:center;justify-content:center;height:200px;color:#98a2b3;font-size:14px}\n"] }]
|
|
42892
43067
|
}], propDecorators: { selectedVersion: [{
|
|
42893
43068
|
type: Input
|
|
42894
43069
|
}], selectedIsCurrent: [{
|
|
@@ -43057,6 +43232,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
43057
43232
|
AdvancedVariablesFormComponent,
|
|
43058
43233
|
StepDetailsModalComponent,
|
|
43059
43234
|
SafeHtmlPipe,
|
|
43235
|
+
QuestionnaireListComponent,
|
|
43236
|
+
ChangeHistoryComponent,
|
|
43060
43237
|
CamelToTitlePipe,
|
|
43061
43238
|
VersionHistoryListComponent,
|
|
43062
43239
|
VersionHistoryCompareComponent,
|
|
@@ -43218,6 +43395,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
43218
43395
|
StepDetailsDrawerComponent,
|
|
43219
43396
|
TemplateVariablesFormComponent,
|
|
43220
43397
|
AdvancedVariablesFormComponent,
|
|
43398
|
+
QuestionnaireListComponent,
|
|
43399
|
+
ChangeHistoryComponent,
|
|
43221
43400
|
VersionHistoryListComponent,
|
|
43222
43401
|
VersionHistoryCompareComponent,
|
|
43223
43402
|
VersionHistoryDetailComponent,
|
|
@@ -43430,6 +43609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43430
43609
|
AdvancedVariablesFormComponent,
|
|
43431
43610
|
StepDetailsModalComponent,
|
|
43432
43611
|
SafeHtmlPipe,
|
|
43612
|
+
QuestionnaireListComponent,
|
|
43613
|
+
ChangeHistoryComponent,
|
|
43433
43614
|
CamelToTitlePipe,
|
|
43434
43615
|
VersionHistoryListComponent,
|
|
43435
43616
|
VersionHistoryCompareComponent,
|
|
@@ -43597,6 +43778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43597
43778
|
StepDetailsDrawerComponent,
|
|
43598
43779
|
TemplateVariablesFormComponent,
|
|
43599
43780
|
AdvancedVariablesFormComponent,
|
|
43781
|
+
QuestionnaireListComponent,
|
|
43782
|
+
ChangeHistoryComponent,
|
|
43600
43783
|
VersionHistoryListComponent,
|
|
43601
43784
|
VersionHistoryCompareComponent,
|
|
43602
43785
|
VersionHistoryDetailComponent,
|
|
@@ -44373,5 +44556,5 @@ function buildTestCaseDetailsFromApi(data, options) {
|
|
|
44373
44556
|
* Generated bundle index. Do not edit.
|
|
44374
44557
|
*/
|
|
44375
44558
|
|
|
44376
|
-
export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
|
|
44559
|
+
export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
|
|
44377
44560
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|