@cqa-lib/cqa-ui 1.1.419 → 1.1.420
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/execution-screen/session-changes-modal/session-changes-modal.component.mjs +15 -4
- package/fesm2015/cqa-lib-cqa-ui.mjs +14 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +14 -3
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/session-changes-modal/session-changes-modal.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -19784,6 +19784,7 @@ class SessionChangesModalComponent {
|
|
|
19784
19784
|
this.deletedSteps = [];
|
|
19785
19785
|
this.saveButtonLabel = 'Save to Test Case';
|
|
19786
19786
|
this.saveButtonDisabled = false;
|
|
19787
|
+
this.executionInProgress = false;
|
|
19787
19788
|
this.commitMessageTemplate = 'This will commit all {{count}} changes to the test case';
|
|
19788
19789
|
this.closeModal = new EventEmitter();
|
|
19789
19790
|
this.saveToTestCase = new EventEmitter();
|
|
@@ -19806,8 +19807,16 @@ class SessionChangesModalComponent {
|
|
|
19806
19807
|
onClose() {
|
|
19807
19808
|
this.closeModal.emit();
|
|
19808
19809
|
}
|
|
19810
|
+
get isSaveDisabled() {
|
|
19811
|
+
return this.saveButtonDisabled || this.executionInProgress || this.totalChangesCount === 0;
|
|
19812
|
+
}
|
|
19813
|
+
get saveButtonTooltip() {
|
|
19814
|
+
if (this.executionInProgress)
|
|
19815
|
+
return 'Button will be enabled after execution is complete';
|
|
19816
|
+
return '';
|
|
19817
|
+
}
|
|
19809
19818
|
onSave() {
|
|
19810
|
-
if (!this.
|
|
19819
|
+
if (!this.isSaveDisabled) {
|
|
19811
19820
|
this.saveToTestCase.emit();
|
|
19812
19821
|
}
|
|
19813
19822
|
}
|
|
@@ -19826,10 +19835,10 @@ class SessionChangesModalComponent {
|
|
|
19826
19835
|
}
|
|
19827
19836
|
}
|
|
19828
19837
|
SessionChangesModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19829
|
-
SessionChangesModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SessionChangesModalComponent, selector: "cqa-session-changes-modal", inputs: { isOpen: "isOpen", title: "title", addedSteps: "addedSteps", editedSteps: "editedSteps", deletedSteps: "deletedSteps", saveButtonLabel: "saveButtonLabel", saveButtonDisabled: "saveButtonDisabled", commitMessageTemplate: "commitMessageTemplate" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19838
|
+
SessionChangesModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SessionChangesModalComponent, selector: "cqa-session-changes-modal", inputs: { isOpen: "isOpen", title: "title", addedSteps: "addedSteps", editedSteps: "editedSteps", deletedSteps: "deletedSteps", saveButtonLabel: "saveButtonLabel", saveButtonDisabled: "saveButtonDisabled", executionInProgress: "executionInProgress", commitMessageTemplate: "commitMessageTemplate" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSaveDisabled\"\n [attr.aria-disabled]=\"isSaveDisabled\"\n [tooltip]=\"saveButtonTooltip\"\n tooltipPosition=\"above\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
19830
19839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, decorators: [{
|
|
19831
19840
|
type: Component,
|
|
19832
|
-
args: [{ selector: 'cqa-session-changes-modal', host: { class: 'cqa-ui-root' }, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n [attr.aria-disabled]=\"saveButtonDisabled || totalChangesCount === 0\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
19841
|
+
args: [{ selector: 'cqa-session-changes-modal', host: { class: 'cqa-ui-root' }, template: "<div\n *ngIf=\"isOpen\"\n class=\"session-changes-modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-labelledby]=\"'session-changes-title'\"\n [attr.aria-describedby]=\"'session-changes-content'\">\n <div\n class=\"cqa-rounded-[12px] cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-max-h-[90vh] cqa-font-inter\"\n style=\"box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);\"\n (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-[#E5E7EB]\">\n <h2\n id=\"session-changes-title\"\n class=\"cqa-text-[18px] cqa-font-semibold cqa-leading-[28px] cqa-text-[#333333] cqa-m-0\">\n {{ title }}\n </h2>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"close\"\n iconColor=\"#4A5565\"\n [tooltip]=\"'Close modal'\"\n tooltipPosition=\"below\"\n customClass=\"!cqa-min-w-0 cqa-p-1\"\n (clicked)=\"onClose()\">\n </cqa-button>\n </div>\n\n <!-- Content -->\n <div id=\"session-changes-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-6\" style=\"scrollbar-width: thin;\">\n <!-- Added Steps -->\n <section\n *ngIf=\"addedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"added-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 2V12M2 7H12\" stroke=\"#22C55E\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"added-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Added Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ addedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of addedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Edited Steps -->\n <section\n *ngIf=\"editedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"edited-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.5 2L12 5.5L5 12.5L1 13L2 9L8.5 2Z\" stroke=\"#F59E0B\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"edited-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" cqa-text-color=\"#0A0A0A\">\n Edited Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ editedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of editedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Deleted Steps -->\n <section\n *ngIf=\"deletedSteps?.length\"\n class=\"cqa-flex cqa-flex-col cqa-gap-3\"\n aria-labelledby=\"deleted-steps-heading\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-5 cqa-h-5\" aria-hidden=\"true\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 7H12\" stroke=\"#EF4444\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <h3 id=\"deleted-steps-heading\" class=\"cqa-text-[14px] cqa-leading-[20px] cqa-m-0\" textColor=\"#0A0A0A\">\n Deleted Steps\n </h3>\n <span\n class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-py-0.5 cqa-px-2 cqa-rounded-full cqa-text-[12px] cqa-font-medium cqa-leading-[16px]\"\n style=\"background-color: #E5E7EB; color: #6B7280;\">\n {{ deletedSteps.length }}\n </span>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let step of deletedSteps; trackBy: trackByStepId\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-[8px] cqa-p-3 cqa-bg-[#F9FAFB] cqa-border cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#0A0A0A] cqa-m-0\" style=\"word-break: break-word;\">\n <span *ngIf=\"step.stepNumber\" class=\"cqa-font-semibold\">{{ step.stepNumber }}.</span>\n {{ step.stepDescription }}\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#6B7280] cqa-mt-1 cqa-m-0\">\n {{ step.timestamp }}\n </p>\n </div>\n <cqa-button\n type=\"button\"\n variant=\"text\"\n btnSize=\"md\"\n icon=\"delete_outline\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Remove step: ' + step.stepDescription\"\n tooltipPosition=\"below\"\n customClass=\"cqa-shrink-0\"\n (clicked)=\"onRemoveStep(step, $event)\">\n </cqa-button>\n </div>\n </div>\n </section>\n\n <!-- Empty state -->\n <p *ngIf=\"!addedSteps?.length && !editedSteps?.length && !deletedSteps?.length\" class=\"cqa-text-[14px] cqa-text-[#6B7280] cqa-m-0\">\n No session changes to display.\n </p>\n </div>\n\n <!-- Footer -->\n <div class=\"cqa-px-6 cqa-pb-6 cqa-pt-2 cqa-border-t cqa-border-[#E5E7EB]\">\n <div\n *ngIf=\"totalChangesCount > 0\"\n class=\"cqa-w-full cqa-rounded-[12px] cqa-bg-[#FCD9D9] cqa-px-3 cqa-py-[17px] cqa-mb-4\" style=\"border: 1px solid #F47F7F\">\n <div class=\"cqa-flex cqa-gap-1\">\n <span class=\"cqa-shrink-0 cqa-flex cqa-items-start cqa-mt-0.5\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <g clip-path=\"url(#clip0_4369_21268)\">\n <path d=\"M8 14.5C11.5899 14.5 14.5 11.5899 14.5 8C14.5 4.41015 11.5899 1.5 8 1.5C4.41015 1.5 1.5 4.41015 1.5 8C1.5 11.5899 4.41015 14.5 8 14.5Z\" stroke=\"#EE3F3F\" stroke-width=\"1.5\"/>\n <path d=\"M8 4.66699V8.00032\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n <path d=\"M8 10.667H8.00667\" stroke=\"#EE3F3F\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_4369_21268\">\n <rect width=\"16\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n </span>\n <div class=\"cqa-min-w-0\">\n <p class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#9F2A2A] cqa-m-0\">\n This action cannot be undone\n </p>\n <p class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-[#9F2A2A] cqa-mt-1 cqa-m-0\">\n The original test case will be permanently overwritten with your changes.\n </p>\n </div>\n </div>\n </div>\n <cqa-button\n [text]=\"saveButtonLabel\"\n variant=\"filled\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n [disabled]=\"isSaveDisabled\"\n [attr.aria-disabled]=\"isSaveDisabled\"\n [tooltip]=\"saveButtonTooltip\"\n tooltipPosition=\"above\"\n (clicked)=\"onSave()\"\n [inlineStyles]=\"'background-color: #4F46E5; border-color: #4F46E5; color: #FFFFFF;'\">\n </cqa-button>\n <p *ngIf=\"totalChangesCount > 0\" class=\"cqa-text-[10px] cqa-leading-[16px] cqa-text-[#414146] cqa-mt-2 cqa-mb-0 cqa-text-center\">\n {{ commitMessage }}\n </p>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
19833
19842
|
}], propDecorators: { isOpen: [{
|
|
19834
19843
|
type: Input
|
|
19835
19844
|
}], title: [{
|
|
@@ -19844,6 +19853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19844
19853
|
type: Input
|
|
19845
19854
|
}], saveButtonDisabled: [{
|
|
19846
19855
|
type: Input
|
|
19856
|
+
}], executionInProgress: [{
|
|
19857
|
+
type: Input
|
|
19847
19858
|
}], commitMessageTemplate: [{
|
|
19848
19859
|
type: Input
|
|
19849
19860
|
}], closeModal: [{
|