@cqa-lib/cqa-ui 1.0.59 → 1.0.60

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.
@@ -40,17 +40,19 @@ export class MetricsCardComponent {
40
40
  return 'cqa-text-[#6B7280]'; // neutral
41
41
  }
42
42
  handleTotalClick(event) {
43
+ // Always emit the event, even if no handler is provided
44
+ this.totalClick.emit(event);
45
+ // Call the input handler if provided
43
46
  if (this.onTotalClick) {
44
47
  this.onTotalClick(event);
45
48
  }
46
- this.totalClick.emit(event);
47
49
  }
48
50
  }
49
51
  MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
52
+ MetricsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsCardComponent, selector: "cqa-metrics-card", inputs: { icon: "icon", title: "title", total: "total", items: "items", cardClass: "cardClass", layout: "layout", totalPercent: "totalPercent", onTotalClick: "onTotalClick" }, outputs: { totalClick: "totalClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': onTotalClick}\"\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 });
51
53
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
52
54
  type: Component,
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: [] }]
55
+ args: [{ selector: 'cqa-metrics-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': onTotalClick}\"\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: [] }]
54
56
  }], propDecorators: { icon: [{
55
57
  type: Input
56
58
  }], title: [{
@@ -70,4 +72,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
70
72
  }], totalClick: [{
71
73
  type: Output
72
74
  }] } });
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=
75
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVWhHLE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFRVyxTQUFJLEdBQVcsY0FBYyxDQUFDO1FBQzlCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFvQixDQUFDLENBQUM7UUFDM0IsVUFBSyxHQUFzQixFQUFFLENBQUM7UUFDOUIsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixXQUFNLEdBQVcsR0FBRyxDQUFDO1FBR3BCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDLENBQUMscUNBQXFDO0tBbUN4RjtJQWpDQyxhQUFhLENBQUMsSUFBcUI7UUFDakMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztZQUFFLE9BQU8sSUFBSSxDQUFDO1FBQ2xDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDOUIsQ0FBQztJQUVPLFFBQVE7UUFDZCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM1RSxPQUFPLFlBQVksSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUMsQ0FBQyxRQUFRO1FBQ3BELElBQUksS0FBSyxHQUFHLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDLENBQUMsTUFBTTtRQUNsRCxPQUFPLG9CQUFvQixDQUFDLENBQUMsVUFBVTtJQUN6QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQix3REFBd0Q7UUFDeEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUIscUNBQXFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQzs7aUhBM0NVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHdUQ1ZqQywyeUlBMkRNOzJGRGpETyxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1ldHJpY3NDYXJkSXRlbSB9IGZyb20gJy4vbWV0cmljcy1jYXJkLWl0ZW0uaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLW1ldHJpY3MtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZXRyaWNzLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaWNvbjogc3RyaW5nID0gJ3RleHRfc25pcHBldCc7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgdG90YWw6IG51bWJlciB8IHN0cmluZyA9IDA7XG4gIEBJbnB1dCgpIGl0ZW1zOiBNZXRyaWNzQ2FyZEl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBjYXJkQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgdG90YWxQZXJjZW50PzogbnVtYmVyOyAvLyBPcHRpb25hbCBvdmVyYWxsIHBlcmNlbnQgZGVsdGEgZm9yIGxheW91dCAyXG4gIEBJbnB1dCgpIG9uVG90YWxDbGljaz86IChldmVudD86IEV2ZW50KSA9PiB2b2lkOyAvLyBPcHRpb25hbCBjbGljayBoYW5kbGVyIGZvciB0b3RhbCBibG9ja1xuICBAT3V0cHV0KCkgdG90YWxDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7IC8vIE91dHB1dCBldmVudCBmb3IgdG90YWwgYmxvY2sgY2xpY2tcblxuICBwcm9ncmVzc1dpZHRoKGl0ZW06IE1ldHJpY3NDYXJkSXRlbSk6IHN0cmluZyB7XG4gICAgY29uc3QgbWF4ID0gaXRlbS5tYXggPz8gdGhpcy5pbmZlck1heCgpO1xuICAgIGlmICghbWF4IHx8IG1heCA8PSAwKSByZXR1cm4gJzAlJztcbiAgICBjb25zdCBwY3QgPSBNYXRoLm1heCgwLCBNYXRoLm1pbigxMDAsIChpdGVtLnZhbHVlIC8gbWF4KSAqIDEwMCkpO1xuICAgIHJldHVybiBwY3QudG9GaXhlZCgxKSArICclJztcbiAgfVxuXG4gIHByaXZhdGUgaW5mZXJNYXgoKTogbnVtYmVyIHtcbiAgICBjb25zdCBtYXhGcm9tSXRlbXMgPSB0aGlzLml0ZW1zLnJlZHVjZSgobSwgaXQpID0+IE1hdGgubWF4KG0sIGl0LnZhbHVlKSwgMCk7XG4gICAgcmV0dXJuIG1heEZyb21JdGVtcyB8fCAxO1xuICB9XG5cbiAgZm9ybWF0UGVyY2VudCh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICcnO1xuICAgIGNvbnN0IHNpZ24gPSB2YWx1ZSA+IDAgPyAnKycgOiB2YWx1ZSA8IDAgPyAnJyA6ICcnO1xuICAgIHJldHVybiBgJHtzaWdufSR7dmFsdWV9JWA7XG4gIH1cblxuICBwZXJjZW50Q2xhc3ModmFsdWU/OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh2YWx1ZSA9PT0gdW5kZWZpbmVkIHx8IHZhbHVlID09PSBudWxsIHx8IE51bWJlci5pc05hTih2YWx1ZSkpIHJldHVybiAnY3FhLXRleHQtWyM2QjcyODBdJztcbiAgICBpZiAodmFsdWUgPiAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjMTBCOTgxXSc7IC8vIGdyZWVuXG4gICAgaWYgKHZhbHVlIDwgMCkgcmV0dXJuICdjcWEtdGV4dC1bI0VGNDQ0NF0nOyAvLyByZWRcbiAgICByZXR1cm4gJ2NxYS10ZXh0LVsjNkI3MjgwXSc7IC8vIG5ldXRyYWxcbiAgfVxuXG4gIGhhbmRsZVRvdGFsQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgLy8gQWx3YXlzIGVtaXQgdGhlIGV2ZW50LCBldmVuIGlmIG5vIGhhbmRsZXIgaXMgcHJvdmlkZWRcbiAgICB0aGlzLnRvdGFsQ2xpY2suZW1pdChldmVudCk7XG4gICAgLy8gQ2FsbCB0aGUgaW5wdXQgaGFuZGxlciBpZiBwcm92aWRlZFxuICAgIGlmICh0aGlzLm9uVG90YWxDbGljaykge1xuICAgICAgdGhpcy5vblRvdGFsQ2xpY2soZXZlbnQpO1xuICAgIH1cbiAgfVxufVxuXG5cbiIsIjxkaXYgY2xhc3M9XCJjcWEtdWktcm9vdFwiPlxuICA8ZGl2ICpuZ0lmPVwibGF5b3V0ID09PSAnMSdcIlxuICAgIGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtYm94LWJvcmRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weC1weCBjcWEtcGItcHggbWQ6Y3FhLWgtWzYzcHhdIGNxYS1iZy13aGl0ZSBjcWEtYm9yZGVyLXQtMiBjcWEtYm9yZGVyLXIgY3FhLWJvcmRlci1iLTAgY3FhLWJvcmRlci1sIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bIzNGNDNFRV0gY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wXCJcbiAgICBbbmdDbGFzc109XCJjYXJkQ2xhc3NcIj5cbiAgICA8IS0tIE1ldHJpYyBibG9ja3MgLS0+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjcWEtZmxleC0xIGNxYS13LWZ1bGwgY3FhLWdyaWQgY3FhLWdyaWQtY29scy0yIHNtOmNxYS1ncmlkLWNvbHMtMiBtZDpjcWEtZ3JpZC1jb2xzLTQgY3FhLWJvcmRlciBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weS0zIG1kOmNxYS1wdC0xIG1kOmNxYS1wYi0wLjUgY3FhLXB4LTYgY3FhLWdhcC0xIGNxYS13LWZ1bGwgc206Y3FhLXctWzEwMCVdIG1kOmNxYS13LVsxODBweF0gbGc6Y3FhLXctWzI5MHB4XSBtZDpjcWEtaC1bNjFweF0gY3FhLWJvcmRlci1iIGNxYS1ib3JkZXItWyNFNUU3RUJdIHNtOmNxYS1ib3JkZXItYi0wIHNtOmNxYS1ib3JkZXItclwiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLVsxNnB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+IHt7IHRpdGxlIH19IDwvc3Bhbj5cbiAgICAgICAgPGgzIGNsYXNzPVwiY3FhLXRleHQtWzMwcHhdIGNxYS1sZWFkaW5nLVszNnB4XSBjcWEtZm9udC1ib2xkIGNxYS10cmFja2luZy1bMC4zOTU1MDhweF0gY3FhLXRleHQtWyMxMDE4MjhdXCI+IHt7XG4gICAgICAgICAgdG90YWwgfCBudW1iZXIgfX0gPC9oMz5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1zdHJldGNoIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBtZDpjcWEtYm9yZGVyLWItMFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWhpZGRlbiBzbTpjcWEtYmxvY2sgbWQ6Y3FhLWJsb2NrIGNxYS13LVsxcHhdIGNxYS1iZy1bI0U1RTdFQl0gY3FhLW1yLTRcIj48L2Rpdj5cbiAgICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgW2l0ZW1dPVwiaXRcIiBbaXRlbXNsZW5ndGhdPVwiaXRlbXMubGVuZ3RoLnRvU3RyaW5nKClcIlxuICAgICAgICAgICAgW3Byb2dyZXNzXT1cInByb2dyZXNzV2lkdGgoaXQpXCI+XG4gICAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImxheW91dCA9PT0gJzInXCJcbiAgICBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWJveC1ib3JkZXIgY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtcHgtcHggY3FhLXBiLXB4IG1kOmNxYS1oLVs2M3B4XSBjcWEtYmctd2hpdGUgY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTBcIlxuICAgIFtuZ0NsYXNzXT1cImNhcmRDbGFzc1wiPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIG1kOmNxYS1mbGV4LXJvdyBjcWEtZmxleC13cmFwIGNxYS1pdGVtcy1zdHJldGNoIGNxYS13LWZ1bGwgY3FhLW1pbi1oLVs1M3B4XSBjcWEtcm91bmRlZC1ub25lIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wIGNxYS1nYXAtNFwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtanVzdGlmeS1jZW50ZXIgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weS0zIG1kOmNxYS1weS0xIGNxYS1weC00IHNtOmNxYS1weC02IGNxYS1nYXAtMSBjcWEtdy1mdWxsIHNtOmNxYS13LVsxMDAlXSBtZDpjcWEtdy1bMjQwcHhdIGxnOmNxYS13LVsyOTBweF0gbWQ6Y3FhLWgtWzYxcHhdIGNxYS1yb3VuZGVkLVsxMHB4XSBjcWEtYm9yZGVyIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLXJlbGF0aXZlIGNxYS1vdmVyZmxvdy1oaWRkZW4gYmVmb3JlOmNxYS1jb250ZW50LVsnJ10gYmVmb3JlOmNxYS1iZy1bIzRDNEM1MV0gYmVmb3JlOmNxYS1oLVsycHhdIGJlZm9yZTpjcWEtdy1mdWxsIGJlZm9yZTpjcWEtYWJzb2x1dGUgYmVmb3JlOmNxYS10b3AtMCBiZWZvcmU6Y3FhLWxlZnQtMFwiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtMiBjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS13LWZ1bGxcIj5cbiAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNCAhY3FhLWgtNCAhY3FhLXRleHQtWzE2cHhdIGNxYS10ZXh0LVsjNkI3MjgwXVwiPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWyM2QjcyODBdIGNxYS10ZXh0LVsxNHB4XSBjcWEtbGVhZGluZy00XCI+e3sgdGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1lbmQgY3FhLWdhcC0yIGNxYS1tbC1hdXRvXCI+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJjcWEtdGV4dC1bMjhweF0gY3FhLWxlYWRpbmctNyBjcWEtdHJhY2tpbmctWy0wLjQ1cHhdIGNxYS10ZXh0LVsjMTExODI3XVwiPnt7IHRvdGFsIHwgbnVtYmVyIH19XG4gICAgICAgICAgICA8L2g0PlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b3RhbFBlcmNlbnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwiY3FhLXRleHQtWzEwcHhdIGNxYS1sZWFkaW5nLTRcIlxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3ModG90YWxQZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQodG90YWxQZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSBNZXRyaWMgYmxvY2tzIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4LTEgY3FhLXctZnVsbCBjcWEtZ3JpZCBjcWEtZ3JpZC1jb2xzLTIgbWQ6Y3FhLWdyaWQtY29scy0zIGxnOmNxYS1ncmlkLWNvbHMtNSBjcWEtZ2FwLTIgbWQ6Y3FhLWdhcC0zIGNxYS1pdGVtcy1jZW50ZXIgY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1ib3JkZXIgY3FhLWJvcmRlci1zb2xpZCBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcmVsYXRpdmUgY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS1oLVsycHhdIGNxYS13LWZ1bGwgY3FhLWFic29sdXRlIGNxYS10b3AtMCBjcWEtbGVmdC0wXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZF09XCInbGluZWFyLWdyYWRpZW50KDkwZGVnLCAjM0I4MkY2IDAlLCByZ2JhKDAsIDAsIDAsIDApIDEwMCUpJ1wiPjwvc3Bhbj5cbiAgICAgICAgPGNxYS1tZXRyaWNzLWJsb2NrICpuZ0Zvcj1cImxldCBpdCBvZiBpdGVtczsgbGV0IGkgPSBpbmRleFwiIFtpdGVtXT1cIml0XCIgW2xheW91dF09XCJsYXlvdXRcIiBbYXR0ci50aXRsZV09XCJudWxsXCI+XG4gICAgICAgIDwvY3FhLW1ldHJpY3MtYmxvY2s+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj4iXX0=
@@ -2324,17 +2324,19 @@ class MetricsCardComponent {
2324
2324
  return 'cqa-text-[#6B7280]'; // neutral
2325
2325
  }
