@cqa-lib/cqa-ui 1.0.105 → 1.0.109
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/daterangepicker/daterangepicker.component.mjs +12 -2
- package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +13 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +13 -3
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/filters/daterangepicker/daterangepicker.component.d.ts +4 -2
- package/lib/filters/dynamic-filter/dynamic-filter.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2353,6 +2353,16 @@ class DaterangepickerComponent {
|
|
|
2353
2353
|
this.onTouched = () => { };
|
|
2354
2354
|
}
|
|
2355
2355
|
ngOnInit() {
|
|
2356
|
+
this.updatePickerOptions();
|
|
2357
|
+
}
|
|
2358
|
+
ngOnChanges(changes) {
|
|
2359
|
+
if (changes['ranges'] || changes['autoApply'] || changes['alwaysShowCalendars'] ||
|
|
2360
|
+
changes['opens'] || changes['drops'] || changes['isInvalidDate'] || changes['parentEl'] ||
|
|
2361
|
+
changes['startDate'] || changes['endDate'] || changes['minDate'] || changes['maxDate']) {
|
|
2362
|
+
this.updatePickerOptions();
|
|
2363
|
+
}
|
|
2364
|
+
}
|
|
2365
|
+
updatePickerOptions() {
|
|
2356
2366
|
this.pickerOptions = {
|
|
2357
2367
|
startDate: this.startDate ? new Date(this.startDate) : undefined,
|
|
2358
2368
|
endDate: this.endDate ? new Date(this.endDate) : undefined,
|
|
@@ -2429,7 +2439,7 @@ DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
|
|
|
2429
2439
|
useExisting: forwardRef(() => DaterangepickerComponent),
|
|
2430
2440
|
multi: true
|
|
2431
2441
|
}
|
|
2432
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], ngImport: i0, template: `
|
|
2442
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
2433
2443
|
<div class="cqa-ui-root">
|
|
2434
2444
|
<label *ngIf="label" class="form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2">
|
|
2435
2445
|
{{ label }}
|
|
@@ -2974,10 +2984,10 @@ class DynamicFilterComponent {
|
|
|
2974
2984
|
}
|
|
2975
2985
|
}
|
|
2976
2986
|
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 });
|
|
2977
|
-
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 (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 (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 (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 });
|
|
2987
|
+
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 (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 (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 });
|
|
2978
2988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
2979
2989
|
type: Component,
|
|
2980
|
-
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 (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 (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 (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: [] }]
|
|
2990
|
+
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 (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 (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: [] }]
|
|
2981
2991
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
|
|
2982
2992
|
type: Input
|
|
2983
2993
|
}], model: [{
|