@cqa-lib/cqa-ui 1.0.65 → 1.0.66

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

@@ -1380,9 +1380,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 class ActionMenuButtonComponent {
     constructor() {
+        /** Optional list of dynamic actions; if provided, these will be rendered instead of default actions */
+        this.actions = [];
         this.view = new EventEmitter();
         this.edit = new EventEmitter();
         this.delete = new EventEmitter();
+        /** Generic event emitter for dynamic actions */
+        this.actionClick = new EventEmitter();
     }
     navigateToTestCase(id) {
         if (id === undefined || id === null)
@@ -1399,20 +1403,29 @@ class ActionMenuButtonComponent {
             return;
         this.delete.emit(row);
     }
+    onActionSelect(action) {
+        if (action?.disabled)
+            return;
+        this.actionClick.emit({ action: action.id, row: this.row });
+    }
 }
 ActionMenuButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: { row: "row" }, outputs: { view: "view", edit: "edit", delete: "delete" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n    type=\"button\" aria-label=\"More actions\">\n    <mat-icon>more_horiz</mat-icon>\n  </button>\n\n  <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n    <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n      <mat-icon>visibility</mat-icon>\n      <span>View</span>\n    </button>\n    <button mat-menu-item (click)=\"editTestCase(row)\">\n      <mat-icon>edit_square</mat-icon>\n      <span>Edit</span>\n    </button>\n    <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n      <mat-icon>delete</mat-icon>\n      <span>Delete</span>\n    </button>\n  </mat-menu>\n</div>", components: [{ type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+ActionMenuButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: { row: "row", actions: "actions" }, outputs: { view: "view", edit: "edit", delete: "delete", actionClick: "actionClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n    type=\"button\" aria-label=\"More actions\">\n    <mat-icon>more_horiz</mat-icon>\n  </button>\n\n  <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n    <!-- Dynamic actions (if provided) -->\n    <ng-container *ngIf=\"actions?.length; else defaultActions\">\n      <button\n        mat-menu-item\n        *ngFor=\"let a of actions\"\n        [disabled]=\"a.disabled\"\n        [class]=\"a.class\"\n        (click)=\"onActionSelect(a)\"\n        [matTooltip]=\"a.tooltip || ''\"\n        [matTooltipDisabled]=\"!a.tooltip\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"a.icon\">{{ a.icon }}</mat-icon>\n        <span>{{ a.label }}</span>\n      </button>\n    </ng-container>\n\n    <!-- Backward-compatible defaults -->\n    <ng-template #defaultActions>\n      <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n        <mat-icon>visibility</mat-icon>\n        <span>View</span>\n      </button>\n      <button mat-menu-item (click)=\"editTestCase(row)\">\n        <mat-icon>edit_square</mat-icon>\n        <span>Edit</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    </ng-template>\n  </mat-menu>\n</div>", components: [{ type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-action-menu-button', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n    type=\"button\" aria-label=\"More actions\">\n    <mat-icon>more_horiz</mat-icon>\n  </button>\n\n  <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n    <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n      <mat-icon>visibility</mat-icon>\n      <span>View</span>\n    </button>\n    <button mat-menu-item (click)=\"editTestCase(row)\">\n      <mat-icon>edit_square</mat-icon>\n      <span>Edit</span>\n    </button>\n    <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n      <mat-icon>delete</mat-icon>\n      <span>Delete</span>\n    </button>\n  </mat-menu>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-action-menu-button', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <button class=\"action-menu-btn\" [matMenuTriggerFor]=\"actionMenu\" (click)=\"$event.stopPropagation()\" mat-icon-button\n    type=\"button\" aria-label=\"More actions\">\n    <mat-icon>more_horiz</mat-icon>\n  </button>\n\n  <mat-menu #actionMenu=\"matMenu\" class=\"action-menu\" xPosition=\"after\" yPosition=\"below\" hasBackdrop=\"true\">\n    <!-- Dynamic actions (if provided) -->\n    <ng-container *ngIf=\"actions?.length; else defaultActions\">\n      <button\n        mat-menu-item\n        *ngFor=\"let a of actions\"\n        [disabled]=\"a.disabled\"\n        [class]=\"a.class\"\n        (click)=\"onActionSelect(a)\"\n        [matTooltip]=\"a.tooltip || ''\"\n        [matTooltipDisabled]=\"!a.tooltip\"\n        matTooltipPosition=\"above\">\n        <mat-icon *ngIf=\"a.icon\">{{ a.icon }}</mat-icon>\n        <span>{{ a.label }}</span>\n      </button>\n    </ng-container>\n\n    <!-- Backward-compatible defaults -->\n    <ng-template #defaultActions>\n      <button mat-menu-item (click)=\"navigateToTestCase(row?.id)\">\n        <mat-icon>visibility</mat-icon>\n        <span>View</span>\n      </button>\n      <button mat-menu-item (click)=\"editTestCase(row)\">\n        <mat-icon>edit_square</mat-icon>\n        <span>Edit</span>\n      </button>\n      <button mat-menu-item (click)=\"deleteTestCase(row)\" class=\"delete-menu-item\">\n        <mat-icon>delete</mat-icon>\n        <span>Delete</span>\n      </button>\n    </ng-template>\n  </mat-menu>\n</div>", styles: [] }]
         }], propDecorators: { row: [{
                 type: Input
+            }], actions: [{
+                type: Input
             }], view: [{
                 type: Output
             }], edit: [{
                 type: Output
             }], delete: [{
                 type: Output
+            }], actionClick: [{
+                type: Output
             }] } });
 
 class OtherButtonComponent {
@@ -2365,10 +2378,10 @@ class MetricsCardComponent {
     }
 }
 MetricsCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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-cursor-pointer 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-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-cursor-pointer 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-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 [ngClass]=\"'cqa-grid-cols-' + items.length\"\n        class=\"cqa-flex-1 cqa-w-full cqa-grid md:cqa-grid-cols-3 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n        <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n          [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n        <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\" [attr.title]=\"null\">\n        </cqa-metrics-block>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: ["item", "progress", "layout", "itemslength"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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-cursor-pointer 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-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-cursor-pointer 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-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 [ngClass]=\"'cqa-grid-cols-' + items.length + ' lg:cqa-grid-cols-' + items.length\"\n        class=\"cqa-flex-1 cqa-w-full cqa-grid md:cqa-grid-cols-3 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n        <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n          [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n        <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\" [attr.title]=\"null\">\n        </cqa-metrics-block>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: ["item", "progress", "layout", "itemslength"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsCardComponent, decorators: [{
             type: Component,
-            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-cursor-pointer 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-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-cursor-pointer 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-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 [ngClass]=\"'cqa-grid-cols-' + items.length\"\n        class=\"cqa-flex-1 cqa-w-full cqa-grid md:cqa-grid-cols-3 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n        <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n          [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n        <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\" [attr.title]=\"null\">\n        </cqa-metrics-block>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+            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-cursor-pointer 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-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-cursor-pointer 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-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 [ngClass]=\"'cqa-grid-cols-' + items.length + ' lg:cqa-grid-cols-' + items.length\"\n        class=\"cqa-flex-1 cqa-w-full cqa-grid md:cqa-grid-cols-3 cqa-gap-2 md:cqa-gap-3 cqa-items-center cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden\">\n        <span class=\"cqa-h-[2px] cqa-w-full cqa-absolute cqa-top-0 cqa-left-0\"\n          [style.background]=\"'linear-gradient(90deg, #3B82F6 0%, rgba(0, 0, 0, 0) 100%)'\"></span>\n        <cqa-metrics-block *ngFor=\"let it of items; let i = index\" [item]=\"it\" [layout]=\"layout\" [attr.title]=\"null\">\n        </cqa-metrics-block>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], title: [{