@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
|
@@ -43006,51 +43006,12 @@ class VersionHistoryRestoreConfirmComponent {
|
|
|
43006
43006
|
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' +
|
|
43007
43007
|
d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
|
|
43008
43008
|
}
|
|
43009
|
-
getChangeInfo(change) {
|
|
43010
|
-
const op = ((change === null || change === void 0 ? void 0 : change.op) || '').toLowerCase();
|
|
43011
|
-
// Sentence comes entirely from the parent via getChangeHeadlineFn
|
|
43012
|
-
const sentence = this.getChangeHeadlineFn
|
|
43013
|
-
? this.getChangeHeadlineFn(change)
|
|
43014
|
-
: this.fallbackSentence(change);
|
|
43015
|
-
const fromDisplay = this.toDisplayHtml(change === null || change === void 0 ? void 0 : change.fromValue);
|
|
43016
|
-
const toDisplay = this.toDisplayHtml(change === null || change === void 0 ? void 0 : change.toValue);
|
|
43017
|
-
return { sentence, fromDisplay, toDisplay, op };
|
|
43018
|
-
}
|
|
43019
|
-
// Basic fallback if no getChangeHeadlineFn is provided
|
|
43020
|
-
fallbackSentence(change) {
|
|
43021
|
-
const field = (change === null || change === void 0 ? void 0 : change.field) || 'Step';
|
|
43022
|
-
const op = ((change === null || change === void 0 ? void 0 : change.op) || '').toLowerCase();
|
|
43023
|
-
const step = (change === null || change === void 0 ? void 0 : change.stepId) != null ? `Step #${change.stepId} ` : '';
|
|
43024
|
-
if (op === 'add') {
|
|
43025
|
-
return `${step}${field} added`;
|
|
43026
|
-
}
|
|
43027
|
-
if (op === 'remove') {
|
|
43028
|
-
return `${step}${field} removed`;
|
|
43029
|
-
}
|
|
43030
|
-
if (op === 'replace') {
|
|
43031
|
-
return `${step}${field} changed`;
|
|
43032
|
-
}
|
|
43033
|
-
return `${step}${field} updated`;
|
|
43034
|
-
}
|
|
43035
|
-
// Preserve HTML for detail pills — objects resolved to a readable string
|
|
43036
|
-
toDisplayHtml(value) {
|
|
43037
|
-
if (value == null) {
|
|
43038
|
-
return '';
|
|
43039
|
-
}
|
|
43040
|
-
if (typeof value === 'string') {
|
|
43041
|
-
return value.trim();
|
|
43042
|
-
}
|
|
43043
|
-
if (typeof value === 'object') {
|
|
43044
|
-
return value.action || value.type || value.name || JSON.stringify(value, null, 2);
|
|
43045
|
-
}
|
|
43046
|
-
return String(value);
|
|
43047
|
-
}
|
|
43048
43009
|
}
|
|
43049
43010
|
VersionHistoryRestoreConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43050
|
-
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
|
|
43011
|
+
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"] }] });
|
|
43051
43012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VersionHistoryRestoreConfirmComponent, decorators: [{
|
|
43052
43013
|
type: Component,
|
|
43053
|
-
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
|
|
43014
|
+
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: [] }]
|
|
43054
43015
|
}], propDecorators: { restoringToVersion: [{
|
|
43055
43016
|
type: Input
|
|
43056
43017
|
}], currentVersionNumber: [{
|
|
@@ -43076,6 +43037,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
43076
43037
|
this.getStepActionHtmlFn = () => '';
|
|
43077
43038
|
this.hiddenFields = [];
|
|
43078
43039
|
this.parseFieldAsTableFn = () => null;
|
|
43040
|
+
/** Return a badge config to render before the value text, or null for no badge. */
|
|
43041
|
+
this.getValueBadgeConfigFn = () => null;
|
|
43042
|
+
/** Return { oldHtml, newHtml } with inline diff markup, or null to use plain text rendering. */
|
|
43043
|
+
this.getInlineDiffFn = () => null;
|
|
43079
43044
|
this.compare = new EventEmitter();
|
|
43080
43045
|
this.restore = new EventEmitter();
|
|
43081
43046
|
}
|
|
@@ -43199,10 +43164,10 @@ class NewVersionHistoryDetailComponent {
|
|
|
43199
43164
|
}
|
|
43200
43165
|
}
|
|
43201
43166
|
NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43202
|
-
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 } });
|
|
43167
|
+
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 } });
|
|
43203
43168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
|
|
43204
43169
|
type: Component,
|
|
43205
|
-
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: [] }]
|
|
43170
|
+
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: [] }]
|
|
43206
43171
|
}], propDecorators: { selectedVersion: [{
|
|
43207
43172
|
type: Input
|
|
43208
43173
|
}], selectedIsCurrent: [{
|
|
@@ -43225,6 +43190,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43225
43190
|
type: Input
|
|
43226
43191
|
}], parseFieldAsTableFn: [{
|
|
43227
43192
|
type: Input
|
|
43193
|
+
}], getValueBadgeConfigFn: [{
|
|
43194
|
+
type: Input
|
|
43195
|
+
}], getInlineDiffFn: [{
|
|
43196
|
+
type: Input
|
|
43228
43197
|
}], compare: [{
|
|
43229
43198
|
type: Output
|
|
43230
43199
|
}], restore: [{
|