@cqa-lib/cqa-ui 1.0.77 → 1.0.79

package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs

@@ -365,7 +365,7 @@ export class DynamicFilterComponent {
     }
 }
 DynamicFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, deps: [{ token: i1.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: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i3.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.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 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: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i3.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.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 });
 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: [] }]

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

@@ -1525,14 +1525,22 @@ class DynamicSelectFieldComponent {
         this.SELECT_ALL_VALUE = '__select_all__';
         this.selectionChange = new EventEmitter();
         this.selectClick = new EventEmitter();
+        /** Emits when user types in search box (useful for server search) */
+        this.searchChange = new EventEmitter();
+        /** Emits when the component requests more data for the current query */
+        this.loadMore = new EventEmitter();
         // Must be public for template access in Angular's strict template checking mode
         this.searchTextByKey = {};
+        this.lastOptionsLength = 0;
+        this.loadingMore = false;
     }
     ngOnInit() {
+        var _a;
         if (!this.config || !this.config.key) {
             throw new Error('cqa-dynamic-select: input "config.key" is required.');
         }
         this.applySelectedValueIfNeeded();
+        this.lastOptionsLength = (((_a = this.config) === null || _a === void 0 ? void 0 : _a.options) || []).length;
     }
     get displayPlaceholder() {
         var _a, _b, _c, _d;
@@ -1543,10 +1551,17 @@ class DynamicSelectFieldComponent {
         return this.hasExistingValue(controlValue) ? undefined : (_d = this.config) === null || _d === void 0 ? void 0 : _d.placeholder;
     }
     ngOnChanges(changes) {
+        var _a;
         if ('config' in changes) {
             // When config changes (including toggling multiple), ensure control value shape matches
             this.syncControlValueForMultipleMode();
             this.applySelectedValueIfNeeded();
+            // Reset loadingMore when new options arrive (options length increased)
+            const len = (((_a = this.config) === null || _a === void 0 ? void 0 : _a.options) || []).length;
+            if (len > this.lastOptionsLength) {
+                this.loadingMore = false;
+            }
+            this.lastOptionsLength = len;
         }
         if ('form' in changes && !changes['form'].firstChange) {
             this.applySelectedValueIfNeeded();
@@ -1710,7 +1725,7 @@ class DynamicSelectFieldComponent {
         catch (_b) { }
     }
     onSelectOpenedChange(opened, _select) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if (opened) {
             // Emit click event when select is opened (clicked)
             this.selectClick.emit();
@@ -1725,6 +1740,14 @@ class DynamicSelectFieldComponent {
                 this.outsideCleanup();
                 this.outsideCleanup = undefined;
             }
+            // Disconnect load-more observer if any
+            if (this.loadMoreObserver) {
+                try {
+                    this.loadMoreObserver.disconnect();
+                }
+                catch (_f) { }
+                this.loadMoreObserver = undefined;
+            }
             return;
         }
         // Focus the search box if enabled
@@ -1734,9 +1757,33 @@ class DynamicSelectFieldComponent {
                 input === null || input === void 0 ? void 0 : input.focus();
             }, 0);
         }
+        // In serverSearch mode, if no options yet, trigger initial fetch
+        if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.serverSearch) {
+            const key = this.config.key;
+            const q = this.searchTextByKey[key] || '';
+            try {
+                (_e = (_d = this.config).onSearch) === null || _e === void 0 ? void 0 : _e.call(_d, q);
+            }
+            catch (_g) { }
+            this.searchChange.emit({ key, query: q });
+        }
+        // Setup infinite scroll observer on sentinel
+        setTimeout(() => this.setupLoadMoreObserver(), 0);
     }
     onSearch(key, value) {
+        var _a, _b, _c, _d;
         this.searchTextByKey[key] = value !== null && value !== void 0 ? value : '';
+        if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.serverSearch) {
+            // For server-side search, emit instead of local filtering
+            try {
+                (_c = (_b = this.config).onSearch) === null || _c === void 0 ? void 0 : _c.call(_b, value !== null && value !== void 0 ? value : '');
+            }
+            catch (_e) { }
+            this.searchChange.emit({ key, query: value !== null && value !== void 0 ? value : '' });
+            // Reset internal paging state
+            this.loadingMore = false;
+            this.lastOptionsLength = (((_d = this.config) === null || _d === void 0 ? void 0 : _d.options) || []).length;
+        }
     }
     /**
      * Returns the currently selected option ids for the configured control.
@@ -1763,6 +1810,9 @@ class DynamicSelectFieldComponent {
     }
     filteredOptions(c) {
         const t = (this.searchTextByKey[c.key] || '').toLowerCase().trim();
+        // In server-side mode, return options as-is (parent provides list)
+        if (c.serverSearch)
+            return c.options || [];
         // When not searching, return full list to preserve original ordering
         if (!t)
             return c.options || [];
@@ -1873,12 +1923,52 @@ class DynamicSelectFieldComponent {
         }
         catch (_c) { }
     }
+    setupLoadMoreObserver() {
+        var _a;
+        // Only if consumer indicates more data is available
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.hasMore))
+            return;
+        // Find sentinel option rendered in the open panel
+        const sentinel = document.querySelector('.mat-select-panel .mat-option.load-more-sentinel');
+        if (!sentinel)
+            return;
+        if (this.loadMoreObserver) {
+            try {
+                this.loadMoreObserver.disconnect();
+            }
+            catch (_b) { }
+            this.loadMoreObserver = undefined;
+        }
+        this.loadMoreObserver = new IntersectionObserver((entries) => {
+            var _a, _b, _c, _d;
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    // Request more only if not currently loading and hasMore still true
+                    if (!this.loadingMore && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.hasMore)) {
+                        this.loadingMore = true;
+                        const key = ((_b = this.config) === null || _b === void 0 ? void 0 : _b.key) || '';
+                        const q = this.searchTextByKey[key] || '';
+                        // Emit outputs and invoke optional callbacks
+                        this.loadMore.emit({ key, query: q });
+                        try {
+                            (_d = (_c = this.config).onLoadMore) === null || _d === void 0 ? void 0 : _d.call(_c, q);
+                        }
+                        catch (_e) { }
+                    }
+                }
+            }
+        }, { root: document.querySelector('.mat-select-panel'), threshold: 0.1 });
+        try {
+            this.loadMoreObserver.observe(sentinel);
+        }
+        catch (_c) { }
+    }
 }
 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" }, 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      </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: 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 });
 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      </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: [] }]
+            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: [] }]
         }], propDecorators: { form: [{
                 type: Input
             }], config: [{
@@ -1887,6 +1977,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], selectClick: [{
                 type: Output
+            }], searchChange: [{
+                type: Output
+            }], loadMore: [{
+                type: Output
             }], selectRef: [{
                 type: ViewChild,
                 args: ['selectRef', { static: false }]
@@ -2261,7 +2355,7 @@ 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"] }, { 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 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 });
 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: [] }]
@@ -2832,7 +2926,7 @@ class DashboardHeaderComponent {
     }
 }
 DashboardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", helpIconTooltip: "helpIconTooltip", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,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\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DashboardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardHeaderComponent, selector: "cqa-dashboard-header", inputs: { title: "title", badgeText: "badgeText", badgeClass: "badgeClass", headerClass: "headerClass", showHeader: "showHeader", showLogo: "showLogo", logoUrl: "logoUrl", showHelpIcon: "showHelpIcon", helpIconTooltip: "helpIconTooltip", showPlusIcon: "showPlusIcon", workspaceOptions: "workspaceOptions", workspacePlaceholder: "workspacePlaceholder", workspaceDisabled: "workspaceDisabled", workspaceValue: "workspaceValue", workspaceMultiple: "workspaceMultiple", workspaceSearchable: "workspaceSearchable", showWorkspaceSelector: "showWorkspaceSelector" }, outputs: { helpIconClick: "helpIconClick", plusIconClick: "plusIconClick", workspaceValueChange: "workspaceValueChange", workspaceSelectClick: "workspaceSelectClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8SEBMQEBASEBAQEBYRFRUXFRARERASGRkWGxYXGBUYHigsGBomGxUYITEhJSkrLjouGSAzODMsNygtLjcBCgoKDg0OGxAQGy4dICUrNy0rKysrMDctLisvLS0tKy0tLTcuLS0tMDctNi0tLSstLS0rLS0rLTEtLS0tLS0tLf/AABEIAMgAyAMBIgACEQEDEQH/xAAcAAEAAgIDAQAAAAAAAAAAAAAABQYCBwEDBAj/xABBEAABAwICAwsKBQUAAwEAAAABAAIDBBEFIQYSQQciMVFSYXGBkaHRExQWIzJUkqKxwRdCYnKyU4LC4fAkNPEV/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAIDAQQFBgf/xAAuEQACAQIEAwYGAwAAAAAAAAAAAQIDEQQSIVETMUEFUmGBkbEUIjJCccEVodH/2gAMAwEAAhEDEQA/AN4oiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA81XK5jdcDWDc3DaW8Y5xwrkyFzNeIg3F2n8ruZd6r/AJbzSo1DlTzm7eKN+3qz71KKuRbsS1JViVhLbtIJa4H2mOHCCF1UNfrPdC+zZo7awzs5p4HtvsPdwKMxwuppRVxi7HEMmbyh+V3SuNI4TJEytpT66Aa7CPzxn2mnjy2KagvJ+5jMyS8/1JxBLl5S5hdsfbNzDxOHeOtcYjiBgc18n/rvIa539F/5Sf0k5X2G3Go9zosSorsOo/hBz1oZm8Gf/ZFdOjOLCshkpapvr4wY5mG2/GY1gmTq+nMZiD08bidNeopqqV1OTvm70mHrtm1Uf00xP3uT5PBbI0br3QzvwmrOvqj1DnWPlYiCdU9X3CoWnui5optaME08pJZw7w7WH7LcoON8kkvB7lM780eT00xP3uT5PBPTTE/e5Pk8FAItvhQ2RVne5P8AppifvcnyeCemmJ+9yfJ4KAROFDZDO9yz0GnmIxyNe6YytBzY4N1XDaLgZHnW4cAxqGrhE0JyOTm/mY7aCvndTeiekMlFOJG3MbspGctvHzEcK16+GUleK1J06jT1PoBVTTKmrmtM9JO8Bou6MWOXG247lY6KqZLG2WN2sx7Q5p4wu9cqUbqx0KFXhTU7J+DNLeleIe8v+XwT0rxD3l/y+Cm9P9GvJONTC31TzvwOBjuPoJVKXOm5wdmz2uFjhcRTU4wXoia9K8Q95f8AL4J6V4h7y/5fBQqKGeW5sfCUO4vRE16V4h7y/wCXwWUel1eCD5w42PAQ0g9OSg0Wc8tw8HQ7i9Ebo0X0hjq49Yb2Vvts4uccYU4tD4ViMlPK2aI2c09ThtBW6MExSOphbLHwEZja120FbtGrnVnzPJ9qdnPDSzR+l/14EiiIrzknCjseofLQOaPaG+b0j/rKSXCynZ3MNXViuYBVNqad1PLmWt1ect2HpC8OiVa6KV9FKeBx1P3bR0EZrpmd5rXEjJhdf+x3D3/RYabQmKojqGZF4vf9bbfay21FN5ej18ym7tfY80U3/wCbiTozlTTkHmAPAf7XXHQsdNo30VbFiEIykNnjYSALg/ub/FerTyJs9HDVtHs2vzNdYEdTgEa7z7B3tOcsDevWZmO1uXWVJdJv8MxuvNGG6DTCelhxGnO+hs4OHDqEjva77qUopIsWw4tfYOcNV3HHK3gcO49ahNzesE1PNQy5t1SWj9Drhw6jn/covc7rXUte+kkOUrjGeLyjL2PWLjrCw4NRcesdV+DKlqnuUSupHwyPikFnxuLXDnH1C6FsTdewgNljq2jKUaj/AN7RvT1t/itdrepTzwUiicbOwREVhEIiIDYu5PpCWyGikO9ku6L9L8y5vQRn1c62svmmmndG9sjDZ7HBwPEQvoXB8WingjnDmjyjA61xkdo7brmYulaWZdTZoyurM9dXTMkY6N4u14LSOMLSWPYW6mqHwuz1Tdp5TTwFbv8AOGctvaFSd0uhZJC2oYWl0R1XWIuWOsO427VzMRTco32O92Ni+FXyN6S9+hrVERc89mEREAVn0Exw09QGPNoZiGu4mu/K77KsLlShJxd0U4ihGtTcJdT6DuigtDcUNRSMc43e0ajukbesWPWuV1Iu6uj5/VpunNwlzROoiLJWVDTeHfRv4wW9lrfVYY563DY5dsZF+0sPfZe7TZvqmHik+oK8EG+wuYckn6tK24P5YvZlEvqaOnBfXYbUwHPUDiP5N+YKO3Mqq00sJ4JI9a3O3/Tu5SGgJuZ2bHMb3aw+6rmgj9XEIhx67fkd4K5rSovMhfWLOjRmTzXFWsvZomfCecG4HfZYadtNPirpWZG8c7emwv3tKx0kPk8VkI/LUNd/Er37rbLVcR44P8nKa1nF7oj9r8GXLTumbUYZK5udmNnb1WP8b9q0Wt+YR6zCmA569Jq/JZaDWMJpmjsyVbowiItwpCIiAIiIAso3WIPEViijKKasydObjJSXRkui4jOQ6AuV42Ss2j6pTlmgnugiIokwiIgL5uV1lpJoScnNDx0jI/UdiKK3OpCK9g5THjuv9lyujh3eB4vtuChim91f9G3URFcckrWmz/VRjjeT2A+K8EO9wuY8o/5NCz02mvJGzktJ7f8A4sdIfU4fFDteRcdrj3kLbgvlit2US+ps6NAsjO88DWD/ACP2Vc0DYXYhEeIPcfgd9yrJhfqMLqJjkZAQP4DvJUfuZ03rJp3ZNjYG36bk9zVc5aVH5EEtYor2kI8pisgGetUtZ3tH2Xv3W5L1cbeTAO9zl59EojU4o2QjLyj53cwFyPmIXVpmTVYs6Jme/ZA3sAPzXVi0mlsjH2vxZsjC/VYUwnLUo9b5LrQa3lugVbafDZGtyL2tgYOmwPygrRqjhNVKW7M1uiCIi3CkIiIAiKUotHa2Zgkip5JI3Xs4DI2JH1Cw5Jcxa/Ii0U36I4j7pL8Kwn0Zro2l8lNIyNvtOIsAFCVWCTdyynTlKSilzZjGMh0LlEXjpO8mz6pTjlilsgiIsEgiIgLRucx3r2nksee633RS+5XR76acjIARt7y77IujhlaB4vtqanin4K37NjLhFFaSV3koTb25N437nsV8Vd2OQ3ZXK9GzzuuJ4WB1zxajbfX7rq0vkdPVsp2Zllm/3OzPdZTeG07aOldLJ7ZGs7/Fv/ca8eiVAbvrZvafctvsGes5bSkk822iKbPluR26DO2Gnho2bcz+1vB2k9yyrGeYYOWnKacWPHrP4R1M+i68IpjiFe+reP8Ax4XAMB4HW9kD+R6QurSVrsRxBlHGfU0+cjhwAm2t15BvSpq2kH01Zjd+SMtAKVtLRzV8o9ppLf2Nv9T9FF7meHOnq5K2QXEZJB45X3+gJ7QpjdBqCWwYXSt38pbdo2MbbVHRcX/tUnWTw4RhwaLOeBZo2yzHhPRfPoCw5tptc5exlJabIpu61jIknZSsO9p8388jgPo36lUFdlRM57nPeS5z3FxO0krrW9ShkiolEnd3CIisIhERAeigpHzSshjF3yODQOc/ZfROF0LYIY4WezGwNHPbb2qgblOjZaPPpW5uBbCOJvA5/Xwdq2SuXi6uaWVdDaoxsrhUPdPxWzGUrTm867+Zo9kdv0VxxSvZBE6aQ2awX5zxAc91pHFa99RM+Z/tPde3ENg7FzMRUyxtueg7Fwbq1eI+Ufc8iIi0D2AREQBcgXyGZ4FwrjueYCZZfOJB6qI73ifJ/r6qUIuTsa+KxEaFJ1JF70UwvzaljjPt21nfuOZ7ODqRTCLqJWVkeAqTdSbm+bOHEAXPAFC0lOZ5vOXj1bMoWnb+sqVqIdcap9n8w5XN0LKVhLbNOrsvxdCmnbkVtXITEITVzCLgp4XXkP8AUfyR0LHSIvl1aGn3rpB6xw4IYfE8AHSpuGFrGajAAAMhn3rGkpGsueF7zrPceF5+w2WUlO3lyI5SJr3CjpmwUzLzP9XC3K7n7XG+wcJK68LoYcOpHySHWf7cr/zSSHIAceZsOlTEVIPKGV2+kI1QdjGclv1J/wBLiajD5GPfm2M3Y3Zr8o8ZGxM/T1M5SuYPRCnE2J15DZ5RrG+fkGcDWDjNrDuWrtLdIpK2cyOu2Nu9jZyG7TzklbA0y0cxOuksHxMp2HeM1nZnlONsz9FW/wAL6/lw/E7wW5QlTXzSevsUTUnoloUdFePwvr+XD8TvBPwvr+XD8TvBbPxFPvFfDlsUdFePwvr+XD8TvBPwvr+XD8TvBPiKfeHDlsUdWvQTRN1ZLryAimjO+P8AUPIB+qlsO3LqkyN8vJG2K++1CS4jiFx3raNBRxwxtiiaGRsFgBsVFfFJK0GWQpO92d0cYaA1oAaBYAZAAJLIGgucQABck8ACzKqul2F11V6qFzGQbbuOtIeew4OZcuTaV1qb1CnGc1GTyrdlL000kNVJqRm0EZ3v6zyj9lWVb/w9reVF8TvBPw9reVF8TvBaEqdSTu0exoYzBUKahCasioIrf+Htbyovid4J+Htbyovid4KPBnsXfyeF76Kgit/4e1vKi+J3gsotzyrJGs+MNvmQXEgdFlngz2MPtPC99EJo5gclXKGNyYM3u2Nb4rctBRxwxtijbqsYLALpwbCoqaIRRCwHCdrjxkr3rcpUsi8Ty3aOPlip6aRXL/TlERXHNCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiAIiIAiIgCIiA/9k=\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-dashboard-header', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" *ngIf=\"showHeader\">\n  <div\n    class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-between cqa-bg-white cqa-pr-6 cqa-pl-2 lg:cqa-px-6 lg:cqa-py-[6px] cqa-py-2 cqa-border-b cqa-border-default cqa-shadow-header\"\n    [ngClass]=\"headerClass\">\n    <!-- Left branding block -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n      <div class=\"cqa-pr-4 lg:cqa-hidden cqa-gap-2 md:cqa-flex cqa-hidden\">\n        <!-- <cqa-button variant=\"filled\" icon=\"\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"31\" height=\"22\" viewBox=\"0 0 31 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.16675 11H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 16.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M5.16675 5.5H25.8334\" stroke=\"white\" stroke-width=\"1.83333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button> -->\n        <!-- <span class=\"cqa-border-l cqa-border-primary-surface cqa-hidden md:cqa-flex\"></span> -->\n        <cqa-button *ngIf=\"showPlusIcon\" variant=\"filled\" icon=\"\" class=\"cqa-hidden md:cqa-flex\" [customClass]=\"'!cqa-rounded-[10px] !cqa-p-[7px] !cqa-min-w-[47px]'\">\n          <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M4.58337 11H17.4167\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M11 4.58301V17.4163\" stroke=\"white\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </cqa-button>\n      </div>\n      <!-- Optional projected logo -->\n      <img *ngIf=\"showLogo && logoUrl\" [src]=\"logoUrl\" alt=\"Logo\" class=\"cqa-w-9 cqa-h-9 cqa-object-contain\" />\n      <svg *ngIf=\"showLogo && !logoUrl\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" fill=\"url(#pattern0_6303_22035)\" />\n        <rect x=\"0.5\" y=\"0.5\" width=\"31\" height=\"31\" rx=\"15.5\" stroke=\"#D8D9FC\" />\n        <defs>\n          <pattern id=\"pattern0_6303_22035\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n            <use xlink:href=\"#image0_6303_22035\" transform=\"scale(0.005)\" />\n          </pattern>\n          <image id=\"image0_6303_22035\" width=\"200\" height=\"200\" preserveAspectRatio=\"none\"\n            xlink:href=\"data:image/jpeg;base64,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\" />\n        </defs>\n      </svg>\n\n      <!-- Title + optional badge -->\n      <div class=\"cqa-items-end cqa-gap-3 cqa-min-w-0 cqa-hidden md:cqa-flex\">\n        <div\n          class=\"cqa-truncate cqa-text-[#22223B] cqa-font-extrabold cqa-text-[32px] cqa-font-nunito-sans cqa-leading-[1]\">\n          {{ title }}</div>\n        <span *ngIf=\"badgeText\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-lg cqa-text-[12px] cqa-font-medium cqa-leading-4 cqa-whitespace-nowrap cqa-text-[#007A55] cqa-bg-[#D0FAE5] cqa-border cqa-border-[#A4F4CF]\"\n          [ngClass]=\"badgeClass\">{{ badgeText }}</span>\n      </div>\n    </div>\n\n    <!-- Right controls/actions -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1 cqa-justify-end\">\n      <!-- Optional workspace select -->\n      <div *ngIf=\"showWorkspaceSelector && workspaceOptions?.length\" class=\"header-dropdown\">\n        <cqa-dynamic-select [form]=\"workspaceForm\" [config]=\"workspaceConfig\" (selectClick)=\"workspaceSelectClick.emit()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Help icon button -->\n      <button \n        *ngIf=\"showHelpIcon\" \n        mat-icon-button \n        [matTooltip]=\"helpIconTooltip || 'Help'\"\n        [matTooltipDisabled]=\"!helpIconTooltip\"\n        matTooltipPosition=\"below\"\n        matTooltipShowDelay=\"300\"\n        (click)=\"helpIconClick.emit()\" \n        class=\"cqa-flex cqa-items-center\">\n        <mat-icon style=\"height: 36px; width: 36px; pointer-events: none;\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z\" fill=\"#D8D9FC\" fill-opacity=\"0.3\"/>\n            <path d=\"M18.0001 28.4163C23.9832 28.4163 28.8334 23.7526 28.8334 17.9997C28.8334 12.2467 23.9832 7.58301 18.0001 7.58301C12.017 7.58301 7.16675 12.2467 7.16675 17.9997C7.16675 23.7526 12.017 28.4163 18.0001 28.4163Z\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8474 14.8751C15.1021 14.1789 15.6048 13.5919 16.2665 13.218C16.9282 12.844 17.7062 12.7073 18.4627 12.8321C19.2192 12.9569 19.9053 13.335 20.3996 13.8996C20.8939 14.4642 21.1644 15.1788 21.1632 15.9168C21.1632 18.0001 17.9132 19.0418 17.9132 19.0418\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M18 23.208H18.01\" stroke=\"#3F43EE\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </mat-icon>\n      </button>\n\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>", styles: [] }]