@cqa-lib/cqa-ui 0.1.2 → 1.0.0

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 class=\"cqa-w-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] cqa-px-[17px] 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\"><path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- Middle metrics row -->\n    <div class=\"cqa-flex cqa-items-stretch cqa-justify-between cqa-gap-6 cqa-mb-4\">\n      <!-- Left: Positive / Negative / Edge Case -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-6\">\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-[#10B981]\">{{ positiveCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ positiveLabel }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-[#EF4444]\">{{ negativeCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ negativeLabel }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ edgeCaseLabel }}</span>\n        </div>\n      </div>\n\n      <!-- Divider -->\n      <div class=\"cqa-w-px cqa-bg-[#E5E7EB]\"></div>\n\n      <!-- Right: AI / Human -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-6\">\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-dialog\">{{ aiCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ aiLabel }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-dialog\">{{ humanCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ humanLabel }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-3\">\n        <span class=\"cqa-min-w-[120px] cqa-text-[12px] cqa-leading-4 cqa-text-[#374151]\">{{ it.label }}</span>\n        <div class=\"cqa-flex-1 cqa-h-[8px] 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-w-[40px] cqa-text-right cqa-text-[12px] cqa-leading-4\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-mt-4\">\n      <button type=\"button\"\n        class=\"cqa-w-full cqa-h-[40px] cqa-rounded-[8px] cqa-bg-[#4338CA] cqa-text-white cqa-text-[14px] cqa-leading-[20px] hover:cqa-bg-[#3730A3] disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n        [disabled]=\"ctaDisabled\" (click)=\"ctaClicked.emit()\">\n        \u2728 {{ ctaText }}\n      </button>\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"] }, { 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 class=\"cqa-w-full cqa-bg-white cqa-rounded-[8px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-py-[10px] cqa-px-[17px] 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\"><path d=\"M6 12L10 8L6 4\" stroke=\"#4F46E5\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n\n    <!-- Middle metrics row -->\n    <div class=\"cqa-flex cqa-items-stretch cqa-justify-between cqa-gap-6 cqa-mb-4\">\n      <!-- Left: Positive / Negative / Edge Case -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-6\">\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-[#10B981]\">{{ positiveCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ positiveLabel }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-[#EF4444]\">{{ negativeCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ negativeLabel }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-[#F59E0B]\">{{ edgeCaseCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ edgeCaseLabel }}</span>\n        </div>\n      </div>\n\n      <!-- Divider -->\n      <div class=\"cqa-w-px cqa-bg-[#E5E7EB]\"></div>\n\n      <!-- Right: AI / Human -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-6\">\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-dialog\">{{ aiCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ aiLabel }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col cqa-items-start\">\n          <span class=\"cqa-text-[18px] cqa-leading-6 cqa-font-semibold cqa-text-dialog\">{{ humanCount }}</span>\n          <span class=\"cqa-text-[12px] cqa-leading-4 cqa-text-danger\">{{ humanLabel }}</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n      <div *ngFor=\"let it of items\" class=\"cqa-flex cqa-items-center cqa-gap-3\">\n        <span class=\"cqa-min-w-[120px] cqa-text-[12px] cqa-leading-4 cqa-text-[#374151]\">{{ it.label }}</span>\n        <div class=\"cqa-flex-1 cqa-h-[8px] 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-w-[40px] cqa-text-right cqa-text-[12px] cqa-leading-4\" [ngClass]=\"textColorClass(it)\">{{\n          formatPercent(it.percent) }}</span>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-mt-4\">\n      <button type=\"button\"\n        class=\"cqa-w-full cqa-h-[40px] cqa-rounded-[8px] cqa-bg-[#4338CA] cqa-text-white cqa-text-[14px] cqa-leading-[20px] hover:cqa-bg-[#3730A3] disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n        [disabled]=\"ctaDisabled\" (click)=\"ctaClicked.emit()\">\n        \u2728 {{ ctaText }}\n      </button>\n    </div>\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 = 'bg-[#EF4444] text-white';
+        /** 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 = 'border-l-[4px] 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-white cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-p-4\"\n    [ngClass]=\"[leftAccentClass, cardClass]\">\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n      <!-- Title -->\n      <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-font-semibold cqa-text-[#111827]\">{{ title }}</h3>\n\n      <!-- Failures pill -->\n      <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-full cqa-text-[12px] cqa-leading-4 cqa-font-medium\"\n        [ngClass]=\"pillClass\">\n        {{ failures | number }} {{ failuresLabel }}\n      </span>\n    </div>\n\n    <!-- Root cause -->\n    <div *ngIf=\"showRootCause\" class=\"cqa-mt-2 cqa-text-[14px] cqa-leading-5\">\n      <span class=\"cqa-font-semibold cqa-text-[#EF4444]\">{{ rootCauseLabel }}:</span>\n      <span class=\"cqa-text-[#EF4444]\">{{ rootCauseDisplay }}</span>\n    </div>\n\n    <!-- Timestamp -->\n    <div *ngIf=\"lastFailed\"\n      class=\"cqa-mt-1 cqa-flex cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-5 cqa-text-[#6B7280]\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">schedule</mat-icon>\n      <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n    </div>\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: 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-white cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-p-4\"\n    [ngClass]=\"[leftAccentClass, cardClass]\">\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2\">\n      <!-- Title -->\n      <h3 class=\"cqa-text-[16px] cqa-leading-6 cqa-font-semibold cqa-text-[#111827]\">{{ title }}</h3>\n\n      <!-- Failures pill -->\n      <span class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-full cqa-text-[12px] cqa-leading-4 cqa-font-medium\"\n        [ngClass]=\"pillClass\">\n        {{ failures | number }} {{ failuresLabel }}\n      </span>\n    </div>\n\n    <!-- Root cause -->\n    <div *ngIf=\"showRootCause\" class=\"cqa-mt-2 cqa-text-[14px] cqa-leading-5\">\n      <span class=\"cqa-font-semibold cqa-text-[#EF4444]\">{{ rootCauseLabel }}:</span>\n      <span class=\"cqa-text-[#EF4444]\">{{ rootCauseDisplay }}</span>\n    </div>\n\n    <!-- Timestamp -->\n    <div *ngIf=\"lastFailed\"\n      class=\"cqa-mt-1 cqa-flex cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-5 cqa-text-[#6B7280]\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">schedule</mat-icon>\n      <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\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-red-100', 'cqa-text-red-800'].join(' ');
+                case 'warning':
+                    return [...baseClasses, 'cqa-bg-yellow-100', 'cqa-text-yellow-800'].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-font-bold'];
+        switch (section.variant) {
+            case 'warning':
+                return [...baseClasses, 'cqa-text-yellow-800'].join(' ');
+            case 'error':
+                return [...baseClasses, 'cqa-text-red-600'].join(' ');
+            default:
+                return [...baseClasses, 'cqa-text-ink'].join(' ');
+        }
+    }
+    getSectionIconColor(section) {
+        switch (section.variant) {
+            case 'warning':
+                return 'cqa-text-yellow-800';
+            case 'error':
+                return 'cqa-text-red-600';
+            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\" style=\"background-color: white; border-radius: 0.5rem; border: 1px solid #E5E7EB; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-gray-200 cqa-rounded-2xl\">\n    <!-- Section 1: Badges -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" *ngIf=\"visibleBadges.length > 0\">\n      <mat-icon *ngIf=\"isPrerequisiteMissing || isTestDataMissing\"\n        class=\"cqa-text-yellow-500 cqa-w-6 cqa-h-6\">warning</mat-icon>\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-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-xl cqa-border cqa-border-border-light cqa-px-4 cqa-py-3 cqa-border-t-2 cqa-border-t-primary-surface\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n          <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n            <span class=\"cqa-text-xs cqa-font-normal cqa-tracking-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-tracking-normal cqa-font-inter cqa-text-sm\">\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-hover cqa-font-medium cqa-inline-flex cqa-items-center cqa-gap-1 cqa-cursor-pointer cqa-bg-transparent cqa-border-0 cqa-p-0 cqa-hover:cqa-text-primary cqa-transition-colors\"\n      (click)=\"toggleMetadata()\">\n      <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n      <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">\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 cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-overflow-hidden\"\n      [ngClass]=\"getSectionBorderClass(section)\"\n    >\n      <div class=\"cqa-p-4 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=\"cqa-m-0\">\n            {{ section.title }}\n          </h3>\n          <button\n            type=\"button\"\n            class=\"cqa-ml-auto cqa-inline-flex cqa-items-center cqa-justify-center cqa-cursor-pointer cqa-bg-transparent cqa-border-0 cqa-p-1 cqa-rounded-full cqa-hover:cqa-bg-gray-100 cqa-transition-colors\"\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-3\">\n          <!-- Reason -->\n          <p class=\"cqa-text-sm cqa-font-normal cqa-leading-4 cqa-text-neutral-600\">\n            <strong>Reason:</strong> {{ section.reason }}\n          </p>\n          \n          <!-- Action Button -->\n          <div>\n            <cqa-button\n              variant=\"outlined\"\n              (clicked)=\"onSectionAction(section.id)\"\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      [icon]=\"isApplying ? 'hourglass_empty' : 'auto_awesome'\"\n      iconPosition=\"start\"\n      (clicked)=\"onMainAction()\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isApplying\"\n      [iconColor]=\"isApplying ? '#EAB308' : undefined\"\n    >\n      {{ isApplying ? 'Applying suggestion' : 'Apply suggestion' }}\n    </cqa-button>\n  </div>\n</div>\n \n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["label", "icon", "variant", "backgroundColor", "textColor", "iconBackgroundColor", "iconColor"] }, { 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\" style=\"background-color: white; border-radius: 0.5rem; border: 1px solid #E5E7EB; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-px-[21px] cqa-py-3 cqa-border cqa-border-gray-200 cqa-rounded-2xl\">\n    <!-- Section 1: Badges -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" *ngIf=\"visibleBadges.length > 0\">\n      <mat-icon *ngIf=\"isPrerequisiteMissing || isTestDataMissing\"\n        class=\"cqa-text-yellow-500 cqa-w-6 cqa-h-6\">warning</mat-icon>\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-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-xl cqa-border cqa-border-border-light cqa-px-4 cqa-py-3 cqa-border-t-2 cqa-border-t-primary-surface\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <ng-container *ngFor=\"let item of metadata | keyvalue; let last = last\">\n          <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n            <span class=\"cqa-text-xs cqa-font-normal cqa-tracking-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-tracking-normal cqa-font-inter cqa-text-sm\">\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-hover cqa-font-medium cqa-inline-flex cqa-items-center cqa-gap-1 cqa-cursor-pointer cqa-bg-transparent cqa-border-0 cqa-p-0 cqa-hover:cqa-text-primary cqa-transition-colors\"\n      (click)=\"toggleMetadata()\">\n      <span>{{ metadataExpanded ? 'Hide details' : 'Show details' }}</span>\n      <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">\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 cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-overflow-hidden\"\n      [ngClass]=\"getSectionBorderClass(section)\"\n    >\n      <div class=\"cqa-p-4 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=\"cqa-m-0\">\n            {{ section.title }}\n          </h3>\n          <button\n            type=\"button\"\n            class=\"cqa-ml-auto cqa-inline-flex cqa-items-center cqa-justify-center cqa-cursor-pointer cqa-bg-transparent cqa-border-0 cqa-p-1 cqa-rounded-full cqa-hover:cqa-bg-gray-100 cqa-transition-colors\"\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-3\">\n          <!-- Reason -->\n          <p class=\"cqa-text-sm cqa-font-normal cqa-leading-4 cqa-text-neutral-600\">\n            <strong>Reason:</strong> {{ section.reason }}\n          </p>\n          \n          <!-- Action Button -->\n          <div>\n            <cqa-button\n              variant=\"outlined\"\n              (clicked)=\"onSectionAction(section.id)\"\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      [icon]=\"isApplying ? 'hourglass_empty' : 'auto_awesome'\"\n      iconPosition=\"start\"\n      (clicked)=\"onMainAction()\"\n      [fullWidth]=\"true\"\n      [disabled]=\"isApplying\"\n      [iconColor]=\"isApplying ? '#EAB308' : undefined\"\n    >\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