@cqa-lib/cqa-ui 1.1.454 → 1.1.456

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, Pipe, HostBinding, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, HostBinding, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Optional, Inject, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Injector, Pipe, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -613,6 +613,8 @@ class SegmentControlComponent {
         this.indicatorStyle = {};
         this.indicatorVisible = false;
     }
+    get hostDisplay() { return this.fullWidth ? 'block' : null; }
+    get hostWidth() { return this.fullWidth ? '100%' : null; }
     ngOnChanges(changes) {
         if (changes['segments'] || changes['value']) {
             this.ensureSelectedValue();
@@ -809,7 +811,7 @@ class SegmentControlComponent {
     }
 }
 SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled", containerBgColor: "containerBgColor", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-segment-control', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : null\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    [ngClass]=\"fullWidth ? 'cqa-flex' : 'cqa-inline-flex'\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngStyle]=\"containerBgColor ? {'background-color': containerBgColor} : null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-0 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0\"\n      [ngClass]=\"{\n        'cqa-flex-1 cqa-min-w-0': fullWidth,\n        'cqa-flex-none': !fullWidth,\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-gap-1 cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        \n      <mat-icon *ngIf=\"segment?.icon\" class=\"!cqa-w-[12px] !cqa-h-[12px] !cqa-text-[12px]\" >\n        {{ segment?.icon }}\n      </mat-icon>\n\n      {{ segment.label }}\n\n      <span *ngIf=\"segment?.tooltip\"\n        style=\"display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; cursor: help;\"\n        [matTooltip]=\"segment.tooltip\"\n        matTooltipPosition=\"above\"\n        matTooltipShowDelay=\"0\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon style=\"width: 14px; height: 14px; font-size: 14px; opacity: 0.8;\">info</mat-icon>\n      </span>\n    </span>\n  </button>\n</div>", styles: [] }]
@@ -823,6 +825,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], fullWidth: [{
                 type: Input
+            }], hostDisplay: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
             }], valueChange: [{
                 type: Output
             }], segmentButtons: [{
@@ -43149,10 +43157,10 @@ class NewVersionHistoryDetailComponent {
     }
 }
 NewVersionHistoryDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NewVersionHistoryDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NewVersionHistoryDetailComponent, selector: "cqa-new-version-history-detail", inputs: { selectedVersion: "selectedVersion", selectedIsCurrent: "selectedIsCurrent", isRestoring: "isRestoring", getAuthorLabelFn: "getAuthorLabelFn", getFieldLabelFn: "getFieldLabelFn", getStepPrefixFn: "getStepPrefixFn", getCategoryLabelFn: "getCategoryLabelFn", formatDisplayValueFn: "formatDisplayValueFn", getStepActionHtmlFn: "getStepActionHtmlFn", hiddenFields: "hiddenFields", parseFieldAsTableFn: "parseFieldAsTableFn", getValueBadgeConfigFn: "getValueBadgeConfigFn", getInlineDiffFn: "getInlineDiffFn" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\"\n      [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
+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        <ng-container *ngIf=\"visibleChangedFields(step).length; else internalOnlyChanges\">\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        </ng-container>\n        <ng-template #internalOnlyChanges>\n          <div class=\"cqa-nvh-internal-change-msg\">\n            Some internal properties of this step were changed.\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\"\n      [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <!-- <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button> -->\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\"\n      [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [] }]
+            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        <ng-container *ngIf=\"visibleChangedFields(step).length; else internalOnlyChanges\">\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        </ng-container>\n        <ng-template #internalOnlyChanges>\n          <div class=\"cqa-nvh-internal-change-msg\">\n            Some internal properties of this step were changed.\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <ng-container *ngIf=\"getInlineDiffFn(oldValue, newValue, field, oldStepData, newStepData) as diff; else plainBeforeAfter\">\n      <!-- Inline diff view: no --before/--after color modifiers; diff HTML owns all token colors -->\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.oldHtml\"></span>\n        </div>\n        <div class=\"cqa-nvh-value-row\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\" [innerHTML]=\"diff.newHtml\"></span>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Plain text fallback (no diff) -->\n    <ng-template #plainBeforeAfter>\n      <div class=\"cqa-nvh-before-after\">\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n          <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n            borderColor=\"#FFE2E2\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(oldValue, field, oldStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field, oldStepData) }}</span>\n        </div>\n        <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n          <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n            borderColor=\"#D0FAE5\"></cqa-badge>\n          <ng-container *ngIf=\"getValueBadgeConfigFn(newValue, field, newStepData) as badge\">\n            <cqa-badge [label]=\"badge.label\" size=\"small\"\n              [backgroundColor]=\"badge.backgroundColor\" [textColor]=\"badge.textColor\"\n              [borderColor]=\"badge.borderColor\"></cqa-badge>\n          </ng-container>\n          <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field, newStepData) }}</span>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\" *ngIf=\"objectKeys(oldObj, newObj).length > 0\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-key-header\"></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\"\n      [class.cqa-nvh-obj-row--changed]=\"formatPrimitiveValue(oldObj?.[key]) !== formatPrimitiveValue(newObj?.[key])\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [] }]
         }], propDecorators: { selectedVersion: [{
                 type: Input
             }], selectedIsCurrent: [{