@cqa-lib/cqa-ui 1.1.463 → 1.1.465

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

@@ -2241,10 +2241,10 @@ class DynamicSelectFieldComponent {
             }
             catch { }
         }, 0);
-        // Setup document-level keyboard listener for arrow key navigation when search input is not focused
-        if (this.config?.searchable) {
-            this.setupDocumentKeydownListener();
-        }
+        // Setup document-level keyboard listener while the panel is open.
+        // Needed to reliably intercept key combos (e.g. Ctrl/Cmd+A) that can trigger Angular Material typeahead
+        // and accidentally activate the "Select All" option in multi-selects.
+        this.setupDocumentKeydownListener();
     }
     onSearch(key, value) {
         this.searchTextByKey[key] = value ?? '';
@@ -2266,6 +2266,14 @@ class DynamicSelectFieldComponent {
      */
     onSearchInputKeydown(event) {
         const key = event.key;
+        // Prevent Ctrl/Cmd + A from triggering mat-select typeahead/select-all behavior
+        // when the dropdown uses checkbox-style multi-select.
+        if ((event.ctrlKey || event.metaKey) && key.toLowerCase() === 'a') {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            return;
+        }
         // Handle navigation and selection keys
         if (key === 'ArrowUp' || key === 'ArrowDown') {
             // Stop the event completely before doing anything
@@ -2317,6 +2325,15 @@ class DynamicSelectFieldComponent {
         // For all other keys (typing), stop propagation to allow search input to work normally
         event.stopPropagation();
     }
+    onSelectKeydown(event) {
+        // Hard-block Ctrl/Cmd + A so it can't trigger Angular Material typeahead
+        // that may end up selecting the "All" option in checkbox-style multi-selects.
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a' && this.isMultiple) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+    }
     /**
      * Manually navigates through options when arrow keys are pressed from search input.
      * @param direction 1 for down, -1 for up
@@ -2609,10 +2626,6 @@ class DynamicSelectFieldComponent {
             if (!this.selectRef?.panelOpen) {
                 return;
             }
-            // Only handle arrow keys and Enter
-            if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Enter') {
-                return;
-            }
             // Don't handle if the search input is focused (it has its own handler)
             const activeElement = document.activeElement;
             if (activeElement && activeElement.classList.contains('ts-select-search-input')) {
@@ -2633,6 +2646,18 @@ class DynamicSelectFieldComponent {
             if (!isInOurComponent && target !== document.body && target !== document.documentElement) {
                 return;
             }
+            // Prevent Ctrl/Cmd + A from triggering mat-select typeahead/select-all behavior
+            // (often ends up selecting the "All" option and selecting everything).
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a' && this.isMultiple) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Only handle arrow keys and Enter
+            if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && event.key !== 'Enter') {
+                return;
+            }
             // Handle arrow keys for navigation
             if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
                 // Check if an option is currently focused - if so, let Angular Material handle it
@@ -2713,10 +2738,10 @@ class DynamicSelectFieldComponent {
     }
 }
 DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore", addCustomValue: "addCustomValue" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"onSearchInputKeydown($event)\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore", addCustomValue: "addCustomValue" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\"\n        (keydown)=\"onSelectKeydown($event)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"onSearchInputKeydown($event)\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"onSearchInputKeydown($event)\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
+            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\"\n        (keydown)=\"onSelectKeydown($event)\">\n        <mat-select-trigger *ngIf=\"!isMultiple && singleSelectedDisplayLabel\">\n          <span [innerHTML]=\"singleSelectedDisplayLabel\"></span>\n        </mat-select-trigger>\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"onSearchInputKeydown($event)\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option *ngIf=\"showAddCustomOption\" [value]=\"addCustomSentinelValue\" class=\"cqa-text-primary\">\n          New\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"getOptionValue(opt)\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
         }], propDecorators: { form: [{
                 type: Input
             }], config: [{
@@ -43162,10 +43187,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        <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 } });
+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\" [innerHTML]=\"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\" [innerHTML]=\"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        <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: [] }]
+            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\" [innerHTML]=\"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\" [innerHTML]=\"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: [{