@cqa-lib/cqa-ui 1.0.24 → 1.0.25
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/test-distribution-card/test-distribution-card.component.mjs +54 -6
- package/fesm2015/cqa-lib-cqa-ui.mjs +53 -5
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +53 -5
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/dashboards/test-distribution-card/test-distribution-card.component.d.ts +12 -0
- package/package.json +1 -1
|
@@ -2522,12 +2522,42 @@ class TestDistributionCardComponent {
|
|
|
2522
2522
|
this.items = [];
|
|
2523
2523
|
}
|
|
2524
2524
|
totalSegments() {
|
|
2525
|
-
return this.
|
|
2525
|
+
return this.visibleSegments.reduce((sum, s) => sum + (s.value || 0), 0) || 1;
|
|
2526
2526
|
}
|
|
2527
2527
|
segmentWidth(segment) {
|
|
2528
2528
|
const total = this.totalSegments();
|
|
2529
|
-
const
|
|
2530
|
-
|
|
2529
|
+
const segments = this.visibleSegments;
|
|
2530
|
+
const minWidthPct = 8; // Minimum 8% to ensure label is visible
|
|
2531
|
+
// Calculate natural percentages for all segments
|
|
2532
|
+
const naturalWidths = segments.map(s => ({
|
|
2533
|
+
segment: s,
|
|
2534
|
+
naturalPct: (s.value / total) * 100,
|
|
2535
|
+
needsMinimum: (s.value / total) * 100 < minWidthPct
|
|
2536
|
+
}));
|
|
2537
|
+
// Count how many segments need minimum width
|
|
2538
|
+
const segmentsNeedingMinimum = naturalWidths.filter(w => w.needsMinimum).length;
|
|
2539
|
+
const totalMinimumWidth = segmentsNeedingMinimum * minWidthPct;
|
|
2540
|
+
// Find current segment
|
|
2541
|
+
const currentWidth = naturalWidths.find(w => w.segment === segment);
|
|
2542
|
+
if (!currentWidth) {
|
|
2543
|
+
return '0%';
|
|
2544
|
+
}
|
|
2545
|
+
// If this segment needs minimum, give it minimum width
|
|
2546
|
+
if (currentWidth.needsMinimum) {
|
|
2547
|
+
return minWidthPct + '%';
|
|
2548
|
+
}
|
|
2549
|
+
// For segments that don't need minimum, distribute remaining space proportionally
|
|
2550
|
+
// Remaining space = 100% - (segments needing minimum * minWidthPct)
|
|
2551
|
+
const remainingSpace = 100 - totalMinimumWidth;
|
|
2552
|
+
const segmentsAboveMinimum = naturalWidths.filter(w => !w.needsMinimum);
|
|
2553
|
+
const totalNaturalAboveMinimum = segmentsAboveMinimum.reduce((sum, w) => sum + w.naturalPct, 0);
|
|
2554
|
+
// If there's no natural space above minimum, just use natural percentage
|
|
2555
|
+
if (totalNaturalAboveMinimum === 0) {
|
|
2556
|
+
return Math.max(minWidthPct, currentWidth.naturalPct) + '%';
|
|
2557
|
+
}
|
|
2558
|
+
// Scale the natural percentage to fit in remaining space
|
|
2559
|
+
const scaledPct = (currentWidth.naturalPct / totalNaturalAboveMinimum) * remainingSpace;
|
|
2560
|
+
return Math.max(minWidthPct, scaledPct) + '%';
|
|
2531
2561
|
}
|
|
2532
2562
|
segmentColor(segment, fallback) {
|
|
2533
2563
|
return segment.colorClass || fallback;
|
|
@@ -2556,12 +2586,30 @@ class TestDistributionCardComponent {
|
|
|
2556
2586
|
}
|
|
2557
2587
|
return '#4F46E5'; // default
|
|
2558
2588
|
}
|
|
2589
|
+
/**
|
|
2590
|
+
* Filter items to only show those with value > 0
|
|
2591
|
+
*/
|
|
2592
|
+
get visibleItems() {
|
|
2593
|
+
return this.items.filter(item => item.value > 0);
|
|
2594
|
+
}
|
|
2595
|
+
/**
|
|
2596
|
+
* Filter segments to only show those with value > 0
|
|
2597
|
+
*/
|
|
2598
|
+
get visibleSegments() {
|
|
2599
|
+
return this.segments.filter(segment => segment.value > 0);
|
|
2600
|
+
}
|
|
2601
|
+
/**
|
|
2602
|
+
* Filter children items to only show those with value > 0
|
|
2603
|
+
*/
|
|
2604
|
+
getVisibleChildren(children) {
|
|
2605
|
+
return children?.filter(ch => ch.value > 0) || [];
|
|
2606
|
+
}
|
|
2559
2607
|
}
|
|
2560
2608
|
TestDistributionCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2561
|
-
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" }, ngImport: i0, template: "<div id=\"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
|
|
2609
|
+
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" }, ngImport: i0, template: "<div id=\"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 visibleItems\" 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=\"getVisibleChildren(it.children).length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of getVisibleChildren(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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2562
2610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, decorators: [{
|
|
2563
2611
|
type: Component,
|
|
2564
|
-
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"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
|
|
2612
|
+
args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"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 visibleItems\" 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=\"getVisibleChildren(it.children).length\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div *ngFor=\"let ch of getVisibleChildren(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: [] }]
|
|
2565
2613
|
}], propDecorators: { title: [{
|
|
2566
2614
|
type: Input
|
|
2567
2615
|
}], segments: [{
|