@cqa-lib/cqa-ui 1.0.73 → 1.0.75
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.
- package/esm2020/lib/dashboards/chart-card/chart-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/coverage-module-card/coverage-module-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/failed-test-cases-card/failed-test-cases-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/heat-error-map-cell/heat-error-map-cell.component.mjs +6 -6
- package/esm2020/lib/dashboards/metrics-card/metrics-block.component.mjs +7 -3
- package/esm2020/lib/dashboards/metrics-card/metrics-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/progress-text-card/progress-text-card.component.mjs +3 -3
- package/esm2020/lib/dashboards/test-distribution-card/test-distribution-card.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +23 -19
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +23 -19
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -2361,10 +2361,14 @@ class MetricsBlockComponent {
|
|
|
2361
2361
|
}
|
|
2362
2362
|
}
|
|
2363
2363
|
MetricsBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2364
|
-
MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n [ngClass]=\"[layout === '1'\n ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleClick($event)\"\n [attr.title]=\"null\">\n <ng-container *ngIf=\"layout === '1'; else layout2\">\n <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-
|
|
2364
|
+
MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, host: { properties: { "class.cqa-flex-1": "true", "class.cqa-min-w-0": "true" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n [ngClass]=\"[layout === '1'\n ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full cqa-flex-1 cqa-min-w-0 md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full cqa-flex-1 cqa-min-w-0 md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleClick($event)\"\n [attr.title]=\"null\">\n <ng-container *ngIf=\"layout === '1'; else layout2\">\n <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-min-w-0\" [attr.title]=\"null\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-font-inter cqa-text-[#6A7282] cqa-truncate\" [attr.title]=\"null\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex cqa-min-w-0\"\n [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n <div\n class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-font-inter cqa-tracking-[-0.449219px] cqa-text-[#101828] cqa-flex-shrink-0\" [attr.title]=\"null\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-font-inter cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block cqa-min-w-0\" [attr.title]=\"null\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex-shrink-0\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n [style.width]=\"progress\"></div>\n </div>\n </div>\n </ng-container>\n <ng-template #layout2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-4 cqa-font-inter cqa-text-[#6B7280]\" [attr.title]=\"null\">{{ item.label }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-font-inter cqa-text-[#111827]\" [attr.title]=\"null\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4 cqa-font-inter\"\n [ngClass]=\"percentClass(item.percent)\" [attr.title]=\"null\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2365
2365
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, decorators: [{
|
|
2366
2366
|
type: Component,
|
|
2367
|
-
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2367
|
+
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2368
|
+
class: 'cqa-ui-root',
|
|
2369
|
+
'[class.cqa-flex-1]': 'true',
|
|
2370
|
+
'[class.cqa-min-w-0]': 'true'
|
|
2371
|
+
}, template: "<div class=\"cqa-ui-root\">\n <div\n [ngClass]=\"[layout === '1'\n ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full cqa-flex-1 cqa-min-w-0 md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full cqa-flex-1 cqa-min-w-0 md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleClick($event)\"\n [attr.title]=\"null\">\n <ng-container *ngIf=\"layout === '1'; else layout2\">\n <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-min-w-0\" [attr.title]=\"null\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-font-inter cqa-text-[#6A7282] cqa-truncate\" [attr.title]=\"null\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex cqa-min-w-0\"\n [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n <div\n class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-font-inter cqa-tracking-[-0.449219px] cqa-text-[#101828] cqa-flex-shrink-0\" [attr.title]=\"null\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-font-inter cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block cqa-min-w-0\" [attr.title]=\"null\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex-shrink-0\">\n <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n [style.width]=\"progress\"></div>\n </div>\n </div>\n </ng-container>\n <ng-template #layout2>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n <span class=\"cqa-text-[12px] cqa-leading-4 cqa-font-inter cqa-text-[#6B7280]\" [attr.title]=\"null\">{{ item.label }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-font-inter cqa-text-[#111827]\" [attr.title]=\"null\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4 cqa-font-inter\"\n [ngClass]=\"percentClass(item.percent)\" [attr.title]=\"null\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", styles: [] }]
|
|
2368
2372
|
}], propDecorators: { item: [{
|
|
2369
2373
|
type: Input
|
|
2370
2374
|
}], progress: [{
|
|
@@ -2432,10 +2436,10 @@ class MetricsCardComponent {
|
|
|
2432
2436
|
}
|
|
2433
2437
|
}
|
|
2434
2438
|
MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2435
|
-
MetricsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsCardComponent, selector: "cqa-metrics-card", inputs: { icon: "icon", title: "title", total: "total", items: "items", cardClass: "cardClass", layout: "layout", totalPercent: "totalPercent", onTotalClick: "onTotalClick" }, outputs: { totalClick: "totalClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': isTotalClickable}\"\n (click)=\"handleTotalClick($event)\"\n [attr.title]=\"null\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\n total | number }} </h3>\n </div>\n <ng-container *ngFor=\"let it of items; let i = index\">\n <div class=\"cqa-flex cqa-items-stretch cqa-border-b cqa-border-[#E5E7EB] md:cqa-border-b-0\" [attr.title]=\"null\">\n <div class=\"cqa-hidden sm:cqa-block md:cqa-block cqa-w-[1px] cqa-bg-[#E5E7EB] cqa-
|
|
2439
|
+
MetricsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsCardComponent, selector: "cqa-metrics-card", inputs: { icon: "icon", title: "title", total: "total", items: "items", cardClass: "cardClass", layout: "layout", totalPercent: "totalPercent", onTotalClick: "onTotalClick" }, outputs: { totalClick: "totalClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': isTotalClickable}\"\n (click)=\"handleTotalClick($event)\"\n [attr.title]=\"null\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-font-inter cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-font-inter cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\n total | number }} </h3>\n </div>\n <ng-container *ngFor=\"let it of items; let i = index\">\n <div class=\"cqa-flex cqa-items-stretch cqa-border-b cqa-border-[#E5E7EB] md:cqa-border-b-0 cqa-min-w-0\" [attr.title]=\"null\">\n <div class=\"cqa-hidden sm:cqa-block md:cqa-block cqa-w-[1px] cqa-bg-[#E5E7EB] cqa-flex-shrink-0\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\" class=\"cqa-flex-1 cqa-min-w-0\">\n </cqa-metrics-block>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"layout === '2'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <div\n class=\"cqa-flex cqa-flex-col md:cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-w-full cqa-min-h-[53px] cqa-rounded-none cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0 cqa-gap-4\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-py-1 cqa-px-4 sm:cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[240px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden before:cqa-content-[''] before:cqa-bg-[#4C4C51] before:cqa-h-[2px] before:cqa-w-full before:cqa-absolute before:cqa-top-0 before:cqa-left-0\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': isTotalClickable}\"\n (click)=\"handleTotalClick($event)\"\n [attr.title]=\"null\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between cqa-w-full\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#6B7280]\">{{ icon }}</mat-icon>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-4 cqa-font-inter\" [attr.title]=\"null\">{{ title }}</span>\n <div class=\"cqa-flex cqa-items-end cqa-gap-2 cqa-ml-auto\">\n <h4 class=\"cqa-text-[28px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-font-inter cqa-text-[#111827]\" [attr.title]=\"null\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4 cqa-font-inter\"\n [ngClass]=\"percentClass(totalPercent)\" [attr.title]=\"null\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div [ngClass]=\"'cqa-grid-cols-' + items.length + ' lg:cqa-grid-cols-' + items.length\"\n class=\"cqa-flex-1 cqa-w-full cqa-grid md:cqa-grid-cols-3 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\" [attr.title]=\"null\">\n </cqa-metrics-block>\n </div>\n </div>\n </div>\n</div>", components: [{ type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: ["item", "progress", "layout", "itemslength"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2436
2440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
|
|
2437
2441
|
type: Component,
|
|
2438
|
-
args: [{ selector: 'cqa-metrics-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': isTotalClickable}\"\n (click)=\"handleTotalClick($event)\"\n [attr.title]=\"null\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\n total | number }} </h3>\n </div>\n <ng-container *ngFor=\"let it of items; let i = index\">\n <div class=\"cqa-flex cqa-items-stretch cqa-border-b cqa-border-[#E5E7EB] md:cqa-border-b-0\" [attr.title]=\"null\">\n <div class=\"cqa-hidden sm:cqa-block md:cqa-block cqa-w-[1px] cqa-bg-[#E5E7EB] cqa-
|
|
2442
|
+
args: [{ selector: 'cqa-metrics-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': isTotalClickable}\"\n (click)=\"handleTotalClick($event)\"\n [attr.title]=\"null\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-font-inter cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-font-inter cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\n total | number }} </h3>\n </div>\n <ng-container *ngFor=\"let it of items; let i = index\">\n <div class=\"cqa-flex cqa-items-stretch cqa-border-b cqa-border-[#E5E7EB] md:cqa-border-b-0 cqa-min-w-0\" [attr.title]=\"null\">\n <div class=\"cqa-hidden sm:cqa-block md:cqa-block cqa-w-[1px] cqa-bg-[#E5E7EB] cqa-flex-shrink-0\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\" class=\"cqa-flex-1 cqa-min-w-0\">\n </cqa-metrics-block>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div *ngIf=\"layout === '2'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <div\n class=\"cqa-flex cqa-flex-col md:cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-w-full cqa-min-h-[53px] cqa-rounded-none cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0 cqa-gap-4\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-py-1 cqa-px-4 sm:cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[240px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden before:cqa-content-[''] before:cqa-bg-[#4C4C51] before:cqa-h-[2px] before:cqa-w-full before:cqa-absolute before:cqa-top-0 before:cqa-left-0\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': isTotalClickable}\"\n (click)=\"handleTotalClick($event)\"\n [attr.title]=\"null\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between cqa-w-full\">\n <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#6B7280]\">{{ icon }}</mat-icon>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-4 cqa-font-inter\" [attr.title]=\"null\">{{ title }}</span>\n <div class=\"cqa-flex cqa-items-end cqa-gap-2 cqa-ml-auto\">\n <h4 class=\"cqa-text-[28px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-font-inter cqa-text-[#111827]\" [attr.title]=\"null\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4 cqa-font-inter\"\n [ngClass]=\"percentClass(totalPercent)\" [attr.title]=\"null\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div [ngClass]=\"'cqa-grid-cols-' + items.length + ' lg:cqa-grid-cols-' + items.length\"\n class=\"cqa-flex-1 cqa-w-full cqa-grid md:cqa-grid-cols-3 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\" [attr.title]=\"null\">\n </cqa-metrics-block>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2439
2443
|
}], propDecorators: { icon: [{
|
|
2440
2444
|
type: Input
|
|
2441
2445
|
}], title: [{
|
|
@@ -2639,10 +2643,10 @@ class ChartCardComponent {
|
|
|
2639
2643
|
}
|
|
2640
2644
|
}
|
|
2641
2645
|
ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2642
|
-
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\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2646
|
+
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-font-inter 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\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-font-inter 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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2643
2647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, decorators: [{
|
|
2644
2648
|
type: Component,
|
|
2645
|
-
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\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: [] }]
|
|
2649
|
+
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-font-inter 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\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-font-inter 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: [] }]
|
|
2646
2650
|
}], propDecorators: { title: [{
|
|
2647
2651
|
type: Input
|
|
2648
2652
|
}], subtitle: [{
|
|
@@ -2686,10 +2690,10 @@ class ProgressTextCardComponent {
|
|
|
2686
2690
|
}
|
|
2687
2691
|
}
|
|
2688
2692
|
ProgressTextCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressTextCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2689
|
-
ProgressTextCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressTextCardComponent, selector: "cqa-progress-text-card", inputs: { value: "value", label: "label", deltaPercent: "deltaPercent", deltaSuffix: "deltaSuffix", cardClass: "cardClass" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n [ngClass]=\"cardClass\">\n <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n <div\n class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n {{ percentText }}</div>\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-text-[#111827]\">{{ label }}</div>\n </div>\n <div class=\"cqa-mt-4 cqa-mb-2 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-5\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n </div>\n </div>\n</div>", directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2693
|
+
ProgressTextCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressTextCardComponent, selector: "cqa-progress-text-card", inputs: { value: "value", label: "label", deltaPercent: "deltaPercent", deltaSuffix: "deltaSuffix", cardClass: "cardClass" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n [ngClass]=\"cardClass\">\n <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n <div\n class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-font-inter cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n {{ percentText }}</div>\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-inter cqa-text-[#111827]\">{{ label }}</div>\n </div>\n <div class=\"cqa-mt-4 cqa-mb-2 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-5 cqa-font-inter\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n </div>\n </div>\n</div>", directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2690
2694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressTextCardComponent, decorators: [{
|
|
2691
2695
|
type: Component,
|
|
2692
|
-
args: [{ selector: 'cqa-progress-text-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n [ngClass]=\"cardClass\">\n <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n <div\n class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n {{ percentText }}</div>\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-text-[#111827]\">{{ label }}</div>\n </div>\n <div class=\"cqa-mt-4 cqa-mb-2 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-5\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n </div>\n </div>\n</div>", styles: [] }]
|
|
2696
|
+
args: [{ selector: 'cqa-progress-text-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n [ngClass]=\"cardClass\">\n <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n <div\n class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-font-inter cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n {{ percentText }}</div>\n <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-inter cqa-text-[#111827]\">{{ label }}</div>\n </div>\n <div class=\"cqa-mt-4 cqa-mb-2 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n </div>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-5 cqa-font-inter\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n </div>\n </div>\n</div>", styles: [] }]
|
|
2693
2697
|
}], propDecorators: { value: [{
|
|
2694
2698
|
type: Input
|
|
2695
2699
|
}], label: [{
|
|
@@ -2913,10 +2917,10 @@ class CoverageModuleCardComponent {
|
|
|
2913
2917
|
}
|
|
2914
2918
|
}
|
|
2915
2919
|
CoverageModuleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2916
|
-
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", "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 });
|
|
2920
|
+
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", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "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 });
|
|
2917
2921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, decorators: [{
|
|
2918
2922
|
type: Component,
|
|
2919
|
-
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: [] }]
|
|
2923
|
+
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: [] }]
|
|
2920
2924
|
}], propDecorators: { title: [{
|
|
2921
2925
|
type: Input
|
|
2922
2926
|
}], issues: [{
|
|
@@ -3048,10 +3052,10 @@ class TestDistributionCardComponent {
|
|
|
3048
3052
|
}
|
|
3049
3053
|
}
|
|
3050
3054
|
TestDistributionCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3051
|
-
TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3055
|
+
TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-font-inter cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\" class=\"cqa-h-full cqa-flex cqa-font-inter cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-inter cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold cqa-font-inter\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-font-inter cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-font-inter cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3052
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, decorators: [{
|
|
3053
3057
|
type: Component,
|
|
3054
|
-
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3058
|
+
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-border-default cqa-py-[14.5px] cqa-px-[17px] cqa-shadow-card\">\n <!-- Title -->\n <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-font-inter cqa-text-[#111827] cqa-mb-2\">{{ title }}</h3>\n\n <!-- Stacked segments pill -->\n <div class=\"cqa-w-full cqa-h-[24px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-2\">\n <ng-container *ngFor=\"let s of visibleSegments; let i = index; let last = last\">\n <div\n class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\"\n [ngClass]=\"[\n segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#059669]' : 'cqa-bg-[#9333EA]'),\n i === 0 ? 'cqa-rounded-l-full' : '',\n last ? 'cqa-rounded-r-full' : ''\n ]\" [style.width]=\"segmentWidth(s)\" class=\"cqa-h-full cqa-flex cqa-font-inter cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[16px]\">\n {{ s.label }}\n </div>\n </ng-container>\n </div>\n\n <!-- Items list -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\">\n <!-- Parent row -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center\">\n <span class=\"cqa-w-[4px] cqa-h-[12px] cqa-rounded-full\" [style.background-color]=\"getItemIconColor(it)\"></span>\n <div class=\"cqa-ml-[8px] cqa-mr-[6px]\">\n <mat-icon *ngIf=\"it.icon\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\" [style.color]=\"getItemIconColor(it)\">\n {{ it.icon }}\n </mat-icon>\n </div>\n <span class=\"cqa-text-[12px] cqa-leading-[18px] cqa-font-inter cqa-text-dialog-muted\">{{ it.label }}</span>\n </div>\n <div class=\"cqa-text-[12px] cqa-leading-4 cqa-font-bold cqa-font-inter\">{{ it.value | number }}</div>\n </div>\n\n <!-- Children rows -->\n <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of it.children\"\n class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-1 cqa-rounded-[4px] cqa-bg-[#F9FAFB]\">\n <div class=\"cqa-flex cqa-items-center cqa-text-[10px] cqa-leading-[15px] cqa-font-inter cqa-text-[#4B5563]\">\n <ng-container *ngIf=\"getChildIcon(ch.label) as icon\">\n <ng-container [ngSwitch]=\"icon\">\n <svg *ngSwitchCase=\"'apple'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M16.365 1.43c0 1.182-.435 2.014-1.086 2.845-.823.99-1.982 1.707-3.078 1.6-.13-1.115.433-2.154 1.09-2.87.825-.925 2.196-1.59 3.07-1.575-.003.003.003 0 .003 0zm3.217 6.094c-.086-.067-2.684-1.598-5.468-.507-1.332.53-2.429.542-3.788.006-1.997-.8-3.635.156-3.735.208-.083.044-1.948 1.143-2.4 3.667-.43 2.375.6 4.92 1.4 6.52.723 1.421 1.704 3.126 3.067 3.07 1.35-.053 1.78-.883 3.323-.883 1.542 0 1.92.883 3.36.853 1.44-.026 2.352-1.443 3.073-2.855.674-1.324.963-2.603.983-2.668-.021-.009-1.88-.72-1.903-2.854-.021-1.786 1.463-2.64 1.534-2.682z\"/>\n </svg>\n <svg *ngSwitchCase=\"'android'\" class=\"cqa-w-[14px] cqa-h-[14px] cqa-ml-2 cqa-mr-1\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M17.6 9.48l1.42-2.46a.5.5 0 10-.86-.5l-1.44 2.52A11 11 0 0016 7h-8c-.24 0-.48.01-.72.04L5.84 6.5a.5.5 0 00-.86.5l1.42 2.46A7 7 0 004 15h.5a1.5 1.5 0 001.5-1.5V10h1v9.5A1.5 1.5 0 008.5 21h1a1.5 1.5 0 001.5-1.5V17h2v2.5A1.5 1.5 0 0014.5 21h1a1.5 1.5 0 001.5-1.5V10h1v3.5A1.5 1.5 0 0019.5 15H20a7 7 0 00-2.4-5.52zM9 5a.75.75 0 11-1.5 0A.75.75 0 019 5zm7.5 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z\"/>\n </svg>\n </ng-container>\n </ng-container>\n <div class=\"cqa-pr-1\" [ngClass]=\"getChildIcon(ch.label) ? 'cqa-pl-0' : 'cqa-pl-2'\">{{ ch.label }}</div>\n </div>\n <span class=\"cqa-font-bold cqa-font-inter cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px]\">{{ ch.value }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3055
3059
|
}], propDecorators: { title: [{
|
|
3056
3060
|
type: Input
|
|
3057
3061
|
}], segments: [{
|
|
@@ -3132,10 +3136,10 @@ class FailedTestCasesCardComponent {
|
|
|
3132
3136
|
}
|
|
3133
3137
|
}
|
|
3134
3138
|
FailedTestCasesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3135
|
-
FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", fullTitle: "fullTitle", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3139
|
+
FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", fullTitle: "fullTitle", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-font-inter cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-font-inter cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-font-inter cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-inter cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-font-inter cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3136
3140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, decorators: [{
|
|
3137
3141
|
type: Component,
|
|
3138
|
-
args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3142
|
+
args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-font-inter cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-font-inter cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-font-inter cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-inter cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-font-inter cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
3139
3143
|
}], propDecorators: { title: [{
|
|
3140
3144
|
type: Input
|
|
3141
3145
|
}], fullTitle: [{
|
|
@@ -3883,15 +3887,15 @@ class HeatErrorMapCellComponent {
|
|
|
3883
3887
|
get backgroundColorStyle() {
|
|
3884
3888
|
switch (this.type) {
|
|
3885
3889
|
case 'smoke':
|
|
3886
|
-
return { 'background-color': '#
|
|
3890
|
+
return { 'background-color': '#F4A07A' }; // orange-300
|
|
3887
3891
|
case 'sanity':
|
|
3888
|
-
return { 'background-color': '#
|
|
3892
|
+
return { 'background-color': '#FFD465' }; // amber-300
|
|
3889
3893
|
case 'regression':
|
|
3890
|
-
return { 'background-color': '#
|
|
3894
|
+
return { 'background-color': '#A8E6CF' }; // emerald-200
|
|
3891
3895
|
case 'revisit':
|
|
3892
|
-
return { 'background-color': '#
|
|
3896
|
+
return { 'background-color': '#F0F0F0' }; // zinc-100
|
|
3893
3897
|
default:
|
|
3894
|
-
return { 'background-color': '#
|
|
3898
|
+
return { 'background-color': '#F4A07A' }; // orange-300
|
|
3895
3899
|
}
|
|
3896
3900
|
}
|
|
3897
3901
|
get progressWidth() {
|