npm - @cqa-lib/cqa-ui - Versions diffs - 1.0.50 → 1.0.52 - Mend

@cqa-lib/cqa-ui 1.0.50 → 1.0.52

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 (12) hide show

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

@@ -2446,10 +2446,10 @@ class EmptyStateComponent {
     }
 }
 EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmptyStateComponent, selector: "cqa-empty-state", inputs: { preset: "preset", imageUrl: "imageUrl", title: "title", description: "description", actions: "actions" }, outputs: { actionClick: "actionClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-w-full cqa-h-full cqa-min-h-[200px] cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-6 cqa-items-center cqa-max-w-md cqa-w-full\">\n    <!-- Icon Container -->\n    <div *ngIf=\"displayImageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-24 cqa-h-24 md:cqa-w-32 md:cqa-h-32\">\n      <!-- Main Icon Container with Gradient Background and Shadow -->\n      <div class=\"cqa-relative cqa-rounded-3xl cqa-w-full cqa-h-full cqa-shadow-sm\">\n        <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n        <!-- Icon/Image centered inside on top layer - fully opaque -->\n        <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n          <div class=\"cqa-w-3/4 cqa-h-3/4 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n            <img [src]=\"displayImageUrl\" alt=\"\" class=\"cqa-block cqa-max-w-full cqa-max-h-full cqa-w-full cqa-h-full cqa-object-contain\" />\n          </div>\n        </div>\n      </div>\n      <!-- Decorative Dots -->\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815] cqa-hidden md:cqa-block\" style=\"right: -4px; top: -4px; width: 12px; height: 12px; z-index: 20;\"></div>\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695] cqa-hidden md:cqa-block\" style=\"left: -4px; bottom: -4px; width: 10px; height: 10px; z-index: 20;\"></div>\n    </div>\n\n    <!-- Content Container -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-items-center cqa-w-full\">\n      <!-- Title and Description -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-items-center cqa-w-full\">\n        <!-- Title -->\n        <div *ngIf=\"displayTitle\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <h3 class=\"cqa-font-inter cqa-text-base md:cqa-text-lg cqa-font-medium cqa-leading-tight cqa-text-center cqa-text-neutral-900 cqa-px-2\">\n            {{ displayTitle }}\n          </h3>\n        </div>\n        <!-- Description -->\n        <div *ngIf=\"displayDescription\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-snug cqa-text-center cqa-text-neutral-500 cqa-px-2\">\n            {{ displayDescription }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div\n        *ngIf=\"displayActions && displayActions.length > 0\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-full cqa-flex-wrap\"\n        [ngClass]=\"displayActions.length > 1 ? 'cqa-flex-row cqa-gap-3' : 'cqa-flex-col'\"\n      >\n        <cqa-button\n          *ngFor=\"let action of displayActions\"\n          [variant]=\"action.variant || 'filled'\"\n          [icon]=\"action.icon\"\n          [iconPosition]=\"action.iconPosition || 'start'\"\n          [disabled]=\"action.disabled\"\n          (clicked)=\"onActionClick(action, $event)\"\n          class=\"cqa-w-full md:cqa-w-auto\"\n        >\n          {{ action.label }}\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmptyStateComponent, selector: "cqa-empty-state", inputs: { preset: "preset", imageUrl: "imageUrl", title: "title", description: "description", actions: "actions" }, outputs: { actionClick: "actionClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"width: 100%; height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 2rem; padding-bottom: 2rem; padding-left: 1rem; padding-right: 1rem;\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-6 cqa-items-center cqa-max-w-md cqa-w-full\">\n    <!-- Icon Container -->\n    <div *ngIf=\"displayImageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-24 cqa-h-24 md:cqa-w-32 md:cqa-h-32\">\n      <!-- Main Icon Container with Gradient Background and Shadow -->\n      <div class=\"cqa-relative cqa-rounded-3xl cqa-w-full cqa-h-full cqa-shadow-sm\">\n        <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n        <!-- Icon/Image centered inside on top layer - fully opaque -->\n        <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n          <div class=\"cqa-w-3/4 cqa-h-3/4 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n            <img [src]=\"displayImageUrl\" alt=\"\" class=\"cqa-block cqa-max-w-full cqa-max-h-full cqa-w-full cqa-h-full cqa-object-contain\" />\n          </div>\n        </div>\n      </div>\n      <!-- Decorative Dots -->\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815] cqa-hidden md:cqa-block\" style=\"right: -4px; top: -4px; width: 12px; height: 12px; z-index: 20;\"></div>\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695] cqa-hidden md:cqa-block\" style=\"left: -4px; bottom: -4px; width: 10px; height: 10px; z-index: 20;\"></div>\n    </div>\n\n    <!-- Content Container -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-items-center cqa-w-full\">\n      <!-- Title and Description -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-items-center cqa-w-full\">\n        <!-- Title -->\n        <div *ngIf=\"displayTitle\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <h3 class=\"cqa-font-inter cqa-text-base md:cqa-text-lg cqa-font-medium cqa-leading-tight cqa-text-center cqa-text-neutral-900 cqa-px-2\">\n            {{ displayTitle }}\n          </h3>\n        </div>\n        <!-- Description -->\n        <div *ngIf=\"displayDescription\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-snug cqa-text-center cqa-text-neutral-500 cqa-px-2\">\n            {{ displayDescription }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div\n        *ngIf=\"displayActions && displayActions.length > 0\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-full cqa-flex-wrap\"\n        [ngClass]=\"displayActions.length > 1 ? 'cqa-flex-row cqa-gap-3' : 'cqa-flex-col'\"\n      >\n        <cqa-button\n          *ngFor=\"let action of displayActions\"\n          [variant]=\"action.variant || 'filled'\"\n          [icon]=\"action.icon\"\n          [iconPosition]=\"action.iconPosition || 'start'\"\n          [disabled]=\"action.disabled\"\n          (clicked)=\"onActionClick(action, $event)\"\n          class=\"cqa-w-full md:cqa-w-auto\"\n        >\n          {{ action.label }}\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-empty-state', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root cqa-w-full cqa-h-full cqa-min-h-[200px] cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-6 cqa-items-center cqa-max-w-md cqa-w-full\">\n    <!-- Icon Container -->\n    <div *ngIf=\"displayImageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-24 cqa-h-24 md:cqa-w-32 md:cqa-h-32\">\n      <!-- Main Icon Container with Gradient Background and Shadow -->\n      <div class=\"cqa-relative cqa-rounded-3xl cqa-w-full cqa-h-full cqa-shadow-sm\">\n        <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n        <!-- Icon/Image centered inside on top layer - fully opaque -->\n        <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n          <div class=\"cqa-w-3/4 cqa-h-3/4 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n            <img [src]=\"displayImageUrl\" alt=\"\" class=\"cqa-block cqa-max-w-full cqa-max-h-full cqa-w-full cqa-h-full cqa-object-contain\" />\n          </div>\n        </div>\n      </div>\n      <!-- Decorative Dots -->\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815] cqa-hidden md:cqa-block\" style=\"right: -4px; top: -4px; width: 12px; height: 12px; z-index: 20;\"></div>\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695] cqa-hidden md:cqa-block\" style=\"left: -4px; bottom: -4px; width: 10px; height: 10px; z-index: 20;\"></div>\n    </div>\n\n    <!-- Content Container -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-items-center cqa-w-full\">\n      <!-- Title and Description -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-items-center cqa-w-full\">\n        <!-- Title -->\n        <div *ngIf=\"displayTitle\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <h3 class=\"cqa-font-inter cqa-text-base md:cqa-text-lg cqa-font-medium cqa-leading-tight cqa-text-center cqa-text-neutral-900 cqa-px-2\">\n            {{ displayTitle }}\n          </h3>\n        </div>\n        <!-- Description -->\n        <div *ngIf=\"displayDescription\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-snug cqa-text-center cqa-text-neutral-500 cqa-px-2\">\n            {{ displayDescription }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div\n        *ngIf=\"displayActions && displayActions.length > 0\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-full cqa-flex-wrap\"\n        [ngClass]=\"displayActions.length > 1 ? 'cqa-flex-row cqa-gap-3' : 'cqa-flex-col'\"\n      >\n        <cqa-button\n          *ngFor=\"let action of displayActions\"\n          [variant]=\"action.variant || 'filled'\"\n          [icon]=\"action.icon\"\n          [iconPosition]=\"action.iconPosition || 'start'\"\n          [disabled]=\"action.disabled\"\n          (clicked)=\"onActionClick(action, $event)\"\n          class=\"cqa-w-full md:cqa-w-auto\"\n        >\n          {{ action.label }}\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-empty-state', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" style=\"width: 100%; height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 2rem; padding-bottom: 2rem; padding-left: 1rem; padding-right: 1rem;\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-6 cqa-items-center cqa-max-w-md cqa-w-full\">\n    <!-- Icon Container -->\n    <div *ngIf=\"displayImageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-24 cqa-h-24 md:cqa-w-32 md:cqa-h-32\">\n      <!-- Main Icon Container with Gradient Background and Shadow -->\n      <div class=\"cqa-relative cqa-rounded-3xl cqa-w-full cqa-h-full cqa-shadow-sm\">\n        <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n        <!-- Icon/Image centered inside on top layer - fully opaque -->\n        <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n          <div class=\"cqa-w-3/4 cqa-h-3/4 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n            <img [src]=\"displayImageUrl\" alt=\"\" class=\"cqa-block cqa-max-w-full cqa-max-h-full cqa-w-full cqa-h-full cqa-object-contain\" />\n          </div>\n        </div>\n      </div>\n      <!-- Decorative Dots -->\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815] cqa-hidden md:cqa-block\" style=\"right: -4px; top: -4px; width: 12px; height: 12px; z-index: 20;\"></div>\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695] cqa-hidden md:cqa-block\" style=\"left: -4px; bottom: -4px; width: 10px; height: 10px; z-index: 20;\"></div>\n    </div>\n\n    <!-- Content Container -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-items-center cqa-w-full\">\n      <!-- Title and Description -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-items-center cqa-w-full\">\n        <!-- Title -->\n        <div *ngIf=\"displayTitle\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <h3 class=\"cqa-font-inter cqa-text-base md:cqa-text-lg cqa-font-medium cqa-leading-tight cqa-text-center cqa-text-neutral-900 cqa-px-2\">\n            {{ displayTitle }}\n          </h3>\n        </div>\n        <!-- Description -->\n        <div *ngIf=\"displayDescription\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-snug cqa-text-center cqa-text-neutral-500 cqa-px-2\">\n            {{ displayDescription }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div\n        *ngIf=\"displayActions && displayActions.length > 0\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-full cqa-flex-wrap\"\n        [ngClass]=\"displayActions.length > 1 ? 'cqa-flex-row cqa-gap-3' : 'cqa-flex-col'\"\n      >\n        <cqa-button\n          *ngFor=\"let action of displayActions\"\n          [variant]=\"action.variant || 'filled'\"\n          [icon]=\"action.icon\"\n          [iconPosition]=\"action.iconPosition || 'start'\"\n          [disabled]=\"action.disabled\"\n          (clicked)=\"onActionClick(action, $event)\"\n          class=\"cqa-w-full md:cqa-w-auto\"\n        >\n          {{ action.label }}\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], propDecorators: { preset: [{
                 type: Input
             }], imageUrl: [{
@@ -2480,10 +2480,10 @@ class ChartCardComponent {
     }
 }
 ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass", height: "height", info: "info", isEmpty: "isEmpty", emptyStateConfig: "emptyStateConfig" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n    [ngClass]=\"cardClass\">\n    <!-- Header -->\n    <div class=\"cqa-px-[16px] cqa-py-4\">\n      <div class=\"cqa-flex cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n          <mat-icon \n            *ngIf=\"info\" \n            class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n            [matTooltip]=\"info\"\n            matTooltipPosition=\"above\"\n            style=\"color: #64748B;\">\n            info_outline\n          </mat-icon>\n        </div>\n        <!-- Chart actions slot (segments) -->\n        <ng-content select=\"[chart-actions]\"></ng-content>\n      </div>\n      <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n    </div>\n\n    <!-- Chart/content area -->\n    <div class=\"cqa-px-[13px]\">\n      <div class=\"cqa-w-full\" [ngStyle]=\"height ? { 'min-height': height, 'height': height } : { 'min-height': '220px' }\">\n        <!-- Empty State -->\n        <ng-container *ngIf=\"isEmpty\">\n          <cqa-empty-state\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"$event.onClick?.()\"\n          ></cqa-empty-state>\n        </ng-container>\n        \n        <!-- Default Content -->\n        <ng-container *ngIf=\"!isEmpty\">\n          <ng-content></ng-content>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass", height: "height", info: "info", isEmpty: "isEmpty", emptyStateConfig: "emptyStateConfig" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n    [ngClass]=\"cardClass\">\n    <!-- Header -->\n    <div class=\"cqa-px-[16px] cqa-py-4\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n          <mat-icon \n            *ngIf=\"info\" \n            class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n            [matTooltip]=\"info\"\n            matTooltipPosition=\"above\"\n            style=\"color: #64748B;\">\n            info_outline\n          </mat-icon>\n        </div>\n        <!-- Chart actions slot (segments) -->\n        <ng-content select=\"[chart-actions]\"></ng-content>\n      </div>\n      <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n    </div>\n\n    <!-- Chart/content area -->\n    <div class=\"cqa-px-[13px]\">\n      <div class=\"cqa-w-full cqa-chart-card-area\">\n        <!-- Empty State -->\n        <ng-container *ngIf=\"isEmpty\">\n          <cqa-empty-state\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"$event.onClick?.()\"\n          ></cqa-empty-state>\n        </ng-container>\n        \n        <!-- Default Content -->\n        <ng-container *ngIf=\"!isEmpty\">\n          <div class=\"cqa-w-full cqa-h-full\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n    [ngClass]=\"cardClass\">\n    <!-- Header -->\n    <div class=\"cqa-px-[16px] cqa-py-4\">\n      <div class=\"cqa-flex cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n          <mat-icon \n            *ngIf=\"info\" \n            class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n            [matTooltip]=\"info\"\n            matTooltipPosition=\"above\"\n            style=\"color: #64748B;\">\n            info_outline\n          </mat-icon>\n        </div>\n        <!-- Chart actions slot (segments) -->\n        <ng-content select=\"[chart-actions]\"></ng-content>\n      </div>\n      <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n    </div>\n\n    <!-- Chart/content area -->\n    <div class=\"cqa-px-[13px]\">\n      <div class=\"cqa-w-full\" [ngStyle]=\"height ? { 'min-height': height, 'height': height } : { 'min-height': '220px' }\">\n        <!-- Empty State -->\n        <ng-container *ngIf=\"isEmpty\">\n          <cqa-empty-state\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"$event.onClick?.()\"\n          ></cqa-empty-state>\n        </ng-container>\n        \n        <!-- Default Content -->\n        <ng-container *ngIf=\"!isEmpty\">\n          <ng-content></ng-content>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"cqa-border cqa-border-solid cqa-border-border-default cqa-rounded-[8px] cqa-shadow-card cqa-h-full\"\n    [ngClass]=\"cardClass\">\n    <!-- Header -->\n    <div class=\"cqa-px-[16px] cqa-py-4\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-3 cqa-flex-wrap\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <div class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-font-medium\">{{ title }}</div>\n          <mat-icon \n            *ngIf=\"info\" \n            class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-cursor-help cqa-flex-shrink-0\"\n            [matTooltip]=\"info\"\n            matTooltipPosition=\"above\"\n            style=\"color: #64748B;\">\n            info_outline\n          </mat-icon>\n        </div>\n        <!-- Chart actions slot (segments) -->\n        <ng-content select=\"[chart-actions]\"></ng-content>\n      </div>\n      <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n    </div>\n\n    <!-- Chart/content area -->\n    <div class=\"cqa-px-[13px]\">\n      <div class=\"cqa-w-full cqa-chart-card-area\">\n        <!-- Empty State -->\n        <ng-container *ngIf=\"isEmpty\">\n          <cqa-empty-state\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"$event.onClick?.()\"\n          ></cqa-empty-state>\n        </ng-container>\n        \n        <!-- Default Content -->\n        <ng-container *ngIf=\"!isEmpty\">\n          <div class=\"cqa-w-full cqa-h-full\">\n            <ng-content></ng-content>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -2748,10 +2748,10 @@ class CoverageModuleCardComponent {
     }
 }
 CoverageModuleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CoverageModuleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CoverageModuleCardComponent, selector: "cqa-coverage-module-card", inputs: { title: "title", issues: "issues", showViewAction: "showViewAction", layout: "layout", positiveCount: "positiveCount", negativeCount: "negativeCount", edgeCaseCount: "edgeCaseCount", positiveLabel: "positiveLabel", negativeLabel: "negativeLabel", edgeCaseLabel: "edgeCaseLabel", aiCount: "aiCount", humanCount: "humanCount", aiLabel: "aiLabel", humanLabel: "humanLabel", items: "items", ctaText: "ctaText", ctaDisabled: "ctaDisabled", generationMs: "generationMs" }, outputs: { view: "view", issuesClicked: "issuesClicked", ctaClicked: "ctaClicked", aiCoverageClick: "aiCoverageClick", positiveClicked: "positiveClicked", negativeClicked: "negativeClicked", edgeCaseClicked: "edgeCaseClicked" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-h-full\">\n  <div\n    class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n      <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n          <span (click)=\"issuesClicked.emit()\"\n            class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n            {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n          </span>\n          <button type=\"button\"\n            class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n            *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n            View\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n    <!-- Default Layout: Middle metrics row -->\n    <ng-container *ngIf=\"layout === 'default'\">\n      <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- Left: Positive / Negative / Edge Case -->\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n        </div>\n\n        <!-- Right: AI / Human -->\n        <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n            <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Mobile Layout: Stacked metrics -->\n    <ng-container *ngIf=\"layout === 'mobile'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- First row: Positive / Negative / Edge Case -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n          </div>\n        </div>\n        <!-- Separator -->\n        <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n        <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n          <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          {{ it.label }}\n        </span>\n        <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n            [style.width]=\"formatPercent(it.percent)\"></div>\n        </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n     <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n      <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        {{ ctaText }}\n        <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </ng-container>\n      <ng-template #generatingTpl>\n        <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n          <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          Generating\n        </span>\n      </ng-template>\n    </cqa-button>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CoverageModuleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CoverageModuleCardComponent, selector: "cqa-coverage-module-card", inputs: { title: "title", issues: "issues", showViewAction: "showViewAction", layout: "layout", positiveCount: "positiveCount", negativeCount: "negativeCount", edgeCaseCount: "edgeCaseCount", positiveLabel: "positiveLabel", negativeLabel: "negativeLabel", edgeCaseLabel: "edgeCaseLabel", aiCount: "aiCount", humanCount: "humanCount", aiLabel: "aiLabel", humanLabel: "humanLabel", items: "items", ctaText: "ctaText", ctaDisabled: "ctaDisabled", generationMs: "generationMs" }, outputs: { view: "view", issuesClicked: "issuesClicked", ctaClicked: "ctaClicked", aiCoverageClick: "aiCoverageClick", positiveClicked: "positiveClicked", negativeClicked: "negativeClicked", edgeCaseClicked: "edgeCaseClicked" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"height: 100%;\">\n  <div\n    class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n      <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n          <span (click)=\"issuesClicked.emit()\"\n            class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n            {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n          </span>\n          <button type=\"button\"\n            class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n            *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n            View\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n    <!-- Default Layout: Middle metrics row -->\n    <ng-container *ngIf=\"layout === 'default'\">\n      <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- Left: Positive / Negative / Edge Case -->\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n        </div>\n\n        <!-- Right: AI / Human -->\n        <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n            <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Mobile Layout: Stacked metrics -->\n    <ng-container *ngIf=\"layout === 'mobile'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- First row: Positive / Negative / Edge Case -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n          </div>\n        </div>\n        <!-- Separator -->\n        <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n        <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n          <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          {{ it.label }}\n        </span>\n        <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n            [style.width]=\"formatPercent(it.percent)\"></div>\n        </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n     <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n      <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        {{ ctaText }}\n        <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </ng-container>\n      <ng-template #generatingTpl>\n        <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n          <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          Generating\n        </span>\n      </ng-template>\n    </cqa-button>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-coverage-module-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root cqa-h-full\">\n  <div\n    class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n      <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n          <span (click)=\"issuesClicked.emit()\"\n            class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n            {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n          </span>\n          <button type=\"button\"\n            class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n            *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n            View\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n    <!-- Default Layout: Middle metrics row -->\n    <ng-container *ngIf=\"layout === 'default'\">\n      <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- Left: Positive / Negative / Edge Case -->\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n        </div>\n\n        <!-- Right: AI / Human -->\n        <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n            <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Mobile Layout: Stacked metrics -->\n    <ng-container *ngIf=\"layout === 'mobile'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- First row: Positive / Negative / Edge Case -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n          </div>\n        </div>\n        <!-- Separator -->\n        <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n        <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n          <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          {{ it.label }}\n        </span>\n        <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n            [style.width]=\"formatPercent(it.percent)\"></div>\n        </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n     <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n      <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        {{ ctaText }}\n        <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </ng-container>\n      <ng-template #generatingTpl>\n        <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n          <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          Generating\n        </span>\n      </ng-template>\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-coverage-module-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" style=\"height: 100%;\">\n  <div\n    class=\"cqa-w-full cqa-h-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card cqa-flex cqa-flex-col\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-shrink-0 cqa-min-h-[28px]\">\n      <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog cqa-flex-shrink\">{{ title }}</h3>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0 cqa-flex-nowrap\">\n          <span (click)=\"issuesClicked.emit()\"\n            class=\"cqa-cursor-pointer cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger cqa-whitespace-nowrap cqa-flex-shrink-0\">\n            {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n          </span>\n          <button type=\"button\"\n            class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1 cqa-whitespace-nowrap cqa-flex-shrink-0\"\n            *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n            View\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n\n    <!-- Default Layout: Middle metrics row -->\n    <ng-container *ngIf=\"layout === 'default'\">\n      <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- Left: Positive / Negative / Edge Case -->\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n        </div>\n        <div class=\"cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n          <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n        </div>\n\n        <!-- Right: AI / Human -->\n        <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px] cqa-cursor-pointer\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n            <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n              <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Mobile Layout: Stacked metrics -->\n    <ng-container *ngIf=\"layout === 'mobile'\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-4 cqa-py-2\" style=\"border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; border-left: none; border-right: none;\">\n        <!-- First row: Positive / Negative / Edge Case -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"positiveClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"negativeClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\" (click)=\"edgeCaseClicked.emit()\">\n            <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n            <div class=\"cqa-text-[11px] cqa-leading-[14px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n          </div>\n        </div>\n        <!-- Separator -->\n        <div class=\"cqa-w-full cqa-h-[1px] cqa-bg-[#F3F4F6]\"></div>\n        <!-- Second row: AI / Human (aligned between Positive-Negative and Negative-Edge Case) -->\n        <div class=\"cqa-grid cqa-grid-cols-5 cqa-gap-2\">\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n                {{ aiLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n          <div class=\"cqa-col-span-1 cqa-text-center cqa-cursor-pointer\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center\">\n              <span class=\"cqa-text-[11px] cqa-leading-[14px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n                <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                {{ humanLabel }}\n              </span>\n              <span class=\"cqa-text-[13px] cqa-leading-[18px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n            </div>\n          </div>\n          <div class=\"cqa-col-span-1\"></div>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3 cqa-flex-1\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-w-[45%] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2 cqa-shrink-0\">\n          <svg *ngIf=\"it.status=='success'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          <svg *ngIf=\"it.status=='error'\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-shrink-0\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          {{ it.label }}\n        </span>\n        <div class=\"cqa-w-[45%] cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-shrink-0\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n            [style.width]=\"formatPercent(it.percent)\"></div>\n        </div>\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-shrink-0\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n     <cqa-button variant=\"filled\" [customClass]=\"ctaButtonClass\" (click)=\"onAiCoverageClick()\" class=\"cqa-mt-auto\">\n      <ng-container *ngIf=\"!isGenerating; else generatingTpl\">\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        {{ ctaText }}\n        <svg *ngIf=\"!isGenerating && !isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M9 3V15M3 9H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </ng-container>\n      <ng-template #generatingTpl>\n        <span class=\"cqa-inline-flex cqa-items-center cqa-gap-2\">\n          <svg *ngIf=\"!isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          <svg *ngIf=\"isGenerated\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\">\n            <circle cx=\"9\" cy=\"9\" r=\"7\" stroke-width=\"2\" stroke-opacity=\"0.25\"/>\n            <path d=\"M16 9a7 7 0 0 1-7 7\" stroke-width=\"2\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 9 9\" to=\"360 9 9\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n          Generating\n        </span>\n      </ng-template>\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { title: [{
                 type: Input
             }], issues: [{
@@ -3721,12 +3721,12 @@ class HeatErrorMapCellComponent {
     }
 }
 HeatErrorMapCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: HeatErrorMapCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeatErrorMapCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: HeatErrorMapCellComponent, selector: "cqa-heat-error-map-cell", inputs: { type: "type", cases: "cases", defects: "defects", progress: "progress" }, host: { classAttribute: "cqa-block cqa-w-full cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full\">\n  <div class=\"cqa-w-full cqa-min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n    <!-- section 1 -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n          {{ cases }} cases\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n          {{ defects }} defects\n        </div>\n      </div>\n    </div>\n    <!-- section 2 -->\n    <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n      <div \n        class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n        [style.width]=\"progressWidth\"\n      ></div>\n    </div>\n  </div>\n</div>\n\n\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+HeatErrorMapCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: HeatErrorMapCellComponent, selector: "cqa-heat-error-map-cell", inputs: { type: "type", cases: "cases", defects: "defects", progress: "progress" }, host: { classAttribute: "cqa-block cqa-w-full cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-w-full cqa-min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n    <!-- section 1 -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n          {{ cases }} cases\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n          {{ defects }} defects\n        </div>\n      </div>\n    </div>\n    <!-- section 2 -->\n    <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n      <div \n        class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n        [style.width]=\"progressWidth\"\n      ></div>\n    </div>\n  </div>\n</div>\n\n\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: HeatErrorMapCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-heat-error-map-cell', host: {
                         class: 'cqa-block cqa-w-full cqa-ui-root',
-                    }, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full\">\n  <div class=\"cqa-w-full cqa-min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n    <!-- section 1 -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n          {{ cases }} cases\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n          {{ defects }} defects\n        </div>\n      </div>\n    </div>\n    <!-- section 2 -->\n    <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n      <div \n        class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n        [style.width]=\"progressWidth\"\n      ></div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [] }]
+                    }, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-w-full cqa-min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n    <!-- section 1 -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n          {{ cases }} cases\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n          {{ defects }} defects\n        </div>\n      </div>\n    </div>\n    <!-- section 2 -->\n    <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n      <div \n        class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n        [style.width]=\"progressWidth\"\n      ></div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [] }]
         }], propDecorators: { type: [{
                 type: Input
             }], cases: [{
@@ -4176,7 +4176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 class TailwindOverlayContainer extends OverlayContainer {
     constructor() {
         super(...arguments);
-        this.libraryOverlayCount = 0;
+        this.updateTimeout = null;
     }
     _createContainer() {
         super._createContainer();
@@ -4191,35 +4191,54 @@ class TailwindOverlayContainer extends OverlayContainer {
         if (!this._containerElement)
             return;
         const observer = new MutationObserver(() => {
-            this.updateContainerClass();
+            // Debounce updates to avoid excessive checks during rapid DOM changes
+            if (this.updateTimeout !== null) {
+                cancelAnimationFrame(this.updateTimeout);
+            }
+            this.updateTimeout = requestAnimationFrame(() => {
+                this.updateContainerClass();
+                this.updateTimeout = null;
+            });
         });
         observer.observe(this._containerElement, {
             childList: true,
             subtree: true,
         });
         // Also check immediately in case overlays already exist
-        setTimeout(() => this.updateContainerClass(), 0);
+        requestAnimationFrame(() => this.updateContainerClass());
     }
     updateContainerClass() {
         if (!this._containerElement)
             return;
         // Count library overlays (dialogs, select panels, datepicker panels)
+        // These are library-specific classes that indicate library components
+        // Only count overlays that are actually in the DOM (CDK removes them when closed)
         const libraryDialogs = this._containerElement.querySelectorAll('.cqa-dialog-panel').length;
         const libraryBackdrops = this._containerElement.querySelectorAll('.cqa-dialog-backdrop').length;
         const librarySelectPanels = this._containerElement.querySelectorAll('.ctc-select-panel').length;
         const libraryDatePanels = this._containerElement.querySelectorAll('.ctc-date-range-panel').length;
         const totalLibraryOverlays = libraryDialogs + libraryBackdrops + librarySelectPanels + libraryDatePanels;
-        // Check for portal Material dialogs (those without .cqa-dialog-panel)
+        // Check for portal Material dialogs (those without .cqa-dialog-panel class)
+        // Portal dialogs use .mat-dialog-container but NOT .cqa-dialog-panel
         const portalDialogs = this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)').length;
+        // Decision logic: Only add cqa-ui-root when library overlays are present
+        // This ensures portal Material dialogs don't get affected by library CSS
         if (totalLibraryOverlays > 0) {
-            // Library overlays exist - add the class
+            // Library overlays exist - add the class (they need Tailwind styles scoped to .cqa-ui-root)
             this._containerElement.classList.add('cqa-ui-root');
         }
-        else if (portalDialogs > 0 && totalLibraryOverlays === 0) {
-            // Only portal dialogs exist - remove the class to prevent library CSS from affecting them
+        else {
+            // No library overlays exist - remove the class
+            // This handles both cases:
+            // 1. Only portal dialogs exist (should not have cqa-ui-root)
+            // 2. No overlays exist at all (clean state)
             this._containerElement.classList.remove('cqa-ui-root');
         }
-        // If both exist, keep the class (library overlays need it, CSS resets will handle portal dialogs)
+        // Note: If both library overlays and portal dialogs exist simultaneously,
+        // the class will be present because library overlays need it. In this case,
+        // portal dialogs may be affected by library CSS. To avoid this, ensure library
+        // overlays are closed before opening portal dialogs, or use CSS specificity
+        // to override library styles within portal dialogs.
     }
 }
 TailwindOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });