@cqa-lib/cqa-ui 1.0.79 → 1.0.80

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

@@ -10,21 +10,22 @@ import * as i3$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/form-field';
+import * as i3$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/core';
+import * as i3$3 from '@angular/material/core';
 import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
-import * as i3$3 from '@angular/material/checkbox';
+import * as i3$4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
+import * as i4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i6 from 'ngx-daterangepicker-material';
+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';
@@ -1965,7 +1966,7 @@ class DynamicSelectFieldComponent {
     }
 }
 DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n            </span>\n          </ng-container>\n          <ng-template #defaultOptionTpl>\n            {{ opt.name ?? opt.label ?? opt.value }}\n          </ng-template>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"config?.isLoading || loadingMore\">Loading...</span>\n          <span *ngIf=\"!(config?.isLoading || loadingMore)\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n            </span>\n          </ng-container>\n          <ng-template #defaultOptionTpl>\n            {{ opt.name ?? opt.label ?? opt.value }}\n          </ng-template>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"config?.isLoading || loadingMore\">Loading...</span>\n          <span *ngIf=\"!(config?.isLoading || loadingMore)\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n            </span>\n          </ng-container>\n          <ng-template #defaultOptionTpl>\n            {{ opt.name ?? opt.label ?? opt.value }}\n          </ng-template>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"config?.isLoading || loadingMore\">Loading...</span>\n          <span *ngIf=\"!(config?.isLoading || loadingMore)\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n\n      <div>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", styles: [] }]
@@ -2355,10 +2356,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 cqa-relative cqa-cursor-pointer\" appearance=\"fill\"> -->\n                  <div class=\"mat-date-custom cqa-relative cqa-cursor-pointer\">\n                    <input matInput\n                          class=\"cqa-cursor-pointer cqa-bg-transparent\"\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                          <svg class=\"cqa-absolute cqa-top-[50%] cqa-translate-y-[-50%] cqa-right-4 cqa-z-[-1]\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path 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\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                  </div>\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      </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                  <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      </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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], 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: i6.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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\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 });
 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 cqa-relative cqa-cursor-pointer\" appearance=\"fill\"> -->\n                  <div class=\"mat-date-custom cqa-relative cqa-cursor-pointer\">\n                    <input matInput\n                          class=\"cqa-cursor-pointer cqa-bg-transparent\"\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                          <svg class=\"cqa-absolute cqa-top-[50%] cqa-translate-y-[-50%] cqa-right-4 cqa-z-[-1]\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path 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\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n                  </div>\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      </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                  <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      </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                  <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: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
                 type: Input
             }], model: [{
@@ -2425,7 +2426,7 @@ class ColumnVisibilityComponent {
     }
 }
 ColumnVisibilityComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <cqa-button\n    variant=\"grey-solid\"\n    icon=\"settings\"\n    [matMenuTriggerFor]=\"settingsMenu\"\n    aria-label=\"Settings\"\n    [tooltip]=\"'Column settings'\"\n    tooltipPosition=\"below\">\n  </cqa-button>\n\n  <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n    <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n      <div class=\"settings-section cqa-mb-3\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n        <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n          <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n            class=\"select-all-checkbox\">\n            {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n          </mat-checkbox>\n          <!-- Dynamic column list -->\n          <ng-container *ngIf=\"columns?.length\">\n            <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n              (change)=\"saveColumnPreferences()\">\n              {{ col.label }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"settings-section\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n        <div class=\"refresh-options\">\n          <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n            <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n          </mat-radio-group>\n        </div>\n      </div>\n    </div>\n  </mat-menu>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ColumnVisibilityComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: { isStepGroup: "isStepGroup", columns: "columns", columnVisibility: "columnVisibility", selectedAutoRefreshInterval: "selectedAutoRefreshInterval" }, outputs: { columnVisibilityChange: "columnVisibilityChange", autoRefreshChange: "autoRefreshChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <cqa-button\n    variant=\"grey-solid\"\n    icon=\"settings\"\n    [matMenuTriggerFor]=\"settingsMenu\"\n    aria-label=\"Settings\"\n    [tooltip]=\"'Column settings'\"\n    tooltipPosition=\"below\">\n  </cqa-button>\n\n  <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n    <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n      <div class=\"settings-section cqa-mb-3\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n        <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n          <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n            class=\"select-all-checkbox\">\n            {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n          </mat-checkbox>\n          <!-- Dynamic column list -->\n          <ng-container *ngIf=\"columns?.length\">\n            <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n              (change)=\"saveColumnPreferences()\">\n              {{ col.label }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"settings-section\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n        <div class=\"refresh-options\">\n          <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n            <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n          </mat-radio-group>\n        </div>\n      </div>\n    </div>\n  </mat-menu>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4$1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnVisibilityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-column-visibility', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <cqa-button\n    variant=\"grey-solid\"\n    icon=\"settings\"\n    [matMenuTriggerFor]=\"settingsMenu\"\n    aria-label=\"Settings\"\n    [tooltip]=\"'Column settings'\"\n    tooltipPosition=\"below\">\n  </cqa-button>\n\n  <mat-menu #settingsMenu=\"matMenu\" class=\"cqa-table-settings-menu\">\n    <div class=\"settings-menu-content cqa-p-[17px]\" (click)=\"$event.stopPropagation()\">\n      <div class=\"settings-section cqa-mb-3\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Show Columns</h4>\n        <div class=\"settings-options cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n          <mat-checkbox [checked]=\"areAllColumnsSelected\" (change)=\"toggleAllColumns($event.checked)\"\n            class=\"select-all-checkbox\">\n            {{ areAllColumnsSelected ? 'Unselect All' : 'Select All' }}\n          </mat-checkbox>\n          <!-- Dynamic column list -->\n          <ng-container *ngIf=\"columns?.length\">\n            <mat-checkbox *ngFor=\"let col of columns\" [(ngModel)]=\"columnVisibility[col.id]\"\n              (change)=\"saveColumnPreferences()\">\n              {{ col.label }}\n            </mat-checkbox>\n          </ng-container>\n        </div>\n      </div>\n\n      <div class=\"settings-section\">\n        <h4 class=\"settings-title cqa-font-bold cqa-text-[14px] cqa-leading-[20px] cqa-mb-2\">Auto refresh every</h4>\n        <div class=\"refresh-options\">\n          <mat-radio-group [(ngModel)]=\"selectedAutoRefreshInterval\" (change)=\"onAutoRefreshChange()\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-text-[14px] cqa-leading-[20px]\">\n            <label><mat-radio-button [value]=\"10000\">10 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"20000\">20 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"30000\">30 Seconds</mat-radio-button></label>\n            <label><mat-radio-button [value]=\"0\">Off</mat-radio-button></label>\n          </mat-radio-group>\n        </div>\n      </div>\n    </div>\n  </mat-menu>", styles: [] }]
@@ -4643,7 +4644,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         MatProgressSpinnerModule,
         MatTooltipModule,
         OverlayModule,
-        PortalModule, i6.NgxDaterangepickerMd], exports: [ButtonComponent,
+        PortalModule, i8.NgxDaterangepickerMd], exports: [ButtonComponent,
         SearchBarComponent,
         SegmentControlComponent,
         DialogComponent,