@cqa-lib/cqa-ui 1.0.104 → 1.0.108

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

@@ -2344,7 +2344,7 @@ class DaterangepickerComponent {
         this.autoApply = false;
         this.alwaysShowCalendars = false;
         this.opens = 'center';
-        this.drops = 'auto';
+        this.drops = 'down';
         this.datesUpdated = new EventEmitter();
         this.cancelClicked = new EventEmitter();
         this.applyClicked = new EventEmitter();
@@ -2364,6 +2364,7 @@ class DaterangepickerComponent {
             opens: this.opens,
             drops: this.drops,
             isInvalidDate: this.isInvalidDate,
+            parentEl: this.parentEl,
             locale: {
                 format: 'MM/DD/YYYY',
                 separator: ' - ',
@@ -2422,7 +2423,7 @@ class DaterangepickerComponent {
     }
 }
 DaterangepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DaterangepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", startDate: "startDate", endDate: "endDate", minDate: "minDate", maxDate: "maxDate", ranges: "ranges", autoApply: "autoApply", alwaysShowCalendars: "alwaysShowCalendars", opens: "opens", drops: "drops", isInvalidDate: "isInvalidDate" }, outputs: { datesUpdated: "datesUpdated", cancelClicked: "cancelClicked", applyClicked: "applyClicked" }, providers: [
+DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: { label: "label", placeholder: "placeholder", disabled: "disabled", startDate: "startDate", endDate: "endDate", minDate: "minDate", maxDate: "maxDate", ranges: "ranges", autoApply: "autoApply", alwaysShowCalendars: "alwaysShowCalendars", opens: "opens", drops: "drops", isInvalidDate: "isInvalidDate", parentEl: "parentEl" }, outputs: { datesUpdated: "datesUpdated", cancelClicked: "cancelClicked", applyClicked: "applyClicked" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DaterangepickerComponent),
@@ -2556,6 +2557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInvalidDate: [{
                 type: Input
+            }], parentEl: [{
+                type: Input
             }], datesUpdated: [{
                 type: Output
             }], cancelClicked: [{
@@ -2971,10 +2974,10 @@ class DynamicFilterComponent {
     }
 }
 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", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n    <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n    <ng-container *ngIf=\"buttonLayout === 'bottom'\">\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 cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\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 Picker -->\n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\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        <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n      </div>\n    </ng-container>\n\n    <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'right'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n      </form>\n    </ng-container>\n\n    <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'left'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n          <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n      </form>\n    </ng-container>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: ["label", "placeholder", "disabled", "startDate", "endDate", "minDate", "maxDate", "ranges", "autoApply", "alwaysShowCalendars", "opens", "drops", "isInvalidDate"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n    <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n    <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n      <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [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 cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\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 Picker -->\n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\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        <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n      </div>\n    </ng-container>\n\n    <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'right'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n      </form>\n    </ng-container>\n\n    <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'left'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n          <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n      </form>\n    </ng-container>\n  </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: ["label", "placeholder", "disabled", "startDate", "endDate", "minDate", "maxDate", "ranges", "autoApply", "alwaysShowCalendars", "opens", "drops", "isInvalidDate", "parentEl"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.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, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n    <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n    <ng-container *ngIf=\"buttonLayout === 'bottom'\">\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 cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\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 Picker -->\n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\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        <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n      </div>\n    </ng-container>\n\n    <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'right'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n      </form>\n    </ng-container>\n\n    <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'left'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n          <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n      </form>\n    </ng-container>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n    <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n    <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n      <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [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 cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\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 Picker -->\n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\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        <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n      </div>\n    </ng-container>\n\n    <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'right'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n      </form>\n    </ng-container>\n\n    <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n    <ng-container *ngIf=\"buttonLayout === 'left'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\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 cqa-flex-shrink-0 filter-selector-width\">\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 (Daterangepicker) --> \n              <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n                <cqa-daterangepicker\n                  [label]=\"c.label\"\n                  [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n                  [disabled]=\"c.disabled || false\"\n                  [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n                  [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n                  [minDate]=\"undefined\"\n                  [maxDate]=\"maxDate\"\n                  [ranges]=\"getDaterangepickerRanges()\"\n                  [autoApply]=\"true\"\n                  [alwaysShowCalendars]=\"true\"\n                  (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n                  (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n                </cqa-daterangepicker>\n                <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n                  {{ getDateValidationError(c.key) }}\n                </mat-error>\n              </ng-container>\n            </div>\n          </ng-container>\n        </ng-container>\n        </div>\n        <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n          <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n      </form>\n    </ng-container>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
                 type: Input
             }], model: [{
@@ -3441,6 +3444,8 @@ class ProgressTextCardComponent {
         this.label = 'Test Success Rate';
         this.deltaSuffix = 'since last run';
         this.cardClass = '';
+        /** Emitted when the card is clicked */
+        this.cardClick = new EventEmitter();
     }
     get percentText() {
         const v = Math.max(0, Math.min(100, Number(this.value) || 0));
@@ -3460,12 +3465,15 @@ class ProgressTextCardComponent {
             return 'cqa-text-[#EF4444]';
         return 'cqa-text-[#6B7280]';
     }
+    onCardClick() {
+        this.cardClick.emit();
+    }
 }
 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" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"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-[16px] cqa-leading-[24px] cqa-font-bold cqa-font-inter cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n        {{ percentText }}</div>\n      <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-inter cqa-text-[#111827]\">{{ label }}</div>\n    </div>\n    <div class=\"cqa-mt-4 cqa-mb-2 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-text-[12px] cqa-leading-5 cqa-font-inter\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n      {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n    </div>\n  </div>\n</div>", directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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" }, outputs: { cardClick: "cardClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"cqa-cursor-pointer 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 cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n    [ngClass]=\"cardClass\"\n    (click)=\"onCardClick()\">\n    <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n      <div\n        class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-font-inter cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n        {{ percentText }}</div>\n      <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-inter cqa-text-[#111827]\">{{ label }}</div>\n    </div>\n    <div class=\"cqa-mt-4 cqa-mb-2 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-text-[12px] cqa-leading-5 cqa-font-inter\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n      {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n    </div>\n  </div>\n</div>", directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.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, host: { class: 'cqa-ui-root' }, template: "<div class=\"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-[16px] cqa-leading-[24px] cqa-font-bold cqa-font-inter cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n        {{ percentText }}</div>\n      <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-inter cqa-text-[#111827]\">{{ label }}</div>\n    </div>\n    <div class=\"cqa-mt-4 cqa-mb-2 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-text-[12px] cqa-leading-5 cqa-font-inter\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n      {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-progress-text-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"cqa-cursor-pointer 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 cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n    [ngClass]=\"cardClass\"\n    (click)=\"onCardClick()\">\n    <div class=\"cqa-flex cqa-items-baseline cqa-gap-2\">\n      <div\n        class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-font-inter cqa-tracking-[-0.3px] cqa-text-[#111827]\">\n        {{ percentText }}</div>\n      <div class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-inter cqa-text-[#111827]\">{{ label }}</div>\n    </div>\n    <div class=\"cqa-mt-4 cqa-mb-2 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-text-[12px] cqa-leading-5 cqa-font-inter\" [ngClass]=\"deltaClass()\" *ngIf=\"deltaPercent !== undefined\">\n      {{ deltaPercent > 0 ? '+' : ''}}{{ deltaPercent }}% {{ deltaSuffix }}\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { value: [{
                 type: Input
             }], label: [{
@@ -3476,6 +3484,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], cardClass: [{
                 type: Input
+            }], cardClick: [{
+                type: Output
             }] } });
 
 class DashboardHeaderComponent {