@cqa-lib/cqa-ui 1.0.32 → 1.0.34
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/dashboards/failed-test-cases-card/failed-test-cases-card.component.mjs +10 -6
- package/esm2020/lib/filters/dynamic-filter/dynamic-filter.component.mjs +3 -9
- package/fesm2015/cqa-lib-cqa-ui.mjs +11 -13
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +11 -13
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/dashboards/failed-test-cases-card/failed-test-cases-card.component.d.ts +3 -1
- package/lib/filters/dynamic-filter/dynamic-filter.component.d.ts +0 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1974,18 +1974,12 @@ class DynamicFilterComponent {
|
|
|
1974
1974
|
}
|
|
1975
1975
|
return null;
|
|
1976
1976
|
}
|
|
1977
|
-
getOrderedConfig() {
|
|
1978
|
-
if (this.buttonLayout === 'right') {
|
|
1979
|
-
return [...(this.config || [])].reverse();
|
|
1980
|
-
}
|
|
1981
|
-
return this.config || [];
|
|
1982
|
-
}
|
|
1983
1977
|
}
|
|
1984
1978
|
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 });
|
|
1985
|
-
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" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: All selectors and buttons in one line, starting from right -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-end cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <ng-container *ngFor=\"let c of getOrderedConfig()\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n </ng-container>\n\n <!-- Left Layout: All selectors and buttons in one line, starting from left -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-start cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1979
|
+
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" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick"] }, { type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass"], outputs: ["clicked"] }], directives: [{ type: i2.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { type: i3$2.MatError, selector: "mat-error", inputs: ["id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1986
1980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicFilterComponent, decorators: [{
|
|
1987
1981
|
type: Component,
|
|
1988
|
-
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: All selectors and buttons in one line, starting from right -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-end cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <ng-container *ngFor=\"let c of getOrderedConfig()\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n </ng-container>\n\n <!-- Left Layout: All selectors and buttons in one line, starting from left -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-start cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
1982
|
+
args: [{ selector: 'cqa-dynamic-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-filter cqa-mb-[28px]\" *ngIf=\"showFilterPanel\" style=\"height: auto;\">\n <!-- Bottom Layout: Current design with selectors in grid and buttons below -->\n <ng-container *ngIf=\"buttonLayout === 'bottom'\">\n <form class=\"ts-form cqa-grid lg:cqa-grid-cols-4 md:cqa-grid-cols-2 cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </form>\n\n <div class=\"cqa-flex cqa-justify-end cqa-items-stretch cqa-gap-2 cqa-mt-4\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </ng-container>\n\n <!-- Right Layout: Buttons on leftmost side, selectors on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'right'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-flex-shrink-0 cqa-order-first cqa-mr-auto\">\n <cqa-button variant=\"filled\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-justify-end cqa-order-last cqa-ml-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </form>\n </ng-container>\n\n <!-- Left Layout: Selectors on leftmost side, buttons on rightmost side -->\n <ng-container *ngIf=\"buttonLayout === 'left'\">\n <form class=\"ts-form cqa-flex cqa-flex-wrap cqa-items-end cqa-justify-between cqa-gap-4\" [formGroup]=\"form\"\n (keydown.enter)=\"(false)\" novalidate=\"novalidate\" style=\"height: auto;\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-end cqa-gap-4 cqa-flex-1 cqa-order-first cqa-mr-auto\">\n <ng-container *ngFor=\"let c of config\">\n <ng-container *ngIf=\"!c.hidden\">\n <div class=\"form-group cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-shrink-0 filter-selector-width\">\n <!-- Select -->\n <ng-container *ngIf=\"c.type === 'select'\">\n <cqa-dynamic-select [form]=\"form\" [config]=\"getSelectConfig(c)\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- Date Range --> \n <ng-container *ngIf=\"c.type === 'date-range'\">\n <label\n class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4]\">{{\n c.label }}</label>\n <mat-form-field class=\"mat-date-custom\" appearance=\"fill\">\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"getDateGroup(c.key)\" [max]=\"maxDate\">\n <input matStartDate formControlName=\"start\" [placeholder]=\"c.placeholder || 'Start date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n <input matEndDate formControlName=\"end\" [placeholder]=\"c.placeholder || 'End date'\" [max]=\"maxDate\" required\n [readonly]=\"true\" (focus)=\"picker.open()\" (click)=\"picker.open()\" />\n </mat-date-range-input>\n <mat-date-range-picker #picker (dateChange)=\"onDateChange($event, c.key)\"\n [panelClass]=\"'ctc-date-range-panel'\">\n <mat-datepicker-actions class=\"ctc-date-actions\">\n <div class=\"ctc-date-presets\">\n <div class=\"cqa-mb-2 cqa-font-medium\">Quick Presets</div>\n <div class=\"btn-group\">\n <button type=\"button\" class=\"preset-btn today\"\n (click)=\"applyPresetToGroup(c.key, 'today'); picker.close()\">Today</button>\n <button type=\"button\" class=\"preset-btn last7days\"\n (click)=\"applyPresetToGroup(c.key, 'last7days'); picker.close()\">Last 7 days</button>\n <button type=\"button\" class=\"preset-btn last30days\"\n (click)=\"applyPresetToGroup(c.key, 'last30days'); picker.close()\">Last 30 days</button>\n <button type=\"button\" class=\"preset-btn last90days\"\n (click)=\"applyPresetToGroup(c.key, 'last90days'); picker.close()\">Last 90 days</button>\n <button type=\"button\" class=\"preset-btn thismonth\"\n (click)=\"applyPresetToGroup(c.key, 'thismonth'); picker.close()\">This month</button>\n <button type=\"button\" class=\"preset-btn lastmonth\"\n (click)=\"applyPresetToGroup(c.key, 'lastmonth'); picker.close()\">Last month</button>\n </div>\n </div>\n <div class=\"cqa-font-medium cqa-mb-2 cqa-mt-[10px] cqa-w-full\">Custom Range</div>\n <button\n class=\"!cqa-bg-[#3f51b5] !cqa-text-white cqa-p-2 cqa-font-medium !cqa-mb-2 !cqa-mt-[10px] cqa-w-[calc(100%-32px)] !cqa-absolute cqa-bottom-[2px]\"\n mat-flat-button color=\"primary\" matDatepickerApply>Apply</button>\n </mat-datepicker-actions>\n </mat-date-range-picker>\n <div (click)=\"picker.open()\" class=\"cqa-cursor-pointer\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33398 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M10.666 1.33203V3.9987\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M12.6667 2.66797H3.33333C2.59695 2.66797 2 3.26492 2 4.0013V13.3346C2 14.071 2.59695 14.668 3.33333 14.668H12.6667C13.403 14.668 14 14.071 14 13.3346V4.0013C14 3.26492 13.403 2.66797 12.6667 2.66797Z\"\n stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 6.66797H14\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n </mat-form-field>\n <!-- Specific validation messages -->\n <mat-error *ngIf=\"getDateValidationError(c.key) && !picker.opened\">\n {{ getDateValidationError(c.key) }}\n </mat-error>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <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\" (clicked)=\"apply()\">Apply Filter</cqa-button>\n <cqa-button variant=\"outlined\" (clicked)=\"reset()\">Reset</cqa-button>\n </div>\n </form>\n </ng-container>\n </div>\n</div>", styles: [] }]
|
|
1989
1983
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
|
|
1990
1984
|
type: Input
|
|
1991
1985
|
}], model: [{
|
|
@@ -2652,16 +2646,18 @@ class FailedTestCasesCardComponent {
|
|
|
2652
2646
|
}
|
|
2653
2647
|
onCopyTitle(event) {
|
|
2654
2648
|
event.stopPropagation(); // Prevent card click from firing
|
|
2655
|
-
if
|
|
2656
|
-
|
|
2649
|
+
// Use fullTitle if provided, otherwise use title
|
|
2650
|
+
const textToCopy = this.fullTitle || this.title;
|
|
2651
|
+
if (navigator.clipboard && textToCopy) {
|
|
2652
|
+
navigator.clipboard.writeText(textToCopy).catch((err) => {
|
|
2657
2653
|
console.error('Failed to copy title:', err);
|
|
2658
2654
|
// Fallback for older browsers
|
|
2659
|
-
this.fallbackCopyToClipboard(
|
|
2655
|
+
this.fallbackCopyToClipboard(textToCopy);
|
|
2660
2656
|
});
|
|
2661
2657
|
}
|
|
2662
2658
|
else {
|
|
2663
2659
|
// Fallback for browsers without clipboard API
|
|
2664
|
-
this.fallbackCopyToClipboard(
|
|
2660
|
+
this.fallbackCopyToClipboard(textToCopy);
|
|
2665
2661
|
}
|
|
2666
2662
|
}
|
|
2667
2663
|
fallbackCopyToClipboard(text) {
|
|
@@ -2685,12 +2681,14 @@ class FailedTestCasesCardComponent {
|
|
|
2685
2681
|
}
|
|
2686
2682
|
}
|
|
2687
2683
|
FailedTestCasesCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2688
|
-
FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2684
|
+
FailedTestCasesCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedTestCasesCardComponent, selector: "cqa-failed-test-cases-card", inputs: { title: "title", fullTitle: "fullTitle", failures: "failures", failuresLabel: "failuresLabel", pillClass: "pillClass", rootCause: "rootCause", rootCauseLabel: "rootCauseLabel", showRootCause: "showRootCause", lastFailed: "lastFailed", lastFailedLabel: "lastFailedLabel", cardClass: "cardClass", leftAccentClass: "leftAccentClass", tags: "tags" }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "number": i2.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2689
2685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedTestCasesCardComponent, decorators: [{
|
|
2690
2686
|
type: Component,
|
|
2691
2687
|
args: [{ selector: 'cqa-failed-test-cases-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"cqa-ui-root\">\n <div class=\"cqa-w-full cqa-bg-[#FEF2F240] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-border-l-[#EF4444] cqa-rounded-[10px] cqa-p-[10px] cqa-pl-[20px] cqa-cursor-pointer cqa-transition-shadow cqa-duration-200 hover:cqa-shadow-md\"\n [ngClass]=\"[leftAccentClass, cardClass]\"\n (click)=\"onCardClick()\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\">\n <!-- Title with Copy Button -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <h3 class=\"cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-text-[#1A1A1A] cqa-truncate\">{{ title }}</h3>\n <button\n type=\"button\"\n class=\"cqa-inline-flex cqa-cursor-pointer cqa-outline-none cqa-bg-transparent cqa-border-none cqa-p-1 cqa-items-center cqa-justify-center cqa-min-w-[20px] cqa-min-h-[20px] cqa-flex-shrink-0 cqa-text-[#6B7280] hover:cqa-text-[#1A1A1A] cqa-transition-colors\"\n (click)=\"onCopyTitle($event)\"\n [attr.aria-label]=\"'Copy title'\"\n title=\"Copy title\"\n >\n <mat-icon class=\"cqa-w-4 cqa-h-4 cqa-text-[16px] cqa-leading-[16px]\">content_copy</mat-icon>\n </button>\n </div>\n\n <!-- Failures pill -->\n <span class=\"cqa-px-[11px] cqa-py-[3px] cqa-rounded-full cqa-text-[12px] cqa-leading-[16px] cqa-font-medium cqa-tracking-[0.3px]\"\n [ngClass]=\"pillClass\">\n {{ failures | number }} {{ failuresLabel }}\n </span>\n </div>\n\n <!-- Tags -->\n <div *ngIf=\"tags?.length\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2\">\n <span\n *ngFor=\"let tag of tags\"\n class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-border-solid cqa-rounded-full cqa-bg-white cqa-border cqa-border-[#E5E7EB] cqa-text-[#1F1F24] cqa-text-[11px] cqa-leading-[14px] cqa-font-semibold cqa-px-[10px] cqa-py-[4px]\">\n {{ tag }}\n </span>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap cqa-mt-2\">\n <!-- Root cause -->\n <div *ngIf=\"showRootCause\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-text-[#F15F5F] cqa-flex-1 cqa-min-w-0 cqa-mr-2 cqa-truncate\">\n <span class=\"cqa-font-semibold\">{{ rootCauseLabel }}: </span>{{ rootCauseDisplay }}\n </div>\n\n <!-- Timestamp -->\n <div *ngIf=\"lastFailed\"\n class=\"cqa-py-[3px] cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-dialog-muted\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#6B7280\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ lastFailedLabel }}: {{ lastFailed }}</span>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
2692
2688
|
}], propDecorators: { title: [{
|
|
2693
2689
|
type: Input
|
|
2690
|
+
}], fullTitle: [{
|
|
2691
|
+
type: Input
|
|
2694
2692
|
}], failures: [{
|
|
2695
2693
|
type: Input
|
|
2696
2694
|
}], failuresLabel: [{
|