@cqa-lib/cqa-ui 1.0.65 → 1.0.67

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-block.component.mjs

@@ -30,10 +30,10 @@ export class MetricsBlockComponent {
     }
 }
 MetricsBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\" [attr.title]=\"null\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\" [attr.title]=\"null\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\" [attr.title]=\"null\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\" [attr.title]=\"null\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\" [attr.title]=\"null\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\" [attr.title]=\"null\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\" [attr.title]=\"null\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\" [attr.title]=\"null\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\" [attr.title]=\"null\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\" [attr.title]=\"null\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\" [attr.title]=\"null\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\" [attr.title]=\"null\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { item: [{
                 type: Input
             }], progress: [{
@@ -43,4 +43,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], itemslength: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1ibG9jay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2Rhc2hib2FyZHMvbWV0cmljcy1jYXJkL21ldHJpY3MtYmxvY2suY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9kYXNoYm9hcmRzL21ldHJpY3MtY2FyZC9tZXRyaWNzLWJsb2NrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBVTFFLE1BQU0sT0FBTyxxQkFBcUI7SUFQbEM7UUFTVyxhQUFRLEdBQVcsSUFBSSxDQUFDO1FBQ3hCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsZ0JBQVcsR0FBVyxHQUFHLENBQUM7S0FvQnBDO0lBbEJDLGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDM0MsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDM0MsT0FBTyxvQkFBb0IsQ0FBQztJQUM5QixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQVk7UUFDdEIsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNyQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQzs7a0hBdkJVLHFCQUFxQjtzR0FBckIscUJBQXFCLGdNQ1ZsQyx5bUdBOENNOzJGRHBDTyxxQkFBcUI7a0JBUGpDLFNBQVM7K0JBQ0UsbUJBQW1CLG1CQUdaLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNZXRyaWNzQ2FyZEl0ZW0gfSBmcm9tICcuL21ldHJpY3MtY2FyZC1pdGVtLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1tZXRyaWNzLWJsb2NrJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21ldHJpY3MtYmxvY2suY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NCbG9ja0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGl0ZW0hOiBNZXRyaWNzQ2FyZEl0ZW07XG4gIEBJbnB1dCgpIHByb2dyZXNzOiBzdHJpbmcgPSAnMCUnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgaXRlbXNsZW5ndGg6IHN0cmluZyA9ICcwJztcblxuICBmb3JtYXRQZXJjZW50KHZhbHVlPzogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAodmFsdWUgPT09IHVuZGVmaW5lZCB8fCB2YWx1ZSA9PT0gbnVsbCB8fCBOdW1iZXIuaXNOYU4odmFsdWUpKSByZXR1cm4gJyc7XG4gICAgY29uc3Qgc2lnbiA9IHZhbHVlID4gMCA/ICcrJyA6IHZhbHVlIDwgMCA/ICcnIDogJyc7XG4gICAgcmV0dXJuIGAke3NpZ259JHt2YWx1ZX0lYDtcbiAgfVxuXG4gIHBlcmNlbnRDbGFzcyh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICAgIGlmICh2YWx1ZSA+IDApIHJldHVybiAnY3FhLXRleHQtWyMxMEI5ODFdJztcbiAgICBpZiAodmFsdWUgPCAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjRUY0NDQ0XSc7XG4gICAgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICB9XG5cbiAgaGFuZGxlQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXRlbS5vbkNsaWNrKSB7XG4gICAgICB0aGlzLml0ZW0ub25DbGljayh0aGlzLml0ZW0sIGV2ZW50KTtcbiAgICB9XG4gIH1cbn1cblxuXG4iLCI8ZGl2IGNsYXNzPVwiY3FhLXVpLXJvb3RcIj5cbiAgPGRpdlxuICAgIFtuZ0NsYXNzXT1cIltsYXlvdXQgPT09ICcxJ1xuICAgID8gJ2NxYS1mbGV4IGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtaXRlbXMtY2VudGVyIGNxYS1weS0zIG1kOmNxYS1wdC0xIG1kOmNxYS1wYi0wLjUgY3FhLXB4LTUgY3FhLWdhcC0zIGNxYS13LWZ1bGwgbWQ6Y3FhLWgtWzYycHhdIGNxYS1ib3JkZXItYi0wIGNxYS1ib3JkZXItWyNFNUU3RUJdJ1xuICAgIDogJ2NxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtanVzdGlmeS1zdGFydCBjcWEtaXRlbXMtc3RhcnQgY3FhLXB5LTMgbWQ6Y3FhLXB5LTEgbGc6Y3FhLXB4LTUgY3FhLXB4LTIgY3FhLXctZnVsbCBtZDpjcWEtaC1bNTNweF0nLCBpdGVtc2xlbmd0aCA9PSBpdGVtLmlkID8gJ2NxYS1ib3JkZXItbCBtZDpjcWEtYm9yZGVyLWwtMCBtZDpjcWEtYm9yZGVyLWwnIDogJycgLCBpdGVtLmlkID09ICcxJyAmJiBsYXlvdXQgPT09ICcxJyA/ICdjcWEtYm9yZGVyLWwgbWQ6Y3FhLWJvcmRlci1yJyA6ICcnLCBpdGVtLm9uQ2xpY2sgPyAnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCcgOiAnJ11cIlxuICAgIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICBbYXR0ci50aXRsZV09XCJudWxsXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImxheW91dCA9PT0gJzEnOyBlbHNlIGxheW91dDJcIj5cbiAgICAgIDwhLS0gW25nQ2xhc3NdPVwieyAnYm9yZGVyLWwgbWQ6Ym9yZGVyLWwtMCc6IGl0ZW1zbGVuZ3RoID09IGl0ZW0uaWQgfVwiIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWp1c3RpZnktY2VudGVyIGNxYS13LTEwIGNxYS1oLTEwIGNxYS1taW4tdy1bNDBweF0gY3FhLXJvdW5kZWQtWzEwcHhdXCJcbiAgICAgICAgW25nQ2xhc3NdPVwiaXRlbS5hY2NlbnRCZ0NsYXNzIHx8ICdjcWEtYmctWyNFRUYyRkZdJ1wiPlxuICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNSAhY3FhLWgtNSAhY3FhLXRleHQtWzIwcHhdXCIgW25nQ2xhc3NdPVwiaXRlbS5pY29uQ29sb3JDbGFzcyB8fCAnY3FhLXRleHQtWyMzRjQzRUVdJ1wiXG4gICAgICAgICAgKm5nSWY9XCJpdGVtLmljb25cIj57eyBpdGVtLmljb24gfX08L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtZ2FwLTAuNSBjcWEtdy1mdWxsIGNxYS1oLWF1dG8gY3FhLWZsZXgtMSBjcWEtdHJ1bmNhdGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWgtNCBjcWEtdGV4dC1bMTJweF0gY3FhLWxlYWRpbmctNCBjcWEtZm9udC1tZWRpdW0gY3FhLXRleHQtWyM2QTcyODJdXCI+e3sgaXRlbS5sYWJlbFxuICAgICAgICAgIH19PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtdy1mdWxsIGNxYS1oLTcgY3FhLWdhcC0yIGNxYS1mbGV4XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJpdGVtLnN1YnRleHQgPyAnY3FhLWp1c3RpZnktYmV0d2VlbiBjcWEtaXRlbXMtY2VudGVyJyA6ICdjcWEtanVzdGlmeS1zdGFydCBjcWEtaXRlbXMtY2VudGVyJ1wiPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzIwcHhdIGNxYS1sZWFkaW5nLVsyOHB4XSBjcWEtZm9udC1zZW1pYm9sZCBjcWEtdHJhY2tpbmctWy0wLjQ0OTIxOXB4XSBjcWEtdGV4dC1bIzEwMTgyOF1cIj5cbiAgICAgICAgICAgIHt7IGl0ZW0udmFsdWUgfCBudW1iZXIgfX08L2Rpdj5cbiAgICAgICAgICA8ZGl2ICpuZ0lmPVwiaXRlbS5zdWJ0ZXh0XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLTQgY3FhLXRleHQtWyM2QTcyODJdIGNxYS10cnVuY2F0ZSBjcWEtaGlkZGVuIHNtOmNxYS1ibG9ja1wiPnt7XG4gICAgICAgICAgICBpdGVtLnN1YnRleHQgfX08L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtdy1mdWxsIGNxYS1oLTEgY3FhLXJvdW5kZWQtZnVsbCBjcWEtYmctWyNGM0Y0RjZdIGNxYS1vdmVyZmxvdy1oaWRkZW5cIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWgtZnVsbCBjcWEtcm91bmRlZC1mdWxsXCIgW25nQ2xhc3NdPVwiaXRlbS5jb2xvckNsYXNzIHx8ICdjcWEtYmctWyMzRjQzRUVdJ1wiXG4gICAgICAgICAgICBbc3R5bGUud2lkdGhdPVwicHJvZ3Jlc3NcIj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctdGVtcGxhdGUgI2xheW91dDI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLTFcIj5cbiAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwiIWNxYS13LTUgIWNxYS1oLTUgIWNxYS10ZXh0LVsxNnB4XVwiIFtuZ0NsYXNzXT1cIml0ZW0uaWNvbkNvbG9yQ2xhc3MgfHwgJ2NxYS10ZXh0LVsjM0Y0M0VFXSdcIlxuICAgICAgICAgICpuZ0lmPVwiaXRlbS5pY29uXCI+e3sgaXRlbS5pY29uIH19PC9tYXQtaWNvbj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJjcWEtdGV4dC1bMTJweF0gY3FhLWxlYWRpbmctNCBjcWEtdGV4dC1bIzZCNzI4MF1cIj57eyBpdGVtLmxhYmVsIH19PC9zcGFuPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLTEuNSBjcWEtdy1mdWxsIGNxYS1qdXN0aWZ5LWJldHdlZW5cIj5cbiAgICAgICAgPGg2IGNsYXNzPVwiY3FhLXRleHQtWzE2cHhdIGNxYS1sZWFkaW5nLTcgY3FhLXRyYWNraW5nLVstMC40NXB4XSBjcWEtdGV4dC1bIzExMTgyN11cIj57eyBpdGVtLnZhbHVlIHwgbnVtYmVyIH19XG4gICAgICAgIDwvaDY+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwiaXRlbS5wZXJjZW50ICE9PSB1bmRlZmluZWRcIiBjbGFzcz1cImNxYS10ZXh0LVsxMHB4XSBjcWEtbGVhZGluZy00XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3MoaXRlbS5wZXJjZW50KVwiPnt7IGZvcm1hdFBlcmNlbnQoaXRlbS5wZXJjZW50KSB9fTwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG4gIDwvZGl2PlxuPC9kaXY+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1ibG9jay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2Rhc2hib2FyZHMvbWV0cmljcy1jYXJkL21ldHJpY3MtYmxvY2suY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9kYXNoYm9hcmRzL21ldHJpY3MtY2FyZC9tZXRyaWNzLWJsb2NrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBVTFFLE1BQU0sT0FBTyxxQkFBcUI7SUFQbEM7UUFTVyxhQUFRLEdBQVcsSUFBSSxDQUFDO1FBQ3hCLFdBQU0sR0FBVyxHQUFHLENBQUM7UUFDckIsZ0JBQVcsR0FBVyxHQUFHLENBQUM7S0FvQnBDO0lBbEJDLGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDM0MsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDM0MsT0FBTyxvQkFBb0IsQ0FBQztJQUM5QixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQVk7UUFDdEIsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNyQixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQzs7a0hBdkJVLHFCQUFxQjtzR0FBckIscUJBQXFCLGdNQ1ZsQyxtd0dBOENNOzJGRHBDTyxxQkFBcUI7a0JBUGpDLFNBQVM7K0JBQ0UsbUJBQW1CLG1CQUdaLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNZXRyaWNzQ2FyZEl0ZW0gfSBmcm9tICcuL21ldHJpY3MtY2FyZC1pdGVtLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2NxYS1tZXRyaWNzLWJsb2NrJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21ldHJpY3MtYmxvY2suY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NCbG9ja0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGl0ZW0hOiBNZXRyaWNzQ2FyZEl0ZW07XG4gIEBJbnB1dCgpIHByb2dyZXNzOiBzdHJpbmcgPSAnMCUnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgaXRlbXNsZW5ndGg6IHN0cmluZyA9ICcwJztcblxuICBmb3JtYXRQZXJjZW50KHZhbHVlPzogbnVtYmVyKTogc3RyaW5nIHtcbiAgICBpZiAodmFsdWUgPT09IHVuZGVmaW5lZCB8fCB2YWx1ZSA9PT0gbnVsbCB8fCBOdW1iZXIuaXNOYU4odmFsdWUpKSByZXR1cm4gJyc7XG4gICAgY29uc3Qgc2lnbiA9IHZhbHVlID4gMCA/ICcrJyA6IHZhbHVlIDwgMCA/ICcnIDogJyc7XG4gICAgcmV0dXJuIGAke3NpZ259JHt2YWx1ZX0lYDtcbiAgfVxuXG4gIHBlcmNlbnRDbGFzcyh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICAgIGlmICh2YWx1ZSA+IDApIHJldHVybiAnY3FhLXRleHQtWyMxMEI5ODFdJztcbiAgICBpZiAodmFsdWUgPCAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjRUY0NDQ0XSc7XG4gICAgcmV0dXJuICdjcWEtdGV4dC1bIzZCNzI4MF0nO1xuICB9XG5cbiAgaGFuZGxlQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXRlbS5vbkNsaWNrKSB7XG4gICAgICB0aGlzLml0ZW0ub25DbGljayh0aGlzLml0ZW0sIGV2ZW50KTtcbiAgICB9XG4gIH1cbn1cblxuXG4iLCI8ZGl2IGNsYXNzPVwiY3FhLXVpLXJvb3RcIj5cbiAgPGRpdlxuICAgIFtuZ0NsYXNzXT1cIltsYXlvdXQgPT09ICcxJ1xuICAgID8gJ2NxYS1mbGV4IGNxYS1qdXN0aWZ5LWNlbnRlciBjcWEtaXRlbXMtY2VudGVyIGNxYS1weS0zIG1kOmNxYS1wdC0xIG1kOmNxYS1wYi0wLjUgY3FhLXB4LTUgY3FhLWdhcC0zIGNxYS13LWZ1bGwgbWQ6Y3FhLWgtWzYycHhdIGNxYS1ib3JkZXItYi0wIGNxYS1ib3JkZXItWyNFNUU3RUJdJ1xuICAgIDogJ2NxYS1mbGV4IGNxYS1mbGV4LWNvbCBjcWEtanVzdGlmeS1zdGFydCBjcWEtaXRlbXMtc3RhcnQgY3FhLXB5LTMgbWQ6Y3FhLXB5LTEgbGc6Y3FhLXB4LTUgY3FhLXB4LTIgY3FhLXctZnVsbCBtZDpjcWEtaC1bNTNweF0nLCBpdGVtc2xlbmd0aCA9PSBpdGVtLmlkID8gJ2NxYS1ib3JkZXItbCBtZDpjcWEtYm9yZGVyLWwtMCBtZDpjcWEtYm9yZGVyLWwnIDogJycgLCBpdGVtLmlkID09ICcxJyAmJiBsYXlvdXQgPT09ICcxJyA/ICdjcWEtYm9yZGVyLWwgbWQ6Y3FhLWJvcmRlci1yJyA6ICcnLCBpdGVtLm9uQ2xpY2sgPyAnY3FhLWN1cnNvci1wb2ludGVyIGNxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCcgOiAnJ11cIlxuICAgIChjbGljayk9XCJoYW5kbGVDbGljaygkZXZlbnQpXCJcbiAgICBbYXR0ci50aXRsZV09XCJudWxsXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImxheW91dCA9PT0gJzEnOyBlbHNlIGxheW91dDJcIj5cbiAgICAgIDwhLS0gW25nQ2xhc3NdPVwieyAnYm9yZGVyLWwgbWQ6Ym9yZGVyLWwtMCc6IGl0ZW1zbGVuZ3RoID09IGl0ZW0uaWQgfVwiIC0tPlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWp1c3RpZnktY2VudGVyIGNxYS13LTEwIGNxYS1oLTEwIGNxYS1taW4tdy1bNDBweF0gY3FhLXJvdW5kZWQtWzEwcHhdXCJcbiAgICAgICAgW25nQ2xhc3NdPVwiaXRlbS5hY2NlbnRCZ0NsYXNzIHx8ICdjcWEtYmctWyNFRUYyRkZdJ1wiPlxuICAgICAgICA8bWF0LWljb24gY2xhc3M9XCIhY3FhLXctNSAhY3FhLWgtNSAhY3FhLXRleHQtWzIwcHhdXCIgW25nQ2xhc3NdPVwiaXRlbS5pY29uQ29sb3JDbGFzcyB8fCAnY3FhLXRleHQtWyMzRjQzRUVdJ1wiXG4gICAgICAgICAgKm5nSWY9XCJpdGVtLmljb25cIj57eyBpdGVtLmljb24gfX08L21hdC1pY29uPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtZ2FwLTAuNSBjcWEtdy1mdWxsIGNxYS1oLWF1dG8gY3FhLWZsZXgtMSBjcWEtdHJ1bmNhdGVcIiBbYXR0ci50aXRsZV09XCJudWxsXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJjcWEtdy1mdWxsIGNxYS1oLTQgY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLTQgY3FhLWZvbnQtbWVkaXVtIGNxYS10ZXh0LVsjNkE3MjgyXVwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj57eyBpdGVtLmxhYmVsXG4gICAgICAgICAgfX08L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWgtNyBjcWEtZ2FwLTIgY3FhLWZsZXhcIlxuICAgICAgICAgIFtuZ0NsYXNzXT1cIml0ZW0uc3VidGV4dCA/ICdjcWEtanVzdGlmeS1iZXR3ZWVuIGNxYS1pdGVtcy1jZW50ZXInIDogJ2NxYS1qdXN0aWZ5LXN0YXJ0IGNxYS1pdGVtcy1jZW50ZXInXCI+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY2xhc3M9XCJjcWEtdGV4dC1bMjBweF0gY3FhLWxlYWRpbmctWzI4cHhdIGNxYS1mb250LXNlbWlib2xkIGNxYS10cmFja2luZy1bLTAuNDQ5MjE5cHhdIGNxYS10ZXh0LVsjMTAxODI4XVwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgICAgIHt7IGl0ZW0udmFsdWUgfCBudW1iZXIgfX08L2Rpdj5cbiAgICAgICAgICA8ZGl2ICpuZ0lmPVwiaXRlbS5zdWJ0ZXh0XCJcbiAgICAgICAgICAgIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLTQgY3FhLXRleHQtWyM2QTcyODJdIGNxYS10cnVuY2F0ZSBjcWEtaGlkZGVuIHNtOmNxYS1ibG9ja1wiIFthdHRyLnRpdGxlXT1cIm51bGxcIj57e1xuICAgICAgICAgICAgaXRlbS5zdWJ0ZXh0IH19PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtaC0xIGNxYS1yb3VuZGVkLWZ1bGwgY3FhLWJnLVsjRjNGNEY2XSBjcWEtb3ZlcmZsb3ctaGlkZGVuXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1oLWZ1bGwgY3FhLXJvdW5kZWQtZnVsbFwiIFtuZ0NsYXNzXT1cIml0ZW0uY29sb3JDbGFzcyB8fCAnY3FhLWJnLVsjM0Y0M0VFXSdcIlxuICAgICAgICAgICAgW3N0eWxlLndpZHRoXT1cInByb2dyZXNzXCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPG5nLXRlbXBsYXRlICNsYXlvdXQyPlxuICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1jZW50ZXIgY3FhLWdhcC0xXCI+XG4gICAgICAgIDxtYXQtaWNvbiBjbGFzcz1cIiFjcWEtdy01ICFjcWEtaC01ICFjcWEtdGV4dC1bMTZweF1cIiBbbmdDbGFzc109XCJpdGVtLmljb25Db2xvckNsYXNzIHx8ICdjcWEtdGV4dC1bIzNGNDNFRV0nXCJcbiAgICAgICAgICAqbmdJZj1cIml0ZW0uaWNvblwiPnt7IGl0ZW0uaWNvbiB9fTwvbWF0LWljb24+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLXRleHQtWzEycHhdIGNxYS1sZWFkaW5nLTQgY3FhLXRleHQtWyM2QjcyODBdXCIgW2F0dHIudGl0bGVdPVwibnVsbFwiPnt7IGl0ZW0ubGFiZWwgfX08L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJjcWEtZmxleCBjcWEtaXRlbXMtY2VudGVyIGNxYS1nYXAtMS41IGNxYS13LWZ1bGwgY3FhLWp1c3RpZnktYmV0d2VlblwiPlxuICAgICAgICA8aDYgY2xhc3M9XCJjcWEtdGV4dC1bMTZweF0gY3FhLWxlYWRpbmctNyBjcWEtdHJhY2tpbmctWy0wLjQ1cHhdIGNxYS10ZXh0LVsjMTExODI3XVwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj57eyBpdGVtLnZhbHVlIHwgbnVtYmVyIH19XG4gICAgICAgIDwvaDY+XG4gICAgICAgIDxzcGFuICpuZ0lmPVwiaXRlbS5wZXJjZW50ICE9PSB1bmRlZmluZWRcIiBjbGFzcz1cImNxYS10ZXh0LVsxMHB4XSBjcWEtbGVhZGluZy00XCJcbiAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3MoaXRlbS5wZXJjZW50KVwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj57eyBmb3JtYXRQZXJjZW50KGl0ZW0ucGVyY2VudCkgfX08L3NwYW4+XG4gICAgICA8L2Rpdj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==

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        [attr.title]=\"null\">\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n        <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\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        [attr.title]=\"null\">\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\" [attr.title]=\"null\">{{ 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]\" [attr.title]=\"null\">{{ total | number }}\n            </h4>\n            <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n              [ngClass]=\"percentClass(totalPercent)\" [attr.title]=\"null\">{{ 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        [attr.title]=\"null\">\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n        <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\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        [attr.title]=\"null\">\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\" [attr.title]=\"null\">{{ 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]\" [attr.title]=\"null\">{{ total | number }}\n            </h4>\n            <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n              [ngClass]=\"percentClass(totalPercent)\" [attr.title]=\"null\">{{ 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljcy1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvZGFzaGJvYXJkcy9tZXRyaWNzLWNhcmQvbWV0cmljcy1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBVWhHLE1BQU0sT0FBTyxvQkFBb0I7SUFQakM7UUFRVyxTQUFJLEdBQVcsY0FBYyxDQUFDO1FBQzlCLFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsVUFBSyxHQUFvQixDQUFDLENBQUM7UUFDM0IsVUFBSyxHQUFzQixFQUFFLENBQUM7UUFDOUIsY0FBUyxHQUFXLEVBQUUsQ0FBQztRQUN2QixXQUFNLEdBQVcsR0FBRyxDQUFDO1FBR3BCLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBUyxDQUFDLENBQUMscUNBQXFDO0tBbUN4RjtJQWpDQyxhQUFhLENBQUMsSUFBcUI7UUFDakMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDeEMsSUFBSSxDQUFDLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztZQUFFLE9BQU8sSUFBSSxDQUFDO1FBQ2xDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQ2pFLE9BQU8sR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDOUIsQ0FBQztJQUVPLFFBQVE7UUFDZCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUM1RSxPQUFPLFlBQVksSUFBSSxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFjO1FBQzFCLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDO1lBQUUsT0FBTyxFQUFFLENBQUM7UUFDNUUsTUFBTSxJQUFJLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztRQUNuRCxPQUFPLEdBQUcsSUFBSSxHQUFHLEtBQUssR0FBRyxDQUFDO0lBQzVCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYztRQUN6QixJQUFJLEtBQUssS0FBSyxTQUFTLElBQUksS0FBSyxLQUFLLElBQUksSUFBSSxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUM7UUFDOUYsSUFBSSxLQUFLLEdBQUcsQ0FBQztZQUFFLE9BQU8sb0JBQW9CLENBQUMsQ0FBQyxRQUFRO1FBQ3BELElBQUksS0FBSyxHQUFHLENBQUM7WUFBRSxPQUFPLG9CQUFvQixDQUFDLENBQUMsTUFBTTtRQUNsRCxPQUFPLG9CQUFvQixDQUFDLENBQUMsVUFBVTtJQUN6QyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQix3REFBd0Q7UUFDeEQsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUIscUNBQXFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQzs7aUhBM0NVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLHdUQ1ZqQyx3Z0pBNkRNOzJGRG5ETyxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0Usa0JBQWtCLG1CQUdYLHVCQUF1QixDQUFDLE1BQU0sUUFDekMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFOzhCQUdyQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNJLFVBQVU7c0JBQW5CLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1ldHJpY3NDYXJkSXRlbSB9IGZyb20gJy4vbWV0cmljcy1jYXJkLWl0ZW0uaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3FhLW1ldHJpY3MtY2FyZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZXRyaWNzLWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFtdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaG9zdDogeyBjbGFzczogJ2NxYS11aS1yb290JyB9XG59KVxuZXhwb3J0IGNsYXNzIE1ldHJpY3NDYXJkQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaWNvbjogc3RyaW5nID0gJ3RleHRfc25pcHBldCc7XG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgdG90YWw6IG51bWJlciB8IHN0cmluZyA9IDA7XG4gIEBJbnB1dCgpIGl0ZW1zOiBNZXRyaWNzQ2FyZEl0ZW1bXSA9IFtdO1xuICBASW5wdXQoKSBjYXJkQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBsYXlvdXQ6IHN0cmluZyA9ICcxJztcbiAgQElucHV0KCkgdG90YWxQZXJjZW50PzogbnVtYmVyOyAvLyBPcHRpb25hbCBvdmVyYWxsIHBlcmNlbnQgZGVsdGEgZm9yIGxheW91dCAyXG4gIEBJbnB1dCgpIG9uVG90YWxDbGljaz86IChldmVudD86IEV2ZW50KSA9PiB2b2lkOyAvLyBPcHRpb25hbCBjbGljayBoYW5kbGVyIGZvciB0b3RhbCBibG9ja1xuICBAT3V0cHV0KCkgdG90YWxDbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7IC8vIE91dHB1dCBldmVudCBmb3IgdG90YWwgYmxvY2sgY2xpY2tcblxuICBwcm9ncmVzc1dpZHRoKGl0ZW06IE1ldHJpY3NDYXJkSXRlbSk6IHN0cmluZyB7XG4gICAgY29uc3QgbWF4ID0gaXRlbS5tYXggPz8gdGhpcy5pbmZlck1heCgpO1xuICAgIGlmICghbWF4IHx8IG1heCA8PSAwKSByZXR1cm4gJzAlJztcbiAgICBjb25zdCBwY3QgPSBNYXRoLm1heCgwLCBNYXRoLm1pbigxMDAsIChpdGVtLnZhbHVlIC8gbWF4KSAqIDEwMCkpO1xuICAgIHJldHVybiBwY3QudG9GaXhlZCgxKSArICclJztcbiAgfVxuXG4gIHByaXZhdGUgaW5mZXJNYXgoKTogbnVtYmVyIHtcbiAgICBjb25zdCBtYXhGcm9tSXRlbXMgPSB0aGlzLml0ZW1zLnJlZHVjZSgobSwgaXQpID0+IE1hdGgubWF4KG0sIGl0LnZhbHVlKSwgMCk7XG4gICAgcmV0dXJuIG1heEZyb21JdGVtcyB8fCAxO1xuICB9XG5cbiAgZm9ybWF0UGVyY2VudCh2YWx1ZT86IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlID09PSB1bmRlZmluZWQgfHwgdmFsdWUgPT09IG51bGwgfHwgTnVtYmVyLmlzTmFOKHZhbHVlKSkgcmV0dXJuICcnO1xuICAgIGNvbnN0IHNpZ24gPSB2YWx1ZSA+IDAgPyAnKycgOiB2YWx1ZSA8IDAgPyAnJyA6ICcnO1xuICAgIHJldHVybiBgJHtzaWdufSR7dmFsdWV9JWA7XG4gIH1cblxuICBwZXJjZW50Q2xhc3ModmFsdWU/OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh2YWx1ZSA9PT0gdW5kZWZpbmVkIHx8IHZhbHVlID09PSBudWxsIHx8IE51bWJlci5pc05hTih2YWx1ZSkpIHJldHVybiAnY3FhLXRleHQtWyM2QjcyODBdJztcbiAgICBpZiAodmFsdWUgPiAwKSByZXR1cm4gJ2NxYS10ZXh0LVsjMTBCOTgxXSc7IC8vIGdyZWVuXG4gICAgaWYgKHZhbHVlIDwgMCkgcmV0dXJuICdjcWEtdGV4dC1bI0VGNDQ0NF0nOyAvLyByZWRcbiAgICByZXR1cm4gJ2NxYS10ZXh0LVsjNkI3MjgwXSc7IC8vIG5ldXRyYWxcbiAgfVxuXG4gIGhhbmRsZVRvdGFsQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgLy8gQWx3YXlzIGVtaXQgdGhlIGV2ZW50LCBldmVuIGlmIG5vIGhhbmRsZXIgaXMgcHJvdmlkZWRcbiAgICB0aGlzLnRvdGFsQ2xpY2suZW1pdChldmVudCk7XG4gICAgLy8gQ2FsbCB0aGUgaW5wdXQgaGFuZGxlciBpZiBwcm92aWRlZFxuICAgIGlmICh0aGlzLm9uVG90YWxDbGljaykge1xuICAgICAgdGhpcy5vblRvdGFsQ2xpY2soZXZlbnQpO1xuICAgIH1cbiAgfVxufVxuXG5cbiIsIjxkaXYgY2xhc3M9XCJjcWEtdWktcm9vdFwiPlxuICA8ZGl2ICpuZ0lmPVwibGF5b3V0ID09PSAnMSdcIlxuICAgIGNsYXNzPVwiY3FhLXctZnVsbCBjcWEtYm94LWJvcmRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWl0ZW1zLXN0YXJ0IGNxYS1weC1weCBjcWEtcGItcHggbWQ6Y3FhLWgtWzYzcHhdIGNxYS1iZy13aGl0ZSBjcWEtYm9yZGVyLXQtMiBjcWEtYm9yZGVyLXIgY3FhLWJvcmRlci1iLTAgY3FhLWJvcmRlci1sIGNxYS1ib3JkZXItc29saWQgY3FhLWJvcmRlci1bIzNGNDNFRV0gY3FhLXJvdW5kZWQtWzEwcHhdIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wXCJcbiAgICBbbmdDbGFzc109XCJjYXJkQ2xhc3NcIj5cbiAgICA8IS0tIE1ldHJpYyBibG9ja3MgLS0+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJjcWEtZmxleC0xIGNxYS13LWZ1bGwgY3FhLWdyaWQgY3FhLWdyaWQtY29scy0yIHNtOmNxYS1ncmlkLWNvbHMtMiBtZDpjcWEtZ3JpZC1jb2xzLTQgY3FhLWJvcmRlciBjcWEtYm9yZGVyLVsjRTVFN0VCXSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLW92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1jdXJzb3ItcG9pbnRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHQtMSBtZDpjcWEtcGItMC41IGNxYS1weC02IGNxYS1nYXAtMSBjcWEtdy1mdWxsIHNtOmNxYS13LVsxMDAlXSBtZDpjcWEtdy1bMTgwcHhdIGxnOmNxYS13LVsyOTBweF0gbWQ6Y3FhLWgtWzYxcHhdIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBzbTpjcWEtYm9yZGVyLWItMCBzbTpjcWEtYm9yZGVyLXJcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2NxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCJcbiAgICAgICAgW2F0dHIudGl0bGVdPVwibnVsbFwiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsxMnB4XSBjcWEtbGVhZGluZy1bMTZweF0gY3FhLWZvbnQtbWVkaXVtIGNxYS10ZXh0LVsjNkE3MjgyXVwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj4ge3sgdGl0bGUgfX0gPC9zcGFuPlxuICAgICAgICA8aDMgY2xhc3M9XCJjcWEtdGV4dC1bMzBweF0gY3FhLWxlYWRpbmctWzM2cHhdIGNxYS1mb250LWJvbGQgY3FhLXRyYWNraW5nLVswLjM5NTUwOHB4XSBjcWEtdGV4dC1bIzEwMTgyOF1cIiBbYXR0ci50aXRsZV09XCJudWxsXCI+IHt7XG4gICAgICAgICAgdG90YWwgfCBudW1iZXIgfX0gPC9oMz5cbiAgICAgIDwvZGl2PlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXQgb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNxYS1mbGV4IGNxYS1pdGVtcy1zdHJldGNoIGNxYS1ib3JkZXItYiBjcWEtYm9yZGVyLVsjRTVFN0VCXSBtZDpjcWEtYm9yZGVyLWItMFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWhpZGRlbiBzbTpjcWEtYmxvY2sgbWQ6Y3FhLWJsb2NrIGNxYS13LVsxcHhdIGNxYS1iZy1bI0U1RTdFQl0gY3FhLW1yLTRcIj48L2Rpdj5cbiAgICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgW2l0ZW1dPVwiaXRcIiBbaXRlbXNsZW5ndGhdPVwiaXRlbXMubGVuZ3RoLnRvU3RyaW5nKClcIlxuICAgICAgICAgICAgW3Byb2dyZXNzXT1cInByb2dyZXNzV2lkdGgoaXQpXCI+XG4gICAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG5cbiAgPGRpdiAqbmdJZj1cImxheW91dCA9PT0gJzInXCJcbiAgICBjbGFzcz1cImNxYS13LWZ1bGwgY3FhLWJveC1ib3JkZXIgY3FhLWZsZXggY3FhLWZsZXgtY29sIGNxYS1pdGVtcy1zdGFydCBjcWEtcHgtcHggY3FhLXBiLXB4IG1kOmNxYS1oLVs2M3B4XSBjcWEtYmctd2hpdGUgY3FhLWZsZXgtbm9uZSBjcWEtb3JkZXItMCBjcWEtc2VsZi1zdHJldGNoIGNxYS1ncm93LTBcIlxuICAgIFtuZ0NsYXNzXT1cImNhcmRDbGFzc1wiPlxuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwiY3FhLWZsZXggY3FhLWZsZXgtY29sIG1kOmNxYS1mbGV4LXJvdyBjcWEtZmxleC13cmFwIGNxYS1pdGVtcy1zdHJldGNoIGNxYS13LWZ1bGwgY3FhLW1pbi1oLVs1M3B4XSBjcWEtcm91bmRlZC1ub25lIGNxYS1mbGV4LW5vbmUgY3FhLW9yZGVyLTAgY3FhLXNlbGYtc3RyZXRjaCBjcWEtZ3Jvdy0wIGNxYS1nYXAtNFwiPlxuICAgICAgPCEtLSBMZWZ0IHRvdGFsIGJsb2NrIC0tPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzcz1cImNxYS1jdXJzb3ItcG9pbnRlciBjcWEtZmxleCBjcWEtZmxleC1jb2wgY3FhLWp1c3RpZnktY2VudGVyIGNxYS1pdGVtcy1zdGFydCBjcWEtcHktMyBtZDpjcWEtcHktMSBjcWEtcHgtNCBzbTpjcWEtcHgtNiBjcWEtZ2FwLTEgY3FhLXctZnVsbCBzbTpjcWEtdy1bMTAwJV0gbWQ6Y3FhLXctWzI0MHB4XSBsZzpjcWEtdy1bMjkwcHhdIG1kOmNxYS1oLVs2MXB4XSBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNFNUU3RUJdIGNxYS1yZWxhdGl2ZSBjcWEtb3ZlcmZsb3ctaGlkZGVuIGJlZm9yZTpjcWEtY29udGVudC1bJyddIGJlZm9yZTpjcWEtYmctWyM0QzRDNTFdIGJlZm9yZTpjcWEtaC1bMnB4XSBiZWZvcmU6Y3FhLXctZnVsbCBiZWZvcmU6Y3FhLWFic29sdXRlIGJlZm9yZTpjcWEtdG9wLTAgYmVmb3JlOmNxYS1sZWZ0LTBcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2NxYS10cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpjcWEtYmctZ3JheS01MCc6IG9uVG90YWxDbGlja31cIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlVG90YWxDbGljaygkZXZlbnQpXCJcbiAgICAgICAgW2F0dHIudGl0bGVdPVwibnVsbFwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWNlbnRlciBjcWEtZ2FwLTIgY3FhLWp1c3RpZnktYmV0d2VlbiBjcWEtdy1mdWxsXCI+XG4gICAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwiIWNxYS13LTQgIWNxYS1oLTQgIWNxYS10ZXh0LVsxNnB4XSBjcWEtdGV4dC1bIzZCNzI4MF1cIj57eyBpY29uIH19PC9tYXQtaWNvbj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImNxYS10ZXh0LVsjNkI3MjgwXSBjcWEtdGV4dC1bMTRweF0gY3FhLWxlYWRpbmctNFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj57eyB0aXRsZSB9fTwvc3Bhbj5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY3FhLWZsZXggY3FhLWl0ZW1zLWVuZCBjcWEtZ2FwLTIgY3FhLW1sLWF1dG9cIj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImNxYS10ZXh0LVsyOHB4XSBjcWEtbGVhZGluZy03IGNxYS10cmFja2luZy1bLTAuNDVweF0gY3FhLXRleHQtWyMxMTE4MjddXCIgW2F0dHIudGl0bGVdPVwibnVsbFwiPnt7IHRvdGFsIHwgbnVtYmVyIH19XG4gICAgICAgICAgICA8L2g0PlxuICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0b3RhbFBlcmNlbnQgIT09IHVuZGVmaW5lZFwiIGNsYXNzPVwiY3FhLXRleHQtWzEwcHhdIGNxYS1sZWFkaW5nLTRcIlxuICAgICAgICAgICAgICBbbmdDbGFzc109XCJwZXJjZW50Q2xhc3ModG90YWxQZXJjZW50KVwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj57eyBmb3JtYXRQZXJjZW50KHRvdGFsUGVyY2VudCkgfX08L3NwYW4+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICA8L2Rpdj5cbiAgICAgIDwhLS0gTWV0cmljIGJsb2NrcyAtLT5cbiAgICAgIDxkaXYgW25nQ2xhc3NdPVwiJ2NxYS1ncmlkLWNvbHMtJyArIGl0ZW1zLmxlbmd0aCArICcgbGc6Y3FhLWdyaWQtY29scy0nICsgaXRlbXMubGVuZ3RoXCJcbiAgICAgICAgY2xhc3M9XCJjcWEtZmxleC0xIGNxYS13LWZ1bGwgY3FhLWdyaWQgbWQ6Y3FhLWdyaWQtY29scy0zIGNxYS1nYXAtMiBtZDpjcWEtZ2FwLTMgY3FhLWl0ZW1zLWNlbnRlciBjcWEtcm91bmRlZC1bMTBweF0gY3FhLWJvcmRlciBjcWEtYm9yZGVyLXNvbGlkIGNxYS1ib3JkZXItWyNFNUU3RUJdIGNxYS1yZWxhdGl2ZSBjcWEtb3ZlcmZsb3ctaGlkZGVuXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiY3FhLWgtWzJweF0gY3FhLXctZnVsbCBjcWEtYWJzb2x1dGUgY3FhLXRvcC0wIGNxYS1sZWZ0LTBcIlxuICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kXT1cIidsaW5lYXItZ3JhZGllbnQoOTBkZWcsICMzQjgyRjYgMCUsIHJnYmEoMCwgMCwgMCwgMCkgMTAwJSknXCI+PC9zcGFuPlxuICAgICAgICA8Y3FhLW1ldHJpY3MtYmxvY2sgKm5nRm9yPVwibGV0IGl0IG9mIGl0ZW1zOyBsZXQgaSA9IGluZGV4XCIgW2l0ZW1dPVwiaXRcIiBbbGF5b3V0XT1cImxheW91dFwiIFthdHRyLnRpdGxlXT1cIm51bGxcIj5cbiAgICAgICAgPC9jcWEtbWV0cmljcy1ibG9jaz5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==

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 {
@@ -2348,10 +2361,10 @@ class MetricsBlockComponent {
     }
 }
 MetricsBlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MetricsBlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: { item: "item", progress: "progress", layout: "layout", itemslength: "itemslength" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\" [attr.title]=\"null\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\" [attr.title]=\"null\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\" [attr.title]=\"null\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\" [attr.title]=\"null\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\" [attr.title]=\"null\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\" [attr.title]=\"null\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i2$1.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MetricsBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-metrics-block', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    [ngClass]=\"[layout === '1'\n    ? 'cqa-flex cqa-justify-center cqa-items-center cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-5 cqa-gap-3 cqa-w-full md:cqa-h-[62px] cqa-border-b-0 cqa-border-[#E5E7EB]'\n    : 'cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-py-3 md:cqa-py-1 lg:cqa-px-5 cqa-px-2 cqa-w-full md:cqa-h-[53px]', itemslength == item.id ? 'cqa-border-l md:cqa-border-l-0 md:cqa-border-l' : '' , item.id == '1' && layout === '1' ? 'cqa-border-l md:cqa-border-r' : '', item.onClick ? 'cqa-cursor-pointer cqa-transition-colors hover:cqa-bg-gray-50' : '']\"\n    (click)=\"handleClick($event)\"\n    [attr.title]=\"null\">\n    <ng-container *ngIf=\"layout === '1'; else layout2\">\n      <!-- [ngClass]=\"{ 'border-l md:border-l-0': itemslength == item.id }\" -->\n      <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-min-w-[40px] cqa-rounded-[10px]\"\n        [ngClass]=\"item.accentBgClass || 'cqa-bg-[#EEF2FF]'\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n      </div>\n      <div class=\"cqa-flex cqa-flex-col cqa-items-start cqa-gap-0.5 cqa-w-full cqa-h-auto cqa-flex-1 cqa-truncate\" [attr.title]=\"null\">\n        <div class=\"cqa-w-full cqa-h-4 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\">{{ item.label\n          }}</div>\n        <div class=\"cqa-w-full cqa-h-7 cqa-gap-2 cqa-flex\"\n          [ngClass]=\"item.subtext ? 'cqa-justify-between cqa-items-center' : 'cqa-justify-start cqa-items-center'\">\n          <div\n            class=\"cqa-text-[20px] cqa-leading-[28px] cqa-font-semibold cqa-tracking-[-0.449219px] cqa-text-[#101828]\" [attr.title]=\"null\">\n            {{ item.value | number }}</div>\n          <div *ngIf=\"item.subtext\"\n            class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-truncate cqa-hidden sm:cqa-block\" [attr.title]=\"null\">{{\n            item.subtext }}</div>\n        </div>\n        <div class=\"cqa-w-full cqa-h-1 cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"item.colorClass || 'cqa-bg-[#3F43EE]'\"\n            [style.width]=\"progress\"></div>\n        </div>\n      </div>\n    </ng-container>\n    <ng-template #layout2>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[16px]\" [ngClass]=\"item.iconColorClass || 'cqa-text-[#3F43EE]'\"\n          *ngIf=\"item.icon\">{{ item.icon }}</mat-icon>\n        <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6B7280]\" [attr.title]=\"null\">{{ item.label }}</span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-w-full cqa-justify-between\">\n        <h6 class=\"cqa-text-[16px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\" [attr.title]=\"null\">{{ item.value | number }}\n        </h6>\n        <span *ngIf=\"item.percent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n          [ngClass]=\"percentClass(item.percent)\" [attr.title]=\"null\">{{ formatPercent(item.percent) }}</span>\n      </div>\n    </ng-template>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { item: [{
                 type: Input
             }], progress: [{
@@ -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        [attr.title]=\"null\">\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n        <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\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        [attr.title]=\"null\">\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\" [attr.title]=\"null\">{{ 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]\" [attr.title]=\"null\">{{ total | number }}\n            </h4>\n            <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n              [ngClass]=\"percentClass(totalPercent)\" [attr.title]=\"null\">{{ 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        [attr.title]=\"null\">\n        <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-[#6A7282]\" [attr.title]=\"null\"> {{ title }} </span>\n        <h3 class=\"cqa-text-[30px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[0.395508px] cqa-text-[#101828]\" [attr.title]=\"null\"> {{\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        [attr.title]=\"null\">\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\" [attr.title]=\"null\">{{ 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]\" [attr.title]=\"null\">{{ total | number }}\n            </h4>\n            <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n              [ngClass]=\"percentClass(totalPercent)\" [attr.title]=\"null\">{{ 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: [{