@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
|
@@ -42832,10 +42832,10 @@ class QuestionnaireListComponent {
|
|
|
42832
42832
|
}
|
|
42833
42833
|
}
|
|
42834
42834
|
QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42835
|
-
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",
|
|
42835
|
+
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"] }] });
|
|
42836
42836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
|
|
42837
42837
|
type: Component,
|
|
42838
|
-
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: [
|
|
42838
|
+
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: [] }]
|
|
42839
42839
|
}], propDecorators: { items: [{
|
|
42840
42840
|
type: Input
|
|
42841
42841
|
}], defaultPageSize: [{
|
|
@@ -42941,15 +42941,16 @@ class VersionHistoryListComponent {
|
|
|
42941
42941
|
this.getAuthorInitialsFn = () => '';
|
|
42942
42942
|
this.getAuthorLabelFn = () => '';
|
|
42943
42943
|
this.getChangeTypeBadgeFn = () => ({ backgroundColor: '#F2F4F7', textColor: '#344054', borderColor: '#E4E7EC' });
|
|
42944
|
+
this.getChangeSummaryBadgeFn = (v) => ({ label: (v === null || v === void 0 ? void 0 : v.changeSummary) || '', backgroundColor: '#F2F4F7', textColor: '#344054', borderColor: '#E4E7EC' });
|
|
42944
42945
|
this.versionSelected = new EventEmitter();
|
|
42945
42946
|
this.listScroll = new EventEmitter();
|
|
42946
42947
|
}
|
|
42947
42948
|
}
|
|
42948
42949
|
VersionHistoryListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42949
|
-
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
|
|
42950
|
+
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"] }] });
|
|
42950
42951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryListComponent, decorators: [{
|
|
42951
42952
|
type: Component,
|
|
42952
|
-
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
|
|
42953
|
+
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: [] }]
|
|
42953
42954
|
}], propDecorators: { versions: [{
|
|
42954
42955
|
type: Input
|
|
42955
42956
|
}], selectedVersionId: [{
|
|
@@ -42970,6 +42971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
42970
42971
|
type: Input
|
|
42971
42972
|
}], getChangeTypeBadgeFn: [{
|
|
42972
42973
|
type: Input
|
|
42974
|
+
}], getChangeSummaryBadgeFn: [{
|
|
42975
|
+
type: Input
|
|
42973
42976
|
}], versionSelected: [{
|
|
42974
42977
|
type: Output
|
|
42975
42978
|
}], listScroll: [{
|
|
@@ -43104,6 +43107,14 @@ class VersionHistoryRestoreConfirmComponent {
|
|
|
43104
43107
|
this.authorName = '';
|
|
43105
43108
|
this.getChangeHeadlineFn = null;
|
|
43106
43109
|
}
|
|
43110
|
+
get settingsChanges() {
|
|
43111
|
+
var _a;
|
|
43112
|
+
return (((_a = this.restoringToVersion) === null || _a === void 0 ? void 0 : _a.changes) || []).filter((c) => c.category === 'settings');
|
|
43113
|
+
}
|
|
43114
|
+
get stepChanges() {
|
|
43115
|
+
var _a;
|
|
43116
|
+
return (((_a = this.restoringToVersion) === null || _a === void 0 ? void 0 : _a.changes) || []).filter((c) => c.category !== 'settings');
|
|
43117
|
+
}
|
|
43107
43118
|
getRestoreToLabel() {
|
|
43108
43119
|
if (!this.restoringToVersion) {
|
|
43109
43120
|
return '';
|
|
@@ -43120,10 +43131,10 @@ class VersionHistoryRestoreConfirmComponent {
|
|
|
43120
43131
|
}
|
|
43121
43132
|
}
|
|
43122
43133
|
VersionHistoryRestoreConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43123
|
-
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-
|
|
43134
|
+
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"] }] });
|
|
43124
43135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, decorators: [{
|
|
43125
43136
|
type: Component,
|
|
43126
|
-
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-
|
|
43137
|
+
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: [] }]
|
|
43127
43138
|
}], propDecorators: { restoringToVersion: [{
|
|
43128
43139
|
type: Input
|
|
43129
43140
|
}], currentVersionNumber: [{
|
|
@@ -43276,10 +43287,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
43276
43287
|
}
|
|
43277
43288
|
}
|
|
43278
43289
|
NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43279
|
-
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 } });
|
|
43290
|
+
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 } });
|
|
43280
43291
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
|
|
43281
43292
|
type: Component,
|
|
43282
|
-
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: [] }]
|
|
43293
|
+
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: [] }]
|
|
43283
43294
|
}], propDecorators: { selectedVersion: [{
|
|
43284
43295
|
type: Input
|
|
43285
43296
|
}], selectedIsCurrent: [{
|