@cqa-lib/cqa-ui 1.1.446 → 1.1.447

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2020/lib/change-history/change-history.component.mjs +34 -33
  2. package/esm2020/lib/questionnaire-list/questionnaire-list.component.mjs +24 -23
  3. package/fesm2015/cqa-lib-cqa-ui.mjs +56 -54
  4. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  5. package/fesm2020/cqa-lib-cqa-ui.mjs +56 -54
  6. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  7. package/package.json +1 -1
package/fesm2020/cqa-lib-cqa-ui.mjs CHANGED
@@ -42515,6 +42515,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
42515
42515
  type: Output
42516
42516
  }] } });
42517
42517
 
42518
+ const QUESTIONNAIRE_LIST_STYLES = `
42519
+ :host { display: block; width: 100%; }
42520
+ .ql-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
42521
+ .ql-header { margin-bottom: 20px; }
42522
+ .ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
42523
+ .ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
42524
+ .ql-body { display: flex; flex-direction: column; }
42525
+ .ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
42526
+ .ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
42527
+ .ql-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef0ff; color: #4f46e5; font-size: 12px; font-weight: 600; flex-shrink: 0; }
42528
+ .ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
42529
+ .ql-input { width: 100%; }
42530
+ .ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
42531
+ .ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
42532
+ .ql-footer-left { display: flex; align-items: center; }
42533
+ .ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
42534
+ .ql-page-size-select { width: 72px; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 6px; font-size: 13px; color: #374151; background: #ffffff; cursor: pointer; outline: none; }
42535
+ .ql-page-size-select:focus { border-color: #6366f1; }
42536
+ .ql-footer-right { display: flex; align-items: center; gap: 4px; }
42537
+ .ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
42538
+ .ql-nav-btn { width: 28px; height: 28px; }
42539
+ `;
42518
42540
  class QuestionnaireListComponent {
42519
42541
  constructor() {
42520
42542
  this.items = [];
@@ -42580,28 +42602,7 @@ QuestionnaireListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0
42580
42602
  QuestionnaireListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: QuestionnaireListComponent, selector: "cqa-questionnaire-list", inputs: { items: "items", defaultPageSize: "defaultPageSize", pageSizeOptions: "pageSizeOptions", inputPlaceholder: "inputPlaceholder" }, outputs: { answerChange: "answerChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n", styles: [":host{display:block;width:100%}.ql-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ql-header{margin-bottom:20px}.ql-title{font-size:16px;font-weight:600;color:#1a1d23;margin:0 0 4px;line-height:1.4}.ql-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0;line-height:1.5}.ql-body{display:flex;flex-direction:column}.ql-item{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #f3f4f6}.ql-item.ql-item--last{border-bottom:none;margin-bottom:0}.ql-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eef0ff;color:#4f46e5;font-size:12px;font-weight:600;flex-shrink:0}.ql-label{display:block;font-size:13px;font-weight:500;color:#374151}.ql-input{width:100%}.ql-empty{padding:24px 0;font-size:13px;color:#6b7280;text-align:center}.ql-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;margin-top:8px;border-top:1px solid #f3f4f6}.ql-footer-left{display:flex;align-items:center}.ql-footer-label{font-size:13px;color:#6b7280;margin-right:8px}.ql-page-size-select{width:72px;height:28px;border:1px solid #e5e7eb;border-radius:4px;padding:0 6px;font-size:13px;color:#374151;background:#ffffff;cursor:pointer;outline:none}.ql-page-size-select:focus{border-color:#6366f1}.ql-footer-right{display:flex;align-items:center;gap:4px}.ql-range-label{font-size:13px;color:#374151;margin-right:8px}.ql-nav-btn{width:28px;height:28px}\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
42581
42603
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: QuestionnaireListComponent, decorators: [{
42582
42604
  type: Component,
42583
- args: [{ selector: 'cqa-questionnaire-list', styles: [`
42584
- :host { display: block; width: 100%; }
42585
- .ql-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
42586
- .ql-header { margin-bottom: 20px; }
42587
- .ql-title { font-size: 16px; font-weight: 600; color: #1a1d23; margin: 0 0 4px 0; line-height: 1.4; }
42588
- .ql-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; line-height: 1.5; }
42589
- .ql-body { display: flex; flex-direction: column; }
42590
- .ql-item { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; }
42591
- .ql-item.ql-item--last { border-bottom: none; margin-bottom: 0; }
42592
- .ql-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef0ff; color: #4f46e5; font-size: 12px; font-weight: 600; flex-shrink: 0; }
42593
- .ql-label { display: block; font-size: 13px; font-weight: 500; color: #374151; }
42594
- .ql-input { width: 100%; }
42595
- .ql-empty { padding: 24px 0; font-size: 13px; color: #6b7280; text-align: center; }
42596
- .ql-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid #f3f4f6; }
42597
- .ql-footer-left { display: flex; align-items: center; }
42598
- .ql-footer-label { font-size: 13px; color: #6b7280; margin-right: 8px; }
42599
- .ql-page-size-select { width: 72px; height: 28px; border: 1px solid #e5e7eb; border-radius: 4px; padding: 0 6px; font-size: 13px; color: #374151; background: #ffffff; cursor: pointer; outline: none; }
42600
- .ql-page-size-select:focus { border-color: #6366f1; }
42601
- .ql-footer-right { display: flex; align-items: center; gap: 4px; }
42602
- .ql-range-label { font-size: 13px; color: #374151; margin-right: 8px; }
42603
- .ql-nav-btn { width: 28px; height: 28px; }
42604
- `], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n" }]
42605
+ args: [{ selector: 'cqa-questionnaire-list', styles: [QUESTIONNAIRE_LIST_STYLES], host: { class: 'cqa-ui-root' }, template: "<div class=\"ql-wrapper\" role=\"region\" aria-label=\"Clarification Questionnaire\">\n\n <!-- Header -->\n <div class=\"ql-header\">\n <h2 class=\"ql-title\">Clarification Questionnaire</h2>\n <p class=\"ql-subtitle\">\n The AI has generated these questions to resolve ambiguities in the requirement.\n Answering these will regenerate specific test cases.\n </p>\n </div>\n\n <!-- Question rows -->\n <div class=\"ql-body\">\n <ng-container *ngIf=\"visibleItems.length; else emptyState\">\n <div\n class=\"ql-item\"\n *ngFor=\"let item of visibleItems; last as isLast; trackBy: trackById\"\n [class.ql-item--last]=\"isLast\"\n >\n <span class=\"ql-badge\">{{ item.index }}</span>\n <label class=\"ql-label\" [for]=\"getInputId(item.id)\">{{ item.question }}</label>\n <cqa-custom-input\n [inputId]=\"getInputId(item.id)\"\n [value]=\"item.answer\"\n [placeholder]=\"inputPlaceholder\"\n [fullWidth]=\"true\"\n (valueChange)=\"onAnswerInput(item.id, $event)\"\n class=\"ql-input\"\n ></cqa-custom-input>\n </div>\n </ng-container>\n <ng-template #emptyState>\n <div class=\"ql-empty\">No questions available.</div>\n </ng-template>\n </div>\n\n <!-- Footer: per-page selector + range + nav -->\n <div class=\"ql-footer\" aria-live=\"polite\">\n\n <div class=\"ql-footer-left\">\n <span class=\"ql-footer-label\">Questions per page</span>\n <select\n class=\"ql-page-size-select\"\n [value]=\"pageSize\"\n (change)=\"onPageSizeChange(+$any($event.target).value)\"\n >\n <option *ngFor=\"let opt of pageSizeOptions\" [value]=\"opt\">{{ opt }}</option>\n </select>\n </div>\n\n <div class=\"ql-footer-right\">\n <span class=\"ql-range-label\">\n {{ totalItems ? startIndex + 1 : 0 }}&ndash;{{ endIndex }} of {{ totalItems }}\n </span>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_left\"\n [disabled]=\"isPrevDisabled\"\n (clicked)=\"prevPage()\"\n aria-label=\"Previous page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n <cqa-button\n variant=\"outlined\"\n btnSize=\"sm\"\n icon=\"chevron_right\"\n [disabled]=\"isNextDisabled\"\n (clicked)=\"nextPage()\"\n aria-label=\"Next page\"\n class=\"ql-nav-btn\"\n ></cqa-button>\n </div>\n\n </div>\n\n</div>\n" }]
42605
42606
  }], propDecorators: { items: [{
42606
42607
  type: Input
42607
42608
  }], defaultPageSize: [{
@@ -42622,6 +42623,38 @@ const EVENT_ICON_MAP = {
42622
42623
  questionnaire_generated: 'assignment',
42623
42624
  };
42624
42625
  const DEFAULT_ICON = 'description';
42626
+ const CHANGE_HISTORY_STYLES = `
42627
+ :host { display: block; width: 100%; }
42628
+ .ch-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
42629
+ .ch-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
42630
+ .ch-header-icon { display: inline-flex; align-items: center; color: #6b7280; flex-shrink: 0; }
42631
+ .ch-header-icon mat-icon { font-size: 20px; width: 20px; height: 20px; }
42632
+ .ch-title { font-size: 15px; font-weight: 600; color: #1a1d23; margin: 0 0 2px 0; line-height: 1.4; }
42633
+ .ch-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; }
42634
+ .ch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; }
42635
+ .ch-empty p { font-size: 14px; color: #9ca3af; margin: 0; }
42636
+ .ch-empty-icon { font-size: 32px; width: 32px; height: 32px; color: #d1d5db; }
42637
+ .ch-timeline { list-style: none; margin: 0; padding: 0; }
42638
+ .ch-event { display: flex; align-items: flex-start; }
42639
+ .ch-track { width: 24px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
42640
+ .ch-track::after { content: ''; width: 2px; flex: 1; background-color: #e5e7eb; margin-top: 4px; }
42641
+ .ch-event--last .ch-track::after { display: none; }
42642
+ .ch-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #d1d5db; margin-top: 4px; z-index: 1; flex-shrink: 0; }
42643
+ .ch-card { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 28px 12px; width: 100%; }
42644
+ .ch-event-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #f3f4f6; flex-shrink: 0; }
42645
+ .ch-event-icon mat-icon { font-size: 16px; width: 16px; height: 16px; color: #6b7280; }
42646
+ .ch-event-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
42647
+ .ch-event-title { font-size: 14px; font-weight: 600; color: #1a1d23; }
42648
+ .ch-event-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
42649
+ .ch-meta-icon { font-size: 12px; width: 12px; height: 12px; color: #9ca3af; }
42650
+ .ch-meta-actor, .ch-meta-timestamp { font-size: 12px; color: #6b7280; }
42651
+ .ch-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
42652
+ .ch-badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
42653
+ .ch-badge--added { background: #dcfce7; color: #15803d; }
42654
+ .ch-badge--modified { background: #fef9c3; color: #854d0e; }
42655
+ .ch-badge--removed { background: #fee2e2; color: #b91c1c; }
42656
+ .ch-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
42657
+ `;
42625
42658
  class ChangeHistoryComponent {
42626
42659
  constructor() {
42627
42660
  this.items = [];
@@ -42646,38 +42679,7 @@ ChangeHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
42646
42679
  ChangeHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChangeHistoryComponent, selector: "cqa-change-history", inputs: { items: "items", title: "title" }, outputs: { viewDetails: "viewDetails", revert: "revert" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n", styles: [":host{display:block;width:100%}.ch-wrapper{background:#ffffff;border:1px solid #e8eaf0;border-radius:8px;padding:24px;box-shadow:0 1px 4px #0000000f;width:100%;box-sizing:border-box}.ch-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px}.ch-header-icon{display:inline-flex;align-items:center;color:#6b7280;flex-shrink:0}.ch-header-icon mat-icon{font-size:20px;width:20px;height:20px}.ch-title{font-size:15px;font-weight:600;color:#1a1d23;margin:0 0 2px;line-height:1.4}.ch-subtitle{font-size:13px;font-weight:400;color:#6b7280;margin:0}.ch-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px}.ch-empty p{font-size:14px;color:#9ca3af;margin:0}.ch-empty-icon{font-size:32px;width:32px;height:32px;color:#d1d5db}.ch-timeline{list-style:none;margin:0;padding:0}.ch-event{display:flex;align-items:flex-start}.ch-track{width:24px;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.ch-track:after{content:\"\";width:2px;flex:1;background-color:#e5e7eb;margin-top:4px}.ch-event--last .ch-track:after{display:none}.ch-dot{display:block;width:10px;height:10px;border-radius:50%;background:#ffffff;border:2px solid #d1d5db;margin-top:4px;z-index:1;flex-shrink:0}.ch-card{display:flex;align-items:flex-start;gap:12px;padding:0 0 28px 12px;width:100%}.ch-event-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#f3f4f6;flex-shrink:0}.ch-event-icon mat-icon{font-size:16px;width:16px;height:16px;color:#6b7280}.ch-event-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.ch-event-title{font-size:14px;font-weight:600;color:#1a1d23}.ch-event-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280}.ch-meta-icon{font-size:12px;width:12px;height:12px;color:#9ca3af}.ch-meta-actor,.ch-meta-timestamp{font-size:12px;color:#6b7280}.ch-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.ch-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}.ch-badge--added{background:#dcfce7;color:#15803d}.ch-badge--modified{background:#fef9c3;color:#854d0e}.ch-badge--removed{background:#fee2e2;color:#b91c1c}.ch-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
42647
42680
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChangeHistoryComponent, decorators: [{
42648
42681
  type: Component,
42649
- args: [{ selector: 'cqa-change-history', styles: [`
42650
- :host { display: block; width: 100%; }
42651
- .ch-wrapper { background: #ffffff; border: 1px solid #e8eaf0; border-radius: 8px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06); width: 100%; box-sizing: border-box; }
42652
- .ch-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
42653
- .ch-header-icon { display: inline-flex; align-items: center; color: #6b7280; flex-shrink: 0; }
42654
- .ch-header-icon mat-icon { font-size: 20px; width: 20px; height: 20px; }
42655
- .ch-title { font-size: 15px; font-weight: 600; color: #1a1d23; margin: 0 0 2px 0; line-height: 1.4; }
42656
- .ch-subtitle { font-size: 13px; font-weight: 400; color: #6b7280; margin: 0; }
42657
- .ch-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 12px; }
42658
- .ch-empty p { font-size: 14px; color: #9ca3af; margin: 0; }
42659
- .ch-empty-icon { font-size: 32px; width: 32px; height: 32px; color: #d1d5db; }
42660
- .ch-timeline { list-style: none; margin: 0; padding: 0; }
42661
- .ch-event { display: flex; align-items: flex-start; }
42662
- .ch-track { width: 24px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
42663
- .ch-track::after { content: ''; width: 2px; flex: 1; background-color: #e5e7eb; margin-top: 4px; }
42664
- .ch-event--last .ch-track::after { display: none; }
42665
- .ch-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #d1d5db; margin-top: 4px; z-index: 1; flex-shrink: 0; }
42666
- .ch-card { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 28px 12px; width: 100%; }
42667
- .ch-event-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: #f3f4f6; flex-shrink: 0; }
42668
- .ch-event-icon mat-icon { font-size: 16px; width: 16px; height: 16px; color: #6b7280; }
42669
- .ch-event-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
42670
- .ch-event-title { font-size: 14px; font-weight: 600; color: #1a1d23; }
42671
- .ch-event-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
42672
- .ch-meta-icon { font-size: 12px; width: 12px; height: 12px; color: #9ca3af; }
42673
- .ch-meta-actor, .ch-meta-timestamp { font-size: 12px; color: #6b7280; }
42674
- .ch-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
42675
- .ch-badge { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 4px; }
42676
- .ch-badge--added { background: #dcfce7; color: #15803d; }
42677
- .ch-badge--modified { background: #fef9c3; color: #854d0e; }
42678
- .ch-badge--removed { background: #fee2e2; color: #b91c1c; }
42679
- .ch-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
42680
- `], host: { class: 'cqa-ui-root' }, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n" }]
42682
+ args: [{ selector: 'cqa-change-history', styles: [CHANGE_HISTORY_STYLES], host: { class: 'cqa-ui-root' }, template: "<div class=\"ch-wrapper\" role=\"region\" [attr.aria-label]=\"title\">\n\n <!-- Header -->\n <div class=\"ch-header\">\n <span class=\"ch-header-icon\" aria-hidden=\"true\">\n <mat-icon>history</mat-icon>\n </span>\n <div>\n <h2 class=\"ch-title\">{{ title }}</h2>\n <p class=\"ch-subtitle\">{{ items.length }} events recorded</p>\n </div>\n </div>\n\n <!-- Empty state -->\n <div class=\"ch-empty\" *ngIf=\"!items.length\">\n <mat-icon class=\"ch-empty-icon\" aria-hidden=\"true\">history</mat-icon>\n <p>No history events recorded yet.</p>\n </div>\n\n <!-- Timeline -->\n <ol class=\"ch-timeline\" *ngIf=\"items.length\" aria-label=\"Change history events\">\n <li\n class=\"ch-event\"\n *ngFor=\"let item of items; last as isLast; trackBy: trackById\"\n [class.ch-event--last]=\"isLast\"\n >\n <!-- Track: dot + vertical line -->\n <div class=\"ch-track\">\n <span class=\"ch-dot\" aria-hidden=\"true\"></span>\n </div>\n\n <!-- Card -->\n <div class=\"ch-card\">\n\n <!-- Event icon -->\n <span class=\"ch-event-icon\" aria-hidden=\"true\">\n <mat-icon>{{ getEventIcon(item.eventType) }}</mat-icon>\n </span>\n\n <!-- Body -->\n <div class=\"ch-event-body\">\n <span class=\"ch-event-title\">{{ item.title }}</span>\n\n <div class=\"ch-event-meta\">\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">person</mat-icon>\n <span class=\"ch-meta-actor\">{{ item.actor }}</span>\n <mat-icon class=\"ch-meta-icon\" aria-hidden=\"true\">schedule</mat-icon>\n <span class=\"ch-meta-timestamp\">{{ item.timestamp }}</span>\n </div>\n\n <div class=\"ch-badges\" *ngIf=\"item.badges?.length\">\n <span\n *ngFor=\"let badge of item.badges\"\n class=\"ch-badge\"\n [ngClass]=\"'ch-badge--' + badge.variant\"\n >{{ badge.label }}</span>\n </div>\n </div>\n\n <!-- Actions -->\n <div class=\"ch-actions\">\n <cqa-button\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"visibility\"\n [text]=\"'View Details'\"\n [attr.aria-label]=\"'View details for ' + item.title\"\n (clicked)=\"onViewDetails(item.id)\"\n ></cqa-button>\n\n <cqa-button\n *ngIf=\"item.canRevert\"\n variant=\"text\"\n btnSize=\"sm\"\n icon=\"history\"\n [text]=\"'Revert'\"\n [attr.aria-label]=\"'Revert ' + item.title\"\n (clicked)=\"onRevert(item.id)\"\n ></cqa-button>\n </div>\n\n </div>\n </li>\n </ol>\n\n</div>\n" }]
42681
42683
  }], propDecorators: { items: [{
42682
42684
  type: Input
42683
42685
  }], title: [{