@cqa-lib/cqa-ui 1.1.437 → 1.1.439

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

@@ -42678,6 +42678,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class NewVersionHistoryDetailComponent {
+    constructor() {
+        this.selectedIsCurrent = false;
+        this.isRestoring = false;
+        this.getAuthorLabelFn = () => '';
+        this.getFieldLabelFn = (field) => field;
+        this.getStepPrefixFn = () => 'Step';
+        this.getCategoryLabelFn = (cat) => (cat || 'Other') + ' Changes';
+        this.formatDisplayValueFn = (v) => v == null ? '-' : String(v);
+        this.getStepActionHtmlFn = () => '';
+        this.hiddenFields = [];
+        this.parseFieldAsTableFn = () => null;
+        this.compare = new EventEmitter();
+        this.restore = new EventEmitter();
+    }
+    get hasTestCaseChanges() {
+        return this.selectedVersion?.testCase?.hasChanges === true;
+    }
+    get testCaseChangedFields() {
+        return this.visibleFields(this.selectedVersion?.testCase?.changedFields || []);
+    }
+    visibleFields(fields) {
+        if (!this.hiddenFields?.length) {
+            return fields;
+        }
+        return fields.filter(f => !this.hiddenFields.includes(f));
+    }
+    visibleChangedFields(step) {
+        return this.visibleFields(step?.changedFields || []);
+    }
+    get stepsAdded() {
+        return this.selectedVersion?.steps?.added || [];
+    }
+    get stepsDeleted() {
+        return this.selectedVersion?.steps?.deleted || [];
+    }
+    get stepsUpdated() {
+        return this.selectedVersion?.steps?.updated || [];
+    }
+    get stepsSummary() {
+        return this.selectedVersion?.steps?.summary;
+    }
+    get hasAnyChanges() {
+        return this.hasTestCaseChanges
+            || this.stepsAdded.length > 0
+            || this.stepsDeleted.length > 0
+            || this.stepsUpdated.length > 0;
+    }
+    /**
+     * Tries to parse the value as a plain object (or a JSON string that is an object).
+     * Returns the parsed object, or null if the value is not an object/JSON-object.
+     */
+    parseObjectValue(value) {
+        if (value == null) {
+            return null;
+        }
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            return value;
+        }
+        if (typeof value === 'string') {
+            const trimmed = value.trim();
+            if (trimmed.startsWith('{')) {
+                try {
+                    const parsed = JSON.parse(trimmed);
+                    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                        return parsed;
+                    }
+                }
+                catch { /* not valid JSON */ }
+            }
+        }
+        return null;
+    }
+    /** Returns only the keys where old and new values differ. */
+    objectKeys(oldObj, newObj) {
+        const allKeys = new Set([
+            ...Object.keys(oldObj || {}),
+            ...Object.keys(newObj || {})
+        ]);
+        return Array.from(allKeys).filter(key => JSON.stringify((oldObj || {})[key]) !== JSON.stringify((newObj || {})[key]));
+    }
+    /** True when the value for a key differs between old and new. */
+    isKeyChanged(oldObj, newObj, key) {
+        return JSON.stringify((oldObj || {})[key]) !== JSON.stringify((newObj || {})[key]);
+    }
+    formatPrimitiveValue(value) {
+        if (value == null) {
+            return '-';
+        }
+        if (typeof value === 'boolean') {
+            return value ? 'true' : 'false';
+        }
+        if (Array.isArray(value)) {
+            if (value.length === 0) {
+                return '-';
+            }
+            return value.map((item, i) => `${i + 1}. ${typeof item === 'object' ? JSON.stringify(item) : String(item)}`).join('\n');
+        }
+        if (typeof value === 'object') {
+            return JSON.stringify(value);
+        }
+        return String(value);
+    }
+    trackByKey(_index, key) {
+        return key;
+    }
+    trackByField(_index, field) {
+        return field;
+    }
+    trackByStepId(_index, step) {
+        return step.stepId ?? step.old?.id ?? step.new?.id ?? _index;
+    }
+}
+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" }, outputs: { compare: "compare", restore: "restore" }, ngImport: i0, template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button>\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <div class=\"cqa-nvh-before-after\">\n      <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n        <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n          borderColor=\"#FFE2E2\"></cqa-badge>\n        <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field) }}</span>\n      </div>\n      <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n        <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n          borderColor=\"#D0FAE5\"></cqa-badge>\n        <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field) }}</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [".cqa-nvh-detail-header{padding:16px 0 12px;border-bottom:1px solid #E4E7EC;margin-bottom:16px}.cqa-nvh-detail-version-number{font-size:18px;font-weight:600;color:#101828;margin:0}.cqa-nvh-detail-meta{font-size:13px;color:#667085}.cqa-nvh-detail-summary{font-size:13px;color:#344054;margin-top:4px}.cqa-nvh-detail-actions{display:flex;gap:8px;flex-shrink:0}.cqa-nvh-detail-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cqa-nvh-summary-chip{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;border:1px solid}.cqa-nvh-summary-chip--added{background-color:#ecfdf3;color:#027a48;border-color:#a7f3d0}.cqa-nvh-summary-chip--modified{background-color:#fffaeb;color:#b54708;border-color:#fedf89}.cqa-nvh-summary-chip--removed{background-color:#fef3f2;color:#b42318;border-color:#fecdca}.cqa-nvh-summary-chip--unchanged{background-color:#f2f4f7;color:#667085;border-color:#e4e7ec}.cqa-nvh-section-header{display:flex;align-items:center;gap:8px;margin:20px 0 10px}.cqa-nvh-section-label{font-size:14px;font-weight:600;color:#344054}.cqa-nvh-changes-list{display:flex;flex-direction:column;gap:8px}.cqa-nvh-change-card{border:1px solid #E4E7EC;border-radius:8px;padding:12px 16px;background:#fff}.cqa-nvh-change-card--added{border-left:3px solid #027A48}.cqa-nvh-change-card--removed{border-left:3px solid #B42318}.cqa-nvh-step-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cqa-nvh-step-prefix{font-size:13px;font-weight:600;color:#344054;white-space:nowrap}.cqa-nvh-step-action{font-size:14px;line-height:18px;color:#111827;min-width:0;flex:1}.cqa-nvh-field-diff{padding:8px 0;border-top:1px solid #F2F4F7}.cqa-nvh-field-diff:first-child{border-top:none}.cqa-nvh-change-field-label{font-size:12px;font-weight:600;color:#667085;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.cqa-nvh-before-after{display:flex;flex-direction:column;gap:4px}.cqa-nvh-value-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.cqa-nvh-value-row--before .cqa-nvh-value-text{color:#b42318}.cqa-nvh-value-row--after .cqa-nvh-value-text{color:#027a48}.cqa-nvh-value-text{font-size:13px;color:#344054;word-break:break-word;line-height:1.5}.cqa-nvh-obj-table{width:100%;border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;font-size:13px}.cqa-nvh-obj-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:#F9FAFB;border-bottom:1px solid #E4E7EC;padding:6px 10px}.cqa-nvh-obj-col-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.cqa-nvh-obj-col-label--before{color:#b42318}.cqa-nvh-obj-col-label--after{color:#027a48}.cqa-nvh-obj-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 10px;border-bottom:1px solid #F2F4F7;align-items:baseline}.cqa-nvh-obj-row:last-child{border-bottom:none}.cqa-nvh-obj-row--changed{background:#FFFAEB}.cqa-nvh-obj-row--changed .cqa-nvh-obj-key{font-weight:600;color:#101828}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--before{color:#b42318}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--after{color:#027a48}.cqa-nvh-obj-key{font-size:12px;color:#667085;font-weight:500;word-break:break-all}.cqa-nvh-obj-val{font-size:12px;color:#344054;word-break:break-all;white-space:pre-line}.cqa-nvh-detail-empty{padding:40px 0;text-align:center}.cqa-nvh-detail-no-selection{display:flex;align-items:center;justify-content:center;height:200px;color:#98a2b3;font-size:14px}\n"], components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "date": i2.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NewVersionHistoryDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-new-version-history-detail', template: "<ng-container *ngIf=\"selectedVersion; else noSelection\">\n  <!-- ========== Header (same as old component) ========== -->\n  <div class=\"d-flex align-items-start justify-content-between cqa-nvh-detail-header\">\n    <div>\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; margin-bottom: 6px;\">\n        <h3 class=\"cqa-nvh-detail-version-number\">Version {{ selectedVersion.versionNumber }}</h3>\n        <cqa-badge *ngIf=\"selectedIsCurrent\" label=\"Current\" size=\"small\" variant=\"info\" backgroundColor=\"#EFF4FF\"\n          textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n      </div>\n      <div class=\"cqa-nvh-detail-meta\">\n        {{ getAuthorLabelFn(selectedVersion) }} \u00B7 {{ selectedVersion.createdDate | date:'MMM d, yyyy \u00B7 h:mm a' }}\n      </div>\n      <div *ngIf=\"selectedVersion.changeSummary\" class=\"cqa-nvh-detail-summary\">\n        {{ selectedVersion.changeSummary }}\n      </div>\n    </div>\n    <div *ngIf=\"!selectedIsCurrent\" class=\"cqa-nvh-detail-actions\">\n      <cqa-button variant=\"outlined\" text=\"Compare with Current\" (clicked)=\"compare.emit()\"></cqa-button>\n      <cqa-button variant=\"filled\" icon=\"refresh\" [text]=\"isRestoring ? 'Restoring...' : 'Restore this Version'\"\n        [disabled]=\"isRestoring\" (clicked)=\"restore.emit()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- ========== Summary bar ========== -->\n  <!-- <div *ngIf=\"stepsSummary\" class=\"cqa-nvh-detail-summary-bar\">\n    <span *ngIf=\"stepsSummary.added\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--added\">+{{ stepsSummary.added }} added</span>\n    <span *ngIf=\"stepsSummary.modified\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--modified\">{{ stepsSummary.modified }} modified</span>\n    <span *ngIf=\"stepsSummary.removed\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--removed\">{{ stepsSummary.removed }} removed</span>\n    <span *ngIf=\"stepsSummary.unchanged\" class=\"cqa-nvh-summary-chip cqa-nvh-summary-chip--unchanged\">{{ stepsSummary.unchanged }} unchanged</span>\n  </div> -->\n\n  <!-- ========== Test Case Changes ========== -->\n  <ng-container *ngIf=\"hasTestCaseChanges\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Test Case Changes</span>\n      <cqa-badge [label]=\"'' + testCaseChangedFields.length\" size=\"small\" variant=\"info\"\n        backgroundColor=\"#EFF4FF\" textColor=\"#3f43ee\" borderColor=\"#C7D7FE\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let field of testCaseChangedFields; trackBy: trackByField\" class=\"cqa-nvh-change-card\">\n        <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n        <ng-container\n          *ngTemplateOutlet=\"beforeAfterBlock; context: {\n            oldValue: selectedVersion.testCase.old?.[field],\n            newValue: selectedVersion.testCase.new?.[field],\n            field: field,\n            oldStepData: selectedVersion.testCase.old,\n            newStepData: selectedVersion.testCase.new\n          }\">\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Added ========== -->\n  <ng-container *ngIf=\"stepsAdded.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Added</span>\n      <cqa-badge [label]=\"'' + stepsAdded.length\" size=\"small\" backgroundColor=\"#ECFDF3\"\n        textColor=\"#027A48\" borderColor=\"#A7F3D0\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsAdded; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--added\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Added\" size=\"small\" backgroundColor=\"#ECFDF3\" textColor=\"#027A48\"\n            borderColor=\"#A7F3D0\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Deleted ========== -->\n  <ng-container *ngIf=\"stepsDeleted.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Removed</span>\n      <cqa-badge [label]=\"'' + stepsDeleted.length\" size=\"small\" backgroundColor=\"#FEF3F2\"\n        textColor=\"#B42318\" borderColor=\"#FECDCA\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsDeleted; trackBy: trackByStepId\" class=\"cqa-nvh-change-card cqa-nvh-change-card--removed\">\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge label=\"Removed\" size=\"small\" backgroundColor=\"#FEF3F2\" textColor=\"#B42318\"\n            borderColor=\"#FECDCA\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Steps Updated ========== -->\n  <ng-container *ngIf=\"stepsUpdated.length\">\n    <div class=\"cqa-nvh-section-header\">\n      <span class=\"cqa-nvh-section-label\">Steps Modified</span>\n      <cqa-badge [label]=\"'' + stepsUpdated.length\" size=\"small\" backgroundColor=\"#FFFAEB\"\n        textColor=\"#B54708\" borderColor=\"#FEDF89\"></cqa-badge>\n    </div>\n\n    <div class=\"cqa-nvh-changes-list\">\n      <div *ngFor=\"let step of stepsUpdated; trackBy: trackByStepId\" class=\"cqa-nvh-change-card\">\n        <!-- Step header with category badge -->\n        <div class=\"cqa-nvh-step-header\">\n          <cqa-badge [label]=\"getCategoryLabelFn(step.category)\" size=\"small\" backgroundColor=\"#EDF1F3\"\n            textColor=\"#636A71\" borderColor=\"#DBDEE1\"></cqa-badge>\n          <span class=\"cqa-nvh-step-prefix\">{{ getStepPrefixFn(step) }}</span>\n          <span class=\"cqa-nvh-step-action cqa-action-format\" [innerHTML]=\"getStepActionHtmlFn(step)\"></span>\n        </div>\n\n        <!-- Changed fields with before/after -->\n        <div *ngFor=\"let field of visibleChangedFields(step); trackBy: trackByField\" class=\"cqa-nvh-field-diff\">\n          <div class=\"cqa-nvh-change-field-label\">{{ getFieldLabelFn(field) }}</div>\n          <ng-container\n            *ngTemplateOutlet=\"beforeAfterBlock; context: {\n              oldValue: step.old?.[field],\n              newValue: step.new?.[field],\n              field: field,\n              oldStepData: step.old,\n              newStepData: step.new\n            }\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- ========== Empty state ========== -->\n  <div *ngIf=\"!hasAnyChanges\" class=\"cqa-nvh-detail-empty\">\n    <cqa-empty-state title=\"No changes\" description=\"No changes recorded for this version.\"></cqa-empty-state>\n  </div>\n</ng-container>\n\n<ng-template #noSelection>\n  <div class=\"cqa-nvh-detail-no-selection\">\n    Select a version to view details.\n  </div>\n</ng-template>\n\n<!-- ===== Reusable before/after block ===== -->\n<ng-template #beforeAfterBlock let-oldValue=\"oldValue\" let-newValue=\"newValue\" let-field=\"field\" let-oldStepData=\"oldStepData\" let-newStepData=\"newStepData\">\n  <!-- 1. Custom table via parseFieldAsTableFn (e.g. testDataList) -->\n  <ng-container *ngIf=\"parseFieldAsTableFn(field, oldValue, oldStepData) || parseFieldAsTableFn(field, newValue, newStepData); else nativeObjectCheck\">\n    <ng-container\n      *ngTemplateOutlet=\"objTable; context: {\n        oldObj: parseFieldAsTableFn(field, oldValue, oldStepData),\n        newObj: parseFieldAsTableFn(field, newValue, newStepData)\n      }\">\n    </ng-container>\n  </ng-container>\n\n  <!-- 2. Native object / JSON string -->\n  <ng-template #nativeObjectCheck>\n    <ng-container *ngIf=\"parseObjectValue(oldValue) || parseObjectValue(newValue); else simpleValue\">\n      <ng-container\n        *ngTemplateOutlet=\"objTable; context: {\n          oldObj: parseObjectValue(oldValue),\n          newObj: parseObjectValue(newValue)\n        }\">\n      </ng-container>\n    </ng-container>\n  </ng-template>\n\n  <!-- 3. Primitive fallback -->\n  <ng-template #simpleValue>\n    <div class=\"cqa-nvh-before-after\">\n      <div class=\"cqa-nvh-value-row cqa-nvh-value-row--before\">\n        <cqa-badge label=\"Before\" size=\"small\" backgroundColor=\"#FEF2F2\" textColor=\"#FB2C36\"\n          borderColor=\"#FFE2E2\"></cqa-badge>\n        <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(oldValue, field) }}</span>\n      </div>\n      <div class=\"cqa-nvh-value-row cqa-nvh-value-row--after\">\n        <cqa-badge label=\"After\" size=\"small\" backgroundColor=\"#ECFDF5\" textColor=\"#009966\"\n          borderColor=\"#D0FAE5\"></cqa-badge>\n        <span class=\"cqa-nvh-value-text\">{{ formatDisplayValueFn(newValue, field) }}</span>\n      </div>\n    </div>\n  </ng-template>\n</ng-template>\n\n<!-- ===== Shared object table ===== -->\n<ng-template #objTable let-oldObj=\"oldObj\" let-newObj=\"newObj\">\n  <div class=\"cqa-nvh-obj-table\">\n    <div class=\"cqa-nvh-obj-header\">\n      <span></span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--before\">Before</span>\n      <span class=\"cqa-nvh-obj-col-label cqa-nvh-obj-col-label--after\">After</span>\n    </div>\n    <div\n      *ngFor=\"let key of objectKeys(oldObj, newObj); trackBy: trackByKey\"\n      class=\"cqa-nvh-obj-row\">\n      <span class=\"cqa-nvh-obj-key\">{{ getFieldLabelFn(key) }}</span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--before\">\n        {{ formatPrimitiveValue(oldObj?.[key]) }}\n      </span>\n      <span class=\"cqa-nvh-obj-val cqa-nvh-obj-val--after\">\n        {{ formatPrimitiveValue(newObj?.[key]) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [".cqa-nvh-detail-header{padding:16px 0 12px;border-bottom:1px solid #E4E7EC;margin-bottom:16px}.cqa-nvh-detail-version-number{font-size:18px;font-weight:600;color:#101828;margin:0}.cqa-nvh-detail-meta{font-size:13px;color:#667085}.cqa-nvh-detail-summary{font-size:13px;color:#344054;margin-top:4px}.cqa-nvh-detail-actions{display:flex;gap:8px;flex-shrink:0}.cqa-nvh-detail-summary-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.cqa-nvh-summary-chip{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;border:1px solid}.cqa-nvh-summary-chip--added{background-color:#ecfdf3;color:#027a48;border-color:#a7f3d0}.cqa-nvh-summary-chip--modified{background-color:#fffaeb;color:#b54708;border-color:#fedf89}.cqa-nvh-summary-chip--removed{background-color:#fef3f2;color:#b42318;border-color:#fecdca}.cqa-nvh-summary-chip--unchanged{background-color:#f2f4f7;color:#667085;border-color:#e4e7ec}.cqa-nvh-section-header{display:flex;align-items:center;gap:8px;margin:20px 0 10px}.cqa-nvh-section-label{font-size:14px;font-weight:600;color:#344054}.cqa-nvh-changes-list{display:flex;flex-direction:column;gap:8px}.cqa-nvh-change-card{border:1px solid #E4E7EC;border-radius:8px;padding:12px 16px;background:#fff}.cqa-nvh-change-card--added{border-left:3px solid #027A48}.cqa-nvh-change-card--removed{border-left:3px solid #B42318}.cqa-nvh-step-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cqa-nvh-step-prefix{font-size:13px;font-weight:600;color:#344054;white-space:nowrap}.cqa-nvh-step-action{font-size:14px;line-height:18px;color:#111827;min-width:0;flex:1}.cqa-nvh-field-diff{padding:8px 0;border-top:1px solid #F2F4F7}.cqa-nvh-field-diff:first-child{border-top:none}.cqa-nvh-change-field-label{font-size:12px;font-weight:600;color:#667085;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}.cqa-nvh-before-after{display:flex;flex-direction:column;gap:4px}.cqa-nvh-value-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0}.cqa-nvh-value-row--before .cqa-nvh-value-text{color:#b42318}.cqa-nvh-value-row--after .cqa-nvh-value-text{color:#027a48}.cqa-nvh-value-text{font-size:13px;color:#344054;word-break:break-word;line-height:1.5}.cqa-nvh-obj-table{width:100%;border:1px solid #E4E7EC;border-radius:6px;overflow:hidden;font-size:13px}.cqa-nvh-obj-header{display:grid;grid-template-columns:1fr 1fr 1fr;background:#F9FAFB;border-bottom:1px solid #E4E7EC;padding:6px 10px}.cqa-nvh-obj-col-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}.cqa-nvh-obj-col-label--before{color:#b42318}.cqa-nvh-obj-col-label--after{color:#027a48}.cqa-nvh-obj-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:5px 10px;border-bottom:1px solid #F2F4F7;align-items:baseline}.cqa-nvh-obj-row:last-child{border-bottom:none}.cqa-nvh-obj-row--changed{background:#FFFAEB}.cqa-nvh-obj-row--changed .cqa-nvh-obj-key{font-weight:600;color:#101828}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--before{color:#b42318}.cqa-nvh-obj-row--changed .cqa-nvh-obj-val--after{color:#027a48}.cqa-nvh-obj-key{font-size:12px;color:#667085;font-weight:500;word-break:break-all}.cqa-nvh-obj-val{font-size:12px;color:#344054;word-break:break-all;white-space:pre-line}.cqa-nvh-detail-empty{padding:40px 0;text-align:center}.cqa-nvh-detail-no-selection{display:flex;align-items:center;justify-content:center;height:200px;color:#98a2b3;font-size:14px}\n"] }]
+        }], propDecorators: { selectedVersion: [{
+                type: Input
+            }], selectedIsCurrent: [{
+                type: Input
+            }], isRestoring: [{
+                type: Input
+            }], getAuthorLabelFn: [{
+                type: Input
+            }], getFieldLabelFn: [{
+                type: Input
+            }], getStepPrefixFn: [{
+                type: Input
+            }], getCategoryLabelFn: [{
+                type: Input
+            }], formatDisplayValueFn: [{
+                type: Input
+            }], getStepActionHtmlFn: [{
+                type: Input
+            }], hiddenFields: [{
+                type: Input
+            }], parseFieldAsTableFn: [{
+                type: Input
+            }], compare: [{
+                type: Output
+            }], restore: [{
+                type: Output
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -42822,7 +42968,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         VersionHistoryListComponent,
         VersionHistoryCompareComponent,
         VersionHistoryDetailComponent,
-        VersionHistoryRestoreConfirmComponent], imports: [CommonModule,
+        VersionHistoryRestoreConfirmComponent,
+        NewVersionHistoryDetailComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         NoopAnimationsModule,
@@ -42981,7 +43128,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         VersionHistoryListComponent,
         VersionHistoryCompareComponent,
         VersionHistoryDetailComponent,
-        VersionHistoryRestoreConfirmComponent] });
+        VersionHistoryRestoreConfirmComponent,
+        NewVersionHistoryDetailComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
         {
@@ -43194,6 +43342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         VersionHistoryCompareComponent,
                         VersionHistoryDetailComponent,
                         VersionHistoryRestoreConfirmComponent,
+                        NewVersionHistoryDetailComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -43359,6 +43508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         VersionHistoryCompareComponent,
                         VersionHistoryDetailComponent,
                         VersionHistoryRestoreConfirmComponent,
+                        NewVersionHistoryDetailComponent,
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     providers: [
@@ -44130,5 +44280,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map