@cqa-lib/cqa-ui 1.1.446 → 1.1.448
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/change-history/change-history.component.mjs +34 -33
- 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 +24 -23
- package/fesm2015/cqa-lib-cqa-ui.mjs +78 -58
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +78 -58
- 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/package.json +1 -1
|
@@ -19746,8 +19746,10 @@ class ExecutionResultModalComponent {
|
|
|
19746
19746
|
this.toolTime = '';
|
|
19747
19747
|
this.buttons = [];
|
|
19748
19748
|
this.failedSteps = [];
|
|
19749
|
+
this.showSessionChangesButton = false;
|
|
19749
19750
|
this.buttonClick = new EventEmitter();
|
|
19750
19751
|
this.closeModal = new EventEmitter();
|
|
19752
|
+
this.sessionChangesClick = new EventEmitter();
|
|
19751
19753
|
}
|
|
19752
19754
|
get stepsBackgroundClass() {
|
|
19753
19755
|
switch (this.status) {
|
|
@@ -19792,12 +19794,15 @@ class ExecutionResultModalComponent {
|
|
|
19792
19794
|
onClose() {
|
|
19793
19795
|
this.closeModal.emit();
|
|
19794
19796
|
}
|
|
19797
|
+
onSessionChangesClick() {
|
|
19798
|
+
this.sessionChangesClick.emit();
|
|
19799
|
+
}
|
|
19795
19800
|
}
|
|
19796
19801
|
ExecutionResultModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19797
|
-
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
|
|
19802
|
+
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"] }] });
|
|
19798
19803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ExecutionResultModalComponent, decorators: [{
|
|
19799
19804
|
type: Component,
|
|
19800
|
-
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
|
|
19805
|
+
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: [] }]
|
|
19801
19806
|
}], propDecorators: { isOpen: [{
|
|
19802
19807
|
type: Input
|
|
19803
19808
|
}], status: [{
|
|
@@ -19820,10 +19825,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19820
19825
|
type: Input
|
|
19821
19826
|
}], failedSteps: [{
|
|
19822
19827
|
type: Input
|
|
19828
|
+
}], showSessionChangesButton: [{
|
|
19829
|
+
type: Input
|
|
19823
19830
|
}], buttonClick: [{
|
|
19824
19831
|
type: Output
|
|
19825
19832
|
}], closeModal: [{
|
|
19826
19833
|
type: Output
|
|
19834
|
+
}], sessionChangesClick: [{
|
|
19835
|
+
type: Output
|
|
19827
19836
|
}] } });
|
|
19828
19837
|
|
|
19829
19838
|
class SessionChangesModalComponent {
|
|
@@ -19837,9 +19846,11 @@ class SessionChangesModalComponent {
|
|
|
19837
19846
|
this.saveButtonDisabled = false;
|
|
19838
19847
|
this.executionInProgress = false;
|
|
19839
19848
|
this.commitMessageTemplate = 'This will commit all {{count}} changes to the test case';
|
|
19849
|
+
this.showCancelButton = false;
|
|
19840
19850
|
this.closeModal = new EventEmitter();
|
|
19841
19851
|
this.saveToTestCase = new EventEmitter();
|
|
19842
19852
|
this.removeStep = new EventEmitter();
|
|
19853
|
+
this.cancel = new EventEmitter();
|
|
19843
19854
|
}
|
|
19844
19855
|
get totalChangesCount() {
|
|
19845
19856
|
var _a, _b, _c;
|
|
@@ -19872,6 +19883,9 @@ class SessionChangesModalComponent {
|
|
|
19872
19883
|
this.saveToTestCase.emit();
|
|
19873
19884
|
}
|
|
19874
19885
|
}
|
|
19886
|
+
onCancel() {
|
|
19887
|
+
this.cancel.emit();
|
|
19888
|
+
}
|
|
19875
19889
|
onRemoveStep(step, event) {
|
|
19876
19890
|
event.preventDefault();
|
|
19877
19891
|
event.stopPropagation();
|
|
@@ -19887,10 +19901,10 @@ class SessionChangesModalComponent {
|
|
|
19887
19901
|
}
|
|
19888
19902
|
}
|
|
19889
19903
|
SessionChangesModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19890
|
-
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"] }] });
|
|
19904
|
+
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"] }] });
|
|
19891
19905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SessionChangesModalComponent, decorators: [{
|
|
19892
19906
|
type: Component,
|
|
19893
|
-
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: [] }]
|
|
19907
|
+
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: [] }]
|
|
19894
19908
|
}], propDecorators: { isOpen: [{
|
|
19895
19909
|
type: Input
|
|
19896
19910
|
}], title: [{
|
|
@@ -19909,12 +19923,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
19909
19923
|
type: Input
|
|
19910
19924
|
}], commitMessageTemplate: [{
|
|
19911
19925
|
type: Input
|
|
19926
|
+
}], showCancelButton: [{
|
|
19927
|
+
type: Input
|
|
19912
19928
|
}], closeModal: [{
|
|
19913
19929
|
type: Output
|
|
19914
19930
|
}], saveToTestCase: [{
|
|
19915
19931
|
type: Output
|
|
19916
19932
|
}], removeStep: [{
|
|
19917
19933
|
type: Output
|
|
19934
|
+
}], cancel: [{
|
|
19935
|
+
type: Output
|
|
19918
19936
|
}], onEscape: [{
|
|
19919
19937
|
type: HostListener,
|
|
19920
19938
|
args: ['document:keydown.escape']
|
|
@@ -42644,6 +42662,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42644
42662
|
type: Output
|
|
42645
42663
|
}] } });
|
|
42646
42664
|
|
|
42665
|
+
const QUESTIONNAIRE_LIST_STYLES = `
|
|
42666
|
+
:host { display: block; width: 100%; }
|
|
42667
|
+
.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; }
|
|
42668
|
+
.ql-header { margin-bottom: 20px; }
|
|
42669
|
+
.ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
|
|
42670
|
+
.ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
|
|
42671
|
+
.ql-body { display: flex; flex-direction: column; }
|
|
42672
|
+
.ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
|
|
42673
|
+
.ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
|
|
42674
|
+
.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; }
|
|
42675
|
+
.ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
|
|
42676
|
+
.ql-input { width: 100%; }
|
|
42677
|
+
.ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
|
|
42678
|
+
.ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
|
|
42679
|
+
.ql-footer-left { display: flex; align-items: center; }
|
|
42680
|
+
.ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
|
|
42681
|
+
.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; }
|
|
42682
|
+
.ql-page-size-select:focus { border-color: #6366f1; }
|
|
42683
|
+
.ql-footer-right { display: flex; align-items: center; gap: 4px; }
|
|
42684
|
+
.ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
|
|
42685
|
+
.ql-nav-btn { width: 28px; height: 28px; }
|
|
42686
|
+
`;
|
|
42647
42687
|
class QuestionnaireListComponent {
|
|
42648
42688
|
constructor() {
|
|
42649
42689
|
this.items = [];
|
|
@@ -42709,28 +42749,7 @@ QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0
|
|
|
42709
42749
|
QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n", styles: [":host{display:block;width:100%}.ql-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ql-header{margin-bottom:20px}.ql-title{font-size:16px;font-weight:600;color:#1a1d23;margin:0 0 4px;line-height:1.4}.ql-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0;line-height:1.5}.ql-body{display:flex;flex-direction:column}.ql-item{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #f3f4f6}.ql-item.ql-item--last{border-bottom:none;margin-bottom:0}.ql-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef0ff;color:#4f46e5;font-size:12px;font-weight:600;flex-shrink:0}.ql-label{display:block;font-size:13px;font-weight:500;color:#374151}.ql-input{width:100%}.ql-empty{padding:24px 0;font-size:13px;color:#6b7280;text-align:center}.ql-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:1px solid #f3f4f6}.ql-footer-left{display:flex;align-items:center}.ql-footer-label{font-size:13px;color:#6b7280;margin-right:8px}.ql-page-size-select{width:72px;height:28px;border:1px solid #e5e7eb;border-radius:4px;padding:0 6px;font-size:13px;color:#374151;background:#ffffff;cursor:pointer;outline:none}.ql-page-size-select:focus{border-color:#6366f1}.ql-footer-right{display:flex;align-items:center;gap:4px}.ql-range-label{font-size:13px;color:#374151;margin-right:8px}.ql-nav-btn{width:28px;height:28px}\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
42710
42750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
42711
42751
|
type: Component,
|
|
42712
|
-
args: [{ selector: 'cqa-questionnaire-list', styles: [
|
|
42713
|
-
:host { display: block; width: 100%; }
|
|
42714
|
-
.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; }
|
|
42715
|
-
.ql-header { margin-bottom: 20px; }
|
|
42716
|
-
.ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
|
|
42717
|
-
.ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
|
|
42718
|
-
.ql-body { display: flex; flex-direction: column; }
|
|
42719
|
-
.ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
|
|
42720
|
-
.ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
|
|
42721
|
-
.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; }
|
|
42722
|
-
.ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
|
|
42723
|
-
.ql-input { width: 100%; }
|
|
42724
|
-
.ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
|
|
42725
|
-
.ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
|
|
42726
|
-
.ql-footer-left { display: flex; align-items: center; }
|
|
42727
|
-
.ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
|
|
42728
|
-
.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; }
|
|
42729
|
-
.ql-page-size-select:focus { border-color: #6366f1; }
|
|
42730
|
-
.ql-footer-right { display: flex; align-items: center; gap: 4px; }
|
|
42731
|
-
.ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
|
|
42732
|
-
.ql-nav-btn { width: 28px; height: 28px; }
|
|
42733
|
-
`], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n" }]
|
|
42752
|
+
args: [{ selector: 'cqa-questionnaire-list', styles: [QUESTIONNAIRE_LIST_STYLES], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n" }]
|
|
42734
42753
|
}], propDecorators: { items: [{
|
|
42735
42754
|
type: Input
|
|
42736
42755
|
}], defaultPageSize: [{
|
|
@@ -42751,6 +42770,38 @@ const EVENT_ICON_MAP = {
|
|
|
42751
42770
|
questionnaire_generated: 'assignment',
|
|
42752
42771
|
};
|
|
42753
42772
|
const DEFAULT_ICON = 'description';
|
|
42773
|
+
const CHANGE_HISTORY_STYLES = `
|
|
42774
|
+
:host { display: block; width: 100%; }
|
|
42775
|
+
.ch-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
|
|
42776
|
+
.ch-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
|
|
42777
|
+
.ch-header-icon { display: inline-flex; align-items: center; color: #6b7280; flex-shrink: 0; }
|
|
42778
|
+
.ch-header-icon mat-icon { font-size: 20px; width: 20px; height: 20px; }
|
|
42779
|
+
.ch-title { font-size: 15px; font-weight: 600; color: #1a1d23; margin: 0 0 2px 0; line-height: 1.4; }
|
|
42780
|
+
.ch-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; }
|
|
42781
|
+
.ch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; }
|
|
42782
|
+
.ch-empty p { font-size: 14px; color: #9ca3af; margin: 0; }
|
|
42783
|
+
.ch-empty-icon { font-size: 32px; width: 32px; height: 32px; color: #d1d5db; }
|
|
42784
|
+
.ch-timeline { list-style: none; margin: 0; padding: 0; }
|
|
42785
|
+
.ch-event { display: flex; align-items: flex-start; }
|
|
42786
|
+
.ch-track { width: 24px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
|
|
42787
|
+
.ch-track::after { content: ''; width: 2px; flex: 1; background-color: #e5e7eb; margin-top: 4px; }
|
|
42788
|
+
.ch-event--last .ch-track::after { display: none; }
|
|
42789
|
+
.ch-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #d1d5db; margin-top: 4px; z-index: 1; flex-shrink: 0; }
|
|
42790
|
+
.ch-card { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 28px 12px; width: 100%; }
|
|
42791
|
+
.ch-event-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #f3f4f6; flex-shrink: 0; }
|
|
42792
|
+
.ch-event-icon mat-icon { font-size: 16px; width: 16px; height: 16px; color: #6b7280; }
|
|
42793
|
+
.ch-event-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
42794
|
+
.ch-event-title { font-size: 14px; font-weight: 600; color: #1a1d23; }
|
|
42795
|
+
.ch-event-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
|
|
42796
|
+
.ch-meta-icon { font-size: 12px; width: 12px; height: 12px; color: #9ca3af; }
|
|
42797
|
+
.ch-meta-actor, .ch-meta-timestamp { font-size: 12px; color: #6b7280; }
|
|
42798
|
+
.ch-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
|
|
42799
|
+
.ch-badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
|
|
42800
|
+
.ch-badge--added { background: #dcfce7; color: #15803d; }
|
|
42801
|
+
.ch-badge--modified { background: #fef9c3; color: #854d0e; }
|
|
42802
|
+
.ch-badge--removed { background: #fee2e2; color: #b91c1c; }
|
|
42803
|
+
.ch-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
|
|
42804
|
+
`;
|
|
42754
42805
|
class ChangeHistoryComponent {
|
|
42755
42806
|
constructor() {
|
|
42756
42807
|
this.items = [];
|
|
@@ -42776,38 +42827,7 @@ ChangeHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
|
|
|
42776
42827
|
ChangeHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChangeHistoryComponent, selector: "cqa-change-history", inputs: { items: "items", title: "title" }, outputs: { viewDetails: "viewDetails", revert: "revert" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n", styles: [":host{display:block;width:100%}.ch-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ch-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px}.ch-header-icon{display:inline-flex;align-items:center;color:#6b7280;flex-shrink:0}.ch-header-icon mat-icon{font-size:20px;width:20px;height:20px}.ch-title{font-size:15px;font-weight:600;color:#1a1d23;margin:0 0 2px;line-height:1.4}.ch-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0}.ch-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.ch-empty p{font-size:14px;color:#9ca3af;margin:0}.ch-empty-icon{font-size:32px;width:32px;height:32px;color:#d1d5db}.ch-timeline{list-style:none;margin:0;padding:0}.ch-event{display:flex;align-items:flex-start}.ch-track{width:24px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.ch-track:after{content:\"\";width:2px;flex:1;background-color:#e5e7eb;margin-top:4px}.ch-event--last .ch-track:after{display:none}.ch-dot{display:block;width:10px;height:10px;border-radius:50%;background:#ffffff;border:2px solid #d1d5db;margin-top:4px;z-index:1;flex-shrink:0}.ch-card{display:flex;align-items:flex-start;gap:12px;padding:0 0 28px 12px;width:100%}.ch-event-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#f3f4f6;flex-shrink:0}.ch-event-icon mat-icon{font-size:16px;width:16px;height:16px;color:#6b7280}.ch-event-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ch-event-title{font-size:14px;font-weight:600;color:#1a1d23}.ch-event-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280}.ch-meta-icon{font-size:12px;width:12px;height:12px;color:#9ca3af}.ch-meta-actor,.ch-meta-timestamp{font-size:12px;color:#6b7280}.ch-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.ch-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.ch-badge--added{background:#dcfce7;color:#15803d}.ch-badge--modified{background:#fef9c3;color:#854d0e}.ch-badge--removed{background:#fee2e2;color:#b91c1c}.ch-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
42777
42828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChangeHistoryComponent, decorators: [{
|
|
42778
42829
|
type: Component,
|
|
42779
|
-
args: [{ selector: 'cqa-change-history', styles: [
|
|
42780
|
-
:host { display: block; width: 100%; }
|
|
42781
|
-
.ch-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
|
|
42782
|
-
.ch-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
|
|
42783
|
-
.ch-header-icon { display: inline-flex; align-items: center; color: #6b7280; flex-shrink: 0; }
|
|
42784
|
-
.ch-header-icon mat-icon { font-size: 20px; width: 20px; height: 20px; }
|
|
42785
|
-
.ch-title { font-size: 15px; font-weight: 600; color: #1a1d23; margin: 0 0 2px 0; line-height: 1.4; }
|
|
42786
|
-
.ch-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; }
|
|
42787
|
-
.ch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; }
|
|
42788
|
-
.ch-empty p { font-size: 14px; color: #9ca3af; margin: 0; }
|
|
42789
|
-
.ch-empty-icon { font-size: 32px; width: 32px; height: 32px; color: #d1d5db; }
|
|
42790
|
-
.ch-timeline { list-style: none; margin: 0; padding: 0; }
|
|
42791
|
-
.ch-event { display: flex; align-items: flex-start; }
|
|
42792
|
-
.ch-track { width: 24px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
|
|
42793
|
-
.ch-track::after { content: ''; width: 2px; flex: 1; background-color: #e5e7eb; margin-top: 4px; }
|
|
42794
|
-
.ch-event--last .ch-track::after { display: none; }
|
|
42795
|
-
.ch-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #d1d5db; margin-top: 4px; z-index: 1; flex-shrink: 0; }
|
|
42796
|
-
.ch-card { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 28px 12px; width: 100%; }
|
|
42797
|
-
.ch-event-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #f3f4f6; flex-shrink: 0; }
|
|
42798
|
-
.ch-event-icon mat-icon { font-size: 16px; width: 16px; height: 16px; color: #6b7280; }
|
|
42799
|
-
.ch-event-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
|
|
42800
|
-
.ch-event-title { font-size: 14px; font-weight: 600; color: #1a1d23; }
|
|
42801
|
-
.ch-event-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
|
|
42802
|
-
.ch-meta-icon { font-size: 12px; width: 12px; height: 12px; color: #9ca3af; }
|
|
42803
|
-
.ch-meta-actor, .ch-meta-timestamp { font-size: 12px; color: #6b7280; }
|
|
42804
|
-
.ch-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
|
|
42805
|
-
.ch-badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
|
|
42806
|
-
.ch-badge--added { background: #dcfce7; color: #15803d; }
|
|
42807
|
-
.ch-badge--modified { background: #fef9c3; color: #854d0e; }
|
|
42808
|
-
.ch-badge--removed { background: #fee2e2; color: #b91c1c; }
|
|
42809
|
-
.ch-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
|
|
42810
|
-
`], host: { class: 'cqa-ui-root' }, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n" }]
|
|
42830
|
+
args: [{ selector: 'cqa-change-history', styles: [CHANGE_HISTORY_STYLES], host: { class: 'cqa-ui-root' }, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n" }]
|
|
42811
42831
|
}], propDecorators: { items: [{
|
|
42812
42832
|
type: Input
|
|
42813
42833
|
}], title: [{
|