@cqa-lib/cqa-ui 1.0.113 → 1.0.115
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs +9 -14
- package/fesm2015/cqa-lib-cqa-ui.mjs +10 -15
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +8 -13
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/filters/dynamic-filter/dynamic-filter.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -2641,6 +2641,11 @@ class DynamicFilterComponent {
|
|
|
2641
2641
|
start: new FormControl(initialRange.start),
|
|
2642
2642
|
end: new FormControl(initialRange.end),
|
|
2643
2643
|
});
|
|
2644
|
+
// initialize ngx model display
|
|
2645
|
+
this.ngxDateRangeByKey[c.key] = {
|
|
2646
|
+
startDate: initialRange.start || null,
|
|
2647
|
+
endDate: initialRange.end || null
|
|
2648
|
+
};
|
|
2644
2649
|
}
|
|
2645
2650
|
else {
|
|
2646
2651
|
const initial = this.resolveInitialSelectValue(c);
|
|
@@ -2949,22 +2954,12 @@ class DynamicFilterComponent {
|
|
|
2949
2954
|
const endCtrl = dateGroup.controls['end'];
|
|
2950
2955
|
const startVal = startCtrl?.value;
|
|
2951
2956
|
const endVal = endCtrl?.value;
|
|
2952
|
-
|
|
2953
|
-
const endParseErr = endCtrl?.errors?.['matDatepickerParse']?.text;
|
|
2954
|
-
if (!startVal && !endVal && !startParseErr && !endParseErr)
|
|
2957
|
+
if (!startVal && !endVal)
|
|
2955
2958
|
return null;
|
|
2956
|
-
if (startParseErr)
|
|
2957
|
-
return `Invalid start date format`;
|
|
2958
|
-
if (endParseErr)
|
|
2959
|
-
return `Invalid end date format`;
|
|
2960
2959
|
if (startVal && !endVal)
|
|
2961
2960
|
return `Please select an end date`;
|
|
2962
2961
|
if (!startVal && endVal)
|
|
2963
2962
|
return `Please select a start date`;
|
|
2964
|
-
if (dateGroup.hasError('matStartDateInvalid'))
|
|
2965
|
-
return `Start date must be before end date`;
|
|
2966
|
-
if (dateGroup.hasError('matEndDateInvalid'))
|
|
2967
|
-
return `End date must be after start date`;
|
|
2968
2963
|
if (dateGroup.invalid) {
|
|
2969
2964
|
const config = this.config?.find(c => c.key === key);
|
|
2970
2965
|
return config ? `${config.label} is invalid` : 'Date range is invalid';
|
|
@@ -2973,10 +2968,10 @@ class DynamicFilterComponent {
|
|
|
2973
2968
|
}
|
|
2974
2969
|
}
|
|
2975
2970
|
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 });
|
|
2976
|
-
DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: ["label", "placeholder", "disabled", "startDate", "endDate", "minDate", "maxDate", "ranges", "autoApply", "alwaysShowCalendars", "opens", "drops", "isInvalidDate", "parentEl"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2971
|
+
DynamicFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: { config: "config", model: "model", showFilterPanel: "showFilterPanel", buttonLayout: "buttonLayout" }, outputs: { filtersApplied: "filtersApplied", filtersChanged: "filtersChanged", resetAction: "resetAction", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "selectComponents", predicate: DynamicSelectFieldComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: DaterangepickerComponent, selector: "cqa-daterangepicker", inputs: ["label", "placeholder", "disabled", "startDate", "endDate", "minDate", "maxDate", "ranges", "autoApply", "alwaysShowCalendars", "opens", "drops", "isInvalidDate", "parentEl"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2977
2972
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
2978
2973
|
type: Component,
|
|
2979
|
-
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
2974
|
+
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root cqa-ui-daterange-picker\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4 cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cus-range-select cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width cqa-w-full\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range Picker -->\n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4 cqa-ui-daterange-picker cqa-relative\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range (Daterangepicker) --> \n <ng-container *ngIf=\"c.type === 'date-range-picker'\">\n <cqa-daterangepicker\n [label]=\"c.label\"\n [placeholder]=\"c.placeholder || 'Start Date - End Date'\"\n [disabled]=\"c.disabled || false\"\n [startDate]=\"getDateGroup(c.key)?.get('start')?.value\"\n [endDate]=\"getDateGroup(c.key)?.get('end')?.value\"\n [minDate]=\"undefined\"\n [maxDate]=\"maxDate\"\n [ranges]=\"getDaterangepickerRanges()\"\n [autoApply]=\"true\"\n [alwaysShowCalendars]=\"true\"\n [opens]=\"c.opens || 'center'\"\n [drops]=\"c.drops || 'auto'\"\n [parentEl]=\"c.parentEl\"\n (datesUpdated)=\"onDaterangepickerChange($event, c.key)\"\n (applyClicked)=\"onDaterangepickerApply($event, c.key)\">\n </cqa-daterangepicker>\n <mat-error *ngIf=\"getDateGroup(c.key)?.invalid && getDateGroup(c.key)?.touched\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-last cqa-ml-auto\">\n <cqa-button variant=\"filled\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"apply()\" [disabled]=\"!hasSelectedFilters\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (mousedown)=\"preparePrimaryAction()\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
2980
2975
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
|
|
2981
2976
|
type: Input
|
|
2982
2977
|
}], model: [{
|