@cqa-lib/cqa-ui 1.0.65 → 1.0.66

package/esm2020/lib/action-menu/action-menu.component.mjs

@@ -3,11 +3,17 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/material/button";
 import * as i2 from "@angular/material/icon";
 import * as i3 from "@angular/material/menu";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/tooltip";
 export 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)
@@ -24,19 +30,28 @@ export 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.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.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.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.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
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9hY3Rpb24tbWVudS9hY3Rpb24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2FjdGlvbi1tZW51L2FjdGlvbi1tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBYXZFLE1BQU0sT0FBTyx5QkFBeUI7SUFOdEM7UUFTWSxTQUFJLEdBQUcsSUFBSSxZQUFZLEVBQW1CLENBQUM7UUFDM0MsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFpQixDQUFDO1FBQ3pDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztLQWdCdEQ7SUFkQyxrQkFBa0IsQ0FBQyxFQUFvQjtRQUNyQyxJQUFJLEVBQUUsS0FBSyxTQUFTLElBQUksRUFBRSxLQUFLLElBQUk7WUFBRSxPQUFPO1FBQzVDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxZQUFZLENBQUMsR0FBbUI7UUFDOUIsSUFBSSxDQUFDLEdBQUc7WUFBRSxPQUFPO1FBQ2pCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3RCLENBQUM7SUFFRCxjQUFjLENBQUMsR0FBbUI7UUFDaEMsSUFBSSxDQUFDLEdBQUc7WUFBRSxPQUFPO1FBQ2pCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3hCLENBQUM7O3NIQXBCVSx5QkFBeUI7MEdBQXpCLHlCQUF5QiwwTENidEMsaTFCQW9CTTsyRkRQTyx5QkFBeUI7a0JBTnJDLFNBQVM7K0JBQ0Usd0JBQXdCLFFBRzVCLEVBQUUsS0FBSyxFQUFFLGFBQWEsRUFBRTs4QkFHckIsR0FBRztzQkFBWCxLQUFLO2dCQUVJLElBQUk7c0JBQWIsTUFBTTtnQkFDRyxJQUFJO3NCQUFiLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBBY3Rpb25NZW51Um93IHtcbiAgaWQ6IG51bWJlciB8IHN0cmluZztcbiAgW2tleTogc3RyaW5nXTogYW55O1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjcWEtYWN0aW9uLW1lbnUtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbi1tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXSxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIEFjdGlvbk1lbnVCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSByb3c/OiBBY3Rpb25NZW51Um93O1xuXG4gIEBPdXRwdXQoKSB2aWV3ID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXIgfCBzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBlZGl0ID0gbmV3IEV2ZW50RW1pdHRlcjxBY3Rpb25NZW51Um93PigpO1xuICBAT3V0cHV0KCkgZGVsZXRlID0gbmV3IEV2ZW50RW1pdHRlcjxBY3Rpb25NZW51Um93PigpO1xuXG4gIG5hdmlnYXRlVG9UZXN0Q2FzZShpZD86IG51bWJlciB8IHN0cmluZyk6IHZvaWQge1xuICAgIGlmIChpZCA9PT0gdW5kZWZpbmVkIHx8IGlkID09PSBudWxsKSByZXR1cm47XG4gICAgdGhpcy52aWV3LmVtaXQoaWQpO1xuICB9XG5cbiAgZWRpdFRlc3RDYXNlKHJvdz86IEFjdGlvbk1lbnVSb3cpOiB2b2lkIHtcbiAgICBpZiAoIXJvdykgcmV0dXJuO1xuICAgIHRoaXMuZWRpdC5lbWl0KHJvdyk7XG4gIH1cblxuICBkZWxldGVUZXN0Q2FzZShyb3c/OiBBY3Rpb25NZW51Um93KTogdm9pZCB7XG4gICAgaWYgKCFyb3cpIHJldHVybjtcbiAgICB0aGlzLmRlbGV0ZS5lbWl0KHJvdyk7XG4gIH1cbn1cblxuXG4iLCI8ZGl2IGNsYXNzPVwiY3FhLXVpLXJvb3RcIj5cbiAgPGJ1dHRvbiBjbGFzcz1cImFjdGlvbi1tZW51LWJ0blwiIFttYXRNZW51VHJpZ2dlckZvcl09XCJhY3Rpb25NZW51XCIgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiIG1hdC1pY29uLWJ1dHRvblxuICAgIHR5cGU9XCJidXR0b25cIiBhcmlhLWxhYmVsPVwiTW9yZSBhY3Rpb25zXCI+XG4gICAgPG1hdC1pY29uPm1vcmVfaG9yaXo8L21hdC1pY29uPlxuICA8L2J1dHRvbj5cblxuICA8bWF0LW1lbnUgI2FjdGlvbk1lbnU9XCJtYXRNZW51XCIgY2xhc3M9XCJhY3Rpb24tbWVudVwiIHhQb3NpdGlvbj1cImFmdGVyXCIgeVBvc2l0aW9uPVwiYmVsb3dcIiBoYXNCYWNrZHJvcD1cInRydWVcIj5cbiAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0gKGNsaWNrKT1cIm5hdmlnYXRlVG9UZXN0Q2FzZShyb3c/LmlkKVwiPlxuICAgICAgPG1hdC1pY29uPnZpc2liaWxpdHk8L21hdC1pY29uPlxuICAgICAgPHNwYW4+Vmlldzwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0gKGNsaWNrKT1cImVkaXRUZXN0Q2FzZShyb3cpXCI+XG4gICAgICA8bWF0LWljb24+ZWRpdF9zcXVhcmU8L21hdC1pY29uPlxuICAgICAgPHNwYW4+RWRpdDwvc3Bhbj5cbiAgICA8L2J1dHRvbj5cbiAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0gKGNsaWNrKT1cImRlbGV0ZVRlc3RDYXNlKHJvdylcIiBjbGFzcz1cImRlbGV0ZS1tZW51LWl0ZW1cIj5cbiAgICAgIDxtYXQtaWNvbj5kZWxldGU8L21hdC1pY29uPlxuICAgICAgPHNwYW4+RGVsZXRlPC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICA8L21hdC1tZW51PlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9hY3Rpb24tbWVudS9hY3Rpb24tbWVudS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2FjdGlvbi1tZW51L2FjdGlvbi1tZW51LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUE4QnZFLE1BQU0sT0FBTyx5QkFBeUI7SUFOdEM7UUFRRSx1R0FBdUc7UUFDOUYsWUFBTyxHQUFvQixFQUFFLENBQUM7UUFFN0IsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFtQixDQUFDO1FBQzNDLFNBQUksR0FBRyxJQUFJLFlBQVksRUFBaUIsQ0FBQztRQUN6QyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQWlCLENBQUM7UUFDckQsZ0RBQWdEO1FBQ3RDLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQTJDLENBQUM7S0FxQnJGO0lBbkJDLGtCQUFrQixDQUFDLEVBQW9CO1FBQ3JDLElBQUksRUFBRSxLQUFLLFNBQVMsSUFBSSxFQUFFLEtBQUssSUFBSTtZQUFFLE9BQU87UUFDNUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDckIsQ0FBQztJQUVELFlBQVksQ0FBQyxHQUFtQjtRQUM5QixJQUFJLENBQUMsR0FBRztZQUFFLE9BQU87UUFDakIsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVELGNBQWMsQ0FBQyxHQUFtQjtRQUNoQyxJQUFJLENBQUMsR0FBRztZQUFFLE9BQU87UUFDakIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQUVELGNBQWMsQ0FBQyxNQUFxQjtRQUNsQyxJQUFJLE1BQU0sRUFBRSxRQUFRO1lBQUUsT0FBTztRQUM3QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxNQUFNLENBQUMsRUFBRSxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztJQUM5RCxDQUFDOztzSEE3QlUseUJBQXlCOzBHQUF6Qix5QkFBeUIsME9DOUJ0QyxrL0NBdUNNOzJGRFRPLHlCQUF5QjtrQkFOckMsU0FBUzsrQkFDRSx3QkFBd0IsUUFHNUIsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixHQUFHO3NCQUFYLEtBQUs7Z0JBRUcsT0FBTztzQkFBZixLQUFLO2dCQUVJLElBQUk7c0JBQWIsTUFBTTtnQkFDRyxJQUFJO3NCQUFiLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQUVHLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5leHBvcnQgaW50ZXJmYWNlIEFjdGlvbk1lbnVSb3cge1xuICBpZDogbnVtYmVyIHwgc3RyaW5nO1xuICBba2V5OiBzdHJpbmddOiBhbnk7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ3FhQWN0aW9uSXRlbSB7XG4gIC8qKiBVbmlxdWUgaWRlbnRpZmllciBmb3IgdGhlIGFjdGlvbiwgZS5nLiAndmlldycsICdlZGl0JywgJ2RlbGV0ZScsICdkdXBsaWNhdGUnICovXG4gIGlkOiBzdHJpbmc7XG4gIC8qKiBWaXNpYmxlIGxhYmVsIGluIHRoZSBtZW51ICovXG4gIGxhYmVsOiBzdHJpbmc7XG4gIC8qKiBPcHRpb25hbCBNYXRlcmlhbCBpY29uIG5hbWUgKGUuZy4gJ2VkaXQnLCAnZGVsZXRlJykgKi9cbiAgaWNvbj86IHN0cmluZztcbiAgLyoqIElmIGZhbHNlLCBoaWRlIHRoaXMgYWN0aW9uIChkZWZhdWx0cyB0byB0cnVlKSAqL1xuICBzaG93PzogYm9vbGVhbjtcbiAgLyoqIERpc2FibGUgdGhlIGFjdGlvbiAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKiBPcHRpb25hbCBhZGRpdGlvbmFsIENTUyBjbGFzc2VzIGZvciB0aGUgPGJ1dHRvbiBtYXQtbWVudS1pdGVtPiAqL1xuICBjbGFzcz86IHN0cmluZztcbiAgLyoqIE9wdGlvbmFsIHRvb2x0aXAgdGV4dCAqL1xuICB0b29sdGlwPzogc3RyaW5nO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjcWEtYWN0aW9uLW1lbnUtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbi1tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbXSxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIEFjdGlvbk1lbnVCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSByb3c/OiBBY3Rpb25NZW51Um93O1xuICAvKiogT3B0aW9uYWwgbGlzdCBvZiBkeW5hbWljIGFjdGlvbnM7IGlmIHByb3ZpZGVkLCB0aGVzZSB3aWxsIGJlIHJlbmRlcmVkIGluc3RlYWQgb2YgZGVmYXVsdCBhY3Rpb25zICovXG4gIEBJbnB1dCgpIGFjdGlvbnM6IENxYUFjdGlvbkl0ZW1bXSA9IFtdO1xuXG4gIEBPdXRwdXQoKSB2aWV3ID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXIgfCBzdHJpbmc+KCk7XG4gIEBPdXRwdXQoKSBlZGl0ID0gbmV3IEV2ZW50RW1pdHRlcjxBY3Rpb25NZW51Um93PigpO1xuICBAT3V0cHV0KCkgZGVsZXRlID0gbmV3IEV2ZW50RW1pdHRlcjxBY3Rpb25NZW51Um93PigpO1xuICAvKiogR2VuZXJpYyBldmVudCBlbWl0dGVyIGZvciBkeW5hbWljIGFjdGlvbnMgKi9cbiAgQE91dHB1dCgpIGFjdGlvbkNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjx7IGFjdGlvbjogc3RyaW5nOyByb3c/OiBBY3Rpb25NZW51Um93IH0+KCk7XG5cbiAgbmF2aWdhdGVUb1Rlc3RDYXNlKGlkPzogbnVtYmVyIHwgc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKGlkID09PSB1bmRlZmluZWQgfHwgaWQgPT09IG51bGwpIHJldHVybjtcbiAgICB0aGlzLnZpZXcuZW1pdChpZCk7XG4gIH1cblxuICBlZGl0VGVzdENhc2Uocm93PzogQWN0aW9uTWVudVJvdyk6IHZvaWQge1xuICAgIGlmICghcm93KSByZXR1cm47XG4gICAgdGhpcy5lZGl0LmVtaXQocm93KTtcbiAgfVxuXG4gIGRlbGV0ZVRlc3RDYXNlKHJvdz86IEFjdGlvbk1lbnVSb3cpOiB2b2lkIHtcbiAgICBpZiAoIXJvdykgcmV0dXJuO1xuICAgIHRoaXMuZGVsZXRlLmVtaXQocm93KTtcbiAgfVxuXG4gIG9uQWN0aW9uU2VsZWN0KGFjdGlvbjogQ3FhQWN0aW9uSXRlbSk6IHZvaWQge1xuICAgIGlmIChhY3Rpb24/LmRpc2FibGVkKSByZXR1cm47XG4gICAgdGhpcy5hY3Rpb25DbGljay5lbWl0KHsgYWN0aW9uOiBhY3Rpb24uaWQsIHJvdzogdGhpcy5yb3cgfSk7XG4gIH1cbn1cblxuIiwiPGRpdiBjbGFzcz1cImNxYS11aS1yb290XCI+XG4gIDxidXR0b24gY2xhc3M9XCJhY3Rpb24tbWVudS1idG5cIiBbbWF0TWVudVRyaWdnZXJGb3JdPVwiYWN0aW9uTWVudVwiIChjbGljayk9XCIkZXZlbnQuc3RvcFByb3BhZ2F0aW9uKClcIiBtYXQtaWNvbi1idXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCIgYXJpYS1sYWJlbD1cIk1vcmUgYWN0aW9uc1wiPlxuICAgIDxtYXQtaWNvbj5tb3JlX2hvcml6PC9tYXQtaWNvbj5cbiAgPC9idXR0b24+XG5cbiAgPG1hdC1tZW51ICNhY3Rpb25NZW51PVwibWF0TWVudVwiIGNsYXNzPVwiYWN0aW9uLW1lbnVcIiB4UG9zaXRpb249XCJhZnRlclwiIHlQb3NpdGlvbj1cImJlbG93XCIgaGFzQmFja2Ryb3A9XCJ0cnVlXCI+XG4gICAgPCEtLSBEeW5hbWljIGFjdGlvbnMgKGlmIHByb3ZpZGVkKSAtLT5cbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiYWN0aW9ucz8ubGVuZ3RoOyBlbHNlIGRlZmF1bHRBY3Rpb25zXCI+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIG1hdC1tZW51LWl0ZW1cbiAgICAgICAgKm5nRm9yPVwibGV0IGEgb2YgYWN0aW9uc1wiXG4gICAgICAgIFtkaXNhYmxlZF09XCJhLmRpc2FibGVkXCJcbiAgICAgICAgW2NsYXNzXT1cImEuY2xhc3NcIlxuICAgICAgICAoY2xpY2spPVwib25BY3Rpb25TZWxlY3QoYSlcIlxuICAgICAgICBbbWF0VG9vbHRpcF09XCJhLnRvb2x0aXAgfHwgJydcIlxuICAgICAgICBbbWF0VG9vbHRpcERpc2FibGVkXT1cIiFhLnRvb2x0aXBcIlxuICAgICAgICBtYXRUb29sdGlwUG9zaXRpb249XCJhYm92ZVwiPlxuICAgICAgICA8bWF0LWljb24gKm5nSWY9XCJhLmljb25cIj57eyBhLmljb24gfX08L21hdC1pY29uPlxuICAgICAgICA8c3Bhbj57eyBhLmxhYmVsIH19PC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9uZy1jb250YWluZXI+XG5cbiAgICA8IS0tIEJhY2t3YXJkLWNvbXBhdGlibGUgZGVmYXVsdHMgLS0+XG4gICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0QWN0aW9ucz5cbiAgICAgIDxidXR0b24gbWF0LW1lbnUtaXRlbSAoY2xpY2spPVwibmF2aWdhdGVUb1Rlc3RDYXNlKHJvdz8uaWQpXCI+XG4gICAgICAgIDxtYXQtaWNvbj52aXNpYmlsaXR5PC9tYXQtaWNvbj5cbiAgICAgICAgPHNwYW4+Vmlldzwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPGJ1dHRvbiBtYXQtbWVudS1pdGVtIChjbGljayk9XCJlZGl0VGVzdENhc2Uocm93KVwiPlxuICAgICAgICA8bWF0LWljb24+ZWRpdF9zcXVhcmU8L21hdC1pY29uPlxuICAgICAgICA8c3Bhbj5FZGl0PC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8YnV0dG9uIG1hdC1tZW51LWl0ZW0gKGNsaWNrKT1cImRlbGV0ZVRlc3RDYXNlKHJvdylcIiBjbGFzcz1cImRlbGV0ZS1tZW51LWl0ZW1cIj5cbiAgICAgICAgPG1hdC1pY29uPmRlbGV0ZTwvbWF0LWljb24+XG4gICAgICAgIDxzcGFuPkRlbGV0ZTwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIDwvbWF0LW1lbnU+XG48L2Rpdj4iXX0=

