@cqa-lib/cqa-ui 1.1.445 → 1.1.446
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/version-history/new-version-history-detail/new-version-history-detail.component.mjs +11 -3
- package/esm2020/lib/version-history/version-history-restore-confirm/version-history-restore-confirm.component.mjs +3 -42
- package/fesm2015/cqa-lib-cqa-ui.mjs +12 -43
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +12 -43
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/version-history/new-version-history-detail/new-version-history-detail.component.d.ts +13 -1
- package/lib/version-history/version-history-restore-confirm/version-history-restore-confirm.component.d.ts +0 -8
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -42875,51 +42875,12 @@ class VersionHistoryRestoreConfirmComponent {
|
|
|
42875
42875
|
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' +
|
|
42876
42876
|
d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
|
|
42877
42877
|
}
|
|
42878
|
-
getChangeInfo(change) {
|
|
42879
|
-
const op = (change?.op || '').toLowerCase();
|
|
42880
|
-
// Sentence comes entirely from the parent via getChangeHeadlineFn
|
|
42881
|
-
const sentence = this.getChangeHeadlineFn
|
|
42882
|
-
? this.getChangeHeadlineFn(change)
|
|
42883
|
-
: this.fallbackSentence(change);
|
|
42884
|
-
const fromDisplay = this.toDisplayHtml(change?.fromValue);
|
|
42885
|
-
const toDisplay = this.toDisplayHtml(change?.toValue);
|
|
42886
|
-
return { sentence, fromDisplay, toDisplay, op };
|
|
42887
|
-
}
|
|
42888
|
-
// Basic fallback if no getChangeHeadlineFn is provided
|
|
42889
|
-
fallbackSentence(change) {
|
|
42890
|
-
const field = change?.field || 'Step';
|
|
42891
|
-
const op = (change?.op || '').toLowerCase();
|
|
42892
|
-
const step = change?.stepId != null ? `Step #${change.stepId} ` : '';
|
|
42893
|
-
if (op === 'add') {
|
|
42894
|
-
return `${step}${field} added`;
|
|
42895
|
-
}
|
|
42896
|
-
if (op === 'remove') {
|
|
42897
|
-
return `${step}${field} removed`;
|
|
42898
|
-
}
|
|
42899
|
-
if (op === 'replace') {
|
|
42900
|
-
return `${step}${field} changed`;
|
|
42901
|
-
}
|
|
42902
|
-
return `${step}${field} updated`;
|
|
42903
|
-
}
|
|
42904
|
-
// Preserve HTML for detail pills — objects resolved to a readable string
|
|
42905
|
-
toDisplayHtml(value) {
|
|
42906
|
-
if (value == null) {
|
|
42907
|
-
return '';
|
|
42908
|
-
}
|
|
42909
|
-
if (typeof value === 'string') {
|
|
42910
|
-
return value.trim();
|
|
42911
|
-
}
|
|
42912
|
-
if (typeof value === 'object') {
|
|
42913
|
-
return value.action || value.type || value.name || JSON.stringify(value, null, 2);
|
|
42914
|
-
}
|
|
42915
|
-
return String(value);
|
|
42916
|
-
}
|
|
42917
42878
|
}
|
|
42918
42879
|
VersionHistoryRestoreConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42919
|
-
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-list\">\n <div *ngFor=\"let change of restoringToVersion.changes; let i = index\"\n class=\"cqa-vh-restore-change-item\">\n
|
|
42880
|
+
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-list\">\n <div *ngFor=\"let change of restoringToVersion.changes; let i = index\"\n 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 </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"] }] });
|
|
42920
42881
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, decorators: [{
|
|
42921
42882
|
type: Component,
|
|
42922
|
-
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-list\">\n <div *ngFor=\"let change of restoringToVersion.changes; let i = index\"\n class=\"cqa-vh-restore-change-item\">\n
|
|
42883
|
+
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-list\">\n <div *ngFor=\"let change of restoringToVersion.changes; let i = index\"\n 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 </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: [] }]
|
|
42923
42884
|
}], propDecorators: { restoringToVersion: [{
|
|
42924
42885
|
type: Input
|
|
42925
42886
|
}], currentVersionNumber: [{
|
|
@@ -42945,6 +42906,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
42945
42906
|
this.getStepActionHtmlFn = () => '';
|
|
42946
42907
|
this.hiddenFields = [];
|
|
42947
42908
|
this.parseFieldAsTableFn = () => null;
|
|
42909
|
+
/** Return a badge config to render before the value text, or null for no badge. */
|
|
42910
|
+
this.getValueBadgeConfigFn = () => null;
|
|
42911
|
+
/** Return { oldHtml, newHtml } with inline diff markup, or null to use plain text rendering. */
|
|
42912
|
+
this.getInlineDiffFn = () => null;
|
|
42948
42913
|
this.compare = new EventEmitter();
|
|
42949
42914
|
this.restore = new EventEmitter();
|
|
42950
42915
|
}
|
|
@@ -43060,10 +43025,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
43060
43025
|
}
|
|
43061
43026
|
}
|
|
43062
43027
|
NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43063
|
-
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" }, 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 <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 <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 <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n </div>\n </div>\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 } });
|
|
43028
|
+
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 } });
|
|
43064
43029
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
|
|
43065
43030
|
type: Component,
|
|
43066
|
-
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 <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 <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 <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n </div>\n </div>\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: [] }]
|
|
43031
|
+
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: [] }]
|
|
43067
43032
|
}], propDecorators: { selectedVersion: [{
|
|
43068
43033
|
type: Input
|
|
43069
43034
|
}], selectedIsCurrent: [{
|
|
@@ -43086,6 +43051,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43086
43051
|
type: Input
|
|
43087
43052
|
}], parseFieldAsTableFn: [{
|
|
43088
43053
|
type: Input
|
|
43054
|
+
}], getValueBadgeConfigFn: [{
|
|
43055
|
+
type: Input
|
|
43056
|
+
}], getInlineDiffFn: [{
|
|
43057
|
+
type: Input
|
|
43089
43058
|
}], compare: [{
|
|
43090
43059
|
type: Output
|
|
43091
43060
|
}], restore: [{
|