@cqa-lib/cqa-ui 1.0.80 → 1.0.82

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

@@ -25,8 +25,6 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8 from 'ngx-daterangepicker-material';
-import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import * as i1$4 from '@angular/cdk/overlay';
 import { OverlayContainer, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
@@ -1541,6 +1539,10 @@ class DynamicSelectFieldComponent {
                 this.loadingMore = false;
             }
             this.lastOptionsLength = len;
+            // If panel is open and hasMore is true, ensure the sentinel is being observed.
+            if (this.selectRef?.panelOpen && this.config?.hasMore) {
+                setTimeout(() => this.setupLoadMoreObserver(), 0);
+            }
         }
         if ('form' in changes && !changes['form'].firstChange) {
             this.applySelectedValueIfNeeded();
@@ -2311,10 +2313,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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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                  <input matInput\n                         ngxDaterangepickerMd\n                         [autoApply]=\"true\"\n                         [alwaysShowCalendars]=\"true\"\n                         [ranges]=\"ngxRanges\"\n                         [locale]=\"ngxLocale\"\n                         [maxDate]=\"maxDate\"\n                         [isInvalidDate]=\"disableFutureDates\"\n                         [(ngModel)]=\"ngxDateRangeByKey[c.key]\"\n                         (datesUpdated)=\"onNgxDatesUpdated($event, c.key)\"\n                         [readonly]=\"true\"\n                         [placeholder]=\"c.placeholder || (c.label + ' range')\">\n                </mat-form-field>\n                <!-- Specific validation messages -->\n                <mat-error *ngIf=\"getDateValidationError(c.key)\">\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: 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"] }, { 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: 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"] }, { type: i8.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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\">\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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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: 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"] }, { 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: 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, 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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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                  <input matInput\n                         ngxDaterangepickerMd\n                         [autoApply]=\"true\"\n                         [alwaysShowCalendars]=\"true\"\n                         [ranges]=\"ngxRanges\"\n                         [locale]=\"ngxLocale\"\n                         [maxDate]=\"maxDate\"\n                         [isInvalidDate]=\"disableFutureDates\"\n                         [(ngModel)]=\"ngxDateRangeByKey[c.key]\"\n                         (datesUpdated)=\"onNgxDatesUpdated($event, c.key)\"\n                         [readonly]=\"true\"\n                         [placeholder]=\"c.placeholder || (c.label + ' range')\">\n                </mat-form-field>\n                <!-- Specific validation messages -->\n                <mat-error *ngIf=\"getDateValidationError(c.key)\">\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\">\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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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 --> \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]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n                      [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n                    <input matEndDate formControlName=\"end\" [placeholder]=\"c.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 class=\"ctc-date-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-bg-[#3f51b5] !cqa-text-white cqa-p-2 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              </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: [{
@@ -4588,7 +4590,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         MatProgressSpinnerModule,
         MatTooltipModule,
         OverlayModule,
-        PortalModule, i8.NgxDaterangepickerMd], exports: [ButtonComponent,
+        PortalModule], exports: [ButtonComponent,
         SearchBarComponent,
         SegmentControlComponent,
         DialogComponent,
@@ -4638,8 +4640,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             MatProgressSpinnerModule,
             MatTooltipModule,
             OverlayModule,
-            PortalModule,
-            NgxDaterangepickerMd.forRoot()
+            PortalModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, decorators: [{
             type: NgModule,
@@ -4695,8 +4696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         MatProgressSpinnerModule,
                         MatTooltipModule,
                         OverlayModule,
-                        PortalModule,
-                        NgxDaterangepickerMd.forRoot()
+                        PortalModule
                     ],
                     exports: [
                         ButtonComponent,