@cqa-lib/cqa-ui 1.0.58 → 1.0.59
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/metrics-card/metrics-block.component.mjs +3 -3
- package/esm2020/lib/dashboards/metrics-card/metrics-card.component.mjs +15 -4
- package/fesm2015/cqa-lib-cqa-ui.mjs +15 -4
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +15 -4
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/dashboards/metrics-card/metrics-card.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -30,10 +30,10 @@ export class MetricsBlockComponent {
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
MetricsBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
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 <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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
|
+
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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
|
-
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, 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 <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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", styles: [] }]
|
|
36
|
+
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, 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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", styles: [] }]
|
|
37
37
|
}], propDecorators: { item: [{
|
|
38
38
|
type: Input
|
|
39
39
|
}], progress: [{
|
|
@@ -43,4 +43,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
43
43
|
}], itemslength: [{
|
|
44
44
|
type: Input
|
|
45
45
|
}] } });
|
|
46
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
46
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1ibG9jay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2Rhc2hib2FyZHMvbWV0cmljcy1jYXJkL21ldHJpY3MtYmxvY2suY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9kYXNoYm9hcmRzL21ldHJpY3MtY2FyZC9tZXRyaWNzLWJsb2NrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBVTFFLE1BQU0sT0FBTyxxQkFBcUI7SUFQbEM7UUFTVyxhQUFRLEdBQVcsSUFBSSxDQUFDO1FBQ3hCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsZ0JBQVcsR0FBVyxHQUFHLENBQUM7S0FvQnBDO0lBbEJDLGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDM0MsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDM0MsT0FBTyxvQkFBb0IsQ0FBQztJQUM5QixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQVk7UUFDdEIsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNyQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQzs7a0hBdkJVLHFCQUFxQjtzR0FBckIscUJBQXFCLGdNQ1ZsQyx5bUdBOENNOzJGRHBDTyxxQkFBcUI7a0JBUGpDLFNBQVM7K0JBQ0UsbUJBQW1CLG1CQUdaLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNZXRyaWNzQ2FyZEl0ZW0gfSBmcm9tICcuL21ldHJpY3MtY2FyZC1pdGVtLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1tZXRyaWNzLWJsb2NrJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21ldHJpY3MtYmxvY2suY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NCbG9ja0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGl0ZW0hOiBNZXRyaWNzQ2FyZEl0ZW07XG4gIEBJbnB1dCgpIHByb2dyZXNzOiBzdHJpbmcgPSAnMCUnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgaXRlbXNsZW5ndGg6IHN0cmluZyA9ICcwJztcblxuICBmb3JtYXRQZXJjZW50KHZhbHVlPzogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAodmFsdWUgPT09IHVuZGVmaW5lZCB8fCB2YWx1ZSA9PT0gbnVsbCB8fCBOdW1iZXIuaXNOYU4odmFsdWUpKSByZXR1cm4gJyc7XG4gICAgY29uc3Qgc2lnbiA9IHZhbHVlID4gMCA/ICcrJyA6IHZhbHVlIDwgMCA/ICcnIDogJyc7XG4gICAgcmV0dXJuIGAke3NpZ259JHt2YWx1ZX0lYDtcbiAgfVxuXG4gIHBlcmNlbnRDbGFzcyh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICAgIGlmICh2YWx1ZSA+IDApIHJldHVybiAnY3FhLXRleHQtWyMxMEI5ODFdJztcbiAgICBpZiAodmFsdWUgPCAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjRUY0NDQ0XSc7XG4gICAgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICB9XG5cbiAgaGFuZGxlQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXRlbS5vbkNsaWNrKSB7XG4gICAgICB0aGlzLml0ZW0ub25DbGljayh0aGlzLml0ZW0sIGV2ZW50KTtcbiAgICB9XG4gIH1cbn1cblxuXG4iLCI8ZGl2IGNsYXNzPVwiY3FhLXVpLXJvb3RcIj5cbiAgPGRpdlxuICAgIFtuZ0NsYXNzXT1cIltsYXlvdXQgPT09ICcxJ1xuICAgID8gJ2NxYS1mbGV4IGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtaXRlbXMtY2VudGVyIGNxYS1weS0zIG1kOmNxYS1wdC0xIG1kOmNxYS1wYi0wLjUgY3FhLXB4LTUgY3FhLWdhcC0zIGNxYS13LWZ1bGwgbWQ6Y3FhLWgtWzYycHhdIGNxYS1ib3JkZXItYi0wIGNxYS1ib3JkZXItWyNFNUU3RUJdJ1xuICAgIDogJ2NxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtanVzdGlmeS1zdGFydCBjcWEtaXRlbXMtc3RhcnQgY3FhLXB5LTMgbWQ6Y3FhLXB5LTEgbGc6Y3FhLXB4LTUgY3FhLXB4LTIgY3FhLXctZnVsbCBtZDpjcWEtaC1bNTNweF0nLCBpdGVtc2xlbmd0aCA9PSBpdGVtLmlkID8gJ2NxYS1ib3JkZXItbCBtZDpjcWEtYm9yZGVyLWwtMCBtZDpjcWEtYm9yZGVyLWwnIDogJycgLCBpdGVtLmlkID09ICcxJyAmJiBsYXlvdXQgPT09ICcxJyA/ICdjcWEtYm9yZGVyLWwgbWQ6Y3FhLWJvcmRlci1yJyA6ICcnLCBpdGVtLm9uQ2xpY2sgPyAnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCcgOiAnJ11cIlxuICAgIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICBbYXR0ci50aXRsZV09XCJudWxsXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImxheW91dCA9PT0gJzEnOyBlbHNlIGxheW91dDJcIj5cbiAgICAgIDwhLS0gW25nQ2xhc3NdPVwieyAnYm9yZGVyLWwgbWQ6Ym9yZGVyLWwtMCc6IGl0ZW1zbGVuZ3RoID09IGl0ZW0uaWQgfVwiIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWp1c3RpZnktY2VudGVyIGNxYS13LTEwIGNxYS1oLTEwIGNxYS1taW4tdy1bNDBweF0gY3FhLXJvdW5kZWQtWzEwcHhdXCJcbiAgICAgICAgW25nQ2xhc3NdPVwiaXRlbS5hY2NlbnRCZ0NsYXNzIHx8ICdjcWEtYmctWyNFRUYyRkZdJ1wiPlxuICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNSAhY3FhLWgtNSAhY3FhLXRleHQtWzIwcHhdXCIgW25nQ2xhc3NdPVwiaXRlbS5pY29uQ29sb3JDbGFzcyB8fCAnY3FhLXRleHQtWyMzRjQzRUVdJ1wiXG4gICAgICAgICAgKm5nSWY9XCJpdGVtLmljb25cIj57eyBpdGVtLmljb24gfX08L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtZ2FwLTAuNSBjcWEtdy1mdWxsIGNxYS1oLWF1dG8gY3FhLWZsZXgtMSBjcWEtdHJ1bmNhdGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWgtNCBjcWEtdGV4dC1bMTJweF0gY3FhLWxlYWRpbmctNCBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+e3sgaXRlbS5sYWJlbFxuICAgICAgICAgIH19PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtdy1mdWxsIGNxYS1oLTcgY3FhLWdhcC0yIGNxYS1mbGV4XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJpdGVtLnN1YnRleHQgPyAnY3FhLWp1c3RpZnktYmV0d2VlbiBjcWEtaXRlbXMtY2VudGVyJyA6ICdjcWEtanVzdGlmeS1zdGFydCBjcWEtaXRlbXMtY2VudGVyJ1wiPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzIwcHhdIGNxYS1sZWFkaW5nLVsyOHB4XSBjcWEtZm9udC1zZW1pYm9sZCBjcWEtdHJhY2tpbmctWy0wLjQ0OTIxOXB4XSBjcWEtdGV4dC1bIzEwMTgyOF1cIj5cbiAgICAgICAgICAgIHt7IGl0ZW0udmFsdWUgfCBudW1iZXIgfX08L2Rpdj5cbiAgICAgICAgICA8ZGl2ICpuZ0lmPVwiaXRlbS5zdWJ0ZXh0XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLTQgY3FhLXRleHQtWyM2QTcyODJdIGNxYS10cnVuY2F0ZSBjcWEtaGlkZGVuIHNtOmNxYS1ibG9ja1wiPnt7XG4gICAgICAgICAgICBpdGVtLnN1YnRleHQgfX08L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtdy1mdWxsIGNxYS1oLTEgY3FhLXJvdW5kZWQtZnVsbCBjcWEtYmctWyNGM0Y0RjZdIGNxYS1vdmVyZmxvdy1oaWRkZW5cIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWgtZnVsbCBjcWEtcm91bmRlZC1mdWxsXCIgW25nQ2xhc3NdPVwiaXRlbS5jb2xvckNsYXNzIHx8ICdjcWEtYmctWyMzRjQzRUVdJ1wiXG4gICAgICAgICAgICBbc3R5bGUud2lkdGhdPVwicHJvZ3Jlc3NcIj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI2xheW91dDI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLTFcIj5cbiAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwiIWNxYS13LTUgIWNxYS1oLTUgIWNxYS10ZXh0LVsxNnB4XVwiIFtuZ0NsYXNzXT1cIml0ZW0uaWNvbkNvbG9yQ2xhc3MgfHwgJ2NxYS10ZXh0LVsjM0Y0M0VFXSdcIlxuICAgICAgICAgICpuZ0lmPVwiaXRlbS5pY29uXCI+e3sgaXRlbS5pY29uIH19PC9tYXQtaWNvbj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC1bMTJweF0gY3FhLWxlYWRpbmctNCBjcWEtdGV4dC1bIzZCNzI4MF1cIj57eyBpdGVtLmxhYmVsIH19PC9zcGFuPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLTEuNSBjcWEtdy1mdWxsIGNxYS1qdXN0aWZ5LWJldHdlZW5cIj5cbiAgICAgICAgPGg2IGNsYXNzPVwiY3FhLXRleHQtWzE2cHhdIGNxYS1sZWFkaW5nLTcgY3FhLXRyYWNraW5nLVstMC40NXB4XSBjcWEtdGV4dC1bIzExMTgyN11cIj57eyBpdGVtLnZhbHVlIHwgbnVtYmVyIH19XG4gICAgICAgIDwvaDY+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwiaXRlbS5wZXJjZW50ICE9PSB1bmRlZmluZWRcIiBjbGFzcz1cImNxYS10ZXh0LVsxMHB4XSBjcWEtbGVhZGluZy00XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3MoaXRlbS5wZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQoaXRlbS5wZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIDwvZGl2PlxuPC9kaXY+Il19
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "./metrics-block.component";
|
|
4
4
|
import * as i2 from "@angular/material/icon";
|
|
@@ -11,6 +11,7 @@ export class MetricsCardComponent {
|
|
|
11
11
|
this.items = [];
|
|
12
12
|
this.cardClass = '';
|
|
13
13
|
this.layout = '1';
|
|
14
|
+
this.totalClick = new EventEmitter(); // Output event for total block click
|
|
14
15
|
}
|
|
15
16
|
progressWidth(item) {
|
|
16
17
|
const max = item.max ?? this.inferMax();
|
|
@@ -38,12 +39,18 @@ export class MetricsCardComponent {
|
|
|
38
39
|
return 'cqa-text-[#EF4444]'; // red
|
|
39
40
|
return 'cqa-text-[#6B7280]'; // neutral
|
|
40
41
|
}
|
|
42
|
+
handleTotalClick(event) {
|
|
43
|
+
if (this.onTotalClick) {
|
|
44
|
+
this.onTotalClick(event);
|
|
45
|
+
}
|
|
46
|
+
this.totalClick.emit(event);
|
|
47
|
+
}
|
|
41
48
|
}
|
|
42
49
|
MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
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" }, 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
|
|
50
|
+
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 [ngClass]=\"['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', onTotalClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleTotalClick($event)\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\"> {{\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-mr-4\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\">\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': onTotalClick}\"\n (click)=\"handleTotalClick($event)\">\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\">{{ 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-text-[#111827]\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 lg:cqa-grid-cols-5 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: i1.MetricsBlockComponent, selector: "cqa-metrics-block", inputs: ["item", "progress", "layout", "itemslength"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i3.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
44
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
|
|
45
52
|
type: Component,
|
|
46
|
-
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
|
|
53
|
+
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 [ngClass]=\"['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', onTotalClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleTotalClick($event)\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\"> {{\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-mr-4\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\">\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': onTotalClick}\"\n (click)=\"handleTotalClick($event)\">\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\">{{ 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-text-[#111827]\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 lg:cqa-grid-cols-5 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: [] }]
|
|
47
54
|
}], propDecorators: { icon: [{
|
|
48
55
|
type: Input
|
|
49
56
|
}], title: [{
|
|
@@ -58,5 +65,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
58
65
|
type: Input
|
|
59
66
|
}], totalPercent: [{
|
|
60
67
|
type: Input
|
|
68
|
+
}], onTotalClick: [{
|
|
69
|
+
type: Input
|
|
70
|
+
}], totalClick: [{
|
|
71
|
+
type: Output
|
|
61
72
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQVUxRSxNQUFNLE9BQU8sb0JBQW9CO0lBUGpDO1FBUVcsU0FBSSxHQUFXLGNBQWMsQ0FBQztRQUM5QixVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLFVBQUssR0FBb0IsQ0FBQyxDQUFDO1FBQzNCLFVBQUssR0FBc0IsRUFBRSxDQUFDO1FBQzlCLGNBQVMsR0FBVyxFQUFFLENBQUM7UUFDdkIsV0FBTSxHQUFXLEdBQUcsQ0FBQztLQTJCL0I7SUF4QkMsYUFBYSxDQUFDLElBQXFCO1FBQ2pDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ3hDLElBQUksQ0FBQyxHQUFHLElBQUksR0FBRyxJQUFJLENBQUM7WUFBRSxPQUFPLElBQUksQ0FBQztRQUNsQyxNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUNqRSxPQUFPLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDO0lBQzlCLENBQUM7SUFFTyxRQUFRO1FBQ2QsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDNUUsT0FBTyxZQUFZLElBQUksQ0FBQyxDQUFDO0lBQzNCLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBYztRQUMxQixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sRUFBRSxDQUFDO1FBQzVFLE1BQU0sSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDbkQsT0FBTyxHQUFHLElBQUksR0FBRyxLQUFLLEdBQUcsQ0FBQztJQUM1QixDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQWM7UUFDekIsSUFBSSxLQUFLLEtBQUssU0FBUyxJQUFJLEtBQUssS0FBSyxJQUFJLElBQUksTUFBTSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDO1FBQzlGLElBQUksS0FBSyxHQUFHLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDLENBQUMsUUFBUTtRQUNwRCxJQUFJLEtBQUssR0FBRyxDQUFDO1lBQUUsT0FBTyxvQkFBb0IsQ0FBQyxDQUFDLE1BQU07UUFDbEQsT0FBTyxvQkFBb0IsQ0FBQyxDQUFDLFVBQVU7SUFDekMsQ0FBQzs7aUhBaENVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLG1QQ1ZqQyxxOUhBdURNOzJGRDdDTyxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNZXRyaWNzQ2FyZEl0ZW0gfSBmcm9tICcuL21ldHJpY3MtY2FyZC1pdGVtLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1tZXRyaWNzLWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGhvc3Q6IHsgY2xhc3M6ICdjcWEtdWktcm9vdCcgfVxufSlcbmV4cG9ydCBjbGFzcyBNZXRyaWNzQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGljb246IHN0cmluZyA9ICd0ZXh0X3NuaXBwZXQnO1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRvdGFsOiBudW1iZXIgfCBzdHJpbmcgPSAwO1xuICBASW5wdXQoKSBpdGVtczogTWV0cmljc0NhcmRJdGVtW10gPSBbXTtcbiAgQElucHV0KCkgY2FyZENsYXNzOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgbGF5b3V0OiBzdHJpbmcgPSAnMSc7XG4gIEBJbnB1dCgpIHRvdGFsUGVyY2VudD86IG51bWJlcjsgLy8gT3B0aW9uYWwgb3ZlcmFsbCBwZXJjZW50IGRlbHRhIGZvciBsYXlvdXQgMlxuXG4gIHByb2dyZXNzV2lkdGgoaXRlbTogTWV0cmljc0NhcmRJdGVtKTogc3RyaW5nIHtcbiAgICBjb25zdCBtYXggPSBpdGVtLm1heCA/PyB0aGlzLmluZmVyTWF4KCk7XG4gICAgaWYgKCFtYXggfHwgbWF4IDw9IDApIHJldHVybiAnMCUnO1xuICAgIGNvbnN0IHBjdCA9IE1hdGgubWF4KDAsIE1hdGgubWluKDEwMCwgKGl0ZW0udmFsdWUgLyBtYXgpICogMTAwKSk7XG4gICAgcmV0dXJuIHBjdC50b0ZpeGVkKDEpICsgJyUnO1xuICB9XG5cbiAgcHJpdmF0ZSBpbmZlck1heCgpOiBudW1iZXIge1xuICAgIGNvbnN0IG1heEZyb21JdGVtcyA9IHRoaXMuaXRlbXMucmVkdWNlKChtLCBpdCkgPT4gTWF0aC5tYXgobSwgaXQudmFsdWUpLCAwKTtcbiAgICByZXR1cm4gbWF4RnJvbUl0ZW1zIHx8IDE7XG4gIH1cblxuICBmb3JtYXRQZXJjZW50KHZhbHVlPzogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAodmFsdWUgPT09IHVuZGVmaW5lZCB8fCB2YWx1ZSA9PT0gbnVsbCB8fCBOdW1iZXIuaXNOYU4odmFsdWUpKSByZXR1cm4gJyc7XG4gICAgY29uc3Qgc2lnbiA9IHZhbHVlID4gMCA/ICcrJyA6IHZhbHVlIDwgMCA/ICcnIDogJyc7XG4gICAgcmV0dXJuIGAke3NpZ259JHt2YWx1ZX0lYDtcbiAgfVxuXG4gIHBlcmNlbnRDbGFzcyh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICAgIGlmICh2YWx1ZSA+IDApIHJldHVybiAnY3FhLXRleHQtWyMxMEI5ODFdJzsgLy8gZ3JlZW5cbiAgICBpZiAodmFsdWUgPCAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjRUY0NDQ0XSc7IC8vIHJlZFxuICAgIHJldHVybiAnY3FhLXRleHQtWyM2QjcyODBdJzsgLy8gbmV1dHJhbFxuICB9XG59XG5cblxuIiwiPGRpdiBjbGFzcz1cImNxYS11aS1yb290XCI+XG4gIDxkaXYgKm5nSWY9XCJsYXlvdXQgPT09ICcxJ1wiXG4gICAgY2xhc3M9XCJjcWEtdy1mdWxsIGNxYS1ib3gtYm9yZGVyIGNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtaXRlbXMtc3RhcnQgY3FhLXB4LXB4IGNxYS1wYi1weCBtZDpjcWEtaC1bNjNweF0gY3FhLWJnLXdoaXRlIGNxYS1ib3JkZXItdC0yIGNxYS1ib3JkZXItciBjcWEtYm9yZGVyLWItMCBjcWEtYm9yZGVyLWwgY3FhLWJvcmRlci1zb2xpZCBjcWEtYm9yZGVyLVsjM0Y0M0VFXSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTBcIlxuICAgIFtuZ0NsYXNzXT1cImNhcmRDbGFzc1wiPlxuICAgIDwhLS0gTWV0cmljIGJsb2NrcyAtLT5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImNxYS1mbGV4LTEgY3FhLXctZnVsbCBjcWEtZ3JpZCBjcWEtZ3JpZC1jb2xzLTIgc206Y3FhLWdyaWQtY29scy0yIG1kOmNxYS1ncmlkLWNvbHMtNCBjcWEtYm9yZGVyIGNxYS1ib3JkZXItWyNFNUU3RUJdIGNxYS1yb3VuZGVkLVsxMHB4XSBjcWEtb3ZlcmZsb3ctaGlkZGVuXCI+XG4gICAgICA8IS0tIExlZnQgdG90YWwgYmxvY2sgLS0+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtaXRlbXMtc3RhcnQgY3FhLXB5LTMgbWQ6Y3FhLXB0LTEgbWQ6Y3FhLXBiLTAuNSBjcWEtcHgtNiBjcWEtZ2FwLTEgY3FhLXctZnVsbCBzbTpjcWEtdy1bMTAwJV0gbWQ6Y3FhLXctWzE4MHB4XSBsZzpjcWEtdy1bMjkwcHhdIG1kOmNxYS1oLVs2MXB4XSBjcWEtYm9yZGVyLWIgY3FhLWJvcmRlci1bI0U1RTdFQl0gc206Y3FhLWJvcmRlci1iLTAgc206Y3FhLWJvcmRlci1yXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLVsxNnB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+IHt7IHRpdGxlIH19IDwvc3Bhbj5cbiAgICAgICAgPGgzIGNsYXNzPVwiY3FhLXRleHQtWzMwcHhdIGNxYS1sZWFkaW5nLVszNnB4XSBjcWEtZm9udC1ib2xkIGNxYS10cmFja2luZy1bMC4zOTU1MDhweF0gY3FhLXRleHQtWyMxMDE4MjhdXCI+IHt7XG4gICAgICAgICAgdG90YWwgfCBudW1iZXIgfX0gPC9oMz5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1zdHJldGNoIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBtZDpjcWEtYm9yZGVyLWItMFwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtaGlkZGVuIHNtOmNxYS1ibG9jayBtZDpjcWEtYmxvY2sgY3FhLXctWzFweF0gY3FhLWJnLVsjRTVFN0VCXSBjcWEtbXItNFwiPjwvZGl2PlxuICAgICAgICAgIDxjcWEtbWV0cmljcy1ibG9jayBbaXRlbV09XCJpdFwiIFtpdGVtc2xlbmd0aF09XCJpdGVtcy5sZW5ndGgudG9TdHJpbmcoKVwiXG4gICAgICAgICAgICBbcHJvZ3Jlc3NdPVwicHJvZ3Jlc3NXaWR0aChpdClcIj5cbiAgICAgICAgICA8L2NxYS1tZXRyaWNzLWJsb2NrPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cblxuICA8ZGl2ICpuZ0lmPVwibGF5b3V0ID09PSAnMidcIlxuICAgIGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtYm94LWJvcmRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weC1weCBjcWEtcGItcHggbWQ6Y3FhLWgtWzYzcHhdIGNxYS1iZy13aGl0ZSBjcWEtZmxleC1ub25lIGNxYS1vcmRlci0wIGNxYS1zZWxmLXN0cmV0Y2ggY3FhLWdyb3ctMFwiXG4gICAgW25nQ2xhc3NdPVwiY2FyZENsYXNzXCI+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjcWEtZmxleCBjcWEtZmxleC1jb2wgbWQ6Y3FhLWZsZXgtcm93IGNxYS1mbGV4LXdyYXAgY3FhLWl0ZW1zLXN0cmV0Y2ggY3FhLXctZnVsbCBjcWEtbWluLWgtWzUzcHhdIGNxYS1yb3VuZGVkLW5vbmUgY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTAgY3FhLWdhcC00XCI+XG4gICAgICA8IS0tIExlZnQgdG90YWwgYmxvY2sgLS0+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtaXRlbXMtc3RhcnQgY3FhLXB5LTMgbWQ6Y3FhLXB5LTEgY3FhLXB4LTQgc206Y3FhLXB4LTYgY3FhLWdhcC0xIGNxYS13LWZ1bGwgc206Y3FhLXctWzEwMCVdIG1kOmNxYS13LVsyNDBweF0gbGc6Y3FhLXctWzI5MHB4XSBtZDpjcWEtaC1bNjFweF0gY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1ib3JkZXIgY3FhLWJvcmRlci1zb2xpZCBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcmVsYXRpdmUgY3FhLW92ZXJmbG93LWhpZGRlbiBiZWZvcmU6Y3FhLWNvbnRlbnQtWycnXSBiZWZvcmU6Y3FhLWJnLVsjNEM0QzUxXSBiZWZvcmU6Y3FhLWgtWzJweF0gYmVmb3JlOmNxYS13LWZ1bGwgYmVmb3JlOmNxYS1hYnNvbHV0ZSBiZWZvcmU6Y3FhLXRvcC0wIGJlZm9yZTpjcWEtbGVmdC0wXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtMiBjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS13LWZ1bGxcIj5cbiAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNCAhY3FhLWgtNCAhY3FhLXRleHQtWzE2cHhdIGNxYS10ZXh0LVsjNkI3MjgwXVwiPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWyM2QjcyODBdIGNxYS10ZXh0LVsxNHB4XSBjcWEtbGVhZGluZy00XCI+e3sgdGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1lbmQgY3FhLWdhcC0yIGNxYS1tbC1hdXRvXCI+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJjcWEtdGV4dC1bMjhweF0gY3FhLWxlYWRpbmctNyBjcWEtdHJhY2tpbmctWy0wLjQ1cHhdIGNxYS10ZXh0LVsjMTExODI3XVwiPnt7IHRvdGFsIHwgbnVtYmVyIH19XG4gICAgICAgICAgICA8L2g0PlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b3RhbFBlcmNlbnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwiY3FhLXRleHQtWzEwcHhdIGNxYS1sZWFkaW5nLTRcIlxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3ModG90YWxQZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQodG90YWxQZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSBNZXRyaWMgYmxvY2tzIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4LTEgY3FhLXctZnVsbCBjcWEtZ3JpZCBjcWEtZ3JpZC1jb2xzLTIgbWQ6Y3FhLWdyaWQtY29scy0zIGxnOmNxYS1ncmlkLWNvbHMtNSBjcWEtZ2FwLTIgbWQ6Y3FhLWdhcC0zIGNxYS1pdGVtcy1jZW50ZXIgY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1ib3JkZXIgY3FhLWJvcmRlci1zb2xpZCBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcmVsYXRpdmUgY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS1oLVsycHhdIGNxYS13LWZ1bGwgY3FhLWFic29sdXRlIGNxYS10b3AtMCBjcWEtbGVmdC0wXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KDkwZGVnLCAjM0I4MkY2IDAlLCByZ2JhKDAsIDAsIDAsIDApIDEwMCUpJ1wiPjwvc3Bhbj5cbiAgICAgICAgPGNxYS1tZXRyaWNzLWJsb2NrICpuZ0Zvcj1cImxldCBpdCBvZiBpdGVtczsgbGV0IGkgPSBpbmRleFwiIFtpdGVtXT1cIml0XCIgW2xheW91dF09XCJsYXlvdXRcIj5cbiAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
73
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVWhHLE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFRVyxTQUFJLEdBQVcsY0FBYyxDQUFDO1FBQzlCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFvQixDQUFDLENBQUM7UUFDM0IsVUFBSyxHQUFzQixFQUFFLENBQUM7UUFDOUIsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixXQUFNLEdBQVcsR0FBRyxDQUFDO1FBR3BCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDLENBQUMscUNBQXFDO0tBaUN4RjtJQS9CQyxhQUFhLENBQUMsSUFBcUI7UUFDakMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztZQUFFLE9BQU8sSUFBSSxDQUFDO1FBQ2xDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDOUIsQ0FBQztJQUVPLFFBQVE7UUFDZCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM1RSxPQUFPLFlBQVksSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUMsQ0FBQyxRQUFRO1FBQ3BELElBQUksS0FBSyxHQUFHLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDLENBQUMsTUFBTTtRQUNsRCxPQUFPLG9CQUFvQixDQUFDLENBQUMsVUFBVTtJQUN6QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDckIsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUMxQjtRQUNELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7O2lIQXpDVSxvQkFBb0I7cUdBQXBCLG9CQUFvQix3VENWakMsaXlJQTBETTsyRkRoRE8sb0JBQW9CO2tCQVBoQyxTQUFTOytCQUNFLGtCQUFrQixtQkFHWCx1QkFBdUIsQ0FBQyxNQUFNLFFBQ3pDLEVBQUUsS0FBSyxFQUFFLGFBQWEsRUFBRTs4QkFHckIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNZXRyaWNzQ2FyZEl0ZW0gfSBmcm9tICcuL21ldHJpY3MtY2FyZC1pdGVtLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1tZXRyaWNzLWNhcmQnLFxuICB0ZW1wbGF0ZVVybDogJy4vbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGhvc3Q6IHsgY2xhc3M6ICdjcWEtdWktcm9vdCcgfVxufSlcbmV4cG9ydCBjbGFzcyBNZXRyaWNzQ2FyZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGljb246IHN0cmluZyA9ICd0ZXh0X3NuaXBwZXQnO1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIHRvdGFsOiBudW1iZXIgfCBzdHJpbmcgPSAwO1xuICBASW5wdXQoKSBpdGVtczogTWV0cmljc0NhcmRJdGVtW10gPSBbXTtcbiAgQElucHV0KCkgY2FyZENsYXNzOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgbGF5b3V0OiBzdHJpbmcgPSAnMSc7XG4gIEBJbnB1dCgpIHRvdGFsUGVyY2VudD86IG51bWJlcjsgLy8gT3B0aW9uYWwgb3ZlcmFsbCBwZXJjZW50IGRlbHRhIGZvciBsYXlvdXQgMlxuICBASW5wdXQoKSBvblRvdGFsQ2xpY2s/OiAoZXZlbnQ/OiBFdmVudCkgPT4gdm9pZDsgLy8gT3B0aW9uYWwgY2xpY2sgaGFuZGxlciBmb3IgdG90YWwgYmxvY2tcbiAgQE91dHB1dCgpIHRvdGFsQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPEV2ZW50PigpOyAvLyBPdXRwdXQgZXZlbnQgZm9yIHRvdGFsIGJsb2NrIGNsaWNrXG5cbiAgcHJvZ3Jlc3NXaWR0aChpdGVtOiBNZXRyaWNzQ2FyZEl0ZW0pOiBzdHJpbmcge1xuICAgIGNvbnN0IG1heCA9IGl0ZW0ubWF4ID8/IHRoaXMuaW5mZXJNYXgoKTtcbiAgICBpZiAoIW1heCB8fCBtYXggPD0gMCkgcmV0dXJuICcwJSc7XG4gICAgY29uc3QgcGN0ID0gTWF0aC5tYXgoMCwgTWF0aC5taW4oMTAwLCAoaXRlbS52YWx1ZSAvIG1heCkgKiAxMDApKTtcbiAgICByZXR1cm4gcGN0LnRvRml4ZWQoMSkgKyAnJSc7XG4gIH1cblxuICBwcml2YXRlIGluZmVyTWF4KCk6IG51bWJlciB7XG4gICAgY29uc3QgbWF4RnJvbUl0ZW1zID0gdGhpcy5pdGVtcy5yZWR1Y2UoKG0sIGl0KSA9PiBNYXRoLm1heChtLCBpdC52YWx1ZSksIDApO1xuICAgIHJldHVybiBtYXhGcm9tSXRlbXMgfHwgMTtcbiAgfVxuXG4gIGZvcm1hdFBlcmNlbnQodmFsdWU/OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh2YWx1ZSA9PT0gdW5kZWZpbmVkIHx8IHZhbHVlID09PSBudWxsIHx8IE51bWJlci5pc05hTih2YWx1ZSkpIHJldHVybiAnJztcbiAgICBjb25zdCBzaWduID0gdmFsdWUgPiAwID8gJysnIDogdmFsdWUgPCAwID8gJycgOiAnJztcbiAgICByZXR1cm4gYCR7c2lnbn0ke3ZhbHVlfSVgO1xuICB9XG5cbiAgcGVyY2VudENsYXNzKHZhbHVlPzogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAodmFsdWUgPT09IHVuZGVmaW5lZCB8fCB2YWx1ZSA9PT0gbnVsbCB8fCBOdW1iZXIuaXNOYU4odmFsdWUpKSByZXR1cm4gJ2NxYS10ZXh0LVsjNkI3MjgwXSc7XG4gICAgaWYgKHZhbHVlID4gMCkgcmV0dXJuICdjcWEtdGV4dC1bIzEwQjk4MV0nOyAvLyBncmVlblxuICAgIGlmICh2YWx1ZSA8IDApIHJldHVybiAnY3FhLXRleHQtWyNFRjQ0NDRdJzsgLy8gcmVkXG4gICAgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nOyAvLyBuZXV0cmFsXG4gIH1cblxuICBoYW5kbGVUb3RhbENsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGlmICh0aGlzLm9uVG90YWxDbGljaykge1xuICAgICAgdGhpcy5vblRvdGFsQ2xpY2soZXZlbnQpO1xuICAgIH1cbiAgICB0aGlzLnRvdGFsQ2xpY2suZW1pdChldmVudCk7XG4gIH1cbn1cblxuXG4iLCI8ZGl2IGNsYXNzPVwiY3FhLXVpLXJvb3RcIj5cbiAgPGRpdiAqbmdJZj1cImxheW91dCA9PT0gJzEnXCJcbiAgICBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWJveC1ib3JkZXIgY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtcHgtcHggY3FhLXBiLXB4IG1kOmNxYS1oLVs2M3B4XSBjcWEtYmctd2hpdGUgY3FhLWJvcmRlci10LTIgY3FhLWJvcmRlci1yIGNxYS1ib3JkZXItYi0wIGNxYS1ib3JkZXItbCBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyMzRjQzRUVdIGNxYS1yb3VuZGVkLVsxMHB4XSBjcWEtZmxleC1ub25lIGNxYS1vcmRlci0wIGNxYS1zZWxmLXN0cmV0Y2ggY3FhLWdyb3ctMFwiXG4gICAgW25nQ2xhc3NdPVwiY2FyZENsYXNzXCI+XG4gICAgPCEtLSBNZXRyaWMgYmxvY2tzIC0tPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY3FhLWZsZXgtMSBjcWEtdy1mdWxsIGNxYS1ncmlkIGNxYS1ncmlkLWNvbHMtMiBzbTpjcWEtZ3JpZC1jb2xzLTIgbWQ6Y3FhLWdyaWQtY29scy00IGNxYS1ib3JkZXIgY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1vdmVyZmxvdy1oaWRkZW5cIj5cbiAgICAgIDwhLS0gTGVmdCB0b3RhbCBibG9jayAtLT5cbiAgICAgIDxkaXZcbiAgICAgICAgW25nQ2xhc3NdPVwiWydjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHQtMSBtZDpjcWEtcGItMC41IGNxYS1weC02IGNxYS1nYXAtMSBjcWEtdy1mdWxsIHNtOmNxYS13LVsxMDAlXSBtZDpjcWEtdy1bMTgwcHhdIGxnOmNxYS13LVsyOTBweF0gbWQ6Y3FhLWgtWzYxcHhdIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBzbTpjcWEtYm9yZGVyLWItMCBzbTpjcWEtYm9yZGVyLXInLCBvblRvdGFsQ2xpY2sgPyAnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCcgOiAnJ11cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLVsxNnB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+IHt7IHRpdGxlIH19IDwvc3Bhbj5cbiAgICAgICAgPGgzIGNsYXNzPVwiY3FhLXRleHQtWzMwcHhdIGNxYS1sZWFkaW5nLVszNnB4XSBjcWEtZm9udC1ib2xkIGNxYS10cmFja2luZy1bMC4zOTU1MDhweF0gY3FhLXRleHQtWyMxMDE4MjhdXCI+IHt7XG4gICAgICAgICAgdG90YWwgfCBudW1iZXIgfX0gPC9oMz5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1zdHJldGNoIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBtZDpjcWEtYm9yZGVyLWItMFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWhpZGRlbiBzbTpjcWEtYmxvY2sgbWQ6Y3FhLWJsb2NrIGNxYS13LVsxcHhdIGNxYS1iZy1bI0U1RTdFQl0gY3FhLW1yLTRcIj48L2Rpdj5cbiAgICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgW2l0ZW1dPVwiaXRcIiBbaXRlbXNsZW5ndGhdPVwiaXRlbXMubGVuZ3RoLnRvU3RyaW5nKClcIlxuICAgICAgICAgICAgW3Byb2dyZXNzXT1cInByb2dyZXNzV2lkdGgoaXQpXCI+XG4gICAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImxheW91dCA9PT0gJzInXCJcbiAgICBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWJveC1ib3JkZXIgY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtcHgtcHggY3FhLXBiLXB4IG1kOmNxYS1oLVs2M3B4XSBjcWEtYmctd2hpdGUgY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTBcIlxuICAgIFtuZ0NsYXNzXT1cImNhcmRDbGFzc1wiPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIG1kOmNxYS1mbGV4LXJvdyBjcWEtZmxleC13cmFwIGNxYS1pdGVtcy1zdHJldGNoIGNxYS13LWZ1bGwgY3FhLW1pbi1oLVs1M3B4XSBjcWEtcm91bmRlZC1ub25lIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wIGNxYS1nYXAtNFwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weS0zIG1kOmNxYS1weS0xIGNxYS1weC00IHNtOmNxYS1weC02IGNxYS1nYXAtMSBjcWEtdy1mdWxsIHNtOmNxYS13LVsxMDAlXSBtZDpjcWEtdy1bMjQwcHhdIGxnOmNxYS13LVsyOTBweF0gbWQ6Y3FhLWgtWzYxcHhdIGNxYS1yb3VuZGVkLVsxMHB4XSBjcWEtYm9yZGVyIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLXJlbGF0aXZlIGNxYS1vdmVyZmxvdy1oaWRkZW4gYmVmb3JlOmNxYS1jb250ZW50LVsnJ10gYmVmb3JlOmNxYS1iZy1bIzRDNEM1MV0gYmVmb3JlOmNxYS1oLVsycHhdIGJlZm9yZTpjcWEtdy1mdWxsIGJlZm9yZTpjcWEtYWJzb2x1dGUgYmVmb3JlOmNxYS10b3AtMCBiZWZvcmU6Y3FhLWxlZnQtMFwiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtMiBjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS13LWZ1bGxcIj5cbiAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNCAhY3FhLWgtNCAhY3FhLXRleHQtWzE2cHhdIGNxYS10ZXh0LVsjNkI3MjgwXVwiPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWyM2QjcyODBdIGNxYS10ZXh0LVsxNHB4XSBjcWEtbGVhZGluZy00XCI+e3sgdGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1lbmQgY3FhLWdhcC0yIGNxYS1tbC1hdXRvXCI+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJjcWEtdGV4dC1bMjhweF0gY3FhLWxlYWRpbmctNyBjcWEtdHJhY2tpbmctWy0wLjQ1cHhdIGNxYS10ZXh0LVsjMTExODI3XVwiPnt7IHRvdGFsIHwgbnVtYmVyIH19XG4gICAgICAgICAgICA8L2g0PlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b3RhbFBlcmNlbnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwiY3FhLXRleHQtWzEwcHhdIGNxYS1sZWFkaW5nLTRcIlxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3ModG90YWxQZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQodG90YWxQZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSBNZXRyaWMgYmxvY2tzIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4LTEgY3FhLXctZnVsbCBjcWEtZ3JpZCBjcWEtZ3JpZC1jb2xzLTIgbWQ6Y3FhLWdyaWQtY29scy0zIGxnOmNxYS1ncmlkLWNvbHMtNSBjcWEtZ2FwLTIgbWQ6Y3FhLWdhcC0zIGNxYS1pdGVtcy1jZW50ZXIgY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1ib3JkZXIgY3FhLWJvcmRlci1zb2xpZCBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcmVsYXRpdmUgY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS1oLVsycHhdIGNxYS13LWZ1bGwgY3FhLWFic29sdXRlIGNxYS10b3AtMCBjcWEtbGVmdC0wXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KDkwZGVnLCAjM0I4MkY2IDAlLCByZ2JhKDAsIDAsIDAsIDApIDEwMCUpJ1wiPjwvc3Bhbj5cbiAgICAgICAgPGNxYS1tZXRyaWNzLWJsb2NrICpuZ0Zvcj1cImxldCBpdCBvZiBpdGVtczsgbGV0IGkgPSBpbmRleFwiIFtpdGVtXT1cIml0XCIgW2xheW91dF09XCJsYXlvdXRcIiBbYXR0ci50aXRsZV09XCJudWxsXCI+XG4gICAgICAgIDwvY3FhLW1ldHJpY3MtYmxvY2s+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
@@ -2272,10 +2272,10 @@ class MetricsBlockComponent {
|
|
|
2272
2272
|
}
|
|
2273
2273
|
}
|
|
2274
2274
|
MetricsBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2275
|
-
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 <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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2275
|
+
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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2276
2276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, decorators: [{
|
|
2277
2277
|
type: Component,
|
|
2278
|
-
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, 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 <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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", styles: [] }]
|
|
2278
|
+
args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, 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-truncate\">\n <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n }}</div>\n <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\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-tracking-[-0.449219px] cqa-text-[#101828]\">\n {{ item.value | number }}</div>\n <div *ngIf=\"item.subtext\"\n class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n item.subtext }}</div>\n </div>\n <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\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-text-[#6B7280]\">{{ 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-text-[#111827]\">{{ item.value | number }}\n </h6>\n <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n </div>\n </ng-template>\n </div>\n</div>", styles: [] }]
|
|
2279
2279
|
}], propDecorators: { item: [{
|
|
2280
2280
|
type: Input
|
|
2281
2281
|
}], progress: [{
|
|
@@ -2294,6 +2294,7 @@ class MetricsCardComponent {
|
|
|
2294
2294
|
this.items = [];
|
|
2295
2295
|
this.cardClass = '';
|
|
2296
2296
|
this.layout = '1';
|
|
2297
|
+
this.totalClick = new EventEmitter(); // Output event for total block click
|
|
2297
2298
|
}
|
|
2298
2299
|
progressWidth(item) {
|
|
2299
2300
|
var _a;
|
|
@@ -2322,12 +2323,18 @@ class MetricsCardComponent {
|
|
|
2322
2323
|
return 'cqa-text-[#EF4444]'; // red
|
|
2323
2324
|
return 'cqa-text-[#6B7280]'; // neutral
|
|
2324
2325
|
}
|
|
2326
|
+
handleTotalClick(event) {
|
|
2327
|
+
if (this.onTotalClick) {
|
|
2328
|
+
this.onTotalClick(event);
|
|
2329
|
+
}
|
|
2330
|
+
this.totalClick.emit(event);
|
|
2331
|
+
}
|
|
2325
2332
|
}
|
|
2326
2333
|
MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2327
|
-
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" }, 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
|
|
2334
|
+
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 [ngClass]=\"['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', onTotalClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleTotalClick($event)\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\"> {{\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-mr-4\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\">\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': onTotalClick}\"\n (click)=\"handleTotalClick($event)\">\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\">{{ 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-text-[#111827]\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 lg:cqa-grid-cols-5 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2328
2335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
|
|
2329
2336
|
type: Component,
|
|
2330
|
-
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
|
|
2337
|
+
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 [ngClass]=\"['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', onTotalClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n (click)=\"handleTotalClick($event)\">\n <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\"> {{ title }} </span>\n <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\"> {{\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-mr-4\"></div>\n <cqa-metrics-block [item]=\"it\" [itemslength]=\"items.length.toString()\"\n [progress]=\"progressWidth(it)\">\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': onTotalClick}\"\n (click)=\"handleTotalClick($event)\">\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\">{{ 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-text-[#111827]\">{{ total | number }}\n </h4>\n <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n </div>\n </div>\n\n </div>\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 lg:cqa-grid-cols-5 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: [] }]
|
|
2331
2338
|
}], propDecorators: { icon: [{
|
|
2332
2339
|
type: Input
|
|
2333
2340
|
}], title: [{
|
|
@@ -2342,6 +2349,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
2342
2349
|
type: Input
|
|
2343
2350
|
}], totalPercent: [{
|
|
2344
2351
|
type: Input
|
|
2352
|
+
}], onTotalClick: [{
|
|
2353
|
+
type: Input
|
|
2354
|
+
}], totalClick: [{
|
|
2355
|
+
type: Output
|
|
2345
2356
|
}] } });
|
|
2346
2357
|
|
|
2347
2358
|
/**
|