2326
2326
  handleTotalClick(event) {
2327
+ // Always emit the event, even if no handler is provided
2328
+ this.totalClick.emit(event);
2329
+ // Call the input handler if provided
2327
2330
  if (this.onTotalClick) {
2328
2331
  this.onTotalClick(event);
2329
2332
  }
2330
- this.totalClick.emit(event);
2331
2333
  }
2332
2334
  }
2333
2335
  MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
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 });
2336
+ MetricsCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsCardComponent, selector: "cqa-metrics-card", inputs: { icon: "icon", title: "title", total: "total", items: "items", cardClass: "cardClass", layout: "layout", totalPercent: "totalPercent", onTotalClick: "onTotalClick" }, outputs: { totalClick: "totalClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': onTotalClick}\"\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 });
2335
2337
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
2336
2338
  type: Component,
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: [] }]
2339
+ args: [{ selector: 'cqa-metrics-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n <div *ngIf=\"layout === '1'\"\n class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-border-t-2 cqa-border-r cqa-border-b-0 cqa-border-l cqa-border-solid cqa-border-[#3F43EE] cqa-rounded-[10px] cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n [ngClass]=\"cardClass\">\n <!-- Metric blocks -->\n <div\n class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 cqa-border cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-overflow-hidden\">\n <!-- Left total block -->\n <div\n class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b cqa-border-[#E5E7EB] sm:cqa-border-b-0 sm:cqa-border-r\"\n [ngClass]=\"{'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50': onTotalClick}\"\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: [] }]
2338
2340
  }], propDecorators: { icon: [{
2339
2341
  type: Input
2340
2342
  }], title: [{