@cqa-lib/cqa-ui 1.0.32 → 1.0.33

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

@@ -1974,18 +1974,12 @@ class DynamicFilterComponent {
         }
         return null;
     }
-    getOrderedConfig() {
-        if (this.buttonLayout === 'right') {
-            return [...(this.config || [])].reverse();
-        }
-        return this.config || [];
-    }
 }
 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" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"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 cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n      </div>\n    </ng-container>\n\n    <!-- Right Layout: All selectors and buttons in one line, starting from right -->\n    <ng-container *ngIf=\"buttonLayout === 'right'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-end 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\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n        <ng-container *ngFor=\"let c of getOrderedConfig()\">\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      </form>\n    </ng-container>\n\n    <!-- Left Layout: All selectors and buttons in one line, starting from left -->\n    <ng-container *ngIf=\"buttonLayout === 'left'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-start cqa-gap-4\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: 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 class=\"cqa-flex cqa-items-stretch cqa-gap-2\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (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"] }, { 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"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"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 cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (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()\">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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (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"] }, { 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"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n  <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" 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 cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n      </div>\n    </ng-container>\n\n    <!-- Right Layout: All selectors and buttons in one line, starting from right -->\n    <ng-container *ngIf=\"buttonLayout === 'right'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-end 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\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n        </div>\n        <ng-container *ngFor=\"let c of getOrderedConfig()\">\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      </form>\n    </ng-container>\n\n    <!-- Left Layout: All selectors and buttons in one line, starting from left -->\n    <ng-container *ngIf=\"buttonLayout === 'left'\">\n      <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-start cqa-gap-4\" [formGroup]=\"form\"\n        (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: 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 class=\"cqa-flex cqa-items-stretch cqa-gap-2\">\n          <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (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, template: "<div id=\"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 cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n        <cqa-button variant=\"outlined\" (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()\">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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n          <cqa-button variant=\"outlined\" (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: [{