@cqa-lib/cqa-ui 1.1.447 → 1.1.449
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-result-modal/execution-result-modal.component.mjs +12 -3
- package/esm2020/lib/execution-screen/session-changes-modal/session-changes-modal.component.mjs +12 -3
- package/esm2020/lib/questionnaire-list/questionnaire-list.component.mjs +33 -29
- package/fesm2015/cqa-lib-cqa-ui.mjs +53 -28
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +52 -28
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-result-modal/execution-result-modal.component.d.ts +4 -1
- package/lib/execution-screen/session-changes-modal/session-changes-modal.component.d.ts +4 -1
- package/lib/questionnaire-list/questionnaire-list.component.d.ts +6 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -19775,8 +19775,10 @@ class ExecutionResultModalComponent {
|
|
|
19775
19775
|
this.toolTime = '';
|
|
19776
19776
|
this.buttons = [];
|
|
19777
19777
|
this.failedSteps = [];
|
|
19778
|
+
this.showSessionChangesButton = false;
|
|
19778
19779
|
this.buttonClick = new EventEmitter();
|
|
19779
19780
|
this.closeModal = new EventEmitter();
|
|
19781
|
+
this.sessionChangesClick = new EventEmitter();
|
|
19780
19782
|
}
|
|
19781
19783
|
get stepsBackgroundClass() {
|
|
19782
19784
|
switch (this.status) {
|
|
@@ -19821,12 +19823,15 @@ class ExecutionResultModalComponent {
|
|
|
19821
19823
|
onClose() {
|
|
19822
19824
|
this.closeModal.emit();
|
|
19823
19825
|
}
|
|
19826
|
+
onSessionChangesClick() {
|
|
19827
|
+
this.sessionChangesClick.emit();
|
|
19828
|
+
}
|
|
19824
19829
|
}
|
|
19825
19830
|
ExecutionResultModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19826
|
-
ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal" }, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let
|
|
19831
|
+
ExecutionResultModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ExecutionResultModalComponent, selector: "cqa-execution-result-modal", inputs: { isOpen: "isOpen", status: "status", title: "title", totalSteps: "totalSteps", completedSteps: "completedSteps", totalTime: "totalTime", appTime: "appTime", toolTime: "toolTime", lastCompletedStep: "lastCompletedStep", buttons: "buttons", failedSteps: "failedSteps", showSessionChangesButton: "showSessionChangesButton" }, outputs: { buttonClick: "buttonClick", closeModal: "closeModal", sessionChangesClick: "sessionChangesClick" }, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let last = last\">\n <cqa-button\n *ngIf=\"showSessionChangesButton && last\"\n variant=\"outlined\"\n text=\"Review Session Changes\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n (clicked)=\"onSessionChangesClick()\">\n </cqa-button>\n <cqa-button\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\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"] }], 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"] }] });
|
|
19827
19832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, decorators: [{
|
|
19828
19833
|
type: Component,
|
|
19829
|
-
args: [{ selector: 'cqa-execution-result-modal', template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let
|
|
19834
|
+
args: [{ selector: 'cqa-execution-result-modal', template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-[9999] cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-rounded-lg cqa-bg-white cqa-shadow-xl cqa-w-full cqa-max-w-[500px] cqa-overflow-hidden cqa-p-6 cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[85vh] cqa-overflow-y-auto\"\n style=\"box-shadow: 0px 8px 8px -4px #10182808;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-flex-col cqa-items-center\">\n <div *ngIf=\"status === 'passed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#AEE9D4\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#CFF2E5\" stroke-width=\"8\"/>\n <path d=\"M75.25 43.8549V46.4999C75.2465 52.6996 73.2389 58.732 69.5268 63.6976C65.8147 68.6632 60.5969 72.2957 54.6517 74.0536C48.7064 75.8114 42.3521 75.6003 36.5366 73.4518C30.7211 71.3033 25.7559 67.3324 22.3815 62.1314C19.0071 56.9305 17.4044 50.778 17.8123 44.5918C18.2202 38.4055 20.617 32.5168 24.6451 27.8039C28.6731 23.0911 34.1168 19.8066 40.164 18.4403C46.2113 17.074 52.5383 17.6991 58.2013 20.2224M75.25 23.4999L46.5 52.2786L37.875 43.6536\" stroke=\"#0DBD7D\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'failed'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#F9BFBF\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FCD9D9\" stroke-width=\"8\"/>\n <path d=\"M55.125 37.875L37.875 55.125M37.875 37.875L55.125 55.125M75.25 46.5C75.25 62.3782 62.3782 75.25 46.5 75.25C30.6218 75.25 17.75 62.3782 17.75 46.5C17.75 30.6218 30.6218 17.75 46.5 17.75C62.3782 17.75 75.25 30.6218 75.25 46.5Z\" stroke=\"#EE3F3F\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n \n <div *ngIf=\"status === 'aborted'\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"93\" height=\"93\" viewBox=\"0 0 93 93\" fill=\"none\">\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" fill=\"#FEECBD\"/>\n <rect x=\"4\" y=\"4\" width=\"85\" height=\"85\" rx=\"42.5\" stroke=\"#FFF9E9\" stroke-width=\"8\"/>\n <path d=\"M46.5 17.75C30.63 17.75 17.75 30.63 17.75 46.5C17.75 62.37 30.63 75.25 46.5 75.25C62.37 75.25 75.25 62.37 75.25 46.5C75.25 30.63 62.37 17.75 46.5 17.75ZM46.5 69.5C33.7925 69.5 23.5 59.2075 23.5 46.5C23.5 33.7925 33.7925 23.5 46.5 23.5C59.2075 23.5 69.5 33.7925 69.5 46.5C69.5 59.2075 59.2075 69.5 46.5 69.5ZM58 58H35V35H58V58Z\" fill=\"#FBBF24\"/>\n </svg>\n </div>\n \n <h2 class=\"cqa-text-[22px] cqa-font-semibold cqa-text-[#0B0B0C] cqa-mt-[20px] cqa-leading-[28px]\">\n {{ title }}\n </h2>\n </div>\n \n <div class=\"cqa-rounded-lg cqa-border cqa-p-[17px] cqa-my-4\"\n [ngClass]=\"stepsBackgroundClass\" style=\"border: 1px solid;\" [style.border-color]=\"stepsBorderClass\">\n <div class=\"cqa-grid sm:cqa-flex sm:cqa-justify-between sm:cqa-items-center cqa-grid-cols-2 sm:cqa-grid-cols-4 cqa-gap-4 sm:cqa-gap-2\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalSteps\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Steps</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ completedSteps }} / {{ totalSteps }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"totalTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Total Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ totalTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"appTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">App Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ appTime }}\n </span>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"toolTime\">\n <span class=\"cqa-text-xs cqa-text-[#4A5565] cqa-mb-1\">Tool Time</span>\n <span class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#101828]\">\n {{ toolTime }}\n </span>\n </div>\n </div>\n </div>\n \n <div *ngIf=\"shouldShowLastCompletedStep\" class=\"cqa-my-4 cqa-p-[17px] cqa-rounded-[10px] cqa-max-h-[200px] cqa-min-h-[80px] cqa-overflow-y-auto\" style=\"border: 1px solid #E5E7EB; scrollbar-width: thin;\">\n <div class=\"cqa-text-[12px] cqa-text-[#364153] cqa-mb-1 cqa-leading-[18px]\">\n Last completed step:\n </div>\n <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#101828] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n <span [innerHTML]=\"lastCompletedStep\"></span>\n </div>\n </div>\n\n <div *ngIf=\"shouldShowFailedSteps\" class=\"cqa-my-4 cqa-max-h-[300px] cqa-min-h-[100px] cqa-overflow-y-auto\" style=\"scrollbar-width: thin;\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div \n *ngFor=\"let failedStep of failedSteps\" \n class=\"cqa-rounded-lg cqa-p-[17px] cqa-bg-[#FEF2F2]\"\n style=\"border: 1px solid #FECACA;\">\n <div *ngIf=\"failedStep?.failedStep\" class=\"cqa-text-sm cqa-font-semibold cqa-text-[#111827] cqa-mb-2 cqa-leading-[18px]\">\n Failed at Step {{ failedStep.failedStep }}<span *ngIf=\"failedStep.stepTitle\">: {{ failedStep.stepTitle }}</span>\n </div>\n <div *ngIf=\"failedStep.error\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Error:</span> {{ failedStep.error }}\n </div>\n <div *ngIf=\"failedStep.actual\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Actual:</span> {{ failedStep.actual }}\n </div>\n <div *ngIf=\"failedStep.expected\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-2 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Expected:</span> {{ failedStep.expected }}\n </div>\n <div *ngIf=\"failedStep.suggestions\" class=\"cqa-text-[12px] cqa-text-[#B91C1C] cqa-mb-1 cqa-whitespace-normal cqa-break-anywhere\" style=\"word-break: break-word;\">\n <span class=\"cqa-font-bold\">Suggestions:</span> {{ failedStep.suggestions }}\n </div>\n <div *ngIf=\"failedStep.timestamp\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[12px] cqa-text-[#636363]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M6 1V6L9 7.5\" stroke=\"#636363\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"#636363\" stroke-width=\"1.5\"/>\n </svg>\n <span>View screenshot at {{ failedStep.timestamp }}</span>\n </div>\n </div>\n </div>\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-[20px]\">\n <ng-container *ngFor=\"let button of buttons; let last = last\">\n <cqa-button\n *ngIf=\"showSessionChangesButton && last\"\n variant=\"outlined\"\n text=\"Review Session Changes\"\n btnSize=\"lg\"\n [fullWidth]=\"true\"\n (clicked)=\"onSessionChangesClick()\">\n </cqa-button>\n <cqa-button\n [variant]=\"button.variant\"\n [text]=\"button.label\"\n [icon]=\"button.icon\"\n [btnSize]=\"button.btnSize || 'lg'\"\n [fullWidth]=\"button.fullWidth !== undefined ? button.fullWidth : true\"\n (clicked)=\"onButtonClick(button)\">\n </cqa-button>\n </ng-container>\n </div>\n </div>\n </div>\n\n", styles: [] }]
|
|
19830
19835
|
}], propDecorators: { isOpen: [{
|
|
19831
19836
|
type: Input
|
|
19832
19837
|
}], status: [{
|
|
@@ -19849,10 +19854,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19849
19854
|
type: Input
|
|
19850
19855
|
}], failedSteps: [{
|
|
19851
19856
|
type: Input
|
|
19857
|
+
}], showSessionChangesButton: [{
|
|
19858
|
+
type: Input
|
|
19852
19859
|
}], buttonClick: [{
|
|
19853
19860
|
type: Output
|
|
19854
19861
|
}], closeModal: [{
|
|
19855
19862
|
type: Output
|
|
19863
|
+
}], sessionChangesClick: [{
|
|
19864
|
+
type: Output
|
|
19856
19865
|
}] } });
|
|
19857
19866
|
|
|
19858
19867
|
class SessionChangesModalComponent {
|
|
@@ -19866,9 +19875,11 @@ class SessionChangesModalComponent {
|
|
|
19866
19875
|
this.saveButtonDisabled = false;
|
|
19867
19876
|
this.executionInProgress = false;
|
|
19868
19877
|
this.commitMessageTemplate = 'This will commit all {{count}} changes to the test case';
|
|
19878
|
+
this.showCancelButton = false;
|
|
19869
19879
|
this.closeModal = new EventEmitter();
|
|
19870
19880
|
this.saveToTestCase = new EventEmitter();
|
|
19871
19881
|
this.removeStep = new EventEmitter();
|
|
19882
|
+
this.cancel = new EventEmitter();
|
|
19872
19883
|
}
|
|
19873
19884
|
get totalChangesCount() {
|
|
19874
19885
|
return (this.addedSteps?.length || 0) + (this.editedSteps?.length || 0) + (this.deletedSteps?.length || 0);
|
|
@@ -19900,6 +19911,9 @@ class SessionChangesModalComponent {
|
|
|
19900
19911
|
this.saveToTestCase.emit();
|
|
19901
19912
|
}
|
|
19902
19913
|
}
|
|
19914
|
+
onCancel() {
|
|
19915
|
+
this.cancel.emit();
|
|
19916
|
+
}
|
|
19903
19917
|
onRemoveStep(step, event) {
|
|
19904
19918
|
event.preventDefault();
|
|
19905
19919
|
event.stopPropagation();
|
|
@@ -19915,10 +19929,10 @@ class SessionChangesModalComponent {
|
|
|
19915
19929
|
}
|
|
19916
19930
|
}
|
|
19917
19931
|
SessionChangesModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19918
|
-
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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore edited 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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore deleted 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"] }] });
|
|
19932
|
+
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", showCancelButton: "showCancelButton" }, outputs: { closeModal: "closeModal", saveToTestCase: "saveToTestCase", removeStep: "removeStep", cancel: "cancel" }, 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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore edited 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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore deleted 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 *ngIf=\"showCancelButton\" class=\"cqa-flex cqa-justify-center cqa-mt-3\">\n <cqa-button\n [fullWidth]=\"true\"\n variant=\"text\"\n text=\"Cancel\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\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"] }] });
|
|
19919
19933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, decorators: [{
|
|
19920
19934
|
type: Component,
|
|
19921
|
-
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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore edited 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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore deleted 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: [] }]
|
|
19935
|
+
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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore edited 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=\"restore\"\n iconColor=\"#99999E\"\n [tooltip]=\"'Restore deleted 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 *ngIf=\"showCancelButton\" class=\"cqa-flex cqa-justify-center cqa-mt-3\">\n <cqa-button\n [fullWidth]=\"true\"\n variant=\"text\"\n text=\"Cancel\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
19922
19936
|
}], propDecorators: { isOpen: [{
|
|
19923
19937
|
type: Input
|
|
19924
19938
|
}], title: [{
|
|
@@ -19937,12 +19951,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19937
19951
|
type: Input
|
|
19938
19952
|
}], commitMessageTemplate: [{
|
|
19939
19953
|
type: Input
|
|
19954
|
+
}], showCancelButton: [{
|
|
19955
|
+
type: Input
|
|
19940
19956
|
}], closeModal: [{
|
|
19941
19957
|
type: Output
|
|
19942
19958
|
}], saveToTestCase: [{
|
|
19943
19959
|
type: Output
|
|
19944
19960
|
}], removeStep: [{
|
|
19945
19961
|
type: Output
|
|
19962
|
+
}], cancel: [{
|
|
19963
|
+
type: Output
|
|
19946
19964
|
}], onEscape: [{
|
|
19947
19965
|
type: HostListener,
|
|
19948
19966
|
args: ['document:keydown.escape']
|
|
@@ -42515,28 +42533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42515
42533
|
type: Output
|
|
42516
42534
|
}] } });
|
|
42517
42535
|
|
|
42518
|
-
const QUESTIONNAIRE_LIST_STYLES = `
|
|
42519
|
-
:host { display: block; width: 100%; }
|
|
42520
|
-
.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; }
|
|
42521
|
-
.ql-header { margin-bottom: 20px; }
|
|
42522
|
-
.ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
|
|
42523
|
-
.ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
|
|
42524
|
-
.ql-body { display: flex; flex-direction: column; }
|
|
42525
|
-
.ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
|
|
42526
|
-
.ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
|
|
42527
|
-
.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; }
|
|
42528
|
-
.ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
|
|
42529
|
-
.ql-input { width: 100%; }
|
|
42530
|
-
.ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
|
|
42531
|
-
.ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
|
|
42532
|
-
.ql-footer-left { display: flex; align-items: center; }
|
|
42533
|
-
.ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
|
|
42534
|
-
.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; }
|
|
42535
|
-
.ql-page-size-select:focus { border-color: #6366f1; }
|
|
42536
|
-
.ql-footer-right { display: flex; align-items: center; gap: 4px; }
|
|
42537
|
-
.ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
|
|
42538
|
-
.ql-nav-btn { width: 28px; height: 28px; }
|
|
42539
|
-
`;
|
|
42540
42536
|
class QuestionnaireListComponent {
|
|
42541
42537
|
constructor() {
|
|
42542
42538
|
this.items = [];
|
|
@@ -42546,6 +42542,7 @@ class QuestionnaireListComponent {
|
|
|
42546
42542
|
this.answerChange = new EventEmitter();
|
|
42547
42543
|
this.currentPage = 1;
|
|
42548
42544
|
this.pageSize = 6;
|
|
42545
|
+
this.pageSizeOpen = false;
|
|
42549
42546
|
}
|
|
42550
42547
|
ngOnChanges(changes) {
|
|
42551
42548
|
if (changes['defaultPageSize'] && changes['defaultPageSize'].currentValue) {
|
|
@@ -42578,6 +42575,27 @@ class QuestionnaireListComponent {
|
|
|
42578
42575
|
this.pageSize = size;
|
|
42579
42576
|
this.currentPage = 1;
|
|
42580
42577
|
}
|
|
42578
|
+
togglePageSizeMenu() {
|
|
42579
|
+
this.pageSizeOpen = !this.pageSizeOpen;
|
|
42580
|
+
}
|
|
42581
|
+
selectPageSize(size) {
|
|
42582
|
+
this.onPageSizeChange(size);
|
|
42583
|
+
this.pageSizeOpen = false;
|
|
42584
|
+
}
|
|
42585
|
+
onDocumentClick(event) {
|
|
42586
|
+
if (!this.pageSizeOpen) {
|
|
42587
|
+
return;
|
|
42588
|
+
}
|
|
42589
|
+
if (this.pageSizeDropdownContainer?.nativeElement) {
|
|
42590
|
+
const clickedInside = this.pageSizeDropdownContainer.nativeElement.contains(event.target);
|
|
42591
|
+
if (!clickedInside) {
|
|
42592
|
+
this.pageSizeOpen = false;
|
|
42593
|
+
}
|
|
42594
|
+
}
|
|
42595
|
+
else {
|
|
42596
|
+
this.pageSizeOpen = false;
|
|
42597
|
+
}
|
|
42598
|
+
}
|
|
42581
42599
|
prevPage() {
|
|
42582
42600
|
if (!this.isPrevDisabled) {
|
|
42583
42601
|
this.currentPage--;
|
|
@@ -42599,10 +42617,10 @@ class QuestionnaireListComponent {
|
|
|
42599
42617
|
}
|
|
42600
42618
|
}
|
|
42601
42619
|
QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42602
|
-
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=\"
|
|
42620
|
+
QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [""], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
42603
42621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
42604
42622
|
type: Component,
|
|
42605
|
-
args: [{ selector: 'cqa-questionnaire-list',
|
|
42623
|
+
args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [""] }]
|
|
42606
42624
|
}], propDecorators: { items: [{
|
|
42607
42625
|
type: Input
|
|
42608
42626
|
}], defaultPageSize: [{
|
|
@@ -42613,6 +42631,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42613
42631
|
type: Input
|
|
42614
42632
|
}], answerChange: [{
|
|
42615
42633
|
type: Output
|
|
42634
|
+
}], pageSizeDropdownContainer: [{
|
|
42635
|
+
type: ViewChild,
|
|
42636
|
+
args: ['pageSizeDropdownContainer', { static: false }]
|
|
42637
|
+
}], onDocumentClick: [{
|
|
42638
|
+
type: HostListener,
|
|
42639
|
+
args: ['document:click', ['$event']]
|
|
42616
42640
|
}] } });
|
|
42617
42641
|
|
|
42618
42642
|
/** Maps known eventType strings to Material icon names. */
|