package/esm2020/lib/dashboards/metrics-card/metrics-card.component.mjs

@@ -49,10 +49,10 @@ export 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: 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 });
+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: 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 });
 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: [{
@@ -72,4 +72,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], totalClick: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVWhHLE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFRVyxTQUFJLEdBQVcsY0FBYyxDQUFDO1FBQzlCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFvQixDQUFDLENBQUM7UUFDM0IsVUFBSyxHQUFzQixFQUFFLENBQUM7UUFDOUIsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixXQUFNLEdBQVcsR0FBRyxDQUFDO1FBR3BCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDLENBQUMscUNBQXFDO0tBbUN4RjtJQWpDQyxhQUFhLENBQUMsSUFBcUI7UUFDakMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztZQUFFLE9BQU8sSUFBSSxDQUFDO1FBQ2xDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDOUIsQ0FBQztJQUVPLFFBQVE7UUFDZCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM1RSxPQUFPLFlBQVksSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUMsQ0FBQyxRQUFRO1FBQ3BELElBQUksS0FBSyxHQUFHLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDLENBQUMsTUFBTTtRQUNsRCxPQUFPLG9CQUFvQixDQUFDLENBQUMsVUFBVTtJQUN6QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQix3REFBd0Q7UUFDeEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUIscUNBQXFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQzs7aUhBM0NVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHdUQ1ZqQyxzeklBMkRNOzJGRGpETyxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1ldHJpY3NDYXJkSXRlbSB9IGZyb20gJy4vbWV0cmljcy1jYXJkLWl0ZW0uaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLW1ldHJpY3MtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZXRyaWNzLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaWNvbjogc3RyaW5nID0gJ3RleHRfc25pcHBldCc7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgdG90YWw6IG51bWJlciB8IHN0cmluZyA9IDA7XG4gIEBJbnB1dCgpIGl0ZW1zOiBNZXRyaWNzQ2FyZEl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBjYXJkQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgdG90YWxQZXJjZW50PzogbnVtYmVyOyAvLyBPcHRpb25hbCBvdmVyYWxsIHBlcmNlbnQgZGVsdGEgZm9yIGxheW91dCAyXG4gIEBJbnB1dCgpIG9uVG90YWxDbGljaz86IChldmVudD86IEV2ZW50KSA9PiB2b2lkOyAvLyBPcHRpb25hbCBjbGljayBoYW5kbGVyIGZvciB0b3RhbCBibG9ja1xuICBAT3V0cHV0KCkgdG90YWxDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7IC8vIE91dHB1dCBldmVudCBmb3IgdG90YWwgYmxvY2sgY2xpY2tcblxuICBwcm9ncmVzc1dpZHRoKGl0ZW06IE1ldHJpY3NDYXJkSXRlbSk6IHN0cmluZyB7XG4gICAgY29uc3QgbWF4ID0gaXRlbS5tYXggPz8gdGhpcy5pbmZlck1heCgpO1xuICAgIGlmICghbWF4IHx8IG1heCA8PSAwKSByZXR1cm4gJzAlJztcbiAgICBjb25zdCBwY3QgPSBNYXRoLm1heCgwLCBNYXRoLm1pbigxMDAsIChpdGVtLnZhbHVlIC8gbWF4KSAqIDEwMCkpO1xuICAgIHJldHVybiBwY3QudG9GaXhlZCgxKSArICclJztcbiAgfVxuXG4gIHByaXZhdGUgaW5mZXJNYXgoKTogbnVtYmVyIHtcbiAgICBjb25zdCBtYXhGcm9tSXRlbXMgPSB0aGlzLml0ZW1zLnJlZHVjZSgobSwgaXQpID0+IE1hdGgubWF4KG0sIGl0LnZhbHVlKSwgMCk7XG4gICAgcmV0dXJuIG1heEZyb21JdGVtcyB8fCAxO1xuICB9XG5cbiAgZm9ybWF0UGVyY2VudCh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICcnO1xuICAgIGNvbnN0IHNpZ24gPSB2YWx1ZSA+IDAgPyAnKycgOiB2YWx1ZSA8IDAgPyAnJyA6ICcnO1xuICAgIHJldHVybiBgJHtzaWdufSR7dmFsdWV9JWA7XG4gIH1cblxuICBwZXJjZW50Q2xhc3ModmFsdWU/OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh2YWx1ZSA9PT0gdW5kZWZpbmVkIHx8IHZhbHVlID09PSBudWxsIHx8IE51bWJlci5pc05hTih2YWx1ZSkpIHJldHVybiAnY3FhLXRleHQtWyM2QjcyODBdJztcbiAgICBpZiAodmFsdWUgPiAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjMTBCOTgxXSc7IC8vIGdyZWVuXG4gICAgaWYgKHZhbHVlIDwgMCkgcmV0dXJuICdjcWEtdGV4dC1bI0VGNDQ0NF0nOyAvLyByZWRcbiAgICByZXR1cm4gJ2NxYS10ZXh0LVsjNkI3MjgwXSc7IC8vIG5ldXRyYWxcbiAgfVxuXG4gIGhhbmRsZVRvdGFsQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgLy8gQWx3YXlzIGVtaXQgdGhlIGV2ZW50LCBldmVuIGlmIG5vIGhhbmRsZXIgaXMgcHJvdmlkZWRcbiAgICB0aGlzLnRvdGFsQ2xpY2suZW1pdChldmVudCk7XG4gICAgLy8gQ2FsbCB0aGUgaW5wdXQgaGFuZGxlciBpZiBwcm92aWRlZFxuICAgIGlmICh0aGlzLm9uVG90YWxDbGljaykge1xuICAgICAgdGhpcy5vblRvdGFsQ2xpY2soZXZlbnQpO1xuICAgIH1cbiAgfVxufVxuXG5cbiIsIjxkaXYgY2xhc3M9XCJjcWEtdWktcm9vdFwiPlxuICA8ZGl2ICpuZ0lmPVwibGF5b3V0ID09PSAnMSdcIlxuICAgIGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtYm94LWJvcmRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weC1weCBjcWEtcGItcHggbWQ6Y3FhLWgtWzYzcHhdIGNxYS1iZy13aGl0ZSBjcWEtYm9yZGVyLXQtMiBjcWEtYm9yZGVyLXIgY3FhLWJvcmRlci1iLTAgY3FhLWJvcmRlci1sIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bIzNGNDNFRV0gY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wXCJcbiAgICBbbmdDbGFzc109XCJjYXJkQ2xhc3NcIj5cbiAgICA8IS0tIE1ldHJpYyBibG9ja3MgLS0+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjcWEtZmxleC0xIGNxYS13LWZ1bGwgY3FhLWdyaWQgY3FhLWdyaWQtY29scy0yIHNtOmNxYS1ncmlkLWNvbHMtMiBtZDpjcWEtZ3JpZC1jb2xzLTQgY3FhLWJvcmRlciBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1jdXJzb3ItcG9pbnRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHQtMSBtZDpjcWEtcGItMC41IGNxYS1weC02IGNxYS1nYXAtMSBjcWEtdy1mdWxsIHNtOmNxYS13LVsxMDAlXSBtZDpjcWEtdy1bMTgwcHhdIGxnOmNxYS13LVsyOTBweF0gbWQ6Y3FhLWgtWzYxcHhdIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBzbTpjcWEtYm9yZGVyLWItMCBzbTpjcWEtYm9yZGVyLXJcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2NxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLVsxNnB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+IHt7IHRpdGxlIH19IDwvc3Bhbj5cbiAgICAgICAgPGgzIGNsYXNzPVwiY3FhLXRleHQtWzMwcHhdIGNxYS1sZWFkaW5nLVszNnB4XSBjcWEtZm9udC1ib2xkIGNxYS10cmFja2luZy1bMC4zOTU1MDhweF0gY3FhLXRleHQtWyMxMDE4MjhdXCI+IHt7XG4gICAgICAgICAgdG90YWwgfCBudW1iZXIgfX0gPC9oMz5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1zdHJldGNoIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBtZDpjcWEtYm9yZGVyLWItMFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWhpZGRlbiBzbTpjcWEtYmxvY2sgbWQ6Y3FhLWJsb2NrIGNxYS13LVsxcHhdIGNxYS1iZy1bI0U1RTdFQl0gY3FhLW1yLTRcIj48L2Rpdj5cbiAgICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgW2l0ZW1dPVwiaXRcIiBbaXRlbXNsZW5ndGhdPVwiaXRlbXMubGVuZ3RoLnRvU3RyaW5nKClcIlxuICAgICAgICAgICAgW3Byb2dyZXNzXT1cInByb2dyZXNzV2lkdGgoaXQpXCI+XG4gICAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImxheW91dCA9PT0gJzInXCJcbiAgICBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWJveC1ib3JkZXIgY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtcHgtcHggY3FhLXBiLXB4IG1kOmNxYS1oLVs2M3B4XSBjcWEtYmctd2hpdGUgY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTBcIlxuICAgIFtuZ0NsYXNzXT1cImNhcmRDbGFzc1wiPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIG1kOmNxYS1mbGV4LXJvdyBjcWEtZmxleC13cmFwIGNxYS1pdGVtcy1zdHJldGNoIGNxYS13LWZ1bGwgY3FhLW1pbi1oLVs1M3B4XSBjcWEtcm91bmRlZC1ub25lIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wIGNxYS1nYXAtNFwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1jdXJzb3ItcG9pbnRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHktMSBjcWEtcHgtNCBzbTpjcWEtcHgtNiBjcWEtZ2FwLTEgY3FhLXctZnVsbCBzbTpjcWEtdy1bMTAwJV0gbWQ6Y3FhLXctWzI0MHB4XSBsZzpjcWEtdy1bMjkwcHhdIG1kOmNxYS1oLVs2MXB4XSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNFNUU3RUJdIGNxYS1yZWxhdGl2ZSBjcWEtb3ZlcmZsb3ctaGlkZGVuIGJlZm9yZTpjcWEtY29udGVudC1bJyddIGJlZm9yZTpjcWEtYmctWyM0QzRDNTFdIGJlZm9yZTpjcWEtaC1bMnB4XSBiZWZvcmU6Y3FhLXctZnVsbCBiZWZvcmU6Y3FhLWFic29sdXRlIGJlZm9yZTpjcWEtdG9wLTAgYmVmb3JlOmNxYS1sZWZ0LTBcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2NxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtMiBjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS13LWZ1bGxcIj5cbiAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNCAhY3FhLWgtNCAhY3FhLXRleHQtWzE2cHhdIGNxYS10ZXh0LVsjNkI3MjgwXVwiPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWyM2QjcyODBdIGNxYS10ZXh0LVsxNHB4XSBjcWEtbGVhZGluZy00XCI+e3sgdGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1lbmQgY3FhLWdhcC0yIGNxYS1tbC1hdXRvXCI+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJjcWEtdGV4dC1bMjhweF0gY3FhLWxlYWRpbmctNyBjcWEtdHJhY2tpbmctWy0wLjQ1cHhdIGNxYS10ZXh0LVsjMTExODI3XVwiPnt7IHRvdGFsIHwgbnVtYmVyIH19XG4gICAgICAgICAgICA8L2g0PlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b3RhbFBlcmNlbnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwiY3FhLXRleHQtWzEwcHhdIGNxYS1sZWFkaW5nLTRcIlxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3ModG90YWxQZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQodG90YWxQZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSBNZXRyaWMgYmxvY2tzIC0tPlxuICAgICAgPGRpdiBbbmdDbGFzc109XCInY3FhLWdyaWQtY29scy0nICsgaXRlbXMubGVuZ3RoXCJcbiAgICAgICAgY2xhc3M9XCJjcWEtZmxleC0xIGNxYS13LWZ1bGwgY3FhLWdyaWQgbWQ6Y3FhLWdyaWQtY29scy0zIGNxYS1nYXAtMiBtZDpjcWEtZ2FwLTMgY3FhLWl0ZW1zLWNlbnRlciBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNFNUU3RUJdIGNxYS1yZWxhdGl2ZSBjcWEtb3ZlcmZsb3ctaGlkZGVuXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLWgtWzJweF0gY3FhLXctZnVsbCBjcWEtYWJzb2x1dGUgY3FhLXRvcC0wIGNxYS1sZWZ0LTBcIlxuICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cIidsaW5lYXItZ3JhZGllbnQoOTBkZWcsICMzQjgyRjYgMCUsIHJnYmEoMCwgMCwgMCwgMCkgMTAwJSknXCI+PC9zcGFuPlxuICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgKm5nRm9yPVwibGV0IGl0IG9mIGl0ZW1zOyBsZXQgaSA9IGluZGV4XCIgW2l0ZW1dPVwiaXRcIiBbbGF5b3V0XT1cImxheW91dFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVWhHLE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFRVyxTQUFJLEdBQVcsY0FBYyxDQUFDO1FBQzlCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFvQixDQUFDLENBQUM7UUFDM0IsVUFBSyxHQUFzQixFQUFFLENBQUM7UUFDOUIsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixXQUFNLEdBQVcsR0FBRyxDQUFDO1FBR3BCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDLENBQUMscUNBQXFDO0tBbUN4RjtJQWpDQyxhQUFhLENBQUMsSUFBcUI7UUFDakMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztZQUFFLE9BQU8sSUFBSSxDQUFDO1FBQ2xDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDOUIsQ0FBQztJQUVPLFFBQVE7UUFDZCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM1RSxPQUFPLFlBQVksSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUMsQ0FBQyxRQUFRO1FBQ3BELElBQUksS0FBSyxHQUFHLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDLENBQUMsTUFBTTtRQUNsRCxPQUFPLG9CQUFvQixDQUFDLENBQUMsVUFBVTtJQUN6QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQix3REFBd0Q7UUFDeEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUIscUNBQXFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQzs7aUhBM0NVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHdUQ1ZqQyw0MUlBMkRNOzJGRGpETyxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1ldHJpY3NDYXJkSXRlbSB9IGZyb20gJy4vbWV0cmljcy1jYXJkLWl0ZW0uaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLW1ldHJpY3MtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZXRyaWNzLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaWNvbjogc3RyaW5nID0gJ3RleHRfc25pcHBldCc7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgdG90YWw6IG51bWJlciB8IHN0cmluZyA9IDA7XG4gIEBJbnB1dCgpIGl0ZW1zOiBNZXRyaWNzQ2FyZEl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBjYXJkQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgdG90YWxQZXJjZW50PzogbnVtYmVyOyAvLyBPcHRpb25hbCBvdmVyYWxsIHBlcmNlbnQgZGVsdGEgZm9yIGxheW91dCAyXG4gIEBJbnB1dCgpIG9uVG90YWxDbGljaz86IChldmVudD86IEV2ZW50KSA9PiB2b2lkOyAvLyBPcHRpb25hbCBjbGljayBoYW5kbGVyIGZvciB0b3RhbCBibG9ja1xuICBAT3V0cHV0KCkgdG90YWxDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7IC8vIE91dHB1dCBldmVudCBmb3IgdG90YWwgYmxvY2sgY2xpY2tcblxuICBwcm9ncmVzc1dpZHRoKGl0ZW06IE1ldHJpY3NDYXJkSXRlbSk6IHN0cmluZyB7XG4gICAgY29uc3QgbWF4ID0gaXRlbS5tYXggPz8gdGhpcy5pbmZlck1heCgpO1xuICAgIGlmICghbWF4IHx8IG1heCA8PSAwKSByZXR1cm4gJzAlJztcbiAgICBjb25zdCBwY3QgPSBNYXRoLm1heCgwLCBNYXRoLm1pbigxMDAsIChpdGVtLnZhbHVlIC8gbWF4KSAqIDEwMCkpO1xuICAgIHJldHVybiBwY3QudG9GaXhlZCgxKSArICclJztcbiAgfVxuXG4gIHByaXZhdGUgaW5mZXJNYXgoKTogbnVtYmVyIHtcbiAgICBjb25zdCBtYXhGcm9tSXRlbXMgPSB0aGlzLml0ZW1zLnJlZHVjZSgobSwgaXQpID0+IE1hdGgubWF4KG0sIGl0LnZhbHVlKSwgMCk7XG4gICAgcmV0dXJuIG1heEZyb21JdGVtcyB8fCAxO1xuICB9XG5cbiAgZm9ybWF0UGVyY2VudCh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICcnO1xuICAgIGNvbnN0IHNpZ24gPSB2YWx1ZSA+IDAgPyAnKycgOiB2YWx1ZSA8IDAgPyAnJyA6ICcnO1xuICAgIHJldHVybiBgJHtzaWdufSR7dmFsdWV9JWA7XG4gIH1cblxuICBwZXJjZW50Q2xhc3ModmFsdWU/OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh2YWx1ZSA9PT0gdW5kZWZpbmVkIHx8IHZhbHVlID09PSBudWxsIHx8IE51bWJlci5pc05hTih2YWx1ZSkpIHJldHVybiAnY3FhLXRleHQtWyM2QjcyODBdJztcbiAgICBpZiAodmFsdWUgPiAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjMTBCOTgxXSc7IC8vIGdyZWVuXG4gICAgaWYgKHZhbHVlIDwgMCkgcmV0dXJuICdjcWEtdGV4dC1bI0VGNDQ0NF0nOyAvLyByZWRcbiAgICByZXR1cm4gJ2NxYS10ZXh0LVsjNkI3MjgwXSc7IC8vIG5ldXRyYWxcbiAgfVxuXG4gIGhhbmRsZVRvdGFsQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgLy8gQWx3YXlzIGVtaXQgdGhlIGV2ZW50LCBldmVuIGlmIG5vIGhhbmRsZXIgaXMgcHJvdmlkZWRcbiAgICB0aGlzLnRvdGFsQ2xpY2suZW1pdChldmVudCk7XG4gICAgLy8gQ2FsbCB0aGUgaW5wdXQgaGFuZGxlciBpZiBwcm92aWRlZFxuICAgIGlmICh0aGlzLm9uVG90YWxDbGljaykge1xuICAgICAgdGhpcy5vblRvdGFsQ2xpY2soZXZlbnQpO1xuICAgIH1cbiAgfVxufVxuXG5cbiIsIjxkaXYgY2xhc3M9XCJjcWEtdWktcm9vdFwiPlxuICA8ZGl2ICpuZ0lmPVwibGF5b3V0ID09PSAnMSdcIlxuICAgIGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtYm94LWJvcmRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weC1weCBjcWEtcGItcHggbWQ6Y3FhLWgtWzYzcHhdIGNxYS1iZy13aGl0ZSBjcWEtYm9yZGVyLXQtMiBjcWEtYm9yZGVyLXIgY3FhLWJvcmRlci1iLTAgY3FhLWJvcmRlci1sIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bIzNGNDNFRV0gY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wXCJcbiAgICBbbmdDbGFzc109XCJjYXJkQ2xhc3NcIj5cbiAgICA8IS0tIE1ldHJpYyBibG9ja3MgLS0+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjcWEtZmxleC0xIGNxYS13LWZ1bGwgY3FhLWdyaWQgY3FhLWdyaWQtY29scy0yIHNtOmNxYS1ncmlkLWNvbHMtMiBtZDpjcWEtZ3JpZC1jb2xzLTQgY3FhLWJvcmRlciBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1jdXJzb3ItcG9pbnRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHQtMSBtZDpjcWEtcGItMC41IGNxYS1weC02IGNxYS1nYXAtMSBjcWEtdy1mdWxsIHNtOmNxYS13LVsxMDAlXSBtZDpjcWEtdy1bMTgwcHhdIGxnOmNxYS13LVsyOTBweF0gbWQ6Y3FhLWgtWzYxcHhdIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBzbTpjcWEtYm9yZGVyLWItMCBzbTpjcWEtYm9yZGVyLXJcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2NxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLVsxNnB4XSBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+IHt7IHRpdGxlIH19IDwvc3Bhbj5cbiAgICAgICAgPGgzIGNsYXNzPVwiY3FhLXRleHQtWzMwcHhdIGNxYS1sZWFkaW5nLVszNnB4XSBjcWEtZm9udC1ib2xkIGNxYS10cmFja2luZy1bMC4zOTU1MDhweF0gY3FhLXRleHQtWyMxMDE4MjhdXCI+IHt7XG4gICAgICAgICAgdG90YWwgfCBudW1iZXIgfX0gPC9oMz5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1zdHJldGNoIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBtZDpjcWEtYm9yZGVyLWItMFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWhpZGRlbiBzbTpjcWEtYmxvY2sgbWQ6Y3FhLWJsb2NrIGNxYS13LVsxcHhdIGNxYS1iZy1bI0U1RTdFQl0gY3FhLW1yLTRcIj48L2Rpdj5cbiAgICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgW2l0ZW1dPVwiaXRcIiBbaXRlbXNsZW5ndGhdPVwiaXRlbXMubGVuZ3RoLnRvU3RyaW5nKClcIlxuICAgICAgICAgICAgW3Byb2dyZXNzXT1cInByb2dyZXNzV2lkdGgoaXQpXCI+XG4gICAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImxheW91dCA9PT0gJzInXCJcbiAgICBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWJveC1ib3JkZXIgY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtcHgtcHggY3FhLXBiLXB4IG1kOmNxYS1oLVs2M3B4XSBjcWEtYmctd2hpdGUgY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTBcIlxuICAgIFtuZ0NsYXNzXT1cImNhcmRDbGFzc1wiPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIG1kOmNxYS1mbGV4LXJvdyBjcWEtZmxleC13cmFwIGNxYS1pdGVtcy1zdHJldGNoIGNxYS13LWZ1bGwgY3FhLW1pbi1oLVs1M3B4XSBjcWEtcm91bmRlZC1ub25lIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wIGNxYS1nYXAtNFwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1jdXJzb3ItcG9pbnRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHktMSBjcWEtcHgtNCBzbTpjcWEtcHgtNiBjcWEtZ2FwLTEgY3FhLXctZnVsbCBzbTpjcWEtdy1bMTAwJV0gbWQ6Y3FhLXctWzI0MHB4XSBsZzpjcWEtdy1bMjkwcHhdIG1kOmNxYS1oLVs2MXB4XSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNFNUU3RUJdIGNxYS1yZWxhdGl2ZSBjcWEtb3ZlcmZsb3ctaGlkZGVuIGJlZm9yZTpjcWEtY29udGVudC1bJyddIGJlZm9yZTpjcWEtYmctWyM0QzRDNTFdIGJlZm9yZTpjcWEtaC1bMnB4XSBiZWZvcmU6Y3FhLXctZnVsbCBiZWZvcmU6Y3FhLWFic29sdXRlIGJlZm9yZTpjcWEtdG9wLTAgYmVmb3JlOmNxYS1sZWZ0LTBcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2NxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtMiBjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS13LWZ1bGxcIj5cbiAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNCAhY3FhLWgtNCAhY3FhLXRleHQtWzE2cHhdIGNxYS10ZXh0LVsjNkI3MjgwXVwiPnt7IGljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWyM2QjcyODBdIGNxYS10ZXh0LVsxNHB4XSBjcWEtbGVhZGluZy00XCI+e3sgdGl0bGUgfX08L3NwYW4+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1lbmQgY3FhLWdhcC0yIGNxYS1tbC1hdXRvXCI+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJjcWEtdGV4dC1bMjhweF0gY3FhLWxlYWRpbmctNyBjcWEtdHJhY2tpbmctWy0wLjQ1cHhdIGNxYS10ZXh0LVsjMTExODI3XVwiPnt7IHRvdGFsIHwgbnVtYmVyIH19XG4gICAgICAgICAgICA8L2g0PlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b3RhbFBlcmNlbnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwiY3FhLXRleHQtWzEwcHhdIGNxYS1sZWFkaW5nLTRcIlxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3ModG90YWxQZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQodG90YWxQZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgIDwvZGl2PlxuICAgICAgPCEtLSBNZXRyaWMgYmxvY2tzIC0tPlxuICAgICAgPGRpdiBbbmdDbGFzc109XCInY3FhLWdyaWQtY29scy0nICsgaXRlbXMubGVuZ3RoICsgJyBsZzpjcWEtZ3JpZC1jb2xzLScgKyBpdGVtcy5sZW5ndGhcIlxuICAgICAgICBjbGFzcz1cImNxYS1mbGV4LTEgY3FhLXctZnVsbCBjcWEtZ3JpZCBtZDpjcWEtZ3JpZC1jb2xzLTMgY3FhLWdhcC0yIG1kOmNxYS1nYXAtMyBjcWEtaXRlbXMtY2VudGVyIGNxYS1yb3VuZGVkLVsxMHB4XSBjcWEtYm9yZGVyIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bI0U1RTdFQl0gY3FhLXJlbGF0aXZlIGNxYS1vdmVyZmxvdy1oaWRkZW5cIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtaC1bMnB4XSBjcWEtdy1mdWxsIGNxYS1hYnNvbHV0ZSBjcWEtdG9wLTAgY3FhLWxlZnQtMFwiXG4gICAgICAgICAgW3N0eWxlLmJhY2tncm91bmRdPVwiJ2xpbmVhci1ncmFkaWVudCg5MGRlZywgIzNCODJGNiAwJSwgcmdiYSgwLCAwLCAwLCAwKSAxMDAlKSdcIj48L3NwYW4+XG4gICAgICAgIDxjcWEtbWV0cmljcy1ibG9jayAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIiBbaXRlbV09XCJpdFwiIFtsYXlvdXRdPVwibGF5b3V0XCIgW2F0dHIudGl0bGVdPVwibnVsbFwiPlxuICAgICAgICA8L2NxYS1tZXRyaWNzLWJsb2NrPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+Il19

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

@@ -1399,9 +1399,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)
@@ -1418,20 +1422,29 @@ class ActionMenuButtonComponent {
             return;
         this.delete.emit(row);
     }
+    onActionSelect(action) {
+        if (action === null || action === void 0 ? void 0 : 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 {
@@ -2409,10 +2422,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: [{