@cqa-lib/cqa-ui 1.1.40 → 1.1.41

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

@@ -3813,6 +3813,10 @@ class CoverageModuleCardComponent {
         this.ctaDisabled = false;
         /** Generation duration in milliseconds (default ~12s) */
         this.generationMs = 200;
+        /** Whether the component is currently generating (configurable) */
+        this.isGenerating = false;
+        /** Whether the generation has completed (configurable) */
+        this.isGenerated = false;
         this.view = new EventEmitter();
         this.issuesClicked = new EventEmitter();
         this.ctaClicked = new EventEmitter();
@@ -3824,9 +3828,6 @@ class CoverageModuleCardComponent {
         this.negativeClicked = new EventEmitter();
         /** Emits when the Edge Case count/label is clicked */
         this.edgeCaseClicked = new EventEmitter();
-        /** Internal generation state */
-        this.isGenerating = false;
-        this.isGenerated = false;
     }
     statusColorClass(item) {
         const status = item.status ?? 'neutral';
@@ -3874,21 +3875,31 @@ class CoverageModuleCardComponent {
         }
         this.ctaClicked.emit();
         this.aiCoverageClick.emit();
-        // Start generating state for ~12 seconds
+        // Start generating state
         this.isGenerated = false;
         this.isGenerating = true;
         // Clear any existing timer defensively
-        setTimeout(() => {
+        if (this.generationTimerId !== undefined) {
+            clearTimeout(this.generationTimerId);
+        }
+        this.generationTimerId = window.setTimeout(() => {
             this.isGenerating = false;
             this.isGenerated = true;
-        }, 200);
+            this.generationTimerId = undefined;
+        }, this.generationMs);
+    }
+    ngOnDestroy() {
+        if (this.generationTimerId !== undefined) {
+            clearTimeout(this.generationTimerId);
+            this.generationTimerId = undefined;
+        }
     }
 }
 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\" 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.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", isGenerating: "isGenerating", isGenerated: "isGenerated" }, 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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\">\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\">\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", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.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\" 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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-font-inter 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\">\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\">\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: [{
@@ -3925,6 +3936,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], generationMs: [{
                 type: Input
+            }], isGenerating: [{
+                type: Input
+            }], isGenerated: [{
+                type: Input
             }], view: [{
                 type: Output
             }], issuesClicked: [{