@cqa-lib/cqa-ui 0.1.2 → 1.0.1

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

@@ -1,13 +1,32 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, NgModule, InjectionToken, Injector, Injectable } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, Injectable, NgModule, InjectionToken, Injector } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/forms';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1$1 from '@angular/cdk/overlay';
-import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3$3 from '@angular/material/core';
+import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
+import * as i3$4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$4 from '@angular/cdk/overlay';
+import { OverlayContainer, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
 import { TemplatePortal, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { filter } from 'rxjs/operators';
@@ -18,6 +37,7 @@ class ButtonComponent {
         this.variant = 'filled';
         this.disabled = false;
         this.iconPosition = 'start';
+        this.fullWidth = false;
         this.type = 'button';
         this.clicked = new EventEmitter();
         // Internal state tracking
@@ -30,74 +50,26 @@ class ButtonComponent {
     }
     get buttonClasses() {
         const baseClasses = [
-            'cqa-flex',
-            'cqa-flex-col',
-            'cqa-justify-center',
+            'cqa-inline-flex',
             'cqa-items-center',
-            'cqa-p-0',
-            'cqa-gap-2',
-            'cqa-rounded-lg',
-            'cqa-cursor-pointer',
-            'cqa-font-inter',
-            'cqa-font-semibold',
-            'cqa-text-sm',
-            'cqa-leading-[14px]',
-            'cqa-transition-all',
-            'cqa-duration-200',
-            'cqa-outline-none'
-        ];
-        if (this.disabled) {
-            baseClasses.push('cqa-cursor-not-allowed');
-        }
-        // Add variant and state specific classes
-        const variantClasses = this.getVariantClasses();
-        return [...baseClasses, ...variantClasses].join(' ');
-    }
-    get stateLayerClasses() {
-        const classes = [
-            'cqa-flex',
-            'cqa-flex-row',
             'cqa-justify-center',
-            'cqa-items-center',
             'cqa-gap-2',
-            'cqa-w-full',
-            'cqa-h-full',
             'cqa-py-[10px]',
-            'cqa-px-6',
-        ];
-        return classes.join(' ');
-    }
-    get labelClasses() {
-        const classes = [
-            'cqa-flex',
-            'cqa-items-center',
-            'cqa-text-center',
-            'cqa-font-inter',
-            'cqa-font-semibold',
-            'cqa-text-sm',
-            'cqa-leading-[14px]',
-            'cqa-flex-none',
-            this.textClass,
+            'cqa-rounded-[8px]',
+            'cqa-text-[12.3px]',
+            'cqa-leading-[17.5px]',
+            'cqa-font-medium',
+            'cqa-border',
         ];
         if (this.disabled) {
-            classes.push('cqa-opacity-[0.38]');
+            baseClasses.push('cqa-cursor-not-allowed');
         }
-        return classes.join(' ');
-    }
-    get iconClasses() {
-        const classes = [
-            'cqa-flex',
-            'cqa-items-center',
-            'cqa-justify-center',
-            'cqa-w-[14px]',
-            'cqa-h-[14px]',
-            'cqa-shrink-0',
-            'cqa-flex-none'
-        ];
-        if (this.disabled) {
-            classes.push('cqa-opacity-[0.38]');
+        if (this.fullWidth) {
+            baseClasses.push('cqa-w-full');
         }
-        return classes.join(' ');
+        // Add variant and state specific classes
+        const variantClasses = this.getVariantClasses();
+        return [...baseClasses, ...variantClasses, ...(this.customClass ? [this.customClass] : [])].join(' ');
     }
     getVariantClasses() {
         const classes = [];
@@ -106,9 +78,21 @@ class ButtonComponent {
                 classes.push('cqa-bg-primary-muted');
             }
             else {
-                classes.push('cqa-bg-primary');
+                classes.push('cqa-bg-primary cqa-text-white');
+                if (this.isHovered) {
+                    classes.push('cqa-bg-primary-hover');
+                }
+            }
+        }
+        else if (this.variant === 'grey-solid') {
+            // Neutral grey solid style
+            if (this.disabled) {
+                classes.push('cqa-bg-grey-400', 'cqa-border', 'cqa-border-primary-muted');
+            }
+            else {
+                classes.push('cqa-bg-grey-400', 'cqa-border', 'cqa-border-primary-muted');
                 if (this.isHovered) {
-                    classes.push('cqa-shadow-[0px_1px_2px_rgba(0,0,0,0.3),0px_1px_3px_1px_rgba(0,0,0,0.15)]');
+                    classes.push('cqa-bg-grey-200');
                 }
             }
         }
@@ -130,10 +114,10 @@ class ButtonComponent {
         }
         else if (this.variant === 'text') {
             if (this.disabled) {
-                classes.push('cqa-bg-transparent');
+                classes.push('cqa-bg-transparent', 'cqa-border-none');
             }
             else {
-                classes.push('cqa-bg-transparent');
+                classes.push('cqa-bg-transparent', 'cqa-border-none');
                 if (this.isHovered || this.isFocused || this.isPressed) {
                     classes.push('cqa-bg-primary-surface');
                 }
@@ -183,6 +167,8 @@ class ButtonComponent {
         switch (this.variant) {
             case 'filled':
                 return 'cqa-text-surface-default';
+            case 'grey-solid':
+                return 'cqa-text-black-100';
             case 'outlined':
                 if (this.isFocused || this.isHovered || this.isPressed) {
                     return 'cqa-text-primary-hover';
@@ -230,10 +216,10 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "cqa-button", inputs: { variant: "variant", disabled: "disabled", icon: "icon", iconPosition: "iconPosition", type: "type" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block; width: auto;\">\n  <button\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n    <span [class]=\"stateLayerClasses\">\n      <span *ngIf=\"icon && iconPosition === 'start'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n      <span [class]=\"labelClasses\" [ngClass]=\"textClass\">\n        <ng-content></ng-content>\n      </span>\n      <span *ngIf=\"icon && iconPosition === 'end'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n    </span>\n  </button>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ButtonComponent, selector: "cqa-button", inputs: { variant: "variant", disabled: "disabled", icon: "icon", iconPosition: "iconPosition", fullWidth: "fullWidth", iconColor: "iconColor", type: "type", text: "text", customClass: "customClass" }, outputs: { clicked: "clicked" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "mousedown": "onMouseDown()", "mouseup": "onMouseUp()", "focus": "onFocus()", "blur": "onBlur()" } }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <button\n    [ngClass]=\"\n    text && icon && iconPosition === 'start' ? 'cqa-pr-[24px] cqa-pl-[16px]' :\n    text && icon && iconPosition === 'end' ? 'cqa-pl-[24px] cqa-pr-[16px]' :\n    text && !icon ? 'cqa-px-[24px]' : !text && icon ? 'cqa-px-[12px]' : 'cqa-px-[24px]'\"\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n\n    <mat-icon *ngIf=\"icon && iconPosition === 'start'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n      {{ icon }}\n    </mat-icon>\n\n    <!-- Dynamic text support -->\n    <span *ngIf=\"text\">{{text}}</span>\n\n    <ng-content *ngIf=\"!text\" ></ng-content>\n\n    <mat-icon *ngIf=\"icon && iconPosition === 'end'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n      {{ icon }}\n    </mat-icon>\n\n  </button>\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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-button', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block; width: auto;\">\n  <button\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n    <span [class]=\"stateLayerClasses\">\n      <span *ngIf=\"icon && iconPosition === 'start'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n      <span [class]=\"labelClasses\" [ngClass]=\"textClass\">\n        <ng-content></ng-content>\n      </span>\n      <span *ngIf=\"icon && iconPosition === 'end'\" [class]=\"iconClasses\" [ngClass]=\"textClass\">\n        <mat-icon class=\"cqa-text-[18px] cqa-leading-[18px] cqa-w-[18px] cqa-h-[18px]\">\n          {{ icon }}\n        </mat-icon>\n      </span>\n    </span>\n  </button>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-button', template: "<div id=\"cqa-ui-root\">\n  <button\n    [ngClass]=\"\n    text && icon && iconPosition === 'start' ? 'cqa-pr-[24px] cqa-pl-[16px]' :\n    text && icon && iconPosition === 'end' ? 'cqa-pl-[24px] cqa-pr-[16px]' :\n    text && !icon ? 'cqa-px-[24px]' : !text && icon ? 'cqa-px-[12px]' : 'cqa-px-[24px]'\"\n    [type]=\"type\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled\"\n    [class]=\"buttonClasses\"\n    (click)=\"onClick($event)\"\n  >\n\n    <mat-icon *ngIf=\"icon && iconPosition === 'start'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n      {{ icon }}\n    </mat-icon>\n\n    <!-- Dynamic text support -->\n    <span *ngIf=\"text\">{{text}}</span>\n\n    <ng-content *ngIf=\"!text\" ></ng-content>\n\n    <mat-icon *ngIf=\"icon && iconPosition === 'end'\" class=\"!cqa-w-[18px] !cqa-h-[18px] !cqa-text-[18px]\" [style.color]=\"iconColor\">\n      {{ icon }}\n    </mat-icon>\n\n  </button>\n</div>", styles: [] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], disabled: [{
@@ -242,8 +228,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], iconPosition: [{
                 type: Input
+            }], fullWidth: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
             }], type: [{
                 type: Input
+            }], text: [{
+                type: Input
+            }], customClass: [{
+                type: Input
             }], clicked: [{
                 type: Output
             }], onMouseEnter: [{
@@ -328,10 +322,10 @@ class SearchBarComponent {
     }
 }
 SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n    [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\"\n    (submit)=\"onSubmit($event)\"\n  >\n    <span\n      class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400 cqa-w-4 cqa-h-4\"\n      [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n      >\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-400 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-[#99999E]\"\n      style=\"font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0;\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button\n      *ngIf=\"showClear && inputValue\"\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      aria-label=\"Clear search\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n        [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n      >\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SearchBarComponent, selector: "cqa-search-bar", inputs: { placeholder: "placeholder", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n  [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n    [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\" (submit)=\"onSubmit($event)\">\n    <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400 cqa-w-4 cqa-h-4\"\n      [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n        [style.height.px]=\"16\" [style.fontSize.px]=\"16\">\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-400 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-muted\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button *ngIf=\"showClear && inputValue\" type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n      (click)=\"clear()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n        [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-search-bar', template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n    [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\"\n    (submit)=\"onSubmit($event)\"\n  >\n    <span\n      class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400 cqa-w-4 cqa-h-4\"\n      [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n      >\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-400 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-[#99999E]\"\n      style=\"font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: 0;\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button\n      *ngIf=\"showClear && inputValue\"\n      type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n      (click)=\"clear()\"\n      [disabled]=\"disabled\"\n      aria-label=\"Clear search\"\n    >\n      <mat-icon\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n        [style.width.px]=\"16\"\n        [style.height.px]=\"16\"\n        [style.fontSize.px]=\"16\"\n        [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\"\n      >\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-search-bar', template: "<div id=\"cqa-ui-root\" [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n  [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <form\n    class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n    [ngClass]=\"fullWidth ? 'cqa-w-full' : widthClasses[size]\" (submit)=\"onSubmit($event)\">\n    <span class=\"cqa-flex-none cqa-flex cqa-items-center cqa-justify-center cqa-text-gray-400 cqa-w-4 cqa-h-4\"\n      [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n        [style.height.px]=\"16\" [style.fontSize.px]=\"16\">\n        search\n      </mat-icon>\n    </span>\n\n    <input\n      type=\"text\"\n      class=\"cqa-flex-1 cqa-min-w-[180px] cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-400 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-muted\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputValue\"\n      (input)=\"onInput($event)\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"ariaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"none\"\n      spellcheck=\"false\"\n      [attr.autofocus]=\"autoFocus ? '' : null\"\n    />\n\n    <button *ngIf=\"showClear && inputValue\" type=\"button\"\n      class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n      (click)=\"clear()\" [disabled]=\"disabled\" aria-label=\"Clear search\">\n      <mat-icon class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\" [style.width.px]=\"16\"\n        [style.height.px]=\"16\" [style.fontSize.px]=\"16\" [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n        close\n      </mat-icon>\n    </button>\n  </form>\n</div>", styles: [] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], value: [{
@@ -544,10 +538,10 @@ class SegmentControlComponent {
     }
 }
 SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-[#F5F5F5] cqa-rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\"\n      [ngStyle]=\"indicatorStyle\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <button\n      *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\"\n      #segmentButton\n      type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n      [ngClass]=\"{\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-[#99999E]': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-[#C7C7C7]': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\"\n      [disabled]=\"disabled || segment.disabled\"\n      [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\"\n      (keydown)=\"onKeyDown($event, index)\"\n    >\n      <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n      {{ segment.label }}\n    </span>\n    </button>\n  </div>\n</div>\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SegmentControlComponent, selector: "cqa-segment-control", inputs: { segments: "segments", value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "segmentContainer", first: true, predicate: ["segmentContainer"], descendants: true }, { propertyName: "segmentButtons", predicate: ["segmentButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n      [ngClass]=\"{\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        {{ segment.label }}\n      </span>\n    </button>\n  </div>\n</div>", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-segment-control', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-[#F5F5F5] cqa-rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\"\n      [ngStyle]=\"indicatorStyle\"\n      aria-hidden=\"true\"\n    ></div>\n\n    <button\n      *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\"\n      #segmentButton\n      type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n      [ngClass]=\"{\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-[#99999E]': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-[#C7C7C7]': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\"\n      [disabled]=\"disabled || segment.disabled\"\n      [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\"\n      (keydown)=\"onKeyDown($event, index)\"\n    >\n      <span class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n      {{ segment.label }}\n    </span>\n    </button>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-segment-control', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <div\n    #segmentContainer\n    class=\"cqa-relative cqa-inline-flex cqa-flex-row cqa-items-start cqa-p-[3.5px] cqa-h-[31.5px] cqa-bg-surface-light cqa-rounded-[8px]\"\n    role=\"tablist\"\n    [attr.aria-disabled]=\"disabled || null\"\n  >\n    <div\n      class=\"cqa-absolute cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-pointer-events-none\"\n      [class.cqa-opacity-0]=\"!isIndicatorVisible\" [ngStyle]=\"indicatorStyle\" aria-hidden=\"true\"></div>\n\n    <button *ngFor=\"let segment of segments; index as index; trackBy: trackByValue\" #segmentButton type=\"button\"\n      role=\"tab\"\n      class=\"cqa-relative cqa-z-10 cqa-flex cqa-flex-col cqa-justify-center cqa-items-center cqa-px-[14px] cqa-py-[3.5px] cqa-h-[25px] cqa-rounded-[8px] cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-whitespace-nowrap cqa-text-center focus:cqa-outline-none focus-visible:cqa-outline-none focus-visible:cqa-ring-0 focus-visible:cqa-ring-offset-0 cqa-flex-none\"\n      [ngClass]=\"{\n        'cqa-text-white cqa-font-medium': isSelected(segment),\n        'cqa-text-muted': !isSelected(segment) && !(disabled || segment.disabled),\n        'cqa-cursor-not-allowed': disabled || segment.disabled,\n        'cqa-text-disabled': (disabled || segment.disabled) && !isSelected(segment),\n        'cqa-hover:cqa-text-black': !isSelected(segment) && !disabled && !segment.disabled\n      }\" [disabled]=\"disabled || segment.disabled\" [attr.aria-selected]=\"isSelected(segment)\"\n      [attr.tabindex]=\"!disabled && !segment.disabled ? (isSelected(segment) ? 0 : -1) : -1\"\n      (click)=\"select(segment, index)\" (keydown)=\"onKeyDown($event, index)\">\n      <span\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-[18px] cqa-font-['Inter'] cqa-font-normal cqa-text-[12px] cqa-leading-[12px] cqa-text-center cqa-align-middle\">\n        {{ segment.label }}\n      </span>\n    </button>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { segments: [{
                 type: Input
             }], value: [{
@@ -615,7 +609,7 @@ class DialogComponent {
             'cqa-rounded-2xl',
             'cqa-shadow-md',
             'cqa-border',
-            'cqa-border-[#E5E7EB]',
+            'cqa-border-border-default',
             'cqa-p-6',
             'cqa-text-left',
         ];
@@ -676,69 +670,2809 @@ class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: block;\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#111827]\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-[#4B5563]\">\n            {{ config.description }}\n          </p>\n\n          <div\n            *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\"\n          >\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-[#111827]\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button\n            *ngFor=\"let button of config.buttons\"\n            type=\"button\"\n            [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\"\n            (clicked)=\"onButtonClick(button)\"\n          >\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "type"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DialogComponent, selector: "cqa-dialog", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n            {{ config.description }}\n          </p>\n\n          <div *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" style=\"display: block;\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-[#111827]\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-[#4B5563]\">\n            {{ config.description }}\n          </p>\n\n          <div\n            *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\"\n          >\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-[#111827]\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button\n            *ngFor=\"let button of config.buttons\"\n            type=\"button\"\n            [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\"\n            (clicked)=\"onButtonClick(button)\"\n          >\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [] }]
+            args: [{ selector: 'cqa-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-flex cqa-w-full cqa-justify-center cqa-px-4 sm:cqa-px-6\">\n    <div [ngClass]=\"panelClassList\" [ngStyle]=\"panelStyles\">\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-5\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n          <h2 class=\"cqa-text-lg cqa-font-semibold cqa-text-dialog\">\n            {{ config.title }}\n          </h2>\n\n          <p *ngIf=\"config.description\" class=\"cqa-text-sm cqa-leading-6 cqa-text-dialog-secondary\">\n            {{ config.description }}\n          </p>\n\n          <div *ngIf=\"config.warning\"\n            class=\"cqa-rounded-xl cqa-border cqa-border-red-200 cqa-bg-red-50 cqa-px-4 cqa-py-3 cqa-text-sm cqa-leading-5 cqa-text-red-700\">\n            {{ config.warning }}\n          </div>\n        </div>\n\n        <div class=\"cqa-text-sm cqa-text-dialog\" [class.hidden]=\"!contentAttached\">\n          <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n        <div class=\"cqa-mt-4 cqa-flex cqa-flex-wrap cqa-gap-3\" [ngClass]=\"buttonAlignmentClass\">\n          <cqa-button *ngFor=\"let button of config.buttons\" type=\"button\" [variant]=\"buttonVariant(button)\"\n            [ngClass]=\"buttonHostClasses(button)\" (clicked)=\"onButtonClick(button)\">\n            {{ button.label }}\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
             }] } });
 
-// import { RootWrapperComponent } from './root-wrapper/root-wrapper.component';
-// import { CardComponent } from './card/card.component';
-// import { InputComponent } from './input/input.component';
-// import { IconButtonComponent } from './icon-button/icon-button.component';
-class UiKitModule {
+class DynamicCellTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
 }
-UiKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, declarations: [ButtonComponent,
-        SearchBarComponent,
-        SegmentControlComponent,
-        DialogComponent], imports: [CommonModule,
-        FormsModule,
-        MatIconModule,
-        OverlayModule,
-        PortalModule], exports: [ButtonComponent,
-        SearchBarComponent,
-        SegmentControlComponent,
-        DialogComponent] });
-UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, imports: [[
-            CommonModule,
-            FormsModule,
-            MatIconModule,
-            OverlayModule,
-            PortalModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, decorators: [{
-            type: NgModule,
+DynamicCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DynamicCellTemplateDirective, selector: "ng-template[dynamicCell]", inputs: { name: ["dynamicCell", "name"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicCellTemplateDirective, decorators: [{
+            type: Directive,
             args: [{
-                    declarations: [
-                        ButtonComponent,
-                        SearchBarComponent,
-                        SegmentControlComponent,
-                        DialogComponent,
-                        // RootWrapperComponent,
-                        // CardComponent,
-                        // InputComponent,
-                        // IconButtonComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatIconModule,
-                        OverlayModule,
-                        PortalModule
-                    ],
-                    exports: [
-                        ButtonComponent,
-                        SearchBarComponent,
-                        SegmentControlComponent,
-                        DialogComponent,
-                        // RootWrapperComponent,
-                        // CardComponent,
-                        // InputComponent,
-                        // IconButtonComponent
+                    selector: "ng-template[dynamicCell]"
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { name: [{
+                type: Input,
+                args: ["dynamicCell"]
+            }] } });
+class DynamicHeaderTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+DynamicHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DynamicHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DynamicHeaderTemplateDirective, selector: "ng-template[dynamicHeader]", inputs: { name: ["dynamicHeader", "name"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[dynamicHeader]"
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { name: [{
+                type: Input,
+                args: ["dynamicHeader"]
+            }] } });
+
+class FullTableLoaderComponent {
+    constructor() {
+        this.label = 'Loading...';
+    }
+}
+FullTableLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FullTableLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FullTableLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: { label: "label" }, ngImport: i0, template: "<div\n  class=\"table-loading-overlay cqa-absolute cqa-top-0 cqa-bottom-0 cqa-left-0 cqa-right-0 cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-z-[1000]\">\n  <div\n    class=\"blur-backdrop cqa-absolute cqa-top-0 cqa-bottom-0 cqa-left-0 cqa-right-0 cqa-bg-white/70 cqa-backdrop-blur-[4px] cqa-z-[1]\">\n  </div>\n  <div\n    class=\"loading-spinner cqa-flex cqa-flex-row cqa-items-center cqa-justify-center cqa-gap-3 cqa-text-center cqa-relative cqa-z-20 cqa-bg-white cqa-py-4 cqa-px-6 cqa-rounded-xl cqa-shadow-lg\">\n    <svg class=\"cqa-animate-spin cqa-text-primary\" width=\"32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n      viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n      </path>\n    </svg>\n    <span class=\"cqa-text-primary\">{{ label }}</span>\n  </div>\n</div>\n\n\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FullTableLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-full-table-loader', template: "<div\n  class=\"table-loading-overlay cqa-absolute cqa-top-0 cqa-bottom-0 cqa-left-0 cqa-right-0 cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-z-[1000]\">\n  <div\n    class=\"blur-backdrop cqa-absolute cqa-top-0 cqa-bottom-0 cqa-left-0 cqa-right-0 cqa-bg-white/70 cqa-backdrop-blur-[4px] cqa-z-[1]\">\n  </div>\n  <div\n    class=\"loading-spinner cqa-flex cqa-flex-row cqa-items-center cqa-justify-center cqa-gap-3 cqa-text-center cqa-relative cqa-z-20 cqa-bg-white cqa-py-4 cqa-px-6 cqa-rounded-xl cqa-shadow-lg\">\n    <svg class=\"cqa-animate-spin cqa-text-primary\" width=\"32\" height=\"32\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n      viewBox=\"0 0 24 24\">\n      <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n      <path class=\"cqa-opacity-75\" fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n      </path>\n    </svg>\n    <span class=\"cqa-text-primary\">{{ label }}</span>\n  </div>\n</div>\n\n\n", styles: [] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
+class TableDataLoaderComponent {
+    constructor() {
+        this.label = 'Loading...';
+        this.size = 24;
+    }
+}
+TableDataLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableDataLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableDataLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableDataLoaderComponent, selector: "cqa-table-data-loader", inputs: { label: "label", size: "size" }, ngImport: i0, template: "<div class=\"loading-spinner-simple cqa-py-2 cqa-flex cqa-flex-row cqa-items-center cqa-justify-center cqa-gap-3 cqa-text-center\">\n  <svg class=\"cqa-animate-spin cqa-text-primary\" [attr.width]=\"size\" [attr.height]=\"size\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n    <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n    <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n  </svg>\n  <span class=\"cqa-text-primary\">{{ label }}</span>\n  </div>\n\n\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableDataLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-table-data-loader', template: "<div class=\"loading-spinner-simple cqa-py-2 cqa-flex cqa-flex-row cqa-items-center cqa-justify-center cqa-gap-3 cqa-text-center\">\n  <svg class=\"cqa-animate-spin cqa-text-primary\" [attr.width]=\"size\" [attr.height]=\"size\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n    <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n    <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n  </svg>\n  <span class=\"cqa-text-primary\">{{ label }}</span>\n  </div>\n\n\n", styles: [] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class DynamicTableComponent {
+    constructor() {
+        this.data = [];
+        this.columns = [];
+        // Enable built-in select-all behavior for a 'checkbox' column
+        this.enableSelectAll = true;
+        // Enable simple client-side sorting when clicking sortable headers (no custom header)
+        this.enableLocalSort = true;
+        // Emit sort changes so parent can perform server-side sort if desired
+        this.sortChange = new EventEmitter();
+        this._sortDirection = null;
+    }
+    get isXs() {
+        const w = this.screenWidth || window.innerWidth;
+        return w <= 480;
+    }
+    get isSm() {
+        const w = this.screenWidth || window.innerWidth;
+        return w <= 768;
+    }
+    get isMd() {
+        const w = this.screenWidth || window.innerWidth;
+        return w <= 992;
+    }
+    get visibleColumns() {
+        const responsiveFilter = (c) => {
+            const r = c?.responsive || {};
+            if (r.xs && this.isXs)
+                return false;
+            if (r.sm && this.isSm)
+                return false;
+            if (r.md && this.isMd)
+                return false;
+            return true;
+        };
+        return (this.columns || []).filter(c => c.isShow !== false).filter(responsiveFilter);
+    }
+    getHeaderTemplate(colId) {
+        const tpl = this.headerTemplates?.find(t => t.name === colId);
+        return tpl ? tpl.template : null;
+    }
+    getCellTemplate(colId) {
+        const tpl = this.cellTemplates?.find(t => t.name === colId);
+        return tpl ? tpl.template : null;
+    }
+    getCellValue(row, path) {
+        if (!row || !path)
+            return "";
+        const parts = path.split(".");
+        let current = row;
+        for (const part of parts) {
+            if (current == null)
+                return "";
+            current = current[part];
+        }
+        return current ?? "";
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    // Compute grid-template-columns string from column config
+    get computedGridTemplate() {
+        if (this.gridTemplateColumns) {
+            return this.gridTemplateColumns;
+        }
+        const cols = this.visibleColumns;
+        if (!cols?.length)
+            return '';
+        const fixedPx = cols.reduce((sum, c) => sum + (c.fixedPx || 0), 0);
+        const dynamicCols = cols.filter(c => !c.fixedPx);
+        const totalWeight = dynamicCols.reduce((sum, c) => sum + (c.weight || 1), 0) || 1;
+        const parts = cols.map(c => {
+            if (c.fixedPx && c.fixedPx > 0) {
+                return `${c.fixedPx}px`;
+            }
+            const share = (c.weight || 1) / totalWeight;
+            return `calc((100% - ${fixedPx}px) * ${share.toFixed(4)})`;
+        });
+        return parts.join(' ');
+    }
+    // Compute per-column widths for use with <colgroup>
+    get computedColumnWidths() {
+        const cols = this.visibleColumns;
+        if (!cols?.length)
+            return [];
+        const fixedPx = cols.reduce((sum, c) => sum + (c.fixedPx || 0), 0);
+        const dynamicCols = cols.filter(c => !c.fixedPx);
+        const totalWeight = dynamicCols.reduce((sum, c) => sum + (c.weight || 1), 0) || 1;
+        return cols.map(c => {
+            if (c.fixedPx && c.fixedPx > 0) {
+                return `${c.fixedPx}px`;
+            }
+            const share = (c.weight || 1) / totalWeight;
+            return `calc((100% - ${fixedPx}px) * ${share.toFixed(4)})`;
+        });
+    }
+    // Selection helpers
+    get allSelected() {
+        const rows = this.data || [];
+        if (!rows.length)
+            return false;
+        return rows.every(r => !!r?.isSelected);
+    }
+    get someSelected() {
+        const rows = this.data || [];
+        if (!rows.length)
+            return false;
+        const anySelected = rows.some(r => !!r?.isSelected);
+        return anySelected && !this.allSelected;
+    }
+    onSelectAllChange(event) {
+        const target = event.target;
+        this.toggleSelectAll(target.checked);
+    }
+    onRowSelectChange(event, row) {
+        const target = event.target;
+        row.isSelected = target.checked;
+    }
+    toggleSelectAll(checked) {
+        const rows = this.data || [];
+        for (const row of rows) {
+            if (row) {
+                row.isSelected = checked;
+            }
+        }
+    }
+    get computedData() {
+        const source = this.data || [];
+        if (!this.enableLocalSort || !this._sortActive || !this._sortDirection) {
+            return source;
+        }
+        const col = this.visibleColumns.find(c => c.fieldId === this._sortActive);
+        if (!col || !col.fieldValue) {
+            return source;
+        }
+        const dir = this._sortDirection === 'asc' ? 1 : -1;
+        const fieldPath = col.fieldValue;
+        const out = [...source];
+        out.sort((a, b) => dir * this.compareValues(this.getCellValue(a, fieldPath), this.getCellValue(b, fieldPath)));
+        return out;
+    }
+    // Computed loading flags to support backward compatibility
+    get showTableLoading() {
+        return this.isTableLoading ?? false;
+    }
+    get showTableDataLoading() {
+        return this.isTableDataLoading ?? false;
+    }
+    // True when table has no data and is not currently loading — used to show an empty state
+    get isEmpty() {
+        const anyLoading = this.showTableLoading || this.showTableDataLoading;
+        return !anyLoading && (!(this.data && this.data.length) || this.data.length === 0);
+    }
+    isSortedAsc(colId) {
+        return this._sortActive === colId && this._sortDirection === 'asc';
+    }
+    isSortedDesc(colId) {
+        return this._sortActive === colId && this._sortDirection === 'desc';
+    }
+    toggleSort(col) {
+        if (!col?.sortable)
+            return;
+        const colId = col.fieldId;
+        if (this._sortActive !== colId) {
+            this._sortActive = colId;
+            this._sortDirection = 'asc';
+        }
+        else {
+            // cycle asc -> desc -> null -> asc
+            if (this._sortDirection === 'asc')
+                this._sortDirection = 'desc';
+            else if (this._sortDirection === 'desc')
+                this._sortDirection = null;
+            else
+                this._sortDirection = 'asc';
+        }
+        this.sortChange.emit({ fieldId: this._sortActive, fieldValue: col.fieldValue, direction: this._sortDirection });
+    }
+    compareValues(a, b) {
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return 1; // nulls last in asc (handled by dir multiplier)
+        if (b == null)
+            return -1;
+        const numA = typeof a === 'number' ? a : Number(a);
+        const numB = typeof b === 'number' ? b : Number(b);
+        const aIsNum = !isNaN(numA) && a !== '' && a !== null && a !== false;
+        const bIsNum = !isNaN(numB) && b !== '' && b !== null && b !== false;
+        if (aIsNum && bIsNum) {
+            if (numA < numB)
+                return -1;
+            if (numA > numB)
+                return 1;
+            return 0;
+        }
+        // Date detection: attempt parse when both values are strings and parseable
+        if (typeof a === 'string' && typeof b === 'string') {
+            const tsA = Date.parse(a);
+            const tsB = Date.parse(b);
+            if (!isNaN(tsA) && !isNaN(tsB)) {
+                if (tsA < tsB)
+                    return -1;
+                if (tsA > tsB)
+                    return 1;
+                return 0;
+            }
+            // localeCompare, case-insensitive
+            return a.localeCompare(b, undefined, { sensitivity: 'base', numeric: true });
+        }
+        // Fallback to string comparison
+        const sa = String(a);
+        const sb = String(b);
+        return sa.localeCompare(sb, undefined, { sensitivity: 'base', numeric: true });
+    }
+}
+DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-relative\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full\" [class.is-loading]=\"true\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-left cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"col.fieldId + '-cell'\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" [ngClass]=\"col.fieldId + '-cell'\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\n                    [attr.for]=\"'row-checkbox-' + rowIndex\">\n                  </label>\n                </div>\n              </ng-container>\n              <ng-template #regularCell>\n                <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n                </ng-container>\n                <ng-template #defaultCell>\n                  <span class=\"cqa-text-xs cqa-text-[#374151]\">{{ getCellValue(row, col.fieldValue) }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>", components: [{ type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: ["label"] }, { type: TableDataLoaderComponent, selector: "cqa-table-data-loader", inputs: ["label", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "app-dynamic-table", template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-relative\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full\" [class.is-loading]=\"true\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-left cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"col.fieldId + '-cell'\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" [ngClass]=\"col.fieldId + '-cell'\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\n                    [attr.for]=\"'row-checkbox-' + rowIndex\">\n                  </label>\n                </div>\n              </ng-container>\n              <ng-template #regularCell>\n                <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n                </ng-container>\n                <ng-template #defaultCell>\n                  <span class=\"cqa-text-xs cqa-text-[#374151]\">{{ getCellValue(row, col.fieldValue) }}</span>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], emptyState: [{
+                type: Input
+            }], gridTemplateColumns: [{
+                type: Input
+            }], screenWidth: [{
+                type: Input
+            }], enableSelectAll: [{
+                type: Input
+            }], enableLocalSort: [{
+                type: Input
+            }], isTableLoading: [{
+                type: Input
+            }], isTableDataLoading: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [DynamicCellTemplateDirective]
+            }], headerTemplates: [{
+                type: ContentChildren,
+                args: [DynamicHeaderTemplateDirective]
+            }], emptyTableTpl: [{
+                type: ContentChild,
+                args: ['emptyTableTpl', { read: TemplateRef }]
+            }] } });
+
+class InlineSortComponent {
+    get getToolTip() {
+        if (this.ascending == true)
+            return this.heading?.includes('created_at') ? 'message.common.sort_by.old' : 'message.common.sort_by.ascending';
+        else if (this.ascending == false)
+            return this.heading?.includes('created_at') ? 'message.common.sort_by.new' : 'message.common.sort_by.descending';
+        else
+            return 'message.common.sort';
+    }
+    ngOnChanges() {
+        if (this.ascending != undefined) {
+            this.tooltipDiv?.hide();
+            this.tooltipDiv?.show(200);
+        }
+    }
+}
+InlineSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InlineSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InlineSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InlineSortComponent, selector: "app-inline-sort, cqa-inline-sort", inputs: { ascending: "ascending", heading: "heading" }, viewQueries: [{ propertyName: "tooltipDiv", first: true, predicate: ["tooltipDiv"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div #tooltipDiv="matTooltip"
+         class="w-fit-content sort-header"
+         [matTooltip]="getToolTip"
+         [matTooltipPosition]="'after'">
+      <span>{{ heading }}</span>
+      <span *ngIf="ascending" class='fa-down-sort'></span>
+      <span *ngIf="ascending==false" class='fa-up-sort'></span>
+      <span *ngIf="ascending==undefined" class='fa-down-sort opaque-50'></span>
+    </div>
+  `, isInline: true, directives: [{ type: i1$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InlineSortComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-inline-sort, cqa-inline-sort',
+                    template: `
+    <div #tooltipDiv="matTooltip"
+         class="w-fit-content sort-header"
+         [matTooltip]="getToolTip"
+         [matTooltipPosition]="'after'">
+      <span>{{ heading }}</span>
+      <span *ngIf="ascending" class='fa-down-sort'></span>
+      <span *ngIf="ascending==false" class='fa-up-sort'></span>
+      <span *ngIf="ascending==undefined" class='fa-down-sort opaque-50'></span>
+    </div>
+  `,
+                    styles: []
+                }]
+        }], propDecorators: { ascending: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], tooltipDiv: [{
+                type: ViewChild,
+                args: ['tooltipDiv']
+            }] } });
+
+class PaginationComponent {
+    constructor() {
+        this.totalElements = 0;
+        this.pageIndex = 0; // 0-based
+        this.pageSize = 10;
+        this.pageItemCount = 0; // number of items currently rendered on this page
+        this.pageSizeOptions = [10, 20, 40, 60, 80];
+        this.pageIndexChange = new EventEmitter();
+        this.pageSizeChange = new EventEmitter();
+        this.paginate = new EventEmitter();
+        // Local UI state for custom page-size dropdown
+        this.pageSizeOpen = false;
+        this.pagesOption = {
+            placeholder: 'Choose page',
+            disabled: false,
+            multiple: false,
+            searchable: false,
+            options: [
+                { id: 1, name: '10' },
+                { id: 2, name: '20' },
+                { id: 3, name: '30' },
+                { id: 4, name: '40' },
+            ],
+        };
+    }
+    get computedTotalPages() {
+        if (this.totalPages != null && this.totalPages > 0) {
+            return this.totalPages;
+        }
+        if (this.pageSize > 0 && this.totalElements >= 0) {
+            return Math.max(1, Math.ceil(this.totalElements / this.pageSize));
+        }
+        return 0;
+    }
+    getStartItem() {
+        if (!this.totalElements) {
+            return 0;
+        }
+        return this.pageIndex * this.pageSize + 1;
+    }
+    getEndItem() {
+        const end = this.getStartItem() + this.pageItemCount - 1;
+        if (end < 0) {
+            return 0;
+        }
+        return Math.min(end, this.totalElements);
+    }
+    togglePageSizeMenu() {
+        this.pageSizeOpen = !this.pageSizeOpen;
+    }
+    selectPageSize(size) {
+        if (this.pageSize !== size) {
+            this.pageSize = size;
+            this.onPageSizeChange();
+        }
+        this.pageSizeOpen = false;
+    }
+    onPageSizeChange() {
+        this.pageIndex = 0;
+        this.pageSizeChange.emit(this.pageSize);
+        this.pageIndexChange.emit(this.pageIndex);
+        this.paginate.emit({ pageIndex: this.pageIndex, pageSize: this.pageSize });
+    }
+    goToPage(index) {
+        const lastIndex = Math.max(0, this.computedTotalPages - 1);
+        const next = Math.max(0, Math.min(index, lastIndex));
+        if (next === this.pageIndex) {
+            return;
+        }
+        this.pageIndex = next;
+        this.pageIndexChange.emit(this.pageIndex);
+        this.paginate.emit({ pageIndex: this.pageIndex, pageSize: this.pageSize });
+    }
+}
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: PaginationComponent, selector: "cqa-pagination", inputs: { totalElements: "totalElements", totalPages: "totalPages", pageIndex: "pageIndex", pageSize: "pageSize", pageItemCount: "pageItemCount", pageSizeOptions: "pageSizeOptions" }, outputs: { pageIndexChange: "pageIndexChange", pageSizeChange: "pageSizeChange", paginate: "paginate" }, ngImport: i0, template: "<!-- Bottom Pagination -->\n<div id=\"cqa-ui-root\" >\n  <div class=\"table-footer-pagination cqa-text-grey-300 cqa-text-[12.3px] cqa-leading-[17.5px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-bg-surface-default cqa-px-[21px] cqa-py-[15px]\" *ngIf=\"pageItemCount && totalElements\">\n    <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n      <span class=\"rows-label\">Rows per page</span>\n      <div class=\"cqa-relative\">\n        <!-- Custom Select Trigger -->\n        <button\n          type=\"button\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-[19px] cqa-bg-white cqa-text-black-100 cqa-rounded-[5px] cqa-px-[11.5px] cqa-py-[6.75px]\"\n          (click)=\"togglePageSizeMenu()\"\n          [attr.aria-expanded]=\"pageSizeOpen\"\n          aria-haspopup=\"listbox\"\n        >\n          {{ pageSize }}\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n        </button>\n        <!-- Dropdown Menu -->\n        <div\n          *ngIf=\"pageSizeOpen\"\n          class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n          role=\"listbox\"\n          [attr.aria-activedescendant]=\"'pagesize-' + pageSize\"\n        >\n          <button\n            *ngFor=\"let size of pageSizeOptions\"\n            type=\"button\"\n            class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n            [attr.id]=\"'pagesize-' + size\"\n            role=\"option\"\n            [attr.aria-selected]=\"pageSize === size\"\n            (click)=\"selectPageSize(size)\"\n          >\n            {{ size }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n      <div class=\"pagination-range\">\n        {{ getStartItem() }}&ndash;{{ getEndItem() }} of {{ totalElements }}\n      </div>\n      <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n        <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex === 0\" (click)=\"goToPage(pageIndex - 1)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#838384\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n        <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex >= computedTotalPages - 1\" (click)=\"goToPage(pageIndex + 1)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#838384\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-pagination', template: "<!-- Bottom Pagination -->\n<div id=\"cqa-ui-root\" >\n  <div class=\"table-footer-pagination cqa-text-grey-300 cqa-text-[12.3px] cqa-leading-[17.5px] cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-bg-surface-default cqa-px-[21px] cqa-py-[15px]\" *ngIf=\"pageItemCount && totalElements\">\n    <div class=\"pagination-info cqa-flex cqa-items-center cqa-gap-[7px] cqa-relative\">\n      <span class=\"rows-label\">Rows per page</span>\n      <div class=\"cqa-relative\">\n        <!-- Custom Select Trigger -->\n        <button\n          type=\"button\"\n          class=\"cqa-inline-flex cqa-items-center cqa-gap-[19px] cqa-bg-white cqa-text-black-100 cqa-rounded-[5px] cqa-px-[11.5px] cqa-py-[6.75px]\"\n          (click)=\"togglePageSizeMenu()\"\n          [attr.aria-expanded]=\"pageSizeOpen\"\n          aria-haspopup=\"listbox\"\n        >\n          {{ pageSize }}\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\"0.5\"><path d=\"M3.5 5.25L7 8.75L10.5 5.25\" stroke=\"#717182\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>\n        </button>\n        <!-- Dropdown Menu -->\n        <div\n          *ngIf=\"pageSizeOpen\"\n          class=\"cqa-absolute cqa-z-[100] cqa-bottom-[calc(100%+8px)] cqa-left-0 cqa-w-[75px] cqa-max-h-[170px] cqa-overflow-auto cqa-rounded-lg cqa-border cqa-border-[#E5E7EB] cqa-bg-white cqa-shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)] cqa-p-[5px]\"\n          role=\"listbox\"\n          [attr.aria-activedescendant]=\"'pagesize-' + pageSize\"\n        >\n          <button\n            *ngFor=\"let size of pageSizeOptions\"\n            type=\"button\"\n            class=\"cqa-w-full cqa-px-2 cqa-py-[6px] hover:cqa-bg-[#F7F8FA] cqa-text-left cqa-rounded-md cqa-text-black-100\"\n            [attr.id]=\"'pagesize-' + size\"\n            role=\"option\"\n            [attr.aria-selected]=\"pageSize === size\"\n            (click)=\"selectPageSize(size)\"\n          >\n            {{ size }}\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"pagination-right cqa-flex cqa-items-center cqa-gap-[21px]\">\n      <div class=\"pagination-range\">\n        {{ getStartItem() }}&ndash;{{ getEndItem() }} of {{ totalElements }}\n      </div>\n      <div class=\"pagination-controls cqa-flex cqa-items-stretch cqa-gap-[3.5px]\">\n        <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex === 0\" (click)=\"goToPage(pageIndex - 1)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.75 10.5L5.25 7L8.75 3.5\" stroke=\"#838384\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n        <button class=\"pagination-btn cqa-w-[28px] cqa-h-[28px] cqa-min-w-[28px] cqa-rounded-[5px] cqa-border cqa-border-[#E5E7EB] cqa-bg-[#F7F8FA] cqa-flex cqa-items-center cqa-justify-center\" [disabled]=\"pageIndex >= computedTotalPages - 1\" (click)=\"goToPage(pageIndex + 1)\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.25 10.5L8.75 7L5.25 3.5\" stroke=\"#838384\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { totalElements: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageItemCount: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageIndexChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], paginate: [{
+                type: Output
+            }] } });
+
+class ActionMenuButtonComponent {
+    constructor() {
+        this.view = new EventEmitter();
+        this.edit = new EventEmitter();
+        this.delete = new EventEmitter();
+    }
+    navigateToTestCase(id) {
+        if (id === undefined || id === null)
+            return;
+        this.view.emit(id);
+    }
+    editTestCase(row) {
+        if (!row)
+            return;
+        this.edit.emit(row);
+    }
+    deleteTestCase(row) {
+        if (!row)
+            return;
+        this.delete.emit(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" }, ngImport: i0, template: "<div id=\"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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ActionMenuButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-action-menu-button', template: "<div id=\"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: [] }]
+        }], propDecorators: { row: [{
+                type: Input
+            }], view: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }] } });
+
+class OtherButtonComponent {
+    constructor() {
+        // Single button API (backwards compatible)
+        this.icon = '';
+        this.label = '';
+        this.classes = '';
+        this.colorClass = '';
+        this.buttonClass = '';
+        this.disabled = false;
+        this.type = 'button';
+        // Group buttons API (new)
+        this.buttons = null;
+        /** Extra classes for the button group container */
+        this.groupClass = '';
+        /** Gap utility class; defaults to Tailwind spacing applied in template */
+        this.gapClass = 'cqa-gap-2';
+        /** When true, allows wrapping to next line on smaller screens */
+        this.wrap = true;
+        this.clicked = new EventEmitter();
+        /** Emits the config of the clicked button in a group, along with the event */
+        this.buttonClick = new EventEmitter();
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    onItemClick(event, item) {
+        if (item?.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.buttonClick.emit({ event, item });
+    }
+}
+OtherButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: OtherButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OtherButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: OtherButtonComponent, selector: "cqa-other-button", inputs: { icon: "icon", label: "label", classes: "classes", colorClass: "colorClass", buttonClass: "buttonClass", disabled: "disabled", type: "type", buttons: "buttons", groupClass: "groupClass", gapClass: "gapClass", wrap: "wrap" }, outputs: { clicked: "clicked", buttonClick: "buttonClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" >\n  <!-- Group rendering if buttons are provided -->\n  <ng-container *ngIf=\"buttons?.length; else singleButton\">\n    <div class=\"cqa-inline-flex cqa-items-center\" [ngClass]=\"[wrap ? 'cqa-flex-wrap' : '', gapClass, groupClass]\">\n      <button *ngFor=\"let b of buttons\"\n        [type]=\"b.type || 'button'\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n        [ngClass]=\"[b.classes || classes, buttonClass, b.colorClass || colorClass]\"\n        [disabled]=\"b.disabled\"\n        (click)=\"onItemClick($event, b)\">\n        <mat-icon *ngIf=\"b.icon || icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ b.icon || icon }}</mat-icon>\n        <span>{{ b.label }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <!-- Single button (backwards compatible) -->\n  <ng-template #singleButton>\n    <button [type]=\"type\"\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n      [ngClass]=\"[classes, buttonClass, colorClass]\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\n      <mat-icon *ngIf=\"icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ icon }}</mat-icon>\n      <span>{{ label }}</span>\n    </button>\n  </ng-template>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: OtherButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-other-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\" >\n  <!-- Group rendering if buttons are provided -->\n  <ng-container *ngIf=\"buttons?.length; else singleButton\">\n    <div class=\"cqa-inline-flex cqa-items-center\" [ngClass]=\"[wrap ? 'cqa-flex-wrap' : '', gapClass, groupClass]\">\n      <button *ngFor=\"let b of buttons\"\n        [type]=\"b.type || 'button'\"\n        class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n        [ngClass]=\"[b.classes || classes, buttonClass, b.colorClass || colorClass]\"\n        [disabled]=\"b.disabled\"\n        (click)=\"onItemClick($event, b)\">\n        <mat-icon *ngIf=\"b.icon || icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ b.icon || icon }}</mat-icon>\n        <span>{{ b.label }}</span>\n      </button>\n    </div>\n  </ng-container>\n\n  <!-- Single button (backwards compatible) -->\n  <ng-template #singleButton>\n    <button [type]=\"type\"\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-[5.75px] cqa-px-[11.5px] cqa-rounded-[5px] cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium cqa-border\"\n      [ngClass]=\"[classes, buttonClass, colorClass]\" [disabled]=\"disabled\" (click)=\"onClick($event)\">\n      <mat-icon *ngIf=\"icon\" class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ icon }}</mat-icon>\n      <span>{{ label }}</span>\n    </button>\n  </ng-template>\n</div>", styles: [] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], classes: [{
+                type: Input
+            }], colorClass: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], groupClass: [{
+                type: Input
+            }], gapClass: [{
+                type: Input
+            }], wrap: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class DynamicSelectFieldComponent {
+    constructor() {
+        // Must be public for template access in Angular's strict template checking mode
+        this.searchTextByKey = {};
+    }
+    ngOnInit() {
+        if (!this.config || !this.config.key) {
+            throw new Error('cqa-dynamic-select: input "config.key" is required.');
+        }
+    }
+    ngOnChanges(changes) {
+        if ('config' in changes) {
+            // When config changes (including toggling multiple), ensure control value shape matches
+            this.syncControlValueForMultipleMode();
+        }
+    }
+    get panelClass() {
+        return `ctc-select-panel ${this.isMultiple ? 'multiple' : ''}`.trim();
+    }
+    get isMultiple() {
+        return this.toBoolean(this.config?.multiple);
+    }
+    get isDisabled() {
+        return this.toBoolean(this.config?.disabled);
+    }
+    toBoolean(value) {
+        if (typeof value === 'string') {
+            const v = value.trim().toLowerCase();
+            if (v === 'true' || v === '1')
+                return true;
+            if (v === 'false' || v === '0' || v === '')
+                return false;
+            return true; // any other non-empty string treated as truthy
+        }
+        if (typeof value === 'number') {
+            return value !== 0;
+        }
+        return !!value;
+    }
+    syncControlValueForMultipleMode() {
+        const key = this.config?.key;
+        if (!key || !this.form)
+            return;
+        const control = this.form.get(key);
+        if (!control)
+            return;
+        const currentValue = control.value;
+        if (this.isMultiple) {
+            if (currentValue == null)
+                return;
+            if (Array.isArray(currentValue))
+                return;
+            control.setValue([currentValue], { emitEvent: false });
+        }
+        else {
+            if (!Array.isArray(currentValue))
+                return;
+            control.setValue(currentValue.length ? currentValue[0] : null, { emitEvent: false });
+        }
+    }
+    onSelectOpenedChange(opened, _select) {
+        if (!opened) {
+            // Reset search text on close so the next open shows full list
+            if (this.config?.key) {
+                this.searchTextByKey[this.config.key] = '';
+            }
+            // Ensure any previous custom listeners are cleared (legacy compatibility)
+            if (this.outsideCleanup) {
+                this.outsideCleanup();
+                this.outsideCleanup = undefined;
+            }
+            return;
+        }
+        // Focus the search box if enabled
+        if (this.config?.searchable) {
+            setTimeout(() => {
+                const input = document.querySelector('.ts-select-search-input');
+                input?.focus();
+            }, 0);
+        }
+    }
+    onSearch(key, value) {
+        this.searchTextByKey[key] = value ?? '';
+    }
+    filteredOptions(c) {
+        const t = (this.searchTextByKey[c.key] || '').toLowerCase().trim();
+        if (!t)
+            return c.options || [];
+        return (c.options || []).filter((opt) => {
+            const text = String(opt.name ?? opt.label ?? opt.value ?? '').toLowerCase();
+            return text.includes(t);
+        });
+    }
+    // Close when an option is selected if requested. Always close for single-select.
+    onOptionSelected(select) {
+        // Let Angular Material auto-close for single-select.
+        // For multi-select, close only if explicitly requested.
+        const shouldClose = this.isMultiple ? !!this.config?.closeOnSelect : false;
+        if (shouldClose) {
+            try {
+                select.close();
+            }
+            catch { }
+        }
+        // If searchable, clear the search after selection so reopening works predictably
+        if (this.config?.searchable && this.config?.key) {
+            this.searchTextByKey[this.config.key] = '';
+        }
+    }
+    handleDocumentClick(event) {
+        // Close when clicking outside of the trigger and outside of the open panel
+        if (!this.selectRef?.panelOpen) {
+            return;
+        }
+        const target = event.target;
+        if (!target)
+            return;
+        // If click is inside the component host, ignore
+        if (this.hostEl?.nativeElement && this.hostEl.nativeElement.contains(target)) {
+            return;
+        }
+        // If click is inside any open mat-select panel, ignore
+        const panelEls = Array.from(document.querySelectorAll('.mat-select-panel'));
+        const clickInsidePanel = panelEls.some((el) => el.contains(target));
+        if (clickInsidePanel) {
+            return;
+        }
+        try {
+            this.selectRef.close();
+        }
+        catch { }
+    }
+}
+DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"config.placeholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onOptionSelected(selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n\n        <mat-option *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\"\n          [textContent]=\"opt.name ?? opt.label ?? opt.value\">\n          {{ opt.name ?? opt.label ?? opt.value }}\n        </mat-option>\n      </mat-select>\n\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"config.placeholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onOptionSelected(selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n\n        <mat-option *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\"\n          [textContent]=\"opt.name ?? opt.label ?? opt.value\">\n          {{ opt.name ?? opt.label ?? opt.value }}\n        </mat-option>\n      </mat-select>\n\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", styles: [] }]
+        }], propDecorators: { form: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], selectRef: [{
+                type: ViewChild,
+                args: ['selectRef', { static: false }]
+            }], hostEl: [{
+                type: ViewChild,
+                args: ['host', { static: false, read: ElementRef }]
+            }], handleDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class DynamicFilterComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.config = [];
+        this.model = {};
+        this.showFilterPanel = true;
+        this.filtersApplied = new EventEmitter();
+        this.filtersChanged = new EventEmitter();
+        this.resetAction = new EventEmitter();
+        this.form = this.fb.group({});
+        this.maxDate = new Date();
+        this.searchTextByKey = {};
+        this.selectOutsideCleanup = new Map();
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] || changes['model']) {
+            this.buildForm();
+        }
+    }
+    onDateChange(event, key) {
+        const formGroup = this.getDateGroup(key);
+        const start = formGroup.get('start')?.value;
+        const end = formGroup.get('end')?.value;
+        // When both dates are selected, auto-apply
+        // if (start && end) {
+        //   this.applyDateRange(key, { start, end });
+        // }
+    }
+    buildForm() {
+        const ctrls = {};
+        (this.config || []).forEach(c => {
+            if (c.hidden)
+                return;
+            if (c.type === 'date-range') {
+                ctrls[c.key] = this.fb.group({ start: new FormControl(), end: new FormControl() });
+            }
+            else {
+                const initial = this.model?.[c.key];
+                if (c.multiple) {
+                    const value = Array.isArray(initial) ? initial : (initial != null ? [initial] : []);
+                    ctrls[c.key] = new FormControl(value);
+                }
+                else {
+                    ctrls[c.key] = new FormControl(Array.isArray(initial) ? (initial.length ? initial[0] : undefined) : initial);
+                }
+            }
+        });
+        this.form = this.fb.group(ctrls);
+        this.form.valueChanges.subscribe(() => this.filtersChanged.emit(this.serialize()));
+    }
+    onSelectOpenedChange(opened, select) {
+        if (opened) {
+            setTimeout(() => {
+                const onDocDown = (e) => {
+                    const panel = document.querySelector('.cdk-overlay-pane .mat-select-panel');
+                    const target = e.target;
+                    const originEl = select?._elementRef?.nativeElement || null;
+                    const insidePanel = !!(panel && target && panel.contains(target));
+                    const insideOrigin = !!(originEl && target && originEl.contains(target));
+                    if (!insidePanel && !insideOrigin) {
+                        select.close();
+                    }
+                };
+                document.addEventListener('mousedown', onDocDown, true);
+                this.selectOutsideCleanup.set(select, () => document.removeEventListener('mousedown', onDocDown, true));
+            }, 0);
+        }
+        else {
+            const cleanup = this.selectOutsideCleanup.get(select);
+            if (cleanup)
+                cleanup();
+            this.selectOutsideCleanup.delete(select);
+        }
+    }
+    onSearch(key, text) {
+        this.searchTextByKey[key] = (text || '').toLowerCase();
+    }
+    filteredOptions(item) {
+        const options = item?.options || [];
+        const q = (this.searchTextByKey[item.key] || '').trim();
+        if (!q)
+            return options;
+        return options.filter(opt => {
+            const name = (opt.name ?? opt.label ?? String(opt.value ?? '')).toLowerCase();
+            return name.includes(q);
+        });
+    }
+    getDateGroup(key) {
+        return this.form.get(key);
+    }
+    getSelectConfig(item) {
+        return {
+            key: item.key,
+            label: item.label,
+            placeholder: item.placeholder,
+            disabled: item.disabled,
+            multiple: item.multiple,
+            searchable: item.searchable,
+            options: item.options || []
+        };
+    }
+    apply() {
+        this.filtersApplied.emit(this.serialize());
+    }
+    reset() {
+        Object.keys(this.form.controls).forEach(key => {
+            const ctrl = this.form.get(key);
+            if (ctrl instanceof FormGroup) {
+                ctrl.get('start')?.setValue(undefined);
+                ctrl.get('end')?.setValue(undefined);
+            }
+            else {
+                ctrl?.setValue(undefined);
+            }
+        });
+        this.resetAction.emit();
+        this.filtersChanged.emit(this.serialize());
+    }
+    serialize() {
+        const result = {};
+        (this.config || []).forEach(c => {
+            const ctrl = this.form.get(c.key);
+            if (!ctrl)
+                return;
+            let val = ctrl instanceof FormGroup ? ctrl.getRawValue() : ctrl.value;
+            if (c.type === 'date-range') {
+                const start = val?.start;
+                const end = val?.end;
+                if (start || end)
+                    result[c.key] = { start, end };
+            }
+            else {
+                if (val !== undefined && val !== null && (Array.isArray(val) ? val.length > 0 : val !== '')) {
+                    result[c.key] = val;
+                }
+            }
+        });
+        return result;
+    }
+    // Mat date range picker overlay preset helpers
+    applyPresetToGroup(key, presetKey) {
+        const dateGroup = this.getDateGroup(key);
+        if (!dateGroup)
+            return;
+        const { start, end } = this.getPresetDates(presetKey);
+        dateGroup.patchValue({ start, end });
+        this.filtersChanged.emit(this.serialize());
+    }
+    getPresetDates(presetKey) {
+        const today = new Date();
+        const clampToEndOfToday = (d) => { const nd = new Date(d); nd.setHours(23, 59, 59, 999); return nd; };
+        switch (presetKey) {
+            case 'today':
+                return { start: today, end: today };
+            case 'last7days': {
+                const start = new Date();
+                start.setDate(start.getDate() - 6);
+                return { start, end: today };
+            }
+            case 'last30days': {
+                const start = new Date();
+                start.setDate(start.getDate() - 29);
+                return { start, end: today };
+            }
+            case 'last90days': {
+                const start = new Date();
+                start.setDate(start.getDate() - 89);
+                return { start, end: today };
+            }
+            case 'thismonth': {
+                const start = new Date(today.getFullYear(), today.getMonth(), 1);
+                return { start, end: today };
+            }
+            case 'lastmonth': {
+                const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+                const end = new Date(today.getFullYear(), today.getMonth(), 0);
+                return { start, end: clampToEndOfToday(end) };
+            }
+        }
+    }
+    getDateValidationError(key) {
+        const dateGroup = this.getDateGroup(key);
+        if (!dateGroup)
+            return null;
+        const startCtrl = dateGroup.controls['start'];
+        const endCtrl = dateGroup.controls['end'];
+        const startVal = startCtrl?.value;
+        const endVal = endCtrl?.value;
+        const startParseErr = startCtrl?.errors?.['matDatepickerParse']?.text;
+        const endParseErr = endCtrl?.errors?.['matDatepickerParse']?.text;
+        if (!startVal && !endVal && !startParseErr && !endParseErr)
+            return null;
+        if (startParseErr)
+            return `Invalid start date format`;
+        if (endParseErr)
+            return `Invalid end date format`;
+        if (startVal && !endVal)
+            return `Please select an end date`;
+        if (!startVal && endVal)
+            return `Please select a start date`;
+        if (dateGroup.hasError('matStartDateInvalid'))
+            return `Start date must be before end date`;
+        if (dateGroup.hasError('matEndDateInvalid'))
+            return `End date must be after start date`;
+        if (dateGroup.invalid) {
+            const config = this.config?.find(c => c.key === key);
+            return config ? `${config.label} is invalid` : 'Date range is invalid';
+        }
+        return null;
+    }
+}
+DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\">\n    <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n      (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n      <ng-container *ngFor=\"let c of config\">\n        <ng-container *ngIf=\"!c.hidden\">\n          <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Select -->\n            <ng-container *ngIf=\"c.type === 'select'\">\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n            </ng-container>\n\n            <!-- Date Range --> \n            <ng-container *ngIf=\"c.type === 'date-range'\">\n              <label\n                class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n                c.label }}</label>\n              <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n                <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n                  <input matStartDate formControlName=\"start\" placeholder=\"Start date\" [max]=\"maxDate\" required\n                    [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                  <input matEndDate formControlName=\"end\" placeholder=\"End date\" [max]=\"maxDate\" required\n                    [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                </mat-date-range-input>\n                <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n                  [panelClass]=\"'ctc-date-range-panel'\">\n                  <mat-datepicker-actions>\n                    <div class=\"ctc-date-presets\">\n                      <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n                      <div class=\"btn-group\">\n                        <button type=\"button\" class=\"preset-btn today\"\n                          (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n                        <button type=\"button\" class=\"preset-btn last7days\"\n                          (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n                        <button type=\"button\" class=\"preset-btn last30days\"\n                          (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n                        <button type=\"button\" class=\"preset-btn last90days\"\n                          (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n                        <button type=\"button\" class=\"preset-btn thismonth\"\n                          (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n                        <button type=\"button\" class=\"preset-btn lastmonth\"\n                          (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n                      </div>\n                    </div>\n                    <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n                    <button\n                      class=\"cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n                      mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n                  </mat-datepicker-actions>\n                </mat-date-range-picker>\n                <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" />\n                    <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" />\n                    <path\n                      d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n                      stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" />\n                  </svg>\n                </div>\n              </mat-form-field>\n              <!-- Specific validation messages -->\n              <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n                {{ getDateValidationError(c.key) }}\n              </mat-error>\n\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </form>\n\n    <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n      <button type=\"button\"\n        class=\"cqa-text-[13.33px] cqa-leading-[1] cqa-flex cqa-flex-row cqa-justify-center cqa-items-center cqa-px-[11px] cqa-py-[1px] cqa-gap-[14px] cqa-h-8 cqa-border cqa-border-[#0B0B0C] cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-rounded-lg cqa-text-[#0B0B0C]\"\n        (click)=\"reset()\">Reset</button>\n      <button type=\"button\"\n        class=\"cqa-text-[13.33px] cqa-leading-[1] cqa-flex cqa-flex-row cqa-justify-center cqa-items-center cqa-px-[11px] cqa-py-[1px] cqa-gap-[14px] cqa-h-8 cqa-bg-[#0B0B0C] cqa-border cqa-border-[#E5E5E5] cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-rounded-lg cqa-text-white\"\n        (click)=\"apply()\">Apply Filter</button>\n    </div>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\">\n    <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n      (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n      <ng-container *ngFor=\"let c of config\">\n        <ng-container *ngIf=\"!c.hidden\">\n          <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Select -->\n            <ng-container *ngIf=\"c.type === 'select'\">\n              <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n            </ng-container>\n\n            <!-- Date Range --> \n            <ng-container *ngIf=\"c.type === 'date-range'\">\n              <label\n                class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n                c.label }}</label>\n              <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n                <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n                  <input matStartDate formControlName=\"start\" placeholder=\"Start date\" [max]=\"maxDate\" required\n                    [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                  <input matEndDate formControlName=\"end\" placeholder=\"End date\" [max]=\"maxDate\" required\n                    [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                </mat-date-range-input>\n                <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n                  [panelClass]=\"'ctc-date-range-panel'\">\n                  <mat-datepicker-actions>\n                    <div class=\"ctc-date-presets\">\n                      <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n                      <div class=\"btn-group\">\n                        <button type=\"button\" class=\"preset-btn today\"\n                          (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n                        <button type=\"button\" class=\"preset-btn last7days\"\n                          (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n                        <button type=\"button\" class=\"preset-btn last30days\"\n                          (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n                        <button type=\"button\" class=\"preset-btn last90days\"\n                          (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n                        <button type=\"button\" class=\"preset-btn thismonth\"\n                          (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n                        <button type=\"button\" class=\"preset-btn lastmonth\"\n                          (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n                      </div>\n                    </div>\n                    <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n                    <button\n                      class=\"cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n                      mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n                  </mat-datepicker-actions>\n                </mat-date-range-picker>\n                <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" />\n                    <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" />\n                    <path\n                      d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n                      stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\" />\n                  </svg>\n                </div>\n              </mat-form-field>\n              <!-- Specific validation messages -->\n              <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n                {{ getDateValidationError(c.key) }}\n              </mat-error>\n\n            </ng-container>\n          </div>\n        </ng-container>\n      </ng-container>\n    </form>\n\n    <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n      <button type=\"button\"\n        class=\"cqa-text-[13.33px] cqa-leading-[1] cqa-flex cqa-flex-row cqa-justify-center cqa-items-center cqa-px-[11px] cqa-py-[1px] cqa-gap-[14px] cqa-h-8 cqa-border cqa-border-[#0B0B0C] cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-rounded-lg cqa-text-[#0B0B0C]\"\n        (click)=\"reset()\">Reset</button>\n      <button type=\"button\"\n        class=\"cqa-text-[13.33px] cqa-leading-[1] cqa-flex cqa-flex-row cqa-justify-center cqa-items-center cqa-px-[11px] cqa-py-[1px] cqa-gap-[14px] cqa-h-8 cqa-bg-[#0B0B0C] cqa-border cqa-border-[#E5E5E5] cqa-shadow-[0_1px_2px_rgba(0,0,0,0.05)] cqa-rounded-lg cqa-text-white\"\n        (click)=\"apply()\">Apply Filter</button>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], showFilterPanel: [{
+                type: Input
+            }], filtersApplied: [{
+                type: Output
+            }], filtersChanged: [{
+                type: Output
+            }], resetAction: [{
+                type: Output
+            }] } });
+
+class ColumnVisibilityComponent {
+    constructor() {
+        this.isStepGroup = false;
+        // Dynamic columns (preferred). Each item defines the id used as key and the label to render.
+        this.columns = [];
+        // Start with an empty visibility map; keys will be added from 'columns'
+        this.columnVisibility = {};
+        this.selectedAutoRefreshInterval = 0; // 0 = Off
+        this.columnVisibilityChange = new EventEmitter();
+        this.autoRefreshChange = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        // When dynamic columns change, ensure we have keys in the visibility map
+        if (changes['columns'] && Array.isArray(this.columns) && this.columns.length) {
+            for (const col of this.columns) {
+                if (this.columnVisibility[col.id] === undefined) {
+                    this.columnVisibility[col.id] = true;
+                }
+            }
+        }
+    }
+    get areAllColumnsSelected() {
+        const keys = this.getTogglableKeys();
+        return keys.every(k => !!this.columnVisibility[k]);
+    }
+    toggleAllColumns(checked) {
+        const keys = this.getTogglableKeys();
+        for (const k of keys) {
+            this.columnVisibility[k] = checked;
+        }
+        this.saveColumnPreferences();
+    }
+    saveColumnPreferences() {
+        this.columnVisibilityChange.emit({ ...this.columnVisibility });
+    }
+    onAutoRefreshChange() {
+        this.autoRefreshChange.emit(this.selectedAutoRefreshInterval);
+    }
+    getTogglableKeys() {
+        return Array.isArray(this.columns) ? this.columns.map(c => c.id) : [];
+    }
+}
+ColumnVisibilityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <cqa-button variant=\"grey-solid\" icon=\"settings\" [matMenuTriggerFor]=\"settingsMenu\" aria-label=\"Settings\">\n  </cqa-button>\n\n  <mat-menu #settingsMenu=\"matMenu\" class=\"table-settings-menu\">\n    <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n      <div class=\"settings-section cqa-mb-3\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n        <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n          <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n            class=\"select-all-checkbox\">\n            {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n          </mat-checkbox>\n          <!-- Dynamic column list -->\n          <ng-container *ngIf=\"columns?.length\">\n            <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n              (change)=\"saveColumnPreferences()\">\n              {{ col.label }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"settings-section\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n        <div class=\"refresh-options\">\n          <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n            <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n          </mat-radio-group>\n        </div>\n      </div>\n    </div>\n  </mat-menu>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-column-visibility', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <cqa-button variant=\"grey-solid\" icon=\"settings\" [matMenuTriggerFor]=\"settingsMenu\" aria-label=\"Settings\">\n  </cqa-button>\n\n  <mat-menu #settingsMenu=\"matMenu\" class=\"table-settings-menu\">\n    <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n      <div class=\"settings-section cqa-mb-3\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n        <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n          <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n            class=\"select-all-checkbox\">\n            {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n          </mat-checkbox>\n          <!-- Dynamic column list -->\n          <ng-container *ngIf=\"columns?.length\">\n            <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n              (change)=\"saveColumnPreferences()\">\n              {{ col.label }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"settings-section\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n        <div class=\"refresh-options\">\n          <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n            <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n          </mat-radio-group>\n        </div>\n      </div>\n    </div>\n  </mat-menu>", styles: [] }]
+        }], propDecorators: { isStepGroup: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], columnVisibility: [{
+                type: Input
+            }], selectedAutoRefreshInterval: [{
+                type: Input
+            }], columnVisibilityChange: [{
+                type: Output
+            }], autoRefreshChange: [{
+                type: Output
+            }] } });
+
+class TableActionToolbarComponent {
+    constructor() {
+        this.selectedItems = [];
+        this.actions = [];
+        this.actionClick = new EventEmitter();
+    }
+    get hasSelection() {
+        return (this.selectedItems?.length || 0) > 0;
+    }
+    get isSingleSelection() {
+        return this.selectedItems?.length === 1;
+    }
+    get selectionLabel() {
+        const n = this.selectedItems?.length || 0;
+        return n === 1 ? '1 selected' : `${n} selected`;
+    }
+    visibleActions() {
+        const ctx = { selected: this.selectedItems || [] };
+        return (this.actions || []).filter(a => (a.show ? a.show(ctx) : true));
+    }
+    isDisabled(action) {
+        const ctx = { selected: this.selectedItems || [] };
+        return action.disabled ? !!action.disabled(ctx) : false;
+    }
+    onAction(action) {
+        if (this.isDisabled(action)) {
+            return;
+        }
+        const context = { id: action.id, selected: this.selectedItems || [] };
+        if (action.onClick) {
+            action.onClick(context);
+        }
+        this.actionClick.emit(context);
+    }
+}
+TableActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px]\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      {{ selectionLabel }}\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n    </div>\n    <!-- Forwards clicks inside toolbar without affecting outer selections -->\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px]\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      {{ selectionLabel }}\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n    </div>\n    <!-- Forwards clicks inside toolbar without affecting outer selections -->\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { selectedItems: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+class MetricsBlockComponent {
+    constructor() {
+        this.progress = '0%';
+        this.layout = '1';
+        this.itemslength = '0';
+    }
+    formatPercent(value) {
+        if (value === undefined || value === null || Number.isNaN(value))
+            return '';
+        const sign = value > 0 ? '+' : value < 0 ? '' : '';
+        return `${sign}${value}%`;
+    }
+    percentClass(value) {
+        if (value === undefined || value === null || Number.isNaN(value))
+            return 'cqa-text-[#6B7280]';
+        if (value > 0)
+            return 'cqa-text-[#10B981]';
+        if (value < 0)
+            return 'cqa-text-[#EF4444]';
+        return 'cqa-text-[#6B7280]';
+    }
+}
+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" }, ngImport: i0, template: "<div id=\"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' : '']\">\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 });
+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, template: "<div id=\"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' : '']\">\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: [] }]
+        }], propDecorators: { item: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], itemslength: [{
+                type: Input
+            }] } });
+
+class MetricsCardComponent {
+    constructor() {
+        this.icon = 'text_snippet';
+        this.title = 'Total Test Cases';
+        this.total = 0;
+        this.items = [];
+        this.cardClass = '';
+        this.layout = '1';
+    }
+    progressWidth(item) {
+        const max = item.max ?? this.inferMax();
+        if (!max || max <= 0)
+            return '0%';
+        const pct = Math.max(0, Math.min(100, (item.value / max) * 100));
+        return pct.toFixed(1) + '%';
+    }
+    inferMax() {
+        const maxFromItems = this.items.reduce((m, it) => Math.max(m, it.value), 0);
+        return maxFromItems || 1;
+    }
+    formatPercent(value) {
+        if (value === undefined || value === null || Number.isNaN(value))
+            return '';
+        const sign = value > 0 ? '+' : value < 0 ? '' : '';
+        return `${sign}${value}%`;
+    }
+    percentClass(value) {
+        if (value === undefined || value === null || Number.isNaN(value))
+            return 'cqa-text-[#6B7280]';
+        if (value > 0)
+            return 'cqa-text-[#10B981]'; // green
+        if (value < 0)
+            return 'cqa-text-[#EF4444]'; // red
+        return 'cqa-text-[#6B7280]'; // neutral
+    }
+}
+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" }, ngImport: i0, template: "<div id=\"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 md:cqa-gap-0 cqa-gap-y-2 cqa-py-1 md:cqa-p-0 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 sm:cqa-border-r cqa-border-[#E5E7EB]\">\n      <!-- Left total block -->\n      <div\n        class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b-1 sm:cqa-border-b-0 md:cqa-border-b-0 cqa-border-[#E5E7EB]\">\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      <cqa-metrics-block *ngFor=\"let it of items;\" [item]=\"it\" [itemslength]=\"items.length.toString()\"\n        [progress]=\"progressWidth(it)\">\n      </cqa-metrics-block>\n    </div>\n  </div>\n\n  <div *ngIf=\"layout === '2'\"\n    class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n    [ngClass]=\"cardClass\">\n    <div\n      class=\"cqa-flex cqa-flex-col md:cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-w-full cqa-min-h-[53px] cqa-rounded-none cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0 cqa-gap-4\">\n      <!-- Left total block -->\n      <div\n        class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-py-1 cqa-px-4 sm:cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[240px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden before:cqa-content-[''] before:cqa-bg-[#4C4C51] before:cqa-h-[2px] before:cqa-w-full before:cqa-absolute before:cqa-top-0 before:cqa-left-0\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between cqa-w-full\">\n          <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#6B7280]\">{{ icon }}</mat-icon>\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-4\">{{ title }}</span>\n          <div class=\"cqa-flex cqa-items-end cqa-gap-2 cqa-ml-auto\">\n            <h4 class=\"cqa-text-[28px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ total | number }}\n            </h4>\n            <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n              [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n          </div>\n        </div>\n\n      </div>\n      <!-- Metric blocks -->\n      <div\n        class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 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\">\n        </cqa-metrics-block>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: MetricsBlockComponent, selector: "cqa-metrics-block", inputs: ["item", "progress", "layout", "itemslength"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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, template: "<div id=\"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 md:cqa-gap-0 cqa-gap-y-2 cqa-py-1 md:cqa-p-0 sm:cqa-grid-cols-2 md:cqa-grid-cols-4 sm:cqa-border-r cqa-border-[#E5E7EB]\">\n      <!-- Left total block -->\n      <div\n        class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-pt-1 md:cqa-pb-0.5 cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[180px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-border-b-1 sm:cqa-border-b-0 md:cqa-border-b-0 cqa-border-[#E5E7EB]\">\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      <cqa-metrics-block *ngFor=\"let it of items;\" [item]=\"it\" [itemslength]=\"items.length.toString()\"\n        [progress]=\"progressWidth(it)\">\n      </cqa-metrics-block>\n    </div>\n  </div>\n\n  <div *ngIf=\"layout === '2'\"\n    class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-items-start cqa-px-px cqa-pb-px md:cqa-h-[63px] cqa-bg-white cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0\"\n    [ngClass]=\"cardClass\">\n    <div\n      class=\"cqa-flex cqa-flex-col md:cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-w-full cqa-min-h-[53px] cqa-rounded-none cqa-flex-none cqa-order-0 cqa-self-stretch cqa-grow-0 cqa-gap-4\">\n      <!-- Left total block -->\n      <div\n        class=\"cqa-flex cqa-flex-col cqa-justify-center cqa-items-start cqa-py-3 md:cqa-py-1 cqa-px-4 sm:cqa-px-6 cqa-gap-1 cqa-w-full sm:cqa-w-[100%] md:cqa-w-[240px] lg:cqa-w-[290px] md:cqa-h-[61px] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-relative cqa-overflow-hidden before:cqa-content-[''] before:cqa-bg-[#4C4C51] before:cqa-h-[2px] before:cqa-w-full before:cqa-absolute before:cqa-top-0 before:cqa-left-0\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between cqa-w-full\">\n          <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-[#6B7280]\">{{ icon }}</mat-icon>\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-4\">{{ title }}</span>\n          <div class=\"cqa-flex cqa-items-end cqa-gap-2 cqa-ml-auto\">\n            <h4 class=\"cqa-text-[28px] cqa-leading-7 cqa-tracking-[-0.45px] cqa-text-[#111827]\">{{ total | number }}\n            </h4>\n            <span *ngIf=\"totalPercent !== undefined\" class=\"cqa-text-[10px] cqa-leading-4\"\n              [ngClass]=\"percentClass(totalPercent)\">{{ formatPercent(totalPercent) }}</span>\n          </div>\n        </div>\n\n      </div>\n      <!-- Metric blocks -->\n      <div\n        class=\"cqa-flex-1 cqa-w-full cqa-grid cqa-grid-cols-2 md:cqa-grid-cols-3 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\">\n        </cqa-metrics-block>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], totalPercent: [{
+                type: Input
+            }] } });
+
+class ChartCardComponent {
+    constructor() {
+        this.title = 'Chart';
+        this.cardClass = '';
+    }
+}
+ChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ChartCardComponent, selector: "cqa-chart-card", inputs: { title: "title", subtitle: "subtitle", cardClass: "cardClass" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px]\"\n    [ngClass]=\"cardClass\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 sm:cqa-px-6 cqa-py-3 cqa-border-b cqa-border-[#E5E7EB]\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <div class=\"cqa-text-[14px] cqa-leading-5 cqa-font-semibold cqa-text-[#101828]\">{{ title }}</div>\n        <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n      </div>\n      <!-- Right-side actions slot -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <ng-content select=\"[chart-actions]\"></ng-content>\n      </div>\n    </div>\n\n    <!-- Chart/content area -->\n    <div class=\"cqa-p-3 sm:cqa-p-4\">\n      <div class=\"cqa-w-full cqa-min-h-[220px]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ChartCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-chart-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px]\"\n    [ngClass]=\"cardClass\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 sm:cqa-px-6 cqa-py-3 cqa-border-b cqa-border-[#E5E7EB]\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <div class=\"cqa-text-[14px] cqa-leading-5 cqa-font-semibold cqa-text-[#101828]\">{{ title }}</div>\n        <div *ngIf=\"subtitle\" class=\"cqa-text-[12px] cqa-leading-4 cqa-text-[#6A7282] cqa-mt-0.5\">{{ subtitle }}</div>\n      </div>\n      <!-- Right-side actions slot -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <ng-content select=\"[chart-actions]\"></ng-content>\n      </div>\n    </div>\n\n    <!-- Chart/content area -->\n    <div class=\"cqa-p-3 sm:cqa-p-4\">\n      <div class=\"cqa-w-full cqa-min-h-[220px]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }] } });
+
+class ProgressTextCardComponent {
+    constructor() {
+        this.value = 0; // 0 - 100
+        this.label = 'Test Success Rate';
+        this.deltaSuffix = 'since last run';
+        this.cardClass = '';
+    }
+    get percentText() {
+        const v = Math.max(0, Math.min(100, Number(this.value) || 0));
+        return `${v}%`;
+    }
+    get fillWidth() {
+        const v = Math.max(0, Math.min(100, Number(this.value) || 0));
+        return v + '%';
+    }
+    deltaClass() {
+        if (this.deltaPercent === undefined || this.deltaPercent === null || Number.isNaN(this.deltaPercent)) {
+            return 'text-[#6B7280]';
+        }
+        if (this.deltaPercent > 0)
+            return 'text-[#10B981]';
+        if (this.deltaPercent < 0)
+            return 'text-[#EF4444]';
+        return 'text-[#6B7280]';
+    }
+}
+ProgressTextCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressTextCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressTextCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ProgressTextCardComponent, selector: "cqa-progress-text-card", inputs: { value: "value", label: "label", deltaPercent: "deltaPercent", deltaSuffix: "deltaSuffix", cardClass: "cardClass" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n    [ngClass]=\"cardClass\">\n    <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n      <div\n        class=\"cqa-text-[28px] sm:cqa-text-[32px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n        {{ percentText }}</div>\n      <div class=\"cqa-text-[18px] sm:cqa-text-[20px] cqa-leading-[28px] cqa-text-[#111827]\">{{ label }}</div>\n    </div>\n    <div class=\"cqa-mt-4 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n        [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n      </div>\n    </div>\n    <div class=\"cqa-mt-2 cqa-text-[14px] cqa-leading-5\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n      {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n    </div>\n  </div>\n</div>", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ProgressTextCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-progress-text-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-box-border cqa-flex cqa-flex-col cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-[10px] cqa-p-4 sm:cqa-p-5\"\n    [ngClass]=\"cardClass\">\n    <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n      <div\n        class=\"cqa-text-[28px] sm:cqa-text-[32px] cqa-leading-[36px] cqa-font-bold cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n        {{ percentText }}</div>\n      <div class=\"cqa-text-[18px] sm:cqa-text-[20px] cqa-leading-[28px] cqa-text-[#111827]\">{{ label }}</div>\n    </div>\n    <div class=\"cqa-mt-4 cqa-w-full cqa-h-[14px] cqa-bg-[#E5E7EB] cqa-rounded-full cqa-overflow-hidden\">\n      <div class=\"cqa-h-full cqa-rounded-full\" [style.width]=\"fillWidth\"\n        [style.background]=\"'linear-gradient(90deg, #DD5A38 0%, #F59E0B 40%, #10B981 100%)'\">\n      </div>\n    </div>\n    <div class=\"cqa-mt-2 cqa-text-[14px] cqa-leading-5\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n      {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], deltaPercent: [{
+                type: Input
+            }], deltaSuffix: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }] } });
+
+class DashboardHeaderComponent {
+    constructor() {
+        this.title = '';
+        this.badgeClass = 'bg-[#D1FAE5] text-[#065F46]';
+        this.headerClass = '';
+        // Optional workspace select on the right
+        this.workspaceOptions = [];
+        this.workspacePlaceholder = 'Workspace';
+        this.workspaceDisabled = false;
+        this.workspaceMultiple = true;
+        this.workspaceSearchable = false;
+        this.workspaceValueChange = new EventEmitter();
+        this.workspaceForm = new FormGroup({
+            workspace: new FormControl(),
+        });
+    }
+    ngOnInit() {
+        this.syncFormFromInput();
+        this.workspaceForm.get('workspace')?.valueChanges.subscribe((v) => {
+            this.workspaceValue = v;
+            this.workspaceValueChange.emit(v);
+        });
+    }
+    ngOnChanges(_changes) {
+        this.syncFormFromInput();
+    }
+    get workspaceConfig() {
+        return {
+            key: 'workspace',
+            placeholder: this.workspacePlaceholder,
+            disabled: this.workspaceDisabled,
+            multiple: this.workspaceMultiple,
+            searchable: this.workspaceSearchable,
+            options: this.workspaceOptions,
+        };
+    }
+    syncFormFromInput() {
+        const ctrl = this.workspaceForm.get('workspace');
+        if (!ctrl)
+            return;
+        const val = this.workspaceValue;
+        const normalized = this.workspaceMultiple
+            ? Array.isArray(val) ? val : (val != null ? [val] : [])
+            : (Array.isArray(val) ? (val.length ? val[0] : undefined) : val);
+        ctrl.setValue(normalized, { emitEvent: false });
+    }
+}
+DashboardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable" }, outputs: { workspaceValueChange: "workspaceValueChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-end cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex\">\n        <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n        <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span>\n        <cqa-button variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"workspaceOptions?.length\" class=\"cqa-w-full cqa-max-w-[199px] cqa-ml-auto header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-end cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex\">\n        <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n        <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span>\n        <cqa-button variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"workspaceOptions?.length\" class=\"cqa-w-full cqa-max-w-[199px] cqa-ml-auto header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], badgeClass: [{
+                type: Input
+            }], headerClass: [{
+                type: Input
+            }], workspaceOptions: [{
+                type: Input
+            }], workspacePlaceholder: [{
+                type: Input
+            }], workspaceDisabled: [{
+                type: Input
+            }], workspaceValue: [{
+                type: Input
+            }], workspaceMultiple: [{
+                type: Input
+            }], workspaceSearchable: [{
+                type: Input
+            }], workspaceValueChange: [{
+                type: Output
+            }] } });
+
+class CoverageModuleCardComponent {
+    constructor() {
+        /** Card title, e.g. "AI Ask" */
+        this.title = 'Coverage';
+        /** Number of issues to display next to title */
+        this.issues = 0;
+        /** Optional "View" action visibility */
+        this.showViewAction = true;
+        /** Middle metrics: left group */
+        this.positiveCount = 0;
+        this.negativeCount = 0;
+        this.edgeCaseCount = 0;
+        this.positiveLabel = 'Positive';
+        this.negativeLabel = 'Negative';
+        this.edgeCaseLabel = 'Edge Case';
+        /** Middle metrics: right group */
+        this.aiCount = 0;
+        this.humanCount = 0;
+        this.aiLabel = 'AI';
+        this.humanLabel = 'Human';
+        /** Rows of coverage with percentage bars */
+        this.items = [];
+        /** CTA button label */
+        this.ctaText = 'AI Coverage';
+        /** Disable CTA */
+        this.ctaDisabled = false;
+        this.view = new EventEmitter();
+        this.ctaClicked = new EventEmitter();
+    }
+    statusColorClass(item) {
+        const status = item.status ?? 'neutral';
+        switch (status) {
+            case 'success':
+                return 'cqa-bg-[#10B981]'; // green
+            case 'error':
+                return 'cqa-bg-[#EF4444]'; // red
+            default:
+                return 'cqa-bg-[#3B82F6]'; // blue
+        }
+    }
+    textColorClass(item) {
+        const status = item.status ?? 'neutral';
+        switch (status) {
+            case 'success':
+                return 'cqa-text-[#10B981]';
+            case 'error':
+                return 'cqa-text-[#EF4444]';
+            default:
+                return 'cqa-text-[#374151]';
+        }
+    }
+    formatPercent(pct) {
+        if (pct === undefined || pct === null || Number.isNaN(pct))
+            return '0%';
+        const clamped = Math.max(0, Math.min(100, pct));
+        return `${clamped}%`;
+    }
+}
+CoverageModuleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CoverageModuleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CoverageModuleCardComponent, selector: "cqa-coverage-module-card", inputs: { title: "title", issues: "issues", showViewAction: "showViewAction", positiveCount: "positiveCount", negativeCount: "negativeCount", edgeCaseCount: "edgeCaseCount", positiveLabel: "positiveLabel", negativeLabel: "negativeLabel", edgeCaseLabel: "edgeCaseLabel", aiCount: "aiCount", humanCount: "humanCount", aiLabel: "aiLabel", humanLabel: "humanLabel", items: "items", ctaText: "ctaText", ctaDisabled: "ctaDisabled" }, outputs: { view: "view", ctaClicked: "ctaClicked" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-3\">\n      <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog\">{{ title }}</h3>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span\n          class=\"cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger\">\n          {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n        </span>\n        <button type=\"button\"\n          class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1\"\n          *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n          View\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- Middle metrics row -->\n    <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-border-t cqa-border-b cqa-border-surface-[#F3F4F6] cqa-py-2\">\n      <!-- Left: Positive / Negative / Edge Case -->\n      <div class=\"cqa-text-center\">\n        <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n      </div>\n      <div class=\"cqa-text-center\">\n        <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n      </div>\n      <div class=\"cqa-text-center\">\n        <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n      </div>\n\n      <!-- Right: AI / Human -->\n      <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n            <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n              {{ aiLabel }}\n            </span>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n          </div>\n          <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n            <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ humanLabel }}\n            </span>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n          </div>\n        </div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"md:cqa-w-full md:cqa-max-w-[216px] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          <!-- <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg> -->\n          {{ it.label }}\n        </span>\n        <div class=\"cqa-flex-1 cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n            [style.width]=\"formatPercent(it.percent)\"></div>\n        </div>\n        <span class=\"cqa-min-w-[40px] cqa-text-[12px] cqa-leading-[16px] cqa-font-bold\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n     <cqa-button variant=\"filled\" [customClass]=\"'cqa-w-full cqa-text-[14px] cqa-leading-[20px] cqa-font-semibold'\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n      {{ ctaText }}\n    </cqa-button>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CoverageModuleCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-coverage-module-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div\n    class=\"cqa-w-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] md:cqa-px-[17px] cqa-px-3 cqa-shadow-card\">\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-3\">\n      <h3 class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-dialog\">{{ title }}</h3>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span\n          class=\"cqa-px-[10px] cqa-py-[4px] cqa-text-[12px] cqa-leading-[16px] cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-full cqa-bg-warning-light cqa-text-danger\">\n          {{ issues }} {{ issues === 1 ? 'issue' : 'issues' }}\n        </span>\n        <button type=\"button\"\n          class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-primary cqa-flex cqa-items-center cqa-gap-1\"\n          *ngIf=\"showViewAction\" (click)=\"view.emit()\">\n          View\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- Middle metrics row -->\n    <div class=\"cqa-grid md:cqa-grid-cols-4 cqa-grid-cols-2 cqa-gap-3 cqa-mb-4 cqa-border-t cqa-border-b cqa-border-surface-[#F3F4F6] cqa-py-2\">\n      <!-- Left: Positive / Negative / Edge Case -->\n      <div class=\"cqa-text-center\">\n        <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#059669]\">{{ positiveCount }}</div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ positiveLabel }}</div>\n      </div>\n      <div class=\"cqa-text-center\">\n        <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#EF4444]\">{{ negativeCount }}</div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ negativeLabel }}</div>\n      </div>\n      <div class=\"cqa-text-center\">\n        <div class=\"cqa-text-[18px] cqa-leading-[28px] cqa-font-bold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted\">{{ edgeCaseLabel }}</div>\n      </div>\n\n      <!-- Right: AI / Human -->\n      <div class=\"cqa-text-center cqa-flex cqa-items-center cqa-justify-center cqa-flex-col\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n            <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-primary cqa-flex cqa-items-center cqa-gap-[2px]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(#clip0_7415_11751)\"><path d=\"M4.9685 7.75012C4.92386 7.57709 4.83367 7.41918 4.70731 7.29282C4.58095 7.16646 4.42304 7.07626 4.25 7.03162L1.1825 6.24062C1.13017 6.22577 1.08411 6.19425 1.05131 6.15085C1.01851 6.10744 1.00076 6.05453 1.00076 6.00012C1.00076 5.94572 1.01851 5.89281 1.05131 5.8494C1.08411 5.806 1.13017 5.77448 1.1825 5.75962L4.25 4.96812C4.42298 4.92353 4.58085 4.83341 4.7072 4.70714C4.83356 4.58088 4.92378 4.42307 4.9685 4.25012L5.7595 1.18262C5.7742 1.13008 5.80569 1.0838 5.84916 1.05082C5.89263 1.01785 5.94569 1 6.00025 1C6.05481 1 6.10787 1.01785 6.15134 1.05082C6.19481 1.0838 6.2263 1.13008 6.241 1.18262L7.0315 4.25012C7.07614 4.42316 7.16633 4.58107 7.29269 4.70743C7.41905 4.83379 7.57696 4.92399 7.75 4.96862L10.8175 5.75912C10.8703 5.77367 10.9168 5.80513 10.9499 5.84866C10.9831 5.8922 11.001 5.94541 11.001 6.00012C11.001 6.05484 10.9831 6.10805 10.9499 6.15159C10.9168 6.19512 10.8703 6.22657 10.8175 6.24112L7.75 7.03162C7.57696 7.07626 7.41905 7.16646 7.29269 7.29282C7.16633 7.41918 7.07614 7.57709 7.0315 7.75012L6.2405 10.8176C6.2258 10.8702 6.19431 10.9165 6.15084 10.9494C6.10737 10.9824 6.05431 11.0002 5.99975 11.0002C5.94519 11.0002 5.89213 10.9824 5.84866 10.9494C5.80519 10.9165 5.7737 10.8702 5.759 10.8176L4.9685 7.75012Z\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 1.5V3.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 2.5H9\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8.5V9.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.5 9H1.5\" stroke=\"#7C3AED\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g><defs><clipPath id=\"clip0_7415_11751\"><rect width=\"12\" height=\"12\" fill=\"white\"/></clipPath></defs></svg>\n              {{ aiLabel }}\n            </span>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ aiCount }}</span>\n          </div>\n          <div class=\"cqa-bg-primary-surface cqa-w-[2px] cqa-h-full cqa-mx-[3.5px]\"></div>\n          <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-items-center cqa-justify-center cqa-w-[60px]\">\n            <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-bold cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-[2px]\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 10.5V9.5C9.5 8.96957 9.28929 8.46086 8.91421 8.08579C8.53914 7.71071 8.03043 7.5 7.5 7.5H4.5C3.96957 7.5 3.46086 7.71071 3.08579 8.08579C2.71071 8.46086 2.5 8.96957 2.5 9.5V10.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 5.5C7.10457 5.5 8 4.60457 8 3.5C8 2.39543 7.10457 1.5 6 1.5C4.89543 1.5 4 2.39543 4 3.5C4 4.60457 4.89543 5.5 6 5.5Z\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              {{ humanLabel }}\n            </span>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-font-bold cqa-text-dialog\">{{ humanCount }}</span>\n          </div>\n        </div>\n        <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-muted cqa-pt-[2px] cqa-pb-1\">Coverage</div>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"md:cqa-w-full md:cqa-max-w-[216px] cqa-text-[12px] cqa-leading-[16px] cqa-text-dialog-secondary cqa-flex cqa-items-center cqa-gap-2\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.8333 6.46309V6.99976C12.8326 8.25767 12.4253 9.48165 11.6721 10.4892C10.9189 11.4967 9.86025 12.2337 8.65396 12.5904C7.44767 12.947 6.1584 12.9042 4.97844 12.4683C3.79848 12.0323 2.79105 11.2266 2.10639 10.1714C1.42174 9.11611 1.09654 7.8678 1.17931 6.61261C1.26208 5.35742 1.74837 4.16262 2.56566 3.20638C3.38295 2.25015 4.48746 1.58373 5.71444 1.30651C6.94143 1.02929 8.22515 1.15612 9.37417 1.66809\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 6.41634L7 8.16634L12.8333 2.33301\" stroke=\"#10B981\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          <!-- <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 12.8337C10.2217 12.8337 12.8333 10.222 12.8333 7.00033C12.8333 3.77866 10.2217 1.16699 7 1.16699C3.77834 1.16699 1.16666 3.77866 1.16666 7.00033C1.16666 10.222 3.77834 12.8337 7 12.8337Z\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 4.66699V7.00033\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 9.33301H7.00583\" stroke=\"#EF4444\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg> -->\n          {{ it.label }}\n        </span>\n        <div class=\"cqa-flex-1 cqa-h-[6px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden\">\n          <div class=\"cqa-h-full cqa-rounded-full\" [ngClass]=\"statusColorClass(it)\"\n            [style.width]=\"formatPercent(it.percent)\"></div>\n        </div>\n        <span class=\"cqa-min-w-[40px] cqa-text-[12px] cqa-leading-[16px] cqa-font-bold\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n     <cqa-button variant=\"filled\" [customClass]=\"'cqa-w-full cqa-text-[14px] cqa-leading-[20px] cqa-font-semibold'\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n      {{ ctaText }}\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], issues: [{
+                type: Input
+            }], showViewAction: [{
+                type: Input
+            }], positiveCount: [{
+                type: Input
+            }], negativeCount: [{
+                type: Input
+            }], edgeCaseCount: [{
+                type: Input
+            }], positiveLabel: [{
+                type: Input
+            }], negativeLabel: [{
+                type: Input
+            }], edgeCaseLabel: [{
+                type: Input
+            }], aiCount: [{
+                type: Input
+            }], humanCount: [{
+                type: Input
+            }], aiLabel: [{
+                type: Input
+            }], humanLabel: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], ctaText: [{
+                type: Input
+            }], ctaDisabled: [{
+                type: Input
+            }], view: [{
+                type: Output
+            }], ctaClicked: [{
+                type: Output
+            }] } });
+
+class TestDistributionCardComponent {
+    constructor() {
+        this.title = 'Test Distribution';
+        this.segments = [];
+        this.items = [];
+    }
+    totalSegments() {
+        return this.segments.reduce((sum, s) => sum + (s.value || 0), 0) || 1;
+    }
+    segmentWidth(segment) {
+        const total = this.totalSegments();
+        const pct = Math.max(0, Math.min(100, (segment.value / total) * 100));
+        return pct + '%';
+    }
+    segmentColor(segment, fallback) {
+        return segment.colorClass || fallback;
+    }
+}
+TestDistributionCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestDistributionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TestDistributionCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestDistributionCardComponent, selector: "cqa-test-distribution-card", inputs: { title: "title", segments: "segments", items: "items" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-white cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-p-4\">\n    <!-- Title -->\n    <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-font-medium cqa-text-[#111827] cqa-mb-3\">{{ title }}</h3>\n\n    <!-- Stacked segments pill -->\n    <div class=\"cqa-w-full cqa-h-[28px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-3\">\n      <ng-container *ngFor=\"let s of segments; let i = index; let last = last\">\n        <div\n          class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[12px]\"\n          [ngClass]=\"[\n            segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#10B981]' : 'cqa-bg-[#8B5CF6]'),\n            i === 0 ? 'cqa-rounded-l-full' : '',\n            last ? 'cqa-rounded-r-full' : ''\n          ]\" [style.width]=\"segmentWidth(s)\">\n          {{ s.label }}\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Items list -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col\">\n        <!-- Parent row -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-icon class=\"cqa-text-[#6B7280]\" [style.width.px]=\"16\" [style.height.px]=\"16\" [style.fontSize.px]=\"16\"\n              *ngIf=\"it.icon\">{{ it.icon }}</mat-icon>\n            <span class=\"cqa-text-[14px] cqa-leading-5 cqa-text-[#111827]\">{{ it.label }}</span>\n          </div>\n          <div class=\"cqa-text-[14px] cqa-leading-5 cqa-font-semibold cqa-text-[#111827]\">{{ it.value | number }}</div>\n        </div>\n\n        <!-- Children rows -->\n        <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div *ngFor=\"let ch of it.children\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-2 cqa-py-1 cqa-rounded-md cqa-bg-[#F9FAFB] cqa-text-[#6B7280]\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <span class=\"cqa-w-[6px] cqa-h-[14px] cqa-rounded-full\"\n                [ngClass]=\"ch.colorClass || 'cqa-bg-[#8B5CF6]'\"></span>\n              <span class=\"cqa-text-[12px] cqa-leading-5\">\n                {{ ch.label }}\n                <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ ch.value }}</span>\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: TestDistributionCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-test-distribution-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-white cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-p-4\">\n    <!-- Title -->\n    <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-font-medium cqa-text-[#111827] cqa-mb-3\">{{ title }}</h3>\n\n    <!-- Stacked segments pill -->\n    <div class=\"cqa-w-full cqa-h-[28px] cqa-rounded-full cqa-bg-[#F3F4F6] cqa-overflow-hidden cqa-flex cqa-mb-3\">\n      <ng-container *ngFor=\"let s of segments; let i = index; let last = last\">\n        <div\n          class=\"cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-text-white cqa-text-[12px] cqa-leading-[12px]\"\n          [ngClass]=\"[\n            segmentColor(s, i === 0 ? 'cqa-bg-[#4F46E5]' : i === segments.length - 1 ? 'cqa-bg-[#10B981]' : 'cqa-bg-[#8B5CF6]'),\n            i === 0 ? 'cqa-rounded-l-full' : '',\n            last ? 'cqa-rounded-r-full' : ''\n          ]\" [style.width]=\"segmentWidth(s)\">\n          {{ s.label }}\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Items list -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-flex-col\">\n        <!-- Parent row -->\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-py-1\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-icon class=\"cqa-text-[#6B7280]\" [style.width.px]=\"16\" [style.height.px]=\"16\" [style.fontSize.px]=\"16\"\n              *ngIf=\"it.icon\">{{ it.icon }}</mat-icon>\n            <span class=\"cqa-text-[14px] cqa-leading-5 cqa-text-[#111827]\">{{ it.label }}</span>\n          </div>\n          <div class=\"cqa-text-[14px] cqa-leading-5 cqa-font-semibold cqa-text-[#111827]\">{{ it.value | number }}</div>\n        </div>\n\n        <!-- Children rows -->\n        <div *ngIf=\"it.children?.length\" class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <div *ngFor=\"let ch of it.children\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-2 cqa-py-1 cqa-rounded-md cqa-bg-[#F9FAFB] cqa-text-[#6B7280]\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <span class=\"cqa-w-[6px] cqa-h-[14px] cqa-rounded-full\"\n                [ngClass]=\"ch.colorClass || 'cqa-bg-[#8B5CF6]'\"></span>\n              <span class=\"cqa-text-[12px] cqa-leading-5\">\n                {{ ch.label }}\n                <span class=\"cqa-font-semibold cqa-text-[#111827]\">{{ ch.value }}</span>\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], segments: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }] } });
+
+class FailedTestCasesCardComponent {
+    constructor() {
+        /** E.g., "C-62: Upload Content" */
+        this.title = 'Failed Test Case';
+        /** Number of failures to display in the pill */
+        this.failures = 0;
+        /** Pill label (e.g., "failures") */
+        this.failuresLabel = 'failures';
+        /** Optional custom class for the pill background */
+        this.pillClass = 'cqa-bg-[#F15F5F] cqa-text-[#FAFAFA]';
+        /** Root cause label (left part, emphasized) */
+        this.rootCauseLabel = 'Root cause';
+        /** If false, hide the root cause row */
+        this.showRootCause = true;
+        /** Label for timestamp */
+        this.lastFailedLabel = 'Last failed';
+        /** Optional extra class for the outer card */
+        this.cardClass = '';
+        /** Left border accent class */
+        this.leftAccentClass = 'cqa-border-l-[4px] cqa-border-[#EF4444]';
+    }
+    get rootCauseDisplay() {
+        return this.rootCause && this.rootCause.trim().length
+            ? this.rootCause
+            : 'No root cause available';
+    }
+}
+FailedTestCasesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px]\"\n    [ngClass]=\"[leftAccentClass, cardClass]\">\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n      <!-- Title -->\n      <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A]\">{{ title }}</h3>\n\n      <!-- Failures pill -->\n      <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n        [ngClass]=\"pillClass\">\n        {{ failures | number }} {{ failuresLabel }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n      <!-- Root cause -->\n      <div *ngIf=\"showRootCause\" class=\"md:cqa-px-[11px] cqa-py-[3px] cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F]\">\n        <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n      </div>\n\n      <!-- Timestamp -->\n      <div *ngIf=\"lastFailed\"\n        class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n      </div>\n    </div>\n  </div>\n</div>", 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: FailedTestCasesCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px]\"\n    [ngClass]=\"[leftAccentClass, cardClass]\">\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n      <!-- Title -->\n      <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A]\">{{ title }}</h3>\n\n      <!-- Failures pill -->\n      <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n        [ngClass]=\"pillClass\">\n        {{ failures | number }} {{ failuresLabel }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n      <!-- Root cause -->\n      <div *ngIf=\"showRootCause\" class=\"md:cqa-px-[11px] cqa-py-[3px] cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F]\">\n        <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n      </div>\n\n      <!-- Timestamp -->\n      <div *ngIf=\"lastFailed\"\n        class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], failures: [{
+                type: Input
+            }], failuresLabel: [{
+                type: Input
+            }], pillClass: [{
+                type: Input
+            }], rootCause: [{
+                type: Input
+            }], rootCauseLabel: [{
+                type: Input
+            }], showRootCause: [{
+                type: Input
+            }], lastFailed: [{
+                type: Input
+            }], lastFailedLabel: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], leftAccentClass: [{
+                type: Input
+            }] } });
+
+class SelectedFiltersComponent {
+    constructor() {
+        this.filterApplied = false;
+        this.chips = [];
+        this.removeChip = new EventEmitter();
+        this.clearAll = new EventEmitter();
+    }
+}
+SelectedFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectedFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: { filterApplied: "filterApplied", chips: "chips" }, outputs: { removeChip: "removeChip", clearAll: "clearAll" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n    *ngIf=\"filterApplied && (chips?.length || 0)\">\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n      *ngFor=\"let chip of chips\" [matTooltip]=\"chip.hasMore ? chip.fullText : ''\" [matTooltipDisabled]=\"!chip.hasMore\"\n      matTooltipPosition=\"above\">\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n        }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n      <button type=\"button\"\n        class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n        (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n      (click)=\"clearAll.emit()\">\n      Clear All\n    </button>\n  </div>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectedFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-selected-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-wrap cqa-justify-end cqa-gap-2 cqa-mb-3\"\n    *ngIf=\"filterApplied && (chips?.length || 0)\">\n    <div\n      class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-rounded-full cqa-border cqa-border-success-100 cqa-bg-primary-surface\"\n      *ngFor=\"let chip of chips\" [matTooltip]=\"chip.hasMore ? chip.fullText : ''\" [matTooltipDisabled]=\"!chip.hasMore\"\n      matTooltipPosition=\"above\">\n      <span class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-text-primary\">{{ chip.label || chip.key\n        }}:</span>\n      <span class=\"cqa-text-[12px] cqa-leading-[16px]\">{{ chip.text }}</span>\n      <button type=\"button\"\n        class=\"cqa-ml-1 cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-full cqa-border cqa-border-transparent hover:cqa-bg-[#EEF2FF]\"\n        (click)=\"removeChip.emit(chip)\" aria-label=\"Remove filter\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8.625 2.875L3.375 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M3.375 2.875L8.625 8.125\" stroke=\"#3F43EE\" stroke-width=\"0.875\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"cqa-text-[12px] cqa-leading-[16px] cqa-text-grey-300 hover:cqa-underline\"\n      (click)=\"clearAll.emit()\">\n      Clear All\n    </button>\n  </div>\n</div>", styles: [] }]
+        }], propDecorators: { filterApplied: [{
+                type: Input
+            }], chips: [{
+                type: Input
+            }], removeChip: [{
+                type: Output
+            }], clearAll: [{
+                type: Output
+            }] } });
+
+/**
+ * Utility for getting consistent colors for metadata values
+ * Used across Status, Priority, and Result fields
+ *
+ * Colors are defined here and also exported in metadata-colors.constants.js for tailwind.config.js
+ */
+// Color constants (also exported in metadata-colors.constants.js for Tailwind)
+const PRIORITY_COLOR_VALUES = {
+    critical: '#DC2626',
+    major: '#C10007',
+    medium: '#CA8A04',
+    minor: '#2563EB',
+    'not-set': '#101828', // Default dark
+};
+const RESULT_COLOR_VALUES = {
+    passed: '#16A34A',
+    failed: '#DC2626',
+    aborted: '#EA580C',
+    'in-review': '#2563EB',
+    'not-executed': '#101828', // Default dark
+};
+const STATUS_COLOR_VALUES = {
+    active: '#16A34A',
+    inactive: '#6B7280',
+    pending: '#CA8A04',
+    completed: '#16A34A', // Green-600
+};
+const DEFAULT_METADATA_COLOR_VALUE = '#101828';
+/**
+ * Color mappings for Priority values
+ */
+const PRIORITY_COLORS = {
+    'critical': PRIORITY_COLOR_VALUES.critical,
+    'major': PRIORITY_COLOR_VALUES.major,
+    'medium': PRIORITY_COLOR_VALUES.medium,
+    'minor': PRIORITY_COLOR_VALUES.minor,
+    'not set': PRIORITY_COLOR_VALUES['not-set'],
+};
+/**
+ * Color mappings for Result values
+ */
+const RESULT_COLORS = {
+    'passed': RESULT_COLOR_VALUES.passed,
+    'failed': RESULT_COLOR_VALUES.failed,
+    'aborted': RESULT_COLOR_VALUES.aborted,
+    'in review': RESULT_COLOR_VALUES['in-review'],
+    'not executed': RESULT_COLOR_VALUES['not-executed'],
+};
+/**
+ * Color mappings for Status values
+ */
+const STATUS_COLORS = {
+    'active': STATUS_COLOR_VALUES.active,
+    'inactive': STATUS_COLOR_VALUES.inactive,
+    'pending': STATUS_COLOR_VALUES.pending,
+    'completed': STATUS_COLOR_VALUES.completed,
+};
+/**
+ * Default color for metadata values
+ */
+const DEFAULT_METADATA_COLOR = DEFAULT_METADATA_COLOR_VALUE;
+/**
+ * Gets the color for a metadata value based on its key and value
+ * @param key - The metadata key (priority, result, or status)
+ * @param value - The metadata value (string or object with value property)
+ * @returns Color hex code as a string
+ */
+function getMetadataColor(key, value) {
+    // Extract the actual value
+    const actualValue = typeof value === 'string' ? value : value.value;
+    const normalizedValue = actualValue.toLowerCase().trim();
+    const normalizedKey = key.toLowerCase().trim();
+    // Get color based on key
+    let colorMap;
+    switch (normalizedKey) {
+        case 'priority':
+            colorMap = PRIORITY_COLORS;
+            break;
+        case 'result':
+            colorMap = RESULT_COLORS;
+            break;
+        case 'status':
+            colorMap = STATUS_COLORS;
+            break;
+        default:
+            return DEFAULT_METADATA_COLOR;
+    }
+    // Return color for the value, or default if not found
+    return colorMap[normalizedValue] || DEFAULT_METADATA_COLOR;
+}
+/**
+ * Gets inline style object for metadata value color
+ * @param key - The metadata key
+ * @param value - The metadata value
+ * @returns Style object with color property
+ */
+function getMetadataValueStyle(key, value) {
+    return { color: getMetadataColor(key, value) };
+}
+
+class BadgeComponent {
+    constructor() {
+        this.label = '';
+        this.variant = 'default';
+    }
+    get badgeClasses() {
+        const baseClasses = [
+            'cqa-inline-flex',
+            'cqa-items-center',
+            'cqa-justify-center',
+            'cqa-rounded-[6px]',
+            'cqa-font-normal',
+            'cqa-leading-[17px]'
+        ];
+        // Only apply variant-specific Tailwind classes if custom colors are not provided
+        if (!this.backgroundColor && !this.textColor) {
+            switch (this.variant) {
+                case 'error':
+                    return [...baseClasses, 'cqa-bg-[#FCD9D9]', 'cqa-text-[#9F2A2A]'].join(' ');
+                case 'warning':
+                    return [...baseClasses, 'cqa-bg-[#FFF9E9]', 'cqa-text-[#7E6012]'].join(' ');
+                case 'info':
+                    return [...baseClasses, 'cqa-bg-blue-100', 'cqa-text-blue-800'].join(' ');
+                case 'success':
+                    return [...baseClasses, 'cqa-bg-green-100', 'cqa-text-green-800'].join(' ');
+                case 'outline':
+                    return [...baseClasses, 'cqa-bg-transparent', 'cqa-text-gray-800'].join(' ');
+                default:
+                    return [...baseClasses, 'cqa-bg-gray-100', 'cqa-text-gray-800'].join(' ');
+            }
+        }
+        // If custom colors are provided, only return base classes
+        return baseClasses.join(' ');
+    }
+    get badgeStyles() {
+        const styles = {};
+        if (this.backgroundColor) {
+            styles['background-color'] = this.backgroundColor;
+        }
+        else if (this.variant === 'outline') {
+            styles['background-color'] = 'transparent';
+        }
+        if (this.textColor) {
+            styles['color'] = this.textColor;
+        }
+        return styles;
+    }
+    get iconContainerClasses() {
+        const baseClasses = [
+            'cqa-inline-flex',
+            'cqa-items-center',
+            'cqa-justify-center',
+            'cqa-flex-shrink-0',
+            'cqa-mr-1.5'
+        ];
+        // No circular background for any variant - just return base classes
+        return baseClasses.join(' ');
+    }
+    get iconContainerStyles() {
+        const styles = {
+            'display': 'inline-flex',
+            'align-items': 'center',
+            'justify-content': 'center'
+        };
+        // No circular background - only apply custom icon background color if explicitly provided
+        if (this.iconBackgroundColor) {
+            styles['background-color'] = this.iconBackgroundColor;
+            // If custom background is provided, add circle dimensions
+            styles['width'] = '16px';
+            styles['height'] = '16px';
+            styles['min-width'] = '16px';
+            styles['min-height'] = '16px';
+            styles['border-radius'] = '50%';
+        }
+        return styles;
+    }
+    get iconClasses() {
+        const baseClasses = [];
+        // Only apply white text class if custom icon color is not provided
+        if (!this.iconColor) {
+            return [...baseClasses, 'cqa-text-white'].join(' ');
+        }
+        return baseClasses.join(' ');
+    }
+    get iconStyles() {
+        const styles = {
+            'font-size': '14px',
+            'width': '14px',
+            'height': '14px',
+            'line-height': '14px'
+        };
+        if (this.iconColor) {
+            styles['color'] = this.iconColor;
+        }
+        else {
+            // Use variant-specific text color for icon (no white background anymore)
+            switch (this.variant) {
+                case 'error':
+                    styles['color'] = '#991B1B'; // red-800
+                    break;
+                case 'warning':
+                    styles['color'] = '#854D0E'; // yellow-800
+                    break;
+                case 'info':
+                    styles['color'] = '#1E40AF'; // blue-800
+                    break;
+                case 'success':
+                    styles['color'] = '#166534'; // green-800
+                    break;
+                default:
+                    styles['color'] = this.textColor || '#374151'; // gray-700 default
+            }
+        }
+        return styles;
+    }
+}
+BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BadgeComponent, selector: "cqa-badge", inputs: { label: "label", icon: "icon", variant: "variant", backgroundColor: "backgroundColor", textColor: "textColor", iconBackgroundColor: "iconBackgroundColor", iconColor: "iconColor" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <span \n    [ngClass]=\"badgeClasses\" \n    [ngStyle]=\"badgeStyles\"\n    class=\"cqa-font-inter cqa-font-normal cqa-text-sm cqa-leading-[17px] cqa-py-[4px] cqa-px-3\">\n    <span \n      *ngIf=\"icon\" \n      [ngClass]=\"iconContainerClasses\"\n      [ngStyle]=\"iconContainerStyles\">\n      <mat-icon \n        [ngClass]=\"iconClasses\"\n        [ngStyle]=\"iconStyles\">{{ icon }}</mat-icon>\n    </span>\n    {{ label }}\n  </span>\n</div>\n\n", 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-badge', template: "<div id=\"cqa-ui-root\" style=\"display: inline-block;\">\n  <span \n    [ngClass]=\"badgeClasses\" \n    [ngStyle]=\"badgeStyles\"\n    class=\"cqa-font-inter cqa-font-normal cqa-text-sm cqa-leading-[17px] cqa-py-[4px] cqa-px-3\">\n    <span \n      *ngIf=\"icon\" \n      [ngClass]=\"iconContainerClasses\"\n      [ngStyle]=\"iconContainerStyles\">\n      <mat-icon \n        [ngClass]=\"iconClasses\"\n        [ngStyle]=\"iconStyles\">{{ icon }}</mat-icon>\n    </span>\n    {{ label }}\n  </span>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], iconBackgroundColor: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }] } });
+
+class InsightCardComponent {
+    constructor() {
+        this.title = '';
+        this.description = '';
+        this._badges = [];
+        this.metadataExpanded = true;
+        this.isPrerequisiteMissing = false;
+        this.isTestDataMissing = false;
+        // Track expanded state for sections
+        this.sectionExpandedState = new Map();
+        // Loading state for main action
+        this.isApplying = false;
+        this.metadataToggle = new EventEmitter();
+        this.sectionToggle = new EventEmitter();
+        this.sectionActionClick = new EventEmitter();
+        this.onApplySuggestionClick = new EventEmitter();
+        this.onAttachPrerequisitesClick = new EventEmitter();
+        this.onImportTestDataClick = new EventEmitter();
+    }
+    set badges(value) {
+        this._badges = value;
+    }
+    get badges() {
+        return this._badges;
+    }
+    toggleMetadata() {
+        this.metadataExpanded = !this.metadataExpanded;
+        this.metadataToggle.emit(this.metadataExpanded);
+    }
+    toggleSection(section) {
+        const currentState = this.sectionExpandedState.get(section.id) ?? (section.expanded ?? true);
+        const newState = !currentState;
+        this.sectionExpandedState.set(section.id, newState);
+        this.sectionToggle.emit({ id: section.id, expanded: newState });
+    }
+    onSectionAction(sectionId) {
+        this.sectionActionClick.emit(sectionId);
+        // Emit specific events for known actions
+        if (sectionId === 'prerequisite') {
+            this.onAttachPrerequisitesClick.emit();
+        }
+        else if (sectionId === 'test-data') {
+            this.onImportTestDataClick.emit();
+        }
+    }
+    get visibleBadges() {
+        const visible = [];
+        if (this.isPrerequisiteMissing) {
+            visible.push({ label: 'Prerequisite Missing', variant: 'warning' });
+        }
+        if (this.isTestDataMissing) {
+            visible.push({ label: 'Test Data Missing', variant: 'error' });
+        }
+        // Also include any custom badges
+        if (this.badges) {
+            visible.push(...this.badges);
+        }
+        return visible;
+    }
+    get visibleSections() {
+        const visible = [];
+        if (this.isPrerequisiteMissing && this.prerequisiteSection) {
+            // Use stored state if available, otherwise default to true
+            const expanded = this.sectionExpandedState.has('prerequisite')
+                ? this.sectionExpandedState.get('prerequisite')
+                : true;
+            visible.push({
+                id: 'prerequisite',
+                title: 'Prerequisite Missing',
+                variant: 'warning',
+                reason: this.prerequisiteSection,
+                actionButtonLabel: 'Attach Prerequisites',
+                expanded: expanded,
+            });
+        }
+        if (this.isTestDataMissing && this.testDataSection) {
+            // Use stored state if available, otherwise default to true
+            const expanded = this.sectionExpandedState.has('test-data')
+                ? this.sectionExpandedState.get('test-data')
+                : true;
+            visible.push({
+                id: 'test-data',
+                title: 'Test Data Missing',
+                variant: 'error',
+                reason: this.testDataSection,
+                actionButtonLabel: 'Import Test Data',
+                expanded: expanded,
+            });
+        }
+        return visible;
+    }
+    async onMainAction() {
+        if (this.isApplying) {
+            return; // Prevent multiple clicks
+        }
+        this.isApplying = true;
+        try {
+            this.onApplySuggestionClick.emit();
+        }
+        finally {
+            // Reset loading state after action completes
+            // If you need to keep the loading state longer, call resetApplyingState() manually
+            // after your async operation completes
+            this.isApplying = false;
+        }
+    }
+    // Method to reset loading state (can be called externally if needed)
+    resetApplyingState() {
+        this.isApplying = false;
+    }
+    // Removed getBadgeClasses - now using BadgeComponent
+    getSectionBorderClass(section) {
+        switch (section.variant) {
+            case 'warning':
+                return 'cqa-border-l-4 cqa-border-l-yellow-500';
+            case 'error':
+                return 'cqa-border-l-4 cqa-border-l-red-500';
+            default:
+                return 'cqa-border-l-4 cqa-border-l-gray-500';
+        }
+    }
+    getMetadataValueClasses(key, value) {
+        // Base classes for all values (font-size: 14px, line-height: 18px, font-weight: 400)
+        return 'cqa-font-normal cqa-leading-[18px] cqa-tracking-normal';
+    }
+    getMetadataValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        return value.value;
+    }
+    getMetadataValueStyle(key, value) {
+        // Use the shared utility function for consistent colors
+        return getMetadataValueStyle(key, value);
+    }
+    getSectionTitleClasses(section) {
+        const baseClasses = ['cqa-text-sm', 'cqa-leading-[17px]', 'cqa-font-semibold'];
+        switch (section.variant) {
+            case 'warning':
+                return [...baseClasses, 'cqa-text-[#78350F]'].join(' ');
+            case 'error':
+                return [...baseClasses, 'cqa-text-[#881337]'].join(' ');
+            default:
+                return [...baseClasses, 'cqa-text-ink'].join(' ');
+        }
+    }
+    getSectionIconColor(section) {
+        switch (section.variant) {
+            case 'warning':
+                return 'cqa-text-[#78350F]';
+            case 'error':
+                return 'cqa-text-[#881337]';
+            default:
+                return 'cqa-text-gray-400';
+        }
+    }
+}
+InsightCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InsightCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InsightCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InsightCardComponent, selector: "cqa-insight-card", inputs: { title: "title", description: "description", badges: "badges", metadata: "metadata", prerequisiteSection: "prerequisiteSection", testDataSection: "testDataSection", metadataExpanded: "metadataExpanded", isPrerequisiteMissing: "isPrerequisiteMissing", isTestDataMissing: "isTestDataMissing" }, outputs: { metadataToggle: "metadataToggle", sectionToggle: "sectionToggle", sectionActionClick: "sectionActionClick", onApplySuggestionClick: "onApplySuggestionClick", onAttachPrerequisitesClick: "onAttachPrerequisitesClick", onImportTestDataClick: "onImportTestDataClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-font-inter cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-[#ECECEC] cqa-rounded-xl cqa-shadow-card\">\n    <!-- Section 1: Badges -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqapy-[1.5]\" *ngIf=\"visibleBadges.length > 0\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4866 12.0005L9.15329 2.66714C9.037 2.46194 8.86836 2.29127 8.66457 2.17252C8.46078 2.05378 8.22915 1.99121 7.99329 1.99121C7.75743 1.99121 7.52579 2.05378 7.322 2.17252C7.11822 2.29127 6.94958 2.46194 6.83329 2.66714L1.49995 12.0005C1.38241 12.204 1.32077 12.4351 1.32129 12.6701C1.32181 12.9052 1.38447 13.136 1.50292 13.339C1.62136 13.5421 1.79138 13.7102 1.99575 13.8264C2.20011 13.9425 2.43156 14.0026 2.66662 14.0005H13.3333C13.5672 14.0002 13.797 13.9385 13.9995 13.8213C14.202 13.7042 14.3701 13.5359 14.487 13.3332C14.6038 13.1306 14.6653 12.9007 14.6653 12.6668C14.6652 12.4329 14.6036 12.2031 14.4866 12.0005Z\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 6V8.66667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 11.333H8.00667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge \n          *ngFor=\"let badge of visibleBadges\" \n          [label]=\"badge.label\"\n          [icon]=\"badge.icon\"\n          [variant]=\"badge.variant || 'default'\"\n        ></cqa-badge>\n      </div>\n    </div>\n\n    <!-- Section 2: Title & Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <h2 class=\"cqa-font-medium cqa-text-lg cqa-leading-[22px] cqa-text-title\">\n        {{ title }}\n      </h2>\n      <p class=\"cqa-text-base cqa-font-normal cqa-text-description\">\n        {{ description }}\n      </p>\n    </div>\n\n  <!-- Section 3: Metadata Section (always visible) -->\n  <div *ngIf=\"metadata\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n    <div class=\"cqa-bg-surface-default cqa-rounded-[10px] cqa-px-4 cqa-py-3 cqa-border-t cqa-border-t-primary-surface\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-[25px]\">\n        <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n            <span class=\"cqa-text-xs cqa-font-normal cqa-font-inter cqa-text-metadata-key\">\n              {{ item.key }}:\n            </span>\n            <span \n              [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n              [ngStyle]=\"getMetadataValueStyle(item.key, item.value)\"\n              class=\"cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm cqa-text-title\">\n              {{ getMetadataValue(item.value) }}\n            </span>\n          </div>\n          <div *ngIf=\"!last\" class=\"cqa-h-4 cqa-w-px cqa-bg-gray-200\"></div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Section 4: Metadata toggle -->\n    <button *ngIf=\"metadata && (isPrerequisiteMissing || isTestDataMissing)\" type=\"button\"\n      class=\"cqa-text-sm cqa-text-primary cqa-inline-flex cqa-font-inter cqa-items-center cqa-gap-[6px]\"\n      (click)=\"toggleMetadata()\">\n      <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n      <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\">\n        {{ metadataExpanded ? 'expand_less' : 'expand_more' }}\n      </mat-icon>\n    </button>\n\n  <!-- Section 5: Sections (toggle visibility) -->\n  <div *ngIf=\"metadataExpanded && visibleSections?.length\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n    <div\n      *ngFor=\"let section of visibleSections\"\n      class=\"cqa-border-l-4 cqa-border-[#FBBF24] cqa-rounded-[10px] cqa-overflow-hidden\"\n      [ngClass]=\"getSectionBorderClass(section)\"\n    >\n      <div class=\"cqa-p-[10px] cqa-pl-[20px] cqa-flex cqa-flex-col cqa-gap-3\">\n        <!-- Section Title with Inline Collapse Button -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <h3 [ngClass]=\"getSectionTitleClasses(section)\" class=\"\">\n            {{ section.title }}\n          </h3>\n          <button\n            type=\"button\"\n            class=\"cqa-ml-auto cqa-inline-flex\"\n            (click)=\"toggleSection(section)\"\n            [attr.aria-label]=\"section.expanded !== false ? 'Collapse section' : 'Expand section'\"\n          >\n            <mat-icon [ngClass]=\"getSectionIconColor(section)\" class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">\n              {{ section.expanded !== false ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n        </div>\n\n        <!-- Collapsible Content: Reason and Action Button -->\n        <div *ngIf=\"section.expanded !== false\" class=\"cqa-flex cqa-flex-col cqa-gap-[10px]\">\n          <!-- Reason -->\n          <p class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-neutral-600\">\n            Reason: {{ section.reason }}\n          </p>\n          \n          <!-- Action Button -->\n          <div>\n            <cqa-button\n              variant=\"outlined\"\n              (clicked)=\"onSectionAction(section.id)\"\n              [customClass]=\"'cqa-py-[9px] cqa-text-[14px] cqa-leading-[17px] cqa-border-slate cqa-text-slate'\"\n            >\n              {{ section.actionButtonLabel }}\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <cqa-button\n      variant=\"filled\"\n      (clicked)=\"onMainAction()\"\n      [disabled]=\"isApplying\"\n      [customClass]=\"'!cqa-w-full !cqa-text-[14px] !cqa-leading-[20px] !cqa-font-semibold'\"\n    >\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n      {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n    </cqa-button>\n  </div>\n</div>\n \n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["label", "icon", "variant", "backgroundColor", "textColor", "iconBackgroundColor", "iconColor"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "keyvalue": i2.KeyValuePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InsightCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-insight-card', template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-font-inter cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-[#ECECEC] cqa-rounded-xl cqa-shadow-card\">\n    <!-- Section 1: Badges -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqapy-[1.5]\" *ngIf=\"visibleBadges.length > 0\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14.4866 12.0005L9.15329 2.66714C9.037 2.46194 8.86836 2.29127 8.66457 2.17252C8.46078 2.05378 8.22915 1.99121 7.99329 1.99121C7.75743 1.99121 7.52579 2.05378 7.322 2.17252C7.11822 2.29127 6.94958 2.46194 6.83329 2.66714L1.49995 12.0005C1.38241 12.204 1.32077 12.4351 1.32129 12.6701C1.32181 12.9052 1.38447 13.136 1.50292 13.339C1.62136 13.5421 1.79138 13.7102 1.99575 13.8264C2.20011 13.9425 2.43156 14.0026 2.66662 14.0005H13.3333C13.5672 14.0002 13.797 13.9385 13.9995 13.8213C14.202 13.7042 14.3701 13.5359 14.487 13.3332C14.6038 13.1306 14.6653 12.9007 14.6653 12.6668C14.6652 12.4329 14.6036 12.2031 14.4866 12.0005Z\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 6V8.66667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8 11.333H8.00667\" stroke=\"#E2AC20\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n        <cqa-badge \n          *ngFor=\"let badge of visibleBadges\" \n          [label]=\"badge.label\"\n          [icon]=\"badge.icon\"\n          [variant]=\"badge.variant || 'default'\"\n        ></cqa-badge>\n      </div>\n    </div>\n\n    <!-- Section 2: Title & Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <h2 class=\"cqa-font-medium cqa-text-lg cqa-leading-[22px] cqa-text-title\">\n        {{ title }}\n      </h2>\n      <p class=\"cqa-text-base cqa-font-normal cqa-text-description\">\n        {{ description }}\n      </p>\n    </div>\n\n  <!-- Section 3: Metadata Section (always visible) -->\n  <div *ngIf=\"metadata\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n    <div class=\"cqa-bg-surface-default cqa-rounded-[10px] cqa-px-4 cqa-py-3 cqa-border-t cqa-border-t-primary-surface\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-[25px]\">\n        <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-[6px]\">\n            <span class=\"cqa-text-xs cqa-font-normal cqa-font-inter cqa-text-metadata-key\">\n              {{ item.key }}:\n            </span>\n            <span \n              [ngClass]=\"getMetadataValueClasses(item.key, item.value)\" \n              [ngStyle]=\"getMetadataValueStyle(item.key, item.value)\"\n              class=\"cqa-font-normal cqa-leading-[18px] cqa-font-inter cqa-text-sm cqa-text-title\">\n              {{ getMetadataValue(item.value) }}\n            </span>\n          </div>\n          <div *ngIf=\"!last\" class=\"cqa-h-4 cqa-w-px cqa-bg-gray-200\"></div>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Section 4: Metadata toggle -->\n    <button *ngIf=\"metadata && (isPrerequisiteMissing || isTestDataMissing)\" type=\"button\"\n      class=\"cqa-text-sm cqa-text-primary cqa-inline-flex cqa-font-inter cqa-items-center cqa-gap-[6px]\"\n      (click)=\"toggleMetadata()\">\n      <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n      <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-[14px] cqa-leading-[14px]\">\n        {{ metadataExpanded ? 'expand_less' : 'expand_more' }}\n      </mat-icon>\n    </button>\n\n  <!-- Section 5: Sections (toggle visibility) -->\n  <div *ngIf=\"metadataExpanded && visibleSections?.length\" class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n    <div\n      *ngFor=\"let section of visibleSections\"\n      class=\"cqa-border-l-4 cqa-border-[#FBBF24] cqa-rounded-[10px] cqa-overflow-hidden\"\n      [ngClass]=\"getSectionBorderClass(section)\"\n    >\n      <div class=\"cqa-p-[10px] cqa-pl-[20px] cqa-flex cqa-flex-col cqa-gap-3\">\n        <!-- Section Title with Inline Collapse Button -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <h3 [ngClass]=\"getSectionTitleClasses(section)\" class=\"\">\n            {{ section.title }}\n          </h3>\n          <button\n            type=\"button\"\n            class=\"cqa-ml-auto cqa-inline-flex\"\n            (click)=\"toggleSection(section)\"\n            [attr.aria-label]=\"section.expanded !== false ? 'Collapse section' : 'Expand section'\"\n          >\n            <mat-icon [ngClass]=\"getSectionIconColor(section)\" class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">\n              {{ section.expanded !== false ? 'expand_less' : 'expand_more' }}\n            </mat-icon>\n          </button>\n        </div>\n\n        <!-- Collapsible Content: Reason and Action Button -->\n        <div *ngIf=\"section.expanded !== false\" class=\"cqa-flex cqa-flex-col cqa-gap-[10px]\">\n          <!-- Reason -->\n          <p class=\"cqa-text-sm cqa-font-normal cqa-leading-[18px] cqa-text-neutral-600\">\n            Reason: {{ section.reason }}\n          </p>\n          \n          <!-- Action Button -->\n          <div>\n            <cqa-button\n              variant=\"outlined\"\n              (clicked)=\"onSectionAction(section.id)\"\n              [customClass]=\"'cqa-py-[9px] cqa-text-[14px] cqa-leading-[17px] cqa-border-slate cqa-text-slate'\"\n            >\n              {{ section.actionButtonLabel }}\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  \n  <cqa-button\n      variant=\"filled\"\n      (clicked)=\"onMainAction()\"\n      [disabled]=\"isApplying\"\n      [customClass]=\"'!cqa-w-full !cqa-text-[14px] !cqa-leading-[20px] !cqa-font-semibold'\"\n    >\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.01882 0C9.12979 0.0454767 9.17718 0.15653 9.22261 0.259691C9.24539 0.319799 9.26628 0.380234 9.28657 0.44115C9.29452 0.464493 9.30246 0.487836 9.31065 0.511886C9.41613 0.826009 9.51008 1.1435 9.60457 1.46076C9.62593 1.53238 9.64739 1.60397 9.66885 1.67557C9.7781 2.04007 9.88654 2.4048 9.99438 2.76969C10.0095 2.82093 10.0247 2.87218 10.0398 2.92342C10.0826 3.0679 10.1252 3.21239 10.1677 3.35694C10.2573 3.66239 10.3495 3.96695 10.4476 4.27002C10.4561 4.29653 10.4647 4.32305 10.4735 4.35036C10.7284 5.12999 11.0896 5.82875 11.6818 6.42393C11.6965 6.4394 11.7111 6.45488 11.7262 6.47083C11.979 6.72875 12.3034 6.93541 12.6276 7.10221C12.6441 7.11085 12.6606 7.11948 12.6776 7.12838C13.6317 7.61851 14.779 7.83407 15.8124 8.12101C16.2652 8.24681 16.7166 8.37658 17.1663 8.51206C17.1979 8.52157 17.2296 8.53107 17.2612 8.54055C17.3557 8.5689 17.45 8.59774 17.5442 8.62694C17.5662 8.63358 17.5882 8.64023 17.6108 8.64707C17.7406 8.68812 17.8648 8.73658 17.9713 8.82054C18.0038 8.88837 18.0038 8.88837 17.995 8.95619C17.8913 9.05472 17.7884 9.10092 17.6516 9.14599C17.632 9.15264 17.6124 9.1593 17.5923 9.16615C17.3612 9.24366 17.127 9.31149 16.8925 9.37871C16.8444 9.39261 16.7963 9.40651 16.7482 9.42042C16.4514 9.50603 16.1542 9.5898 15.8566 9.67263C15.4646 9.78175 15.0733 9.89268 14.6823 10.0049C14.6182 10.0232 14.5541 10.0416 14.49 10.0598C14.1534 10.1557 13.8185 10.2551 13.4863 10.3642C13.4587 10.3732 13.4312 10.3822 13.4028 10.3915C12.2902 10.7616 11.4422 11.4522 10.9114 12.462C10.6253 13.0295 10.4565 13.6432 10.2843 14.2489C10.2377 14.4124 10.1882 14.5749 10.1381 14.7374C10.0988 14.8652 10.0604 14.9933 10.023 15.1216C10.0185 15.1369 10.0141 15.1522 10.0095 15.1679C9.98788 15.2419 9.96638 15.3159 9.94503 15.3899C9.89039 15.5776 9.83156 15.7637 9.77111 15.9498C9.66383 16.2804 9.5662 16.6135 9.46917 16.947C9.32288 17.4491 9.32288 17.4491 9.23993 17.6905C9.23443 17.7067 9.22893 17.7229 9.22326 17.7396C9.19298 17.8256 9.16183 17.9047 9.10453 17.9774C9.01734 17.9958 9.01734 17.9958 8.93901 18C8.84946 17.8752 8.79016 17.7542 8.74265 17.6102C8.73574 17.5897 8.72882 17.5693 8.7217 17.5483C8.63368 17.285 8.55502 17.0189 8.47634 16.7529C8.45832 16.6921 8.44022 16.6313 8.42211 16.5705C8.2872 16.1173 8.15451 15.6635 8.02202 15.2096C7.47014 12.9645 7.47014 12.9645 6.078 11.1493C6.05569 11.1319 6.03338 11.1145 6.01039 11.0966C5.09826 10.398 3.89667 10.1394 2.7963 9.83627C2.52415 9.76124 2.2521 9.68587 1.98006 9.61046C1.95628 9.60386 1.95628 9.60386 1.93201 9.59714C1.53962 9.48834 1.14735 9.37925 0.756448 9.26566C0.739911 9.26089 0.723375 9.25612 0.706338 9.25121C0.105798 9.07767 0.105798 9.07767 0.00129307 8.95619C-0.00166252 8.90108 -0.00166252 8.90108 0.0249378 8.84315C0.134167 8.7408 0.240153 8.69696 0.38432 8.65238C0.405194 8.64567 0.426068 8.63897 0.447574 8.63206C0.511506 8.61164 0.575577 8.59169 0.639702 8.57183C0.658001 8.56609 0.676301 8.56035 0.695155 8.55443C0.82457 8.51385 0.95445 8.47479 1.08452 8.43618C1.11648 8.42665 1.11648 8.42665 1.14909 8.41693C1.70454 8.25174 2.26361 8.09801 2.82252 7.94392C3.23899 7.82909 3.65476 7.71236 4.06921 7.59097C4.08825 7.58542 4.1073 7.57987 4.12692 7.57415C5.087 7.29393 6.02557 6.89632 6.64547 6.1074C6.65475 6.09569 6.66403 6.08399 6.6736 6.07194C7.36395 5.1963 7.63315 4.13145 7.93391 3.09241C8.03285 2.75069 8.13298 2.40929 8.23345 2.06798C8.26127 1.97347 8.28906 1.87894 8.31673 1.78439C8.42788 1.40458 8.5407 1.02528 8.66 0.647727C8.67116 0.612372 8.68227 0.577001 8.69333 0.541614C8.86035 0.00797522 8.86035 0.00797522 9.01882 0Z\" fill=\"#FBFCFF\"/><path d=\"M14.4719 1.11069C14.5805 1.22817 14.6022 1.36624 14.636 1.51625C14.7487 1.98751 14.8786 2.42084 15.3293 2.6946C15.6074 2.84167 15.9389 2.90859 16.247 2.9718C16.3771 2.99902 16.4869 3.03515 16.5985 3.1074C16.6236 3.14555 16.6236 3.14555 16.6221 3.21197C16.5963 3.29273 16.5736 3.31878 16.5054 3.37165C16.4308 3.39549 16.4308 3.39549 16.3413 3.41404C16.3075 3.42147 16.2736 3.42898 16.2398 3.43656C16.2217 3.44058 16.2036 3.4446 16.1849 3.44874C15.6339 3.57062 15.6339 3.57062 15.1576 3.84645C15.1421 3.85837 15.1267 3.87029 15.1107 3.88257C14.7703 4.16959 14.6983 4.64703 14.5958 5.04699C14.59 5.06896 14.5841 5.09092 14.578 5.11355C14.573 5.133 14.5679 5.15244 14.5627 5.17248C14.5405 5.23185 14.5176 5.27057 14.4719 5.31607C14.3447 5.33152 14.3447 5.33152 14.2828 5.31607C14.1843 5.24309 14.1623 5.15997 14.1366 5.04828C14.1322 5.03099 14.1279 5.01369 14.1235 4.99587C14.1098 4.94064 14.0965 4.88531 14.0833 4.82996C13.9796 4.39891 13.8625 3.976 13.449 3.72333C13.1258 3.55101 12.7329 3.46951 12.3717 3.4037C12.2727 3.38399 12.216 3.3592 12.1547 3.28121C12.1414 3.20208 12.1414 3.20208 12.1547 3.12294C12.2489 3.02971 12.348 3.00696 12.4754 2.97881C12.5156 2.9693 12.5557 2.95973 12.5958 2.9501C12.6165 2.94516 12.6372 2.94022 12.6586 2.93512C12.7642 2.90911 12.8689 2.87995 12.9734 2.85021C12.9924 2.84494 13.0114 2.83967 13.031 2.83424C13.2436 2.77346 13.4271 2.69571 13.5971 2.5577C13.6129 2.54523 13.6288 2.53276 13.6451 2.5199C13.9096 2.29228 13.9995 1.95032 14.081 1.63124C14.0873 1.60702 14.0935 1.5828 14.0999 1.55784C14.1123 1.50918 14.1244 1.46046 14.1363 1.4117C14.1449 1.37776 14.1449 1.37776 14.1535 1.34315C14.1585 1.32288 14.1635 1.30261 14.1686 1.28172C14.1904 1.21719 14.219 1.16652 14.2591 1.11069C14.3362 1.07385 14.3903 1.0905 14.4719 1.11069Z\" fill=\"#FBFCFF\"/><path d=\"M3.59089 12.4942C3.61902 12.4944 3.61902 12.4944 3.64772 12.4946C3.84954 12.5004 3.98609 12.5623 4.13472 12.692C4.30767 12.8707 4.38753 13.0722 4.38299 13.313C4.36357 13.5082 4.24316 13.6787 4.09547 13.8107C3.92163 13.9448 3.74626 13.9892 3.52411 13.983C3.33681 13.9621 3.1606 13.877 3.02785 13.749C2.86276 13.5336 2.8145 13.3361 2.83869 13.0707C2.88867 12.8618 3.03274 12.6923 3.21701 12.5733C3.34502 12.5113 3.44798 12.493 3.59089 12.4942Z\" fill=\"#FBFCFF\"/></svg>\n      {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n    </cqa-button>\n  </div>\n</div>\n \n", styles: [] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], badges: [{
+                type: Input
+            }], metadata: [{
+                type: Input
+            }], prerequisiteSection: [{
+                type: Input
+            }], testDataSection: [{
+                type: Input
+            }], metadataExpanded: [{
+                type: Input
+            }], isPrerequisiteMissing: [{
+                type: Input
+            }], isTestDataMissing: [{
+                type: Input
+            }], metadataToggle: [{
+                type: Output
+            }], sectionToggle: [{
+                type: Output
+            }], sectionActionClick: [{
+                type: Output
+            }], onApplySuggestionClick: [{
+                type: Output
+            }], onAttachPrerequisitesClick: [{
+                type: Output
+            }], onImportTestDataClick: [{
+                type: Output
+            }] } });
+
+class DropdownButtonComponent {
+    constructor() {
+        this.label = 'Select an option';
+        this.options = [];
+        this.disabled = false;
+        this.selectionChange = new EventEmitter();
+        this.opened = new EventEmitter();
+        this.closed = new EventEmitter();
+        this.isOpen = false;
+        this.clickInside = false;
+    }
+    get displayLabel() {
+        if (this.selectedValue !== undefined && this.selectedValue !== null) {
+            const selectedOption = this.options.find(opt => opt.value === this.selectedValue);
+            return selectedOption ? selectedOption.label : this.label;
+        }
+        return this.placeholder || this.label;
+    }
+    get buttonClasses() {
+        const baseClasses = [
+            'cqa-h-9',
+            'cqa-px-3',
+            'cqa-py-2',
+            'cqa-bg-gray-100',
+            'cqa-rounded-[5px]',
+            'cqa-outline',
+            'cqa-outline-1',
+            'cqa-outline-offset-[-1px]',
+            'cqa-outline-gray-200',
+            'cqa-inline-flex',
+            'cqa-justify-center',
+            'cqa-items-center',
+            'cqa-gap-1',
+            'cqa-cursor-pointer',
+            'cqa-transition-colors'
+        ];
+        if (this.disabled) {
+            baseClasses.push('cqa-opacity-50', 'cqa-cursor-not-allowed');
+        }
+        else {
+            baseClasses.push('cqa-hover:cqa-bg-gray-200');
+        }
+        if (this.isOpen) {
+            baseClasses.push('cqa-bg-gray-200');
+        }
+        return baseClasses.join(' ');
+    }
+    get labelClasses() {
+        return [
+            'cqa-text-center',
+            'cqa-justify-center',
+            'cqa-text-gray-950',
+            'cqa-text-xs',
+            'cqa-font-medium',
+            'cqa-leading-4'
+        ].join(' ');
+    }
+    get arrowClasses() {
+        const baseClasses = [
+            'cqa-w-4',
+            'cqa-h-4',
+            'cqa-relative',
+            'cqa-transition-transform'
+        ];
+        if (this.isOpen) {
+            baseClasses.push('cqa-rotate-180');
+        }
+        return baseClasses.join(' ');
+    }
+    toggleDropdown(event) {
+        if (this.disabled)
+            return;
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.clickInside = true;
+        }
+        this.isOpen = !this.isOpen;
+        // Reset clickInside flag after a short delay
+        setTimeout(() => {
+            this.clickInside = false;
+            if (this.isOpen) {
+                this.opened.emit();
+            }
+            else {
+                this.closed.emit();
+            }
+        }, 100);
+    }
+    selectOption(option, event) {
+        if (option.disabled)
+            return;
+        if (event) {
+            event.stopPropagation();
+            this.clickInside = true;
+        }
+        this.selectedValue = option.value;
+        this.isOpen = false;
+        this.selectionChange.emit(option.value);
+        this.closed.emit();
+        // Reset flag after selection
+        setTimeout(() => {
+            this.clickInside = false;
+        }, 100);
+    }
+    getButtonWidth() {
+        if (this.buttonElement?.nativeElement) {
+            const width = this.buttonElement.nativeElement.offsetWidth;
+            return width > 0 ? width : 150; // Fallback to 150px if width is 0
+        }
+        return 150; // Default fallback width
+    }
+    getOptionClasses(option) {
+        const baseClasses = [
+            'cqa-p-1.5',
+            'cqa-rounded-md',
+            'cqa-inline-flex',
+            'cqa-justify-start',
+            'cqa-items-center',
+            'cqa-cursor-pointer',
+            'cqa-transition-colors'
+        ];
+        if (option.disabled) {
+            baseClasses.push('cqa-opacity-50', 'cqa-cursor-not-allowed');
+        }
+        else {
+            baseClasses.push('cqa-hover:cqa-bg-gray-50');
+        }
+        if (this.selectedValue === option.value) {
+            baseClasses.push('cqa-bg-primary-surface');
+        }
+        return baseClasses.join(' ');
+    }
+    onDocumentClick(event) {
+        // Ignore if click was inside the component (button click)
+        if (this.clickInside) {
+            return;
+        }
+        // Use a longer delay to ensure dropdown has time to render
+        setTimeout(() => {
+            if (!this.isOpen)
+                return;
+            const target = event.target;
+            // Check if click is inside the component container
+            if (this.dropdownContainer?.nativeElement?.contains(target)) {
+                return;
+            }
+            // Close dropdown if click is outside
+            this.isOpen = false;
+            this.closed.emit();
+        }, 200);
+    }
+}
+DropdownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DropdownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownButtonComponent, selector: "cqa-dropdown-button", inputs: { label: "label", options: "options", selectedValue: "selectedValue", disabled: "disabled", placeholder: "placeholder" }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true }], ngImport: i0, template: "<div id=\"cqa-ui-root\" #dropdownContainer style=\"position: relative; display: inline-block; width: auto;\">\n  <button\n    #buttonElement\n    type=\"button\"\n    [class]=\"buttonClasses\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown($event)\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-haspopup]=\"true\"\n  >\n    <div [class]=\"labelClasses\">\n      {{ displayLabel }}\n    </div>\n    <div [class]=\"arrowClasses\">\n      <svg\n        class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n        viewBox=\"0 0 8 4\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 0L4 4L8 0\"\n          stroke=\"#0B0B0C\"\n          stroke-width=\"1.33\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </button>\n\n  <!-- Dropdown Menu -->\n  <div\n    *ngIf=\"isOpen && options && options.length > 0\"\n    class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-p-1.5 cqa-bg-white cqa-rounded-lg cqa-shadow-[0px_2px_4px_-2px_rgba(0,0,0,0.10)] cqa-shadow-md cqa-outline cqa-outline-1 cqa-outline-offset-[-1px] cqa-outline-gray-200 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-z-[9999] cqa-w-auto cqa-max-w-[350px]\"\n  >\n    <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5 cqa-w-full\">\n      <div\n        *ngFor=\"let option of options\"\n        (click)=\"selectOption(option, $event)\"\n        [class]=\"getOptionClasses(option)\"\n        class=\"cqa-w-full cqa-whitespace-nowrap\"\n      >\n        <div class=\"cqa-w-6 cqa-h-4 cqa-pr-2 cqa-inline-flex cqa-flex-col cqa-justify-center cqa-items-center\">\n          <mat-icon\n            *ngIf=\"selectedValue === option.value\"\n            class=\"cqa-w-4 cqa-h-4 cqa-text-primary cqa-text-base cqa-leading-4\"\n          >check</mat-icon>\n        </div>\n        <div class=\"cqa-flex-1 cqa-inline-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n          <div class=\"cqa-justify-center cqa-text-gray-950 cqa-text-sm cqa-font-normal cqa-leading-5 cqa-font-geist\">\n            {{ option.label }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-dropdown-button', template: "<div id=\"cqa-ui-root\" #dropdownContainer style=\"position: relative; display: inline-block; width: auto;\">\n  <button\n    #buttonElement\n    type=\"button\"\n    [class]=\"buttonClasses\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown($event)\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-haspopup]=\"true\"\n  >\n    <div [class]=\"labelClasses\">\n      {{ displayLabel }}\n    </div>\n    <div [class]=\"arrowClasses\">\n      <svg\n        class=\"cqa-w-2 cqa-h-1 cqa-absolute cqa-left-[4px] cqa-top-[6px]\"\n        viewBox=\"0 0 8 4\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 0L4 4L8 0\"\n          stroke=\"#0B0B0C\"\n          stroke-width=\"1.33\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </button>\n\n  <!-- Dropdown Menu -->\n  <div\n    *ngIf=\"isOpen && options && options.length > 0\"\n    class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-p-1.5 cqa-bg-white cqa-rounded-lg cqa-shadow-[0px_2px_4px_-2px_rgba(0,0,0,0.10)] cqa-shadow-md cqa-outline cqa-outline-1 cqa-outline-offset-[-1px] cqa-outline-gray-200 cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-z-[9999] cqa-w-auto cqa-max-w-[350px]\"\n  >\n    <div class=\"cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-0.5 cqa-w-full\">\n      <div\n        *ngFor=\"let option of options\"\n        (click)=\"selectOption(option, $event)\"\n        [class]=\"getOptionClasses(option)\"\n        class=\"cqa-w-full cqa-whitespace-nowrap\"\n      >\n        <div class=\"cqa-w-6 cqa-h-4 cqa-pr-2 cqa-inline-flex cqa-flex-col cqa-justify-center cqa-items-center\">\n          <mat-icon\n            *ngIf=\"selectedValue === option.value\"\n            class=\"cqa-w-4 cqa-h-4 cqa-text-primary cqa-text-base cqa-leading-4\"\n          >check</mat-icon>\n        </div>\n        <div class=\"cqa-flex-1 cqa-inline-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n          <div class=\"cqa-justify-center cqa-text-gray-950 cqa-text-sm cqa-font-normal cqa-leading-5 cqa-font-geist\">\n            {{ option.label }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], dropdownContainer: [{
+                type: ViewChild,
+                args: ['dropdownContainer', { static: false }]
+            }], buttonElement: [{
+                type: ViewChild,
+                args: ['buttonElement', { static: false }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class HeatErrorMapCellComponent {
+    constructor() {
+        this.type = 'smoke';
+        this.cases = 0;
+        this.defects = 0;
+        this.progress = 0; // Progress value from 0 to 100
+    }
+    get backgroundColorStyle() {
+        switch (this.type) {
+            case 'smoke':
+                return { 'background-color': '#FDBA74' }; // orange-300
+            case 'sanity':
+                return { 'background-color': '#FCD34D' }; // amber-300
+            case 'regression':
+                return { 'background-color': '#A7F3D0' }; // emerald-200
+            case 'revisit':
+                return { 'background-color': '#F4F4F5' }; // zinc-100
+            default:
+                return { 'background-color': '#FDBA74' }; // orange-300
+        }
+    }
+    get progressWidth() {
+        // Clamp progress between 0 and 100
+        const clampedProgress = Math.max(0, Math.min(100, this.progress));
+        return `${clampedProgress}%`;
+    }
+}
+HeatErrorMapCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: HeatErrorMapCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HeatErrorMapCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: HeatErrorMapCellComponent, selector: "cqa-heat-error-map-cell", inputs: { type: "type", cases: "cases", defects: "defects", progress: "progress" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"width: 14rem; height: 6rem; display: inline-flex; justify-content: space-between; align-items: flex-start;\">\n  <div class=\"min-w-56 min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n    <!-- section 1 -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n          {{ cases }} cases\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n          {{ defects }} defects\n        </div>\n      </div>\n    </div>\n    <!-- section 2 -->\n    <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n      <div \n        class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n        [style.width]=\"progressWidth\"\n      ></div>\n    </div>\n  </div>\n</div>\n\n\n", directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: HeatErrorMapCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-heat-error-map-cell', template: "<div id=\"cqa-ui-root\" style=\"width: 14rem; height: 6rem; display: inline-flex; justify-content: space-between; align-items: flex-start;\">\n  <div class=\"min-w-56 min-h-24 cqa-self-stretch cqa-flex cqa-flex-col cqa-rounded-2xl cqa-justify-start cqa-items-start cqa-gap-4 cqa-p-4\" [ngStyle]=\"backgroundColorStyle\">\n    <!-- section 1 -->\n    <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start cqa-gap-px\">\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-base cqa-font-bold cqa-leading-5 cqa-font-geist\">\n          {{ cases }} cases\n        </div>\n      </div>\n      <div class=\"cqa-self-stretch cqa-flex cqa-flex-col cqa-justify-start cqa-items-start\">\n        <div class=\"cqa-self-stretch cqa-justify-center cqa-text-gray-900 cqa-text-xs cqa-font-normal cqa-leading-4 cqa-font-geist\">\n          {{ defects }} defects\n        </div>\n      </div>\n    </div>\n    <!-- section 2 -->\n    <div class=\"cqa-self-stretch cqa-h-1 cqa-relative cqa-rounded-full cqa-overflow-hidden cqa-bg-white/70\">\n      <div \n        class=\"cqa-h-1 cqa-left-0 cqa-top-0 cqa-absolute cqa-bg-red-500 cqa-rounded-full\"\n        [style.width]=\"progressWidth\"\n      ></div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], cases: [{
+                type: Input
+            }], defects: [{
+                type: Input
+            }], progress: [{
+                type: Input
+            }] } });
+
+class EmptyStateComponent {
+    constructor() {
+        this.title = '';
+        this.description = '';
+        this.actions = [];
+        this.actionClick = new EventEmitter();
+    }
+    onActionClick(action, event) {
+        if (!action.disabled) {
+            if (action.onClick) {
+                action.onClick();
+            }
+            this.actionClick.emit(action);
+        }
+    }
+}
+EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmptyStateComponent, selector: "cqa-empty-state", inputs: { imageUrl: "imageUrl", title: "title", description: "description", actions: "actions" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\" style=\"background-color: white; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84.63px 33px 84.62px 33px;\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-[62px] cqa-items-center\">\n    <!-- Icon Container -->\n    <div *ngIf=\"imageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-32 cqa-h-32\">\n      <!-- Main Icon Container with Gradient Background and Shadow -->\n      <div class=\"cqa-relative cqa-rounded-3xl cqa-w-32 cqa-h-32 cqa-shadow-sm\">\n        <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n        <!-- Icon/Image centered inside on top layer - fully opaque -->\n        <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n          <div class=\"cqa-w-20 cqa-h-20 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n            <img [src]=\"imageUrl\" alt=\"\" width=\"80px\" height=\"80px\" class=\"cqa-block cqa-max-w-none cqa-w-20 cqa-h-20 cqa-object-contain\" />\n          </div>\n        </div>\n      </div>\n      <!-- Decorative Dots -->\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815]\" style=\"left: 120.79px; top: -9.21px; width: 18.416px; height: 18.416px; z-index: 20;\"></div>\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695]\" style=\"left: -9.02px; top: 124.98px; width: 14.044px; height: 14.044px; z-index: 20;\"></div>\n    </div>\n\n    <!-- Content Container -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-9 cqa-items-center\">\n      <!-- Title and Description -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-items-center cqa-w-full\">\n        <!-- Title -->\n        <div *ngIf=\"title\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <h3 class=\"cqa-font-inter cqa-text-lg cqa-font-medium cqa-leading-[18px] cqa-text-center cqa-text-neutral-900\">\n            {{ title }}\n          </h3>\n        </div>\n        <!-- Description -->\n        <div *ngIf=\"description\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-[14px] cqa-text-center cqa-text-neutral-500\">\n            {{ description }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div\n        *ngIf=\"actions && actions.length > 0\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [ngClass]=\"actions.length > 1 ? 'cqa-flex-row cqa-flex-wrap cqa-gap-4' : 'cqa-flex-col cqa-gap-2'\"\n      >\n        <cqa-button\n          *ngFor=\"let action of actions\"\n          [variant]=\"action.variant || 'filled'\"\n          [icon]=\"action.icon\"\n          [iconPosition]=\"action.iconPosition || 'start'\"\n          [disabled]=\"action.disabled\"\n          (clicked)=\"onActionClick(action, $event)\"\n        >\n          {{ action.label }}\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-empty-state', template: "<div id=\"cqa-ui-root\" style=\"background-color: white; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 84.63px 33px 84.62px 33px;\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-[62px] cqa-items-center\">\n    <!-- Icon Container -->\n    <div *ngIf=\"imageUrl\" class=\"cqa-relative cqa-shrink-0 cqa-w-32 cqa-h-32\">\n      <!-- Main Icon Container with Gradient Background and Shadow -->\n      <div class=\"cqa-relative cqa-rounded-3xl cqa-w-32 cqa-h-32 cqa-shadow-sm\">\n        <div class=\"cqa-absolute cqa-inset-0 cqa-bg-gradient-to-br cqa-from-indigo-500 cqa-to-violet-950 cqa-rounded-3xl cqa-opacity-10\"></div>\n        <!-- Icon/Image centered inside on top layer - fully opaque -->\n        <div class=\"cqa-absolute cqa-inset-0 cqa-flex cqa-items-center cqa-justify-center cqa-rounded-3xl\">\n          <div class=\"cqa-w-20 cqa-h-20 cqa-flex cqa-items-center cqa-justify-center cqa-relative\">\n            <img [src]=\"imageUrl\" alt=\"\" width=\"80px\" height=\"80px\" class=\"cqa-block cqa-max-w-none cqa-w-20 cqa-h-20 cqa-object-contain\" />\n          </div>\n        </div>\n      </div>\n      <!-- Decorative Dots -->\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.815]\" style=\"left: 120.79px; top: -9.21px; width: 18.416px; height: 18.416px; z-index: 20;\"></div>\n      <div class=\"cqa-absolute cqa-rounded-full cqa-bg-primary-300 cqa-opacity-[0.695]\" style=\"left: -9.02px; top: 124.98px; width: 14.044px; height: 14.044px; z-index: 20;\"></div>\n    </div>\n\n    <!-- Content Container -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-9 cqa-items-center\">\n      <!-- Title and Description -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-items-center cqa-w-full\">\n        <!-- Title -->\n        <div *ngIf=\"title\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <h3 class=\"cqa-font-inter cqa-text-lg cqa-font-medium cqa-leading-[18px] cqa-text-center cqa-text-neutral-900\">\n            {{ title }}\n          </h3>\n        </div>\n        <!-- Description -->\n        <div *ngIf=\"description\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-w-full\">\n          <p class=\"cqa-font-inter cqa-font-medium cqa-text-sm cqa-leading-[14px] cqa-text-center cqa-text-neutral-500\">\n            {{ description }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div\n        *ngIf=\"actions && actions.length > 0\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center\"\n        [ngClass]=\"actions.length > 1 ? 'cqa-flex-row cqa-flex-wrap cqa-gap-4' : 'cqa-flex-col cqa-gap-2'\"\n      >\n        <cqa-button\n          *ngFor=\"let action of actions\"\n          [variant]=\"action.variant || 'filled'\"\n          [icon]=\"action.icon\"\n          [iconPosition]=\"action.iconPosition || 'start'\"\n          [disabled]=\"action.disabled\"\n          (clicked)=\"onActionClick(action, $event)\"\n        >\n          {{ action.label }}\n        </cqa-button>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { imageUrl: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], actionClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Image assets constants for the UI library
+ *
+ * Place your image files in src/lib/assets/images/ and reference them here
+ *
+ * Usage in components:
+ * import { EMPTY_STATE_IMAGES } from '../assets/images/image-assets.constants';
+ * imageUrl: EMPTY_STATE_IMAGES.TEST_CASE
+ */
+const EMPTY_STATE_IMAGES = {
+    // Test Case icon (document with gear)
+    TEST_CASE: 'assets/images/TestCaseIcon.png',
+    // Search/Debug icon (magnifying glass with question mark)
+    SEARCH_DEBUG: 'assets/images/SearchIcon.png',
+    // Upload/Folder icon (folder with upload arrow and plus)
+    UPLOAD_FOLDER: 'assets/images/FilesIcon.png',
+    // Dashboard overview
+    DASHBOARD: 'assets/images/DashboardIcon.png',
+    // Checklist/Add icon (clipboard with plus)
+    CHECKLIST_ADD: 'assets/images/StepsIcon.png',
+    // Document/Gear icon (document with gear overlay)
+    DOCUMENT_GEAR: 'assets/images/document-gear-icon.svg',
+    // Analytics/Chart icon (bar chart)
+    ANALYTICS_CHART: 'assets/images/ReportsIcon.png',
+    // Default empty state icon
+    DEFAULT: 'assets/images/SearchIcon.png',
+};
+
+class TableTemplateComponent {
+    constructor() {
+        // Search bar inputs
+        this.searchPlaceholder = 'Search components';
+        this.searchValue = '';
+        this.showClear = true;
+        this.showSearchBar = true;
+        // Filter inputs
+        this.filterConfig = [];
+        this.showFilterPanel = false;
+        this.showFilterButton = true;
+        // Other button input
+        this.otherButtonLabel = 'Other Button';
+        this.otherButtonVariant = 'filled';
+        this.showOtherButton = true;
+        // Action menu button (three-dot menu in table rows)
+        this.showActionButton = true;
+        // Settings and refresh buttons
+        this.showSettingsButton = true;
+        this.showAutoRefreshButton = true;
+        // Data input
+        this.data = [];
+        // Empty state inputs
+        this.isEmptyState = false;
+        this.emptyStateConfig = {
+            title: 'No Data Available Yet',
+            description: 'Run or upload your first test to see your analytics and trends here. Watch your quality metrics come to life with real-time insights.',
+            imageUrl: EMPTY_STATE_IMAGES.DASHBOARD,
+            actions: [{ label: 'Run Test Suite', variant: 'filled' }],
+        };
+        // Action bar inputs
+        this.actions = [
+            {
+                id: 'delete',
+                label: 'Delete',
+                icon: 'delete',
+                tooltip: 'Delete selected',
+                onClick: (context) => {
+                    console.log('Delete action clicked:', context);
+                }
+            },
+            {
+                id: 'edit',
+                label: 'Edit',
+                icon: 'edit',
+                tooltip: 'Edit selected',
+                onClick: (context) => {
+                    console.log('Edit action clicked:', context);
+                }
+            },
+            {
+                id: 'add-tag',
+                label: 'Add Tag',
+                icon: 'local_offer',
+                tooltip: 'Add tags',
+                onClick: (context) => {
+                    console.log('Add tag action clicked:', context);
+                }
+            },
+            {
+                id: 'remove-tag',
+                label: 'Remove Tag',
+                icon: 'label_off',
+                tooltip: 'Remove tags',
+                onClick: (context) => {
+                    console.log('Remove tag action clicked:', context);
+                }
+            },
+        ];
+        // Chips inputs
+        this.chips = [];
+        this.filterApplied = false;
+        // Table inputs
+        this.columns = [];
+        this.selectedAutoRefreshInterval = 0;
+        this.pageIndex = 0;
+        this.pageSize = 10;
+        // Backward-compatibility flag; if provided, dynamic table will use it when specific flags are undefined
+        // Internal state for column visibility
+        this._columnVisibility = {};
+        this._cachedVisibilityColumns = [];
+        this.filteredRows = [];
+        this.pagedRows = [];
+    }
+    // Derived columns with visibility applied. Avoid mutating @Input() columns so parent bindings aren't overridden.
+    get computedColumns() {
+        const visibility = this._columnVisibility || {};
+        const source = this.columns || [];
+        return source.map(col => {
+            if (['checkbox', 'actions'].includes(col.fieldId)) {
+                return col;
+            }
+            const show = visibility[col.fieldId];
+            return { ...col, isShow: show !== false };
+        });
+    }
+    // Auto-generated visibility columns from columns input (excludes default columns and checkbox/actions)
+    // Cached to avoid creating new arrays on every change detection cycle
+    get visibilityColumns() {
+        return this._cachedVisibilityColumns;
+    }
+    // Internal column visibility state
+    get columnVisibility() {
+        return this._columnVisibility;
+    }
+    ngOnInit() {
+        this.initializeComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes['data'] || changes['isEmptyState']) {
+            this.initializeComponent();
+        }
+        if (changes['columns']) {
+            this.initializeColumnVisibility();
+        }
+    }
+    initializeComponent() {
+        if (this.isEmptyState) {
+            this.filteredRows = [];
+            this.pagedRows = [];
+            return;
+        }
+        this.filteredRows = [...this.data];
+        this.applyPagination();
+        this.initializeColumnVisibility();
+    }
+    initializeColumnVisibility() {
+        // Cache visibility columns to avoid creating new arrays on every change detection
+        this._cachedVisibilityColumns = this.mapVisibilityColumns();
+        // Initialize visibility state for all visibility columns (default to true)
+        for (const col of this._cachedVisibilityColumns) {
+            if (this._columnVisibility[col.id] === undefined) {
+                this._columnVisibility[col.id] = true;
+            }
+        }
+    }
+    get anyRowSelected() {
+        return !!(this.pagedRows && this.pagedRows.some(r => !!r.isSelected));
+    }
+    get currentSelectedItems() {
+        return (this.pagedRows || []).filter(r => !!r.isSelected);
+    }
+    actionClick(data) {
+        console.log('action toolbar', data);
+    }
+    view(id) {
+        console.log('View', id);
+    }
+    edit(row) {
+        console.log('Edit', row);
+    }
+    delete(row) {
+        console.log('Delete', row);
+    }
+    onRowCheckboxChange(event, row) {
+        const input = event.target;
+        const checked = !!input?.checked;
+        row.isSelected = checked;
+    }
+    toggleFilter() {
+        this.showFilterPanel = !this.showFilterPanel;
+    }
+    onColumnVisibilityChange(cfg) {
+        this._columnVisibility = { ...cfg };
+        // Do not mutate this.columns; computedColumns getter will reflect changes
+    }
+    onAutoRefreshChange(intervalMs) {
+        this.selectedAutoRefreshInterval = intervalMs;
+        console.log('Auto refresh interval', intervalMs);
+    }
+    valueChange(value) {
+        console.log('Value changed', value);
+    }
+    search(value) {
+        console.log('Search', value);
+    }
+    cleared() {
+        console.log('Cleared');
+    }
+    resultBadgeClass(result) {
+        const value = (result || '').toUpperCase();
+        if (value === 'SUCCESS')
+            return 'cqa-bg-green-100 cqa-text-green-700';
+        if (value === 'FAILURE' || value === 'ABORTED')
+            return 'cqa-bg-red-100 cqa-text-red-700';
+        if (value === 'QUEUED' || value === 'NOT_EXECUTED' || value === 'STOPPED')
+            return 'cqa-bg-gray-100 cqa-text-gray-700';
+        return 'cqa-bg-gray-100 cqa-text-gray-700';
+    }
+    onEmptyAction(action) {
+        if (action?.label === 'Show filters') {
+            this.toggleFilter();
+        }
+    }
+    onFiltersChanged(current) {
+        this.filteredRows = this.data.filter(r => this.passFilters(current, r));
+        this.pageIndex = 0;
+        this.applyPagination();
+        const chips = [];
+        if (current) {
+            for (const key of Object.keys(current)) {
+                const value = current[key];
+                if (value == null || value === '' || (Array.isArray(value) && value.length === 0))
+                    continue;
+                let text = '';
+                if (Array.isArray(value)) {
+                    text = value.map((v) => (v?.name ?? v?.label ?? v?.value ?? v)).join(', ');
+                }
+                else if (typeof value === 'object') {
+                    if ('start' in value || 'end' in value) {
+                        const s = value.start ? new Date(value.start).toLocaleDateString() : '';
+                        const e = value.end ? new Date(value.end).toLocaleDateString() : '';
+                        text = [s, e].filter(Boolean).join(' - ');
+                    }
+                    else {
+                        text = (value?.name ?? value?.label ?? value?.value ?? JSON.stringify(value));
+                    }
+                }
+                else {
+                    text = String(value);
+                }
+                chips.push({ key, text, fullText: text, hasMore: text.length > 30 });
+            }
+        }
+        this.chips = chips;
+        this.filterApplied = this.chips.length > 0;
+    }
+    onFiltersApplied(_) {
+        // handled in onFiltersChanged for this demo
+    }
+    onPaginate(e) {
+        this.pageIndex = e.pageIndex;
+        this.pageSize = e.pageSize;
+        this.applyPagination();
+    }
+    onPageSizeChange(size) {
+        this.pageSize = size;
+        this.pageIndex = 0;
+        this.applyPagination();
+    }
+    onRemoveChip(chip) {
+        this.chips = this.chips.filter(c => c !== chip);
+        this.filterApplied = this.chips.length > 0;
+    }
+    onClearAllChips() {
+        this.chips = [];
+        this.filterApplied = false;
+    }
+    applyPagination() {
+        const start = this.pageIndex * this.pageSize;
+        const end = start + this.pageSize;
+        this.pagedRows = this.filteredRows.slice(start, end);
+    }
+    mapVisibilityColumns() {
+        return (this.columns || [])
+            .filter(c => c.isDefault === false)
+            .map(c => ({ id: c.fieldId, label: c.fieldName || c.fieldId }));
+    }
+    normalizeDate(d) {
+        if (!d)
+            return null;
+        const ts = Date.parse(d);
+        return isNaN(ts) ? null : ts;
+    }
+    passFilters(filters, row) {
+        if (!filters)
+            return true;
+        if (filters.status && Array.isArray(filters.status) && filters.status.length) {
+            if (!filters.status.includes(row.status))
+                return false;
+        }
+        if (filters.priority && Array.isArray(filters.priority) && filters.priority.length) {
+            if (!filters.priority.includes(row.priorityName))
+                return false;
+        }
+        if (filters.testType && Array.isArray(filters.testType) && filters.testType.length) {
+            if (!filters.testType.includes(row.testType))
+                return false;
+        }
+        if (filters.created_date && (filters.created_date.start || filters.created_date.end)) {
+            const startTs = this.normalizeDate(filters.created_date.start);
+            const endTs = this.normalizeDate(filters.created_date.end);
+            const rowTs = this.normalizeDate(row.createdAt);
+            if (rowTs != null) {
+                if (startTs != null && rowTs < startTs)
+                    return false;
+                if (endTs != null && rowTs > endTs)
+                    return false;
+            }
+        }
+        return true;
+    }
+}
+TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\"></cqa-button>\n        <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      *ngIf=\"showFilterPanel\"\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n      <ng-container *ngIf=\"!isEmptyState && pagedRows && pagedRows.length > 0; else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\">\n          <ng-template dynamicCell=\"checkbox\" let-row=\"row\">\n            <div class=\"custom-checkbox\">\n              <input\n                type=\"checkbox\"\n                class=\"hidden-checkbox\"\n                [attr.id]=\"'row-checkbox-' + row.id\"\n                [checked]=\"row.isSelected\"\n                aria-label=\"Select row\"\n                (change)=\"onRowCheckboxChange($event, row)\" />\n              <label\n                class=\"custom-checkbox-label\"\n                [attr.for]=\"'row-checkbox-' + row.id\">\n              </label>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"testCases\" let-row=\"row\" let-value=\"value\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium\">\n              <div class=\"cqa-text-[#3F43EE] cqa-truncate\">\n                #{{ row.id }}\n              </div>\n              <div class=\"cqa-text-[#0A0A0A]\">{{ value }}</div>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"type\" let-row=\"row\" let-value=\"value\">\n            <div class=\"cqa-text-xs cqa-text-[#111827] cqa-truncate\">{{ value }}</div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"priority\" let-row=\"row\" let-value=\"value\">\n            <span\n              class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-xs\"\n              [ngClass]=\"{\n                'cqa-bg-red-100 cqa-text-red-700': value === 'Critical' || value === 'Major',\n                'cqa-bg-yellow-100 cqa-text-yellow-700': value === 'Medium',\n                'cqa-bg-blue-100 cqa-text-blue-700': value === 'Minor',\n                'cqa-bg-gray-100 cqa-text-gray-700': !value || value === 'Not Set'\n              }\"\n              >{{ value || 'Not Set' }}</span\n            >\n          </ng-template>\n\n          <ng-template dynamicCell=\"result\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-xs\" [ngClass]=\"resultBadgeClass(value)\">\n              {{ value || 'NOT_EXECUTED' }}\n            </span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"status\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs\">{{ value }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"labels\" let-row=\"row\" let-value=\"value\">\n            <div class=\"cqa-flex cqa-flex-wrap cqa-gap-1\">\n              <span *ngFor=\"let tag of (row.tags || []) | slice: 0:3\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded cqa-bg-gray-100 cqa-text-gray-700 cqa-text-xs\">\n                {{ tag }}\n              </span>\n              <span *ngIf=\"(row.tags?.length || 0) > 3\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded cqa-bg-gray-100 cqa-text-gray-700 cqa-text-xs\">\n                +{{ (row.tags?.length || 0) - 3 }} more\n              </span>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"createdBy\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs\">{{ value }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"createdAt\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs cqa-text-gray-700\">{{ value | date: 'medium' }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"updatedAt\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs cqa-text-gray-700\">{{ value | date: 'medium' }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"lastRun\" let-row=\"row\">\n            <div class=\"cqa-flex cqa-flex-col\">\n              <span class=\"cqa-text-xs cqa-text-[#111827]\">{{ row.lastRun?.startTime | date: 'medium' }}</span>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"actions\" let-row=\"row\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" *ngIf=\"showActionButton\">\n              <cqa-action-menu-button\n                [row]=\"row\"\n                (view)=\"view($event)\"\n                (edit)=\"edit($event)\"\n                (delete)=\"delete($event)\"\n              ></cqa-action-menu-button>\n            </div>\n          </ng-template>\n\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips"], outputs: ["removeChip", "clearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel"], outputs: ["filtersApplied", "filtersChanged", "resetAction"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading"], outputs: ["sortChange"] }, { type: ActionMenuButtonComponent, selector: "cqa-action-menu-button", inputs: ["row"], outputs: ["view", "edit", "delete"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions"], outputs: ["actionClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DynamicCellTemplateDirective, selector: "ng-template[dynamicCell]", inputs: ["dynamicCell"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "slice": i2.SlicePipe, "date": i2.DatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-table-template', template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button *ngIf=\"showAutoRefreshButton\" variant=\"grey-solid\" icon=\"refresh\"></cqa-button>\n        <cqa-button *ngIf=\"showOtherButton\" [variant]=\"otherButtonVariant\" [text]=\"otherButtonLabel\"></cqa-button>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      *ngIf=\"showFilterPanel\"\n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n      <ng-container *ngIf=\"!isEmptyState && pagedRows && pagedRows.length > 0; else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\">\n          <ng-template dynamicCell=\"checkbox\" let-row=\"row\">\n            <div class=\"custom-checkbox\">\n              <input\n                type=\"checkbox\"\n                class=\"hidden-checkbox\"\n                [attr.id]=\"'row-checkbox-' + row.id\"\n                [checked]=\"row.isSelected\"\n                aria-label=\"Select row\"\n                (change)=\"onRowCheckboxChange($event, row)\" />\n              <label\n                class=\"custom-checkbox-label\"\n                [attr.for]=\"'row-checkbox-' + row.id\">\n              </label>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"testCases\" let-row=\"row\" let-value=\"value\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium\">\n              <div class=\"cqa-text-[#3F43EE] cqa-truncate\">\n                #{{ row.id }}\n              </div>\n              <div class=\"cqa-text-[#0A0A0A]\">{{ value }}</div>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"type\" let-row=\"row\" let-value=\"value\">\n            <div class=\"cqa-text-xs cqa-text-[#111827] cqa-truncate\">{{ value }}</div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"priority\" let-row=\"row\" let-value=\"value\">\n            <span\n              class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-xs\"\n              [ngClass]=\"{\n                'cqa-bg-red-100 cqa-text-red-700': value === 'Critical' || value === 'Major',\n                'cqa-bg-yellow-100 cqa-text-yellow-700': value === 'Medium',\n                'cqa-bg-blue-100 cqa-text-blue-700': value === 'Minor',\n                'cqa-bg-gray-100 cqa-text-gray-700': !value || value === 'Not Set'\n              }\"\n              >{{ value || 'Not Set' }}</span\n            >\n          </ng-template>\n\n          <ng-template dynamicCell=\"result\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-inline-flex cqa-items-center cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-xs\" [ngClass]=\"resultBadgeClass(value)\">\n              {{ value || 'NOT_EXECUTED' }}\n            </span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"status\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs\">{{ value }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"labels\" let-row=\"row\" let-value=\"value\">\n            <div class=\"cqa-flex cqa-flex-wrap cqa-gap-1\">\n              <span *ngFor=\"let tag of (row.tags || []) | slice: 0:3\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded cqa-bg-gray-100 cqa-text-gray-700 cqa-text-xs\">\n                {{ tag }}\n              </span>\n              <span *ngIf=\"(row.tags?.length || 0) > 3\" class=\"cqa-px-2 cqa-py-0.5 cqa-rounded cqa-bg-gray-100 cqa-text-gray-700 cqa-text-xs\">\n                +{{ (row.tags?.length || 0) - 3 }} more\n              </span>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"createdBy\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs\">{{ value }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"createdAt\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs cqa-text-gray-700\">{{ value | date: 'medium' }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"updatedAt\" let-row=\"row\" let-value=\"value\">\n            <span class=\"cqa-text-xs cqa-text-gray-700\">{{ value | date: 'medium' }}</span>\n          </ng-template>\n\n          <ng-template dynamicCell=\"lastRun\" let-row=\"row\">\n            <div class=\"cqa-flex cqa-flex-col\">\n              <span class=\"cqa-text-xs cqa-text-[#111827]\">{{ row.lastRun?.startTime | date: 'medium' }}</span>\n            </div>\n          </ng-template>\n\n          <ng-template dynamicCell=\"actions\" let-row=\"row\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" *ngIf=\"showActionButton\">\n              <cqa-action-menu-button\n                [row]=\"row\"\n                (view)=\"view($event)\"\n                (edit)=\"edit($event)\"\n                (delete)=\"delete($event)\"\n              ></cqa-action-menu-button>\n            </div>\n          </ng-template>\n\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { searchPlaceholder: [{
+                type: Input
+            }], searchValue: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], showSearchBar: [{
+                type: Input
+            }], filterConfig: [{
+                type: Input
+            }], showFilterPanel: [{
+                type: Input
+            }], showFilterButton: [{
+                type: Input
+            }], otherButtonLabel: [{
+                type: Input
+            }], otherButtonVariant: [{
+                type: Input
+            }], showOtherButton: [{
+                type: Input
+            }], showActionButton: [{
+                type: Input
+            }], showSettingsButton: [{
+                type: Input
+            }], showAutoRefreshButton: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], isEmptyState: [{
+                type: Input
+            }], emptyStateConfig: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], chips: [{
+                type: Input
+            }], filterApplied: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], selectedAutoRefreshInterval: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], isTableLoading: [{
+                type: Input
+            }], isTableDataLoading: [{
+                type: Input
+            }] } });
+
+/**
+ * Ensures Angular CDK overlay content (e.g., MatSelect, Datepicker panels)
+ * is nested under an element with id="cqa-ui-root" so Tailwind utilities
+ * configured with important: '#cqa-ui-root' are applied inside overlays.
+ */
+class TailwindOverlayContainer extends OverlayContainer {
+    _createContainer() {
+        super._createContainer();
+        if (this._containerElement) {
+            this._containerElement.id = 'cqa-ui-root';
+        }
+    }
+}
+TailwindOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+TailwindOverlayContainer.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer, decorators: [{
+            type: Injectable
+        }] });
+
+class UiKitModule {
+}
+UiKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, declarations: [ButtonComponent,
+        SearchBarComponent,
+        SegmentControlComponent,
+        DialogComponent,
+        DynamicTableComponent,
+        DynamicCellTemplateDirective,
+        DynamicHeaderTemplateDirective,
+        InlineSortComponent,
+        PaginationComponent,
+        ActionMenuButtonComponent,
+        OtherButtonComponent,
+        DynamicFilterComponent,
+        ColumnVisibilityComponent,
+        TableActionToolbarComponent,
+        MetricsCardComponent,
+        MetricsBlockComponent,
+        ChartCardComponent,
+        ProgressTextCardComponent,
+        DashboardHeaderComponent,
+        CoverageModuleCardComponent,
+        TestDistributionCardComponent,
+        FailedTestCasesCardComponent,
+        DynamicSelectFieldComponent,
+        SelectedFiltersComponent,
+        InsightCardComponent,
+        BadgeComponent,
+        DropdownButtonComponent,
+        HeatErrorMapCellComponent,
+        EmptyStateComponent,
+        TableTemplateComponent,
+        FullTableLoaderComponent,
+        TableDataLoaderComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatOptionModule,
+        MatCheckboxModule,
+        MatRadioModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatProgressSpinnerModule,
+        OverlayModule,
+        PortalModule], exports: [ButtonComponent,
+        SearchBarComponent,
+        SegmentControlComponent,
+        DialogComponent,
+        DynamicTableComponent,
+        DynamicCellTemplateDirective,
+        DynamicHeaderTemplateDirective,
+        InlineSortComponent,
+        PaginationComponent,
+        ActionMenuButtonComponent,
+        OtherButtonComponent,
+        DynamicFilterComponent,
+        ColumnVisibilityComponent,
+        TableActionToolbarComponent,
+        MetricsCardComponent,
+        ChartCardComponent,
+        ProgressTextCardComponent,
+        DashboardHeaderComponent,
+        CoverageModuleCardComponent,
+        TestDistributionCardComponent,
+        FailedTestCasesCardComponent,
+        DynamicSelectFieldComponent,
+        SelectedFiltersComponent,
+        InsightCardComponent,
+        BadgeComponent,
+        DropdownButtonComponent,
+        HeatErrorMapCellComponent,
+        EmptyStateComponent,
+        TableTemplateComponent,
+        FullTableLoaderComponent,
+        TableDataLoaderComponent] });
+UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
+        { provide: OverlayContainer, useClass: TailwindOverlayContainer }
+    ], imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatIconModule,
+            MatTooltipModule,
+            MatMenuModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatOptionModule,
+            MatCheckboxModule,
+            MatRadioModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatProgressSpinnerModule,
+            OverlayModule,
+            PortalModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ButtonComponent,
+                        SearchBarComponent,
+                        SegmentControlComponent,
+                        DialogComponent,
+                        DynamicTableComponent,
+                        DynamicCellTemplateDirective,
+                        DynamicHeaderTemplateDirective,
+                        InlineSortComponent,
+                        PaginationComponent,
+                        ActionMenuButtonComponent,
+                        OtherButtonComponent,
+                        DynamicFilterComponent,
+                        ColumnVisibilityComponent,
+                        TableActionToolbarComponent,
+                        MetricsCardComponent,
+                        MetricsBlockComponent,
+                        ChartCardComponent,
+                        ProgressTextCardComponent,
+                        DashboardHeaderComponent,
+                        CoverageModuleCardComponent,
+                        TestDistributionCardComponent,
+                        FailedTestCasesCardComponent,
+                        DynamicSelectFieldComponent,
+                        SelectedFiltersComponent,
+                        InsightCardComponent,
+                        BadgeComponent,
+                        DropdownButtonComponent,
+                        HeatErrorMapCellComponent,
+                        EmptyStateComponent,
+                        TableTemplateComponent,
+                        FullTableLoaderComponent,
+                        TableDataLoaderComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        MatMenuModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        MatCheckboxModule,
+                        MatRadioModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatProgressSpinnerModule,
+                        OverlayModule,
+                        PortalModule
+                    ],
+                    exports: [
+                        ButtonComponent,
+                        SearchBarComponent,
+                        SegmentControlComponent,
+                        DialogComponent,
+                        DynamicTableComponent,
+                        DynamicCellTemplateDirective,
+                        DynamicHeaderTemplateDirective,
+                        InlineSortComponent,
+                        PaginationComponent,
+                        ActionMenuButtonComponent,
+                        OtherButtonComponent,
+                        DynamicFilterComponent,
+                        ColumnVisibilityComponent,
+                        TableActionToolbarComponent,
+                        MetricsCardComponent,
+                        ChartCardComponent,
+                        ProgressTextCardComponent,
+                        DashboardHeaderComponent,
+                        CoverageModuleCardComponent,
+                        TestDistributionCardComponent,
+                        FailedTestCasesCardComponent,
+                        DynamicSelectFieldComponent,
+                        SelectedFiltersComponent,
+                        InsightCardComponent,
+                        BadgeComponent,
+                        DropdownButtonComponent,
+                        HeatErrorMapCellComponent,
+                        EmptyStateComponent,
+                        TableTemplateComponent,
+                        FullTableLoaderComponent,
+                        TableDataLoaderComponent
+                    ],
+                    providers: [
+                        { provide: OverlayContainer, useClass: TailwindOverlayContainer }
                     ]
                 }]
         }] });
@@ -864,18 +3598,18 @@ class DialogService {
         });
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, deps: [{ token: i1$4.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
 DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.Injector }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.Overlay }, { type: i0.Injector }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, DIALOG_DATA, DIALOG_REF, DialogComponent, DialogRef, DialogService, SearchBarComponent, SegmentControlComponent, UiKitModule };
+export { ActionMenuButtonComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CoverageModuleCardComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EmptyStateComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InlineSortComponent, InsightCardComponent, MetricsCardComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TestDistributionCardComponent, UiKitModule, getMetadataColor, getMetadataValueStyle };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map