@cqa-lib/cqa-ui 1.1.439 → 1.1.440

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

@@ -42680,6 +42680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 class NewVersionHistoryDetailComponent {
     constructor() {
+        this.prioritizedFields = ['action'];
         this.selectedIsCurrent = false;
         this.isRestoring = false;
         this.getAuthorLabelFn = () => '';
@@ -42700,10 +42701,10 @@ class NewVersionHistoryDetailComponent {
         return this.visibleFields(this.selectedVersion?.testCase?.changedFields || []);
     }
     visibleFields(fields) {
-        if (!this.hiddenFields?.length) {
-            return fields;
-        }
-        return fields.filter(f => !this.hiddenFields.includes(f));
+        const visible = this.hiddenFields?.length
+            ? fields.filter(f => !this.hiddenFields.includes(f))
+            : [...fields];
+        return this.prioritizeFields(visible);
     }
     visibleChangedFields(step) {
         return this.visibleFields(step?.changedFields || []);
@@ -42757,7 +42758,8 @@ class NewVersionHistoryDetailComponent {
             ...Object.keys(oldObj || {}),
             ...Object.keys(newObj || {})
         ]);
-        return Array.from(allKeys).filter(key => JSON.stringify((oldObj || {})[key]) !== JSON.stringify((newObj || {})[key]));
+        const changed = Array.from(allKeys).filter(key => JSON.stringify((oldObj || {})[key]) !== JSON.stringify((newObj || {})[key]));
+        return this.prioritizeFields(changed);
     }
     /** True when the value for a key differs between old and new. */
     isKeyChanged(oldObj, newObj, key) {
@@ -42790,6 +42792,18 @@ class NewVersionHistoryDetailComponent {
     trackByStepId(_index, step) {
         return step.stepId ?? step.old?.id ?? step.new?.id ?? _index;
     }
+    prioritizeFields(fields) {
+        if (!fields?.length) {
+            return fields;
+        }
+        const prioritized = this.prioritizedFields.filter(field => fields.includes(field));
+        if (!prioritized.length) {
+            return fields;
+        }
+        const prioritizedSet = new Set(prioritized);
+        const remaining = fields.filter(field => !prioritizedSet.has(field));
+        return [...prioritized, ...remaining];
+    }
 }
 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 } });