@cqa-lib/cqa-ui 1.0.111 → 1.0.113
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 +1 -1
- package/esm2020/lib/filters/daterangepicker/daterangepicker.directive.mjs +5 -3
- package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +7 -5
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +7 -5
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/filters/daterangepicker/daterangepicker.directive.d.ts +2 -1
- package/package.json +1 -1
|
@@ -2097,7 +2097,7 @@ class DaterangepickerDirective {
|
|
|
2097
2097
|
return;
|
|
2098
2098
|
}
|
|
2099
2099
|
// Resolve parent element to scope styles; allow override via options.parentEl, else use body.
|
|
2100
|
-
const resolvedParentEl = this.options?.parentEl || 'body';
|
|
2100
|
+
const resolvedParentEl = this.parentEl || this.options?.parentEl || 'body';
|
|
2101
2101
|
const baseOptions = {
|
|
2102
2102
|
opens: 'left',
|
|
2103
2103
|
drops: 'down',
|
|
@@ -2298,7 +2298,7 @@ class DaterangepickerDirective {
|
|
|
2298
2298
|
}
|
|
2299
2299
|
}
|
|
2300
2300
|
DaterangepickerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DaterangepickerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2301
|
-
DaterangepickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DaterangepickerDirective, selector: "[cqaDaterangepicker]", inputs: { options: "options", startDate: "startDate", endDate: "endDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { datesUpdated: "datesUpdated", cancelClicked: "cancelClicked", applyClicked: "applyClicked" }, providers: [
|
|
2301
|
+
DaterangepickerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: DaterangepickerDirective, selector: "[cqaDaterangepicker]", inputs: { options: "options", startDate: "startDate", endDate: "endDate", minDate: "minDate", maxDate: "maxDate", parentEl: "parentEl" }, outputs: { datesUpdated: "datesUpdated", cancelClicked: "cancelClicked", applyClicked: "applyClicked" }, providers: [
|
|
2302
2302
|
{
|
|
2303
2303
|
provide: NG_VALUE_ACCESSOR,
|
|
2304
2304
|
useExisting: forwardRef(() => DaterangepickerDirective),
|
|
@@ -2327,6 +2327,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
2327
2327
|
type: Input
|
|
2328
2328
|
}], maxDate: [{
|
|
2329
2329
|
type: Input
|
|
2330
|
+
}], parentEl: [{
|
|
2331
|
+
type: Input
|
|
2330
2332
|
}], datesUpdated: [{
|
|
2331
2333
|
type: Output
|
|
2332
2334
|
}], cancelClicked: [{
|
|
@@ -2470,7 +2472,7 @@ DaterangepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
|
|
|
2470
2472
|
</button>
|
|
2471
2473
|
</div>
|
|
2472
2474
|
</div>
|
|
2473
|
-
`, isInline: true, directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DaterangepickerDirective, selector: "[cqaDaterangepicker]", inputs: ["options", "startDate", "endDate", "minDate", "maxDate"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }] });
|
|
2475
|
+
`, isInline: true, directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DaterangepickerDirective, selector: "[cqaDaterangepicker]", inputs: ["options", "startDate", "endDate", "minDate", "maxDate", "parentEl"], outputs: ["datesUpdated", "cancelClicked", "applyClicked"] }] });
|
|
2474
2476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DaterangepickerComponent, decorators: [{
|
|
2475
2477
|
type: Component,
|
|
2476
2478
|
args: [{
|
|
@@ -2971,10 +2973,10 @@ class DynamicFilterComponent {
|
|
|
2971
2973
|
}
|
|
2972
2974
|
}
|
|
2973
2975
|
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 });
|
|
2974
|
-
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 });
|
|
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 });
|
|
2975
2977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
2976
2978
|
type: Component,
|
|
2977
|
-
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: [] }]
|
|
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: [] }]
|
|
2978
2980
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
|
|
2979
2981
|
type: Input
|
|
2980
2982
|
}], model: [{
|