@cqa-lib/cqa-ui 1.1.452 → 1.1.453
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/questionnaire-list/questionnaire-list.component.mjs +3 -3
- package/esm2020/lib/version-history/new-version-history-detail/new-version-history-detail.component.mjs +3 -3
- package/esm2020/lib/version-history/version-history-list/version-history-list.component.mjs +6 -3
- package/esm2020/lib/version-history/version-history-restore-confirm/version-history-restore-confirm.component.mjs +9 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +19 -8
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +17 -8
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/version-history/version-history-list/version-history-list.component.d.ts +7 -1
- package/lib/version-history/version-history-restore-confirm/version-history-restore-confirm.component.d.ts +2 -0
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -42702,10 +42702,10 @@ class QuestionnaireListComponent {
|
|
|
42702
42702
|
}
|
|
42703
42703
|
}
|
|
42704
42704
|
QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42705
|
-
QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n",
|
|
42705
|
+
QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "pageSizeDropdownContainer", first: true, predicate: ["pageSizeDropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
42706
42706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
42707
42707
|
type: Component,
|
|
42708
|
-
args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [
|
|
42708
|
+
args: [{ selector: 'cqa-questionnaire-list', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-rounded-xl cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-font-inter\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"cqa-py-3 cqa-px-6 cqa-bg-[#EEF2FF80]\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0F172A] cqa-leading-[22px] cqa-m-0 cqa-mb-1\">Clarification Questionnaire</h2>\n <p class=\"cqa-text-[14px] cqa-text-[#475569] cqa-leading-[18px] cqa-m-0\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <div class=\"cqa-px-6 cqa-py-3\">\n <!-- Question rows -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2.5 cqa-mb-2\">\n <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-w-[24px] cqa-h-[24px] cqa-min-w-[24px] cqa-rounded-full cqa-bg-[#EEF2FF] cqa-text-[#4F46E5] cqa-text-[12px] cqa-leading-[18px] cqa-font-bold cqa-shrink-0\">{{ item.index }}</span>\n <label class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#0F172A]\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n </div>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"cqa-w-full\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"cqa-py-6 cqa-text-[13px] cqa-text-[#6B7280] cqa-text-center\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: aligned with table pagination design -->\n <div class=\"cqa-mt-3 table-footer-pagination cqa-text-[#717182] cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-px-[21px] cqa-py-1.5\" aria-live=\"polite\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n <span class=\"rows-label\">Questions per page</span>\n <div class=\"cqa-relative\" #pageSizeDropdownContainer>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-[24px] cqa-text-[#0A0A0A] cqa-px-[11.5px] cqa-py-[6.75px]\"\n (click)=\"togglePageSizeMenu()\"\n [attr.aria-expanded]=\"pageSizeOpen\"\n aria-haspopup=\"listbox\"\n aria-label=\"Questions per page\"\n >\n {{ pageSize }}\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n </button>\n <div\n *ngIf=\"pageSizeOpen\"\n class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"'question-pagesize-' + pageSize\"\n >\n <button\n *ngFor=\"let opt of pageSizeOptions\"\n type=\"button\"\n class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n [attr.id]=\"'question-pagesize-' + opt\"\n role=\"option\"\n [attr.aria-selected]=\"pageSize === opt\"\n (click)=\"selectPageSize(opt)\"\n >\n {{ opt }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n <div class=\"pagination-range\">\n {{ totalItems ? startIndex + 1 : 0 }}–{{ endIndex }} of {{ totalItems }}\n </div>\n <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isPrevDisabled\" (click)=\"prevPage()\" aria-label=\"Previous page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\" [disabled]=\"isNextDisabled\" (click)=\"nextPage()\" aria-label=\"Next page\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#0A0A0A\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [] }]
|
|
42709
42709
|
}], propDecorators: { items: [{
|
|
42710
42710
|
type: Input
|
|
42711
42711
|
}], defaultPageSize: [{
|
|
@@ -42810,15 +42810,16 @@ class VersionHistoryListComponent {
|
|
|
42810
42810
|
this.getAuthorInitialsFn = () => '';
|
|
42811
42811
|
this.getAuthorLabelFn = () => '';
|
|
42812
42812
|
this.getChangeTypeBadgeFn = () => ({ backgroundColor: '#F2F4F7', textColor: '#344054', borderColor: '#E4E7EC' });
|
|
42813
|
+
this.getChangeSummaryBadgeFn = (v) => ({ label: v?.changeSummary || '', backgroundColor: '#F2F4F7', textColor: '#344054', borderColor: '#E4E7EC' });
|
|
42813
42814
|
this.versionSelected = new EventEmitter();
|
|
42814
42815
|
this.listScroll = new EventEmitter();
|
|
42815
42816
|
}
|
|
42816
42817
|
}
|
|
42817
42818
|
VersionHistoryListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42818
|
-
VersionHistoryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryListComponent, selector: "cqa-version-history-list", inputs: { versions: "versions", selectedVersionId: "selectedVersionId", currentVersionId: "currentVersionId", isLoadingList: "isLoadingList", isLoadingMore: "isLoadingMore", emptyStateConfig: "emptyStateConfig", getRelativeTimeFn: "getRelativeTimeFn", getAuthorInitialsFn: "getAuthorInitialsFn", getAuthorLabelFn: "getAuthorLabelFn", getChangeTypeBadgeFn: "getChangeTypeBadgeFn" }, outputs: { versionSelected: "versionSelected", listScroll: "listScroll" }, ngImport: i0, template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n {{ versions.length }} Versions\n </div>\n\n <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n <div style=\"flex: 1;\">\n <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!isLoadingList\">\n <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n </div>\n <div class=\"cqa-vh-list-body\">\n <div\n *ngFor=\"let v of versions\"\n (click)=\"versionSelected.emit(v.id)\"\n class=\"cqa-vh-list-item\"\n [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n <div style=\"padding-top: 3px; flex-shrink: 0;\">\n <span class=\"cqa-vh-list-item-radio\"\n [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n </span>\n </div>\n <div style=\"flex: 1; min-width: 0;\">\n <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n <span class=\"cqa-vh-list-item-version\"\n [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n v{{ v.versionNumber }}\n </span>\n <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n </div>\n\n <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n
|
|
42819
|
+
VersionHistoryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryListComponent, selector: "cqa-version-history-list", inputs: { versions: "versions", selectedVersionId: "selectedVersionId", currentVersionId: "currentVersionId", isLoadingList: "isLoadingList", isLoadingMore: "isLoadingMore", emptyStateConfig: "emptyStateConfig", getRelativeTimeFn: "getRelativeTimeFn", getAuthorInitialsFn: "getAuthorInitialsFn", getAuthorLabelFn: "getAuthorLabelFn", getChangeTypeBadgeFn: "getChangeTypeBadgeFn", getChangeSummaryBadgeFn: "getChangeSummaryBadgeFn" }, outputs: { versionSelected: "versionSelected", listScroll: "listScroll" }, ngImport: i0, template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n {{ versions.length }} Versions\n </div>\n\n <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n <div style=\"flex: 1;\">\n <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!isLoadingList\">\n <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n </div>\n <div class=\"cqa-vh-list-body\">\n <div\n *ngFor=\"let v of versions\"\n (click)=\"versionSelected.emit(v.id)\"\n class=\"cqa-vh-list-item\"\n [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n <div style=\"padding-top: 3px; flex-shrink: 0;\">\n <span class=\"cqa-vh-list-item-radio\"\n [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n </span>\n </div>\n <div style=\"flex: 1; min-width: 0;\">\n <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n <span class=\"cqa-vh-list-item-version\"\n [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n v{{ v.versionNumber }}\n </span>\n <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n </div>\n\n <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n <ng-container *ngIf=\"getChangeSummaryBadgeFn(v) as badge\">\n <cqa-badge\n [label]=\"badge.label\"\n size=\"extra-small\"\n [backgroundColor]=\"badge.backgroundColor\"\n [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\">\n </cqa-badge>\n </ng-container>\n </div>\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 4px;\">\n <span class=\"cqa-vh-list-item-avatar\">{{ getAuthorInitialsFn(v) }}</span>\n <span class=\"cqa-vh-list-item-author\">{{ getAuthorLabelFn(v) }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"isLoadingMore\" class=\"cqa-vh-list-loading-more\">\n Loading more...\n </div>\n </div>\n </ng-container>\n</div>\n", components: [{ type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
42819
42820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryListComponent, decorators: [{
|
|
42820
42821
|
type: Component,
|
|
42821
|
-
args: [{ selector: 'cqa-version-history-list', template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n {{ versions.length }} Versions\n </div>\n\n <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n <div style=\"flex: 1;\">\n <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!isLoadingList\">\n <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n </div>\n <div class=\"cqa-vh-list-body\">\n <div\n *ngFor=\"let v of versions\"\n (click)=\"versionSelected.emit(v.id)\"\n class=\"cqa-vh-list-item\"\n [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n <div style=\"padding-top: 3px; flex-shrink: 0;\">\n <span class=\"cqa-vh-list-item-radio\"\n [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n </span>\n </div>\n <div style=\"flex: 1; min-width: 0;\">\n <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n <span class=\"cqa-vh-list-item-version\"\n [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n v{{ v.versionNumber }}\n </span>\n <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n </div>\n\n <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n
|
|
42822
|
+
args: [{ selector: 'cqa-version-history-list', template: "<div class=\"cqa-vh-list-container\" (scroll)=\"listScroll.emit($event)\">\n <div class=\"d-flex align-items-center justify-content-between fz-14 fw-semi-bold cqa-vh-list-header\">\n {{ versions.length }} Versions\n </div>\n\n <div *ngIf=\"isLoadingList\" class=\"cqa-vh-list-skeleton\">\n <div *ngFor=\"let i of [1,2,3,4]\" class=\"cqa-vh-list-skeleton-row\">\n <div class=\"animated-background rounded-circle cqa-vh-list-skeleton-dot\"></div>\n <div style=\"flex: 1;\">\n <div class=\"animated-background\" style=\"height: 14px; width: 50%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 80%; border-radius: 4px; margin-bottom: 10px;\"></div>\n <div class=\"animated-background\" style=\"height: 12px; width: 45%; border-radius: 4px;\"></div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!isLoadingList\">\n <div *ngIf=\"!versions.length\" class=\"cqa-vh-list-empty\">\n <cqa-empty-state [title]=\"emptyStateConfig?.title\" [description]=\"emptyStateConfig?.description\"\n [imageUrl]=\"emptyStateConfig?.imageUrl\"></cqa-empty-state>\n </div>\n <div class=\"cqa-vh-list-body\">\n <div\n *ngFor=\"let v of versions\"\n (click)=\"versionSelected.emit(v.id)\"\n class=\"cqa-vh-list-item\"\n [class.cqa-vh-list-item--selected]=\"v.id === selectedVersionId\">\n <div class=\"d-flex align-items-start\" style=\"gap: 12px;\">\n <div style=\"padding-top: 3px; flex-shrink: 0;\">\n <span class=\"cqa-vh-list-item-radio\"\n [class.cqa-vh-list-item-radio--selected]=\"v.id === selectedVersionId\">\n <span *ngIf=\"v.id === selectedVersionId\" class=\"cqa-vh-list-item-radio-dot\"></span>\n </span>\n </div>\n <div style=\"flex: 1; min-width: 0;\">\n <div class=\"d-flex align-items-center justify-content-between\" style=\"margin-bottom: 4px;\">\n <div class=\"d-flex align-items-center\" style=\"gap: 6px;\">\n <span class=\"cqa-vh-list-item-version\"\n [class.cqa-vh-list-item-version--selected]=\"v.id === selectedVersionId\">\n v{{ v.versionNumber }}\n </span>\n <cqa-badge *ngIf=\"v.id === currentVersionId\" label=\"Current\" size=\"extra-small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <span class=\"cqa-vh-list-item-time\">{{ getRelativeTimeFn(v.createdDate) }}</span>\n </div>\n\n <div *ngIf=\"v.changeSummary\" class=\"cqa-vh-list-item-summary\">\n <ng-container *ngIf=\"getChangeSummaryBadgeFn(v) as badge\">\n <cqa-badge\n [label]=\"badge.label\"\n size=\"extra-small\"\n [backgroundColor]=\"badge.backgroundColor\"\n [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\">\n </cqa-badge>\n </ng-container>\n </div>\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-top: 4px;\">\n <span class=\"cqa-vh-list-item-avatar\">{{ getAuthorInitialsFn(v) }}</span>\n <span class=\"cqa-vh-list-item-author\">{{ getAuthorLabelFn(v) }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"isLoadingMore\" class=\"cqa-vh-list-loading-more\">\n Loading more...\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [] }]
|
|
42822
42823
|
}], propDecorators: { versions: [{
|
|
42823
42824
|
type: Input
|
|
42824
42825
|
}], selectedVersionId: [{
|
|
@@ -42839,6 +42840,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42839
42840
|
type: Input
|
|
42840
42841
|
}], getChangeTypeBadgeFn: [{
|
|
42841
42842
|
type: Input
|
|
42843
|
+
}], getChangeSummaryBadgeFn: [{
|
|
42844
|
+
type: Input
|
|
42842
42845
|
}], versionSelected: [{
|
|
42843
42846
|
type: Output
|
|
42844
42847
|
}], listScroll: [{
|
|
@@ -42972,6 +42975,12 @@ class VersionHistoryRestoreConfirmComponent {
|
|
|
42972
42975
|
this.authorName = '';
|
|
42973
42976
|
this.getChangeHeadlineFn = null;
|
|
42974
42977
|
}
|
|
42978
|
+
get settingsChanges() {
|
|
42979
|
+
return (this.restoringToVersion?.changes || []).filter((c) => c.category === 'settings');
|
|
42980
|
+
}
|
|
42981
|
+
get stepChanges() {
|
|
42982
|
+
return (this.restoringToVersion?.changes || []).filter((c) => c.category !== 'settings');
|
|
42983
|
+
}
|
|
42975
42984
|
getRestoreToLabel() {
|
|
42976
42985
|
if (!this.restoringToVersion) {
|
|
42977
42986
|
return '';
|
|
@@ -42988,10 +42997,10 @@ class VersionHistoryRestoreConfirmComponent {
|
|
|
42988
42997
|
}
|
|
42989
42998
|
}
|
|
42990
42999
|
VersionHistoryRestoreConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42991
|
-
VersionHistoryRestoreConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryRestoreConfirmComponent, selector: "cqa-version-history-restore-confirm", inputs: { restoringToVersion: "restoringToVersion", currentVersionNumber: "currentVersionNumber", newVersionNumber: "newVersionNumber", authorName: "authorName", getChangeHeadlineFn: "getChangeHeadlineFn" }, ngImport: i0, template: "<div class=\"cqa-vh-restore-confirm\">\n\n <!-- Info grid -->\n <div class=\"cqa-vh-restore-info-grid\">\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">New version created</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Current version</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Author</span>\n <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n </div>\n </div>\n\n <!-- Changes that will be reverted -->\n <div *ngIf=\"restoringToVersion?.changes?.length\">\n <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n <div class=\"cqa-vh-restore-changes-
|
|
43000
|
+
VersionHistoryRestoreConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VersionHistoryRestoreConfirmComponent, selector: "cqa-version-history-restore-confirm", inputs: { restoringToVersion: "restoringToVersion", currentVersionNumber: "currentVersionNumber", newVersionNumber: "newVersionNumber", authorName: "authorName", getChangeHeadlineFn: "getChangeHeadlineFn" }, ngImport: i0, template: "<div class=\"cqa-vh-restore-confirm\">\n\n <!-- Info grid -->\n <div class=\"cqa-vh-restore-info-grid\">\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">New version created</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Current version</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Author</span>\n <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n </div>\n </div>\n\n <!-- Changes that will be reverted -->\n <div *ngIf=\"restoringToVersion?.changes?.length\">\n <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n\n <!-- Settings changes -->\n <ng-container *ngIf=\"settingsChanges.length\">\n <div class=\"cqa-vh-restore-changes-subheader\">\n <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">settings</span>\n Test Case Settings\n </div>\n <div class=\"cqa-vh-restore-changes-list\">\n <div *ngFor=\"let change of settingsChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Step changes -->\n <ng-container *ngIf=\"stepChanges.length\">\n <div class=\"cqa-vh-restore-changes-subheader\" [style.marginTop]=\"settingsChanges.length ? '12px' : '0'\">\n <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">list_alt</span>\n Step Changes\n </div>\n <div class=\"cqa-vh-restore-changes-list\">\n <div *ngFor=\"let change of stepChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Preservation note -->\n <div class=\"cqa-vh-restore-note\">\n <span class=\"material-symbols-outlined cqa-vh-restore-note-icon\">info</span>\n <span class=\"cqa-vh-restore-note-text\">\n All version history will be fully preserved. This restore action will itself appear as a new version entry in the timeline.\n </span>\n </div>\n\n</div>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
42992
43001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, decorators: [{
|
|
42993
43002
|
type: Component,
|
|
42994
|
-
args: [{ selector: 'cqa-version-history-restore-confirm', template: "<div class=\"cqa-vh-restore-confirm\">\n\n <!-- Info grid -->\n <div class=\"cqa-vh-restore-info-grid\">\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">New version created</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Current version</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Author</span>\n <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n </div>\n </div>\n\n <!-- Changes that will be reverted -->\n <div *ngIf=\"restoringToVersion?.changes?.length\">\n <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n <div class=\"cqa-vh-restore-changes-
|
|
43003
|
+
args: [{ selector: 'cqa-version-history-restore-confirm', template: "<div class=\"cqa-vh-restore-confirm\">\n\n <!-- Info grid -->\n <div class=\"cqa-vh-restore-info-grid\">\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Restoring to</span>\n <span class=\"cqa-vh-restore-info-value\">{{ getRestoreToLabel() }}</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">New version created</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ newVersionNumber }} (auto-incremented)</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Current version</span>\n <span class=\"cqa-vh-restore-info-value\">v{{ currentVersionNumber }} \u2014 preserved in history</span>\n </div>\n <div class=\"cqa-vh-restore-info-row\">\n <span class=\"cqa-vh-restore-info-label\">Author</span>\n <span class=\"cqa-vh-restore-info-value\">{{ authorName }}</span>\n </div>\n </div>\n\n <!-- Changes that will be reverted -->\n <div *ngIf=\"restoringToVersion?.changes?.length\">\n <div class=\"cqa-vh-restore-changes-title\">Changes that will be reverted</div>\n\n <!-- Settings changes -->\n <ng-container *ngIf=\"settingsChanges.length\">\n <div class=\"cqa-vh-restore-changes-subheader\">\n <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">settings</span>\n Test Case Settings\n </div>\n <div class=\"cqa-vh-restore-changes-list\">\n <div *ngFor=\"let change of settingsChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n </div>\n </div>\n </ng-container>\n\n <!-- Step changes -->\n <ng-container *ngIf=\"stepChanges.length\">\n <div class=\"cqa-vh-restore-changes-subheader\" [style.marginTop]=\"settingsChanges.length ? '12px' : '0'\">\n <span class=\"material-symbols-outlined cqa-vh-restore-subheader-icon\">list_alt</span>\n Step Changes\n </div>\n <div class=\"cqa-vh-restore-changes-list\">\n <div *ngFor=\"let change of stepChanges; let i = index\" class=\"cqa-vh-restore-change-item\">\n <div class=\"cqa-vh-restore-change-index\">{{ i + 1 }}</div>\n <span class=\"cqa-vh-restore-change-sentence\">{{ getChangeHeadlineFn ? getChangeHeadlineFn(change) : change?.sentence || '' }}</span>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Preservation note -->\n <div class=\"cqa-vh-restore-note\">\n <span class=\"material-symbols-outlined cqa-vh-restore-note-icon\">info</span>\n <span class=\"cqa-vh-restore-note-text\">\n All version history will be fully preserved. This restore action will itself appear as a new version entry in the timeline.\n </span>\n </div>\n\n</div>\n", styles: [] }]
|
|
42995
43004
|
}], propDecorators: { restoringToVersion: [{
|
|
42996
43005
|
type: Input
|
|
42997
43006
|
}], currentVersionNumber: [{
|
|
@@ -43136,10 +43145,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
43136
43145
|
}
|
|
43137
43146
|
}
|
|
43138
43147
|
NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43139
|
-
NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn", getValueBadgeConfigFn: "getValueBadgeConfigFn", getInlineDiffFn: "getInlineDiffFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n </div>\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Plain text fallback (no diff) -->\n <ng-template #plainBeforeAfter>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n </div>\n </div>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n <div class=\"cqa-nvh-obj-header\">\n <span></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
|
|
43148
|
+
NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn", getValueBadgeConfigFn: "getValueBadgeConfigFn", getInlineDiffFn: "getInlineDiffFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n </div>\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Plain text fallback (no diff) -->\n <ng-template #plainBeforeAfter>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n </div>\n </div>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n <div class=\"cqa-nvh-obj-header\">\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\"\n [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
|
|
43140
43149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
|
|
43141
43150
|
type: Component,
|
|
43142
|
-
args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n </div>\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Plain text fallback (no diff) -->\n <ng-template #plainBeforeAfter>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n </div>\n </div>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n <div class=\"cqa-nvh-obj-header\">\n <span></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", styles: [] }]
|
|
43151
|
+
args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n <!-- ========== Header (same as old component) ========== -->\n <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n <div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n <div class=\"cqa-nvh-detail-meta\">\n {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n </div>\n <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n {{ selectedVersion.changeSummary }}\n </div>\n </div>\n <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n </div>\n </div>\n\n <!-- ========== Summary bar ========== -->\n <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n </div> -->\n\n <!-- ========== Test Case Changes ========== -->\n <ng-container *ngIf=\"hasTestCaseChanges\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: selectedVersion.testCase.old?.[field],\n newValue: selectedVersion.testCase.new?.[field],\n field: field,\n oldStepData: selectedVersion.testCase.old,\n newStepData: selectedVersion.testCase.new\n }\">\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Added ========== -->\n <ng-container *ngIf=\"stepsAdded.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Added</span>\n <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n borderColor=\"#A7F3D0\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Deleted ========== -->\n <ng-container *ngIf=\"stepsDeleted.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n borderColor=\"#FECDCA\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Steps Updated ========== -->\n <ng-container *ngIf=\"stepsUpdated.length\">\n <div class=\"cqa-nvh-section-header\">\n <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n </div>\n\n <div class=\"cqa-nvh-changes-list\">\n <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n <!-- Step header with category badge -->\n <div class=\"cqa-nvh-step-header\">\n <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n </div>\n\n <!-- Changed fields with before/after -->\n <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n <ng-container\n *ngTemplateOutlet=\"beforeAfterBlock; context: {\n oldValue: step.old?.[field],\n newValue: step.new?.[field],\n field: field,\n oldStepData: step.old,\n newStepData: step.new\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- ========== Empty state ========== -->\n <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n </div>\n</ng-container>\n\n<ng-template #noSelection>\n <div class=\"cqa-nvh-detail-no-selection\">\n Select a version to view details.\n </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n newObj: parseFieldAsTableFn(field, newValue, newStepData)\n }\">\n </ng-container>\n </ng-container>\n\n <!-- 2. Native object / JSON string -->\n <ng-template #nativeObjectCheck>\n <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n <ng-container\n *ngTemplateOutlet=\"objTable; context: {\n oldObj: parseObjectValue(oldValue),\n newObj: parseObjectValue(newValue)\n }\">\n </ng-container>\n </ng-container>\n </ng-template>\n\n <!-- 3. Primitive fallback -->\n <ng-template #simpleValue>\n <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n </div>\n <div class=\"cqa-nvh-value-row\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n </div>\n </div>\n </ng-container>\n\n <!-- Plain text fallback (no diff) -->\n <ng-template #plainBeforeAfter>\n <div class=\"cqa-nvh-before-after\">\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n borderColor=\"#FFE2E2\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n </div>\n <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n borderColor=\"#D0FAE5\"></cqa-badge>\n <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n <cqa-badge [label]=\"badge.label\" size=\"small\"\n [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n [borderColor]=\"badge.borderColor\"></cqa-badge>\n </ng-container>\n <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n </div>\n </div>\n </ng-template>\n </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n <div class=\"cqa-nvh-obj-header\">\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n </div>\n <div\n *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n class=\"cqa-nvh-obj-row\"\n [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n {{ formatPrimitiveValue(oldObj?.[key]) }}\n </span>\n <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n {{ formatPrimitiveValue(newObj?.[key]) }}\n </span>\n </div>\n </div>\n</ng-template>\n", styles: [] }]
|
|
43143
43152
|
}], propDecorators: { selectedVersion: [{
|
|
43144
43153
|
type: Input
|
|
43145
43154
|
}], selectedIsCurrent: [{
|