@unifylib/ui-lib 1.1.44 → 1.1.46
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/esm2022/lib/base-model/column-def.model.mjs +2 -2
- package/esm2022/lib/components/advanced-filter/field-filter/field-filter.component.mjs +5 -2
- package/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +16 -3
- package/fesm2022/iq-ui-lib.mjs +20 -4
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +20 -4
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/components/advanced-filter/field-filter/field-filter.component.d.ts +2 -1
- package/lib/components/advanced-filter/filter-builder/filter-builder.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -944,7 +944,7 @@ class ColumnDef {
|
|
|
944
944
|
this.datatype = tableColumn.reportType;
|
|
945
945
|
}
|
|
946
946
|
else {
|
|
947
|
-
this.datatype = tableColumn.type === '
|
|
947
|
+
this.datatype = tableColumn.type === 'stateType' ? 'text' : tableColumn.type;
|
|
948
948
|
}
|
|
949
949
|
this.width = tableColumn.reportwidth ? tableColumn.reportwidth : null;
|
|
950
950
|
this.showSum = tableColumn.showSum;
|
|
@@ -2523,6 +2523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2523
2523
|
class FieldFilterComponent {
|
|
2524
2524
|
constructor() {
|
|
2525
2525
|
this.editable = false;
|
|
2526
|
+
this.filterResetNonce = 0;
|
|
2526
2527
|
this.selectedValue = new EventEmitter();
|
|
2527
2528
|
this.filterFieldInformation = new EventEmitter();
|
|
2528
2529
|
}
|
|
@@ -2535,7 +2536,7 @@ class FieldFilterComponent {
|
|
|
2535
2536
|
});
|
|
2536
2537
|
}
|
|
2537
2538
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2538
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FieldFilterComponent, isStandalone: true, selector: "app-field-filter", inputs: { filter: "filter", pageInfo: "pageInfo", filterFields: "filterFields", item: "item", editable: "editable" }, outputs: { selectedValue: "selectedValue", filterFieldInformation: "filterFieldInformation" }, ngImport: i0, template: "\r\n<app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"filterFields\"\r\n [editable]=\"editable\"\r\n (formUpdated)=\"formChanges($event)\"\r\n>\r\n</app-base-form-canvas>\r\n", styles: [""], dependencies: [{ kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }] }); }
|
|
2539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FieldFilterComponent, isStandalone: true, selector: "app-field-filter", inputs: { filter: "filter", pageInfo: "pageInfo", filterFields: "filterFields", item: "item", editable: "editable", filterResetNonce: "filterResetNonce" }, outputs: { selectedValue: "selectedValue", filterFieldInformation: "filterFieldInformation" }, ngImport: i0, template: "\r\n<app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"filterFields\"\r\n [editable]=\"editable\"\r\n (formUpdated)=\"formChanges($event)\"\r\n>\r\n</app-base-form-canvas>\r\n", styles: [""], dependencies: [{ kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }] }); }
|
|
2539
2540
|
}
|
|
2540
2541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldFilterComponent, decorators: [{
|
|
2541
2542
|
type: Component,
|
|
@@ -2552,6 +2553,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2552
2553
|
type: Input
|
|
2553
2554
|
}], editable: [{
|
|
2554
2555
|
type: Input
|
|
2556
|
+
}], filterResetNonce: [{
|
|
2557
|
+
type: Input
|
|
2555
2558
|
}], selectedValue: [{
|
|
2556
2559
|
type: Output
|
|
2557
2560
|
}], filterFieldInformation: [{
|
|
@@ -2563,6 +2566,7 @@ class FilterBuilderComponent {
|
|
|
2563
2566
|
this.pendingFilters = [];
|
|
2564
2567
|
this.showExportButton = false;
|
|
2565
2568
|
this.filters = [];
|
|
2569
|
+
this.filterResetNonce = 0;
|
|
2566
2570
|
this.filterInformation = new EventEmitter();
|
|
2567
2571
|
this.isEmpty = new EventEmitter();
|
|
2568
2572
|
this.applyFilter = new EventEmitter();
|
|
@@ -2776,6 +2780,18 @@ class FilterBuilderComponent {
|
|
|
2776
2780
|
this.filters = this.filterFields ? this.filterFields.map(() => this.createDefaultFieldFilter()) : [];
|
|
2777
2781
|
this.isEmpty.emit(true);
|
|
2778
2782
|
}
|
|
2783
|
+
onClearFilters() {
|
|
2784
|
+
if (this.autoApplyTimeout) {
|
|
2785
|
+
clearTimeout(this.autoApplyTimeout);
|
|
2786
|
+
this.autoApplyTimeout = null;
|
|
2787
|
+
}
|
|
2788
|
+
if (this.searchTimeout) {
|
|
2789
|
+
clearTimeout(this.searchTimeout);
|
|
2790
|
+
this.searchTimeout = null;
|
|
2791
|
+
}
|
|
2792
|
+
this.filterResetNonce++;
|
|
2793
|
+
setTimeout(() => this.deleteAll(), 0);
|
|
2794
|
+
}
|
|
2779
2795
|
switchToAdvanced() {
|
|
2780
2796
|
if (this.isChecked) {
|
|
2781
2797
|
if (!this.filter || Object.keys(this.filter).length === 0) {
|
|
@@ -2793,7 +2809,7 @@ class FilterBuilderComponent {
|
|
|
2793
2809
|
};
|
|
2794
2810
|
}
|
|
2795
2811
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterBuilderComponent, isStandalone: true, selector: "app-filter-builder", inputs: { columns: "columns", isChecked: "isChecked", filterFields: "filterFields", pageInfo: "pageInfo", pendingFilters: "pendingFilters", showExportButton: "showExportButton" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\r\n\r\n <!-- Desktop View -->\r\n <div class=\"filterForm desktop-view\">\r\n <div class=\"filterForm__row\">\r\n <div class=\"filterForm__col\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"filterForm__filed-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <div class=\"button-group\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-text\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile View -->\r\n <div class=\"mobile-view\">\r\n <!-- Mobile Row 1: Search Field and Export Button -->\r\n <div class=\"mobile-search-row\">\r\n <div class=\"mobile-search-field\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"mobile-field-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <button\r\n *ngIf=\"showExportButton\"\r\n mat-flat-button\r\n class=\"btn-export-mobile\"\r\n [matMenuTriggerFor]=\"exportMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>file_export</mat-icon>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\r\n </mat-menu>\r\n </div>\r\n\r\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\r\n <div class=\"mobile-filter-row\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-content\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.filterBy' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-sort-by\"\r\n [matMenuTriggerFor]=\"sortMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>unfold_more</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n <button \r\n *ngFor=\"let column of getSortableColumns()\" \r\n mat-menu-item \r\n (click)=\"onSortByClick(column.property)\">\r\n {{ labelKey(column) | translate }}\r\n </button>\r\n <button \r\n *ngIf=\"getSortableColumns().length === 0\" \r\n mat-menu-item \r\n disabled>\r\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n\r\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"line-bottom\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"action\">-->\r\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!-- </button>-->\r\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\r\n<!-- </button>-->\r\n<!-- </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:120px!important;max-width:120px!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}.main-filter-builder .mobile-view{display:none;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-filter-row{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box}.main-filter-builder .btn-filter-by,.main-filter-builder .btn-sort-by{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:40px!important;flex:1 1 0!important;min-width:0!important;padding:0 16px!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.main-filter-builder .btn-filter-by .button-content,.main-filter-builder .btn-sort-by .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-filter-by mat-icon,.main-filter-builder .btn-sort-by mat-icon{font-size:24px;width:24px;height:28px;color:#0d4261}.main-filter-builder .btn-filter-by span,.main-filter-builder .btn-sort-by span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-filter-by:hover,.main-filter-builder .btn-sort-by:hover{background:#fafafa!important}.main-filter-builder .btn-sort-by{border:1px solid #0d4261!important}.main-filter-builder .btn-sort-by .sort-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:24px;width:24px;flex-shrink:0}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up,.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{font-size:16px;width:16px;height:8px;line-height:8px;margin:0;color:#0d4261}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up{margin-bottom:-2px}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{margin-top:-2px}.main-filter-builder .btn-sort-by .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:auto}.main-filter-builder .mobile-search-row{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-search-field{flex:1;min-width:0;width:100%;max-width:none}.main-filter-builder .btn-export-mobile{background:transparent!important;border:none!important;border-radius:8px!important;height:40px!important;width:60px!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important}.main-filter-builder .btn-export-mobile .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-export-mobile mat-icon{font-size:24px;width:24px;height:24px;color:#0d4261}.main-filter-builder .btn-export-mobile .arrow-icon{font-size:16px;width:16px;height:16px}.main-filter-builder .btn-export-mobile:hover{background:#fafafa!important}.main-filter-builder .mobile-field-filter{margin:0!important;width:100%!important}.main-filter-builder .mobile-field-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-content{width:100%!important;align-items:center!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field{width:100%!important;margin:0!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:40px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:40px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-select){display:none!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldFilterComponent, selector: "app-field-filter", inputs: ["filter", "pageInfo", "filterFields", "item", "editable"], outputs: ["selectedValue", "filterFieldInformation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
2812
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterBuilderComponent, isStandalone: true, selector: "app-filter-builder", inputs: { columns: "columns", isChecked: "isChecked", filterFields: "filterFields", pageInfo: "pageInfo", pendingFilters: "pendingFilters", showExportButton: "showExportButton" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\r\n\r\n <!-- Desktop View -->\r\n <div class=\"filterForm desktop-view\">\r\n <div class=\"filterForm__row\">\r\n <div class=\"filterForm__col\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"filterForm__filed-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <div class=\"button-group\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\">\r\n <div class=\"button-text\">\r\n <mat-icon>clear_all</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-text\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile View -->\r\n <div class=\"mobile-view\">\r\n <!-- Mobile Row 1: Search Field and Export Button -->\r\n <div class=\"mobile-search-row\">\r\n <div class=\"mobile-search-field\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"mobile-field-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <button\r\n *ngIf=\"showExportButton\"\r\n mat-flat-button\r\n class=\"btn-export-mobile\"\r\n [matMenuTriggerFor]=\"exportMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>file_export</mat-icon>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\r\n </mat-menu>\r\n </div>\r\n\r\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\r\n <div class=\"mobile-filter-row\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by btn-filter-by--icon-only\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\"\r\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\r\n <div class=\"button-content\">\r\n <mat-icon>clear_all</mat-icon>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-content\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.filterBy' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-sort-by\"\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"sortMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>unfold_more</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n <button\r\n *ngFor=\"let column of getSortableColumns()\"\r\n mat-menu-item\r\n (click)=\"onSortByClick(column.property)\">\r\n {{ labelKey(column) | translate }}\r\n </button>\r\n <button\r\n *ngIf=\"getSortableColumns().length === 0\"\r\n mat-menu-item\r\n disabled>\r\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n\r\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"line-bottom\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"action\">-->\r\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!-- </button>-->\r\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\r\n<!-- </button>-->\r\n<!-- </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:0!important;max-width:none!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}.main-filter-builder .mobile-view{display:none;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-filter-row{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .btn-filter-by,.main-filter-builder .btn-sort-by{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:40px!important;flex:1 1 0!important;min-width:0!important;padding:0 16px!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.main-filter-builder .btn-filter-by .button-content,.main-filter-builder .btn-sort-by .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-filter-by mat-icon,.main-filter-builder .btn-sort-by mat-icon{font-size:24px;width:24px;height:28px;color:#0d4261}.main-filter-builder .btn-filter-by span,.main-filter-builder .btn-sort-by span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-filter-by:hover,.main-filter-builder .btn-sort-by:hover{background:#fafafa!important}.main-filter-builder .btn-sort-by{border:1px solid #0d4261!important}.main-filter-builder .btn-sort-by .sort-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:24px;width:24px;flex-shrink:0}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up,.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{font-size:16px;width:16px;height:8px;line-height:8px;margin:0;color:#0d4261}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up{margin-bottom:-2px}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{margin-top:-2px}.main-filter-builder .btn-sort-by .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:auto}.main-filter-builder .btn-filter-by.btn-filter-by--icon-only{flex:0 0 44px!important;min-width:44px!important;max-width:48px!important;padding:0 6px!important}.main-filter-builder .mobile-search-row{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-search-field{flex:1;min-width:0;width:100%;max-width:none}.main-filter-builder .btn-export-mobile{background:transparent!important;border:none!important;border-radius:8px!important;height:40px!important;width:60px!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important}.main-filter-builder .btn-export-mobile .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-export-mobile mat-icon{font-size:24px;width:24px;height:24px;color:#0d4261}.main-filter-builder .btn-export-mobile .arrow-icon{font-size:16px;width:16px;height:16px}.main-filter-builder .btn-export-mobile:hover{background:#fafafa!important}.main-filter-builder .mobile-field-filter{margin:0!important;width:100%!important}.main-filter-builder .mobile-field-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-content{width:100%!important;align-items:center!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field{width:100%!important;margin:0!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:40px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:40px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-select){display:none!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldFilterComponent, selector: "app-field-filter", inputs: ["filter", "pageInfo", "filterFields", "item", "editable", "filterResetNonce"], outputs: ["selectedValue", "filterFieldInformation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
2797
2813
|
}
|
|
2798
2814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
|
|
2799
2815
|
type: Component,
|
|
@@ -2807,7 +2823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2807
2823
|
MatMenuItem,
|
|
2808
2824
|
MatMenuTrigger,
|
|
2809
2825
|
NgForOf
|
|
2810
|
-
], template: "<div class=\"main-filter-builder\">\r\n\r\n <!-- Desktop View -->\r\n <div class=\"filterForm desktop-view\">\r\n <div class=\"filterForm__row\">\r\n <div class=\"filterForm__col\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"filterForm__filed-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <div class=\"button-group\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-text\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile View -->\r\n <div class=\"mobile-view\">\r\n <!-- Mobile Row 1: Search Field and Export Button -->\r\n <div class=\"mobile-search-row\">\r\n <div class=\"mobile-search-field\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"mobile-field-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <button\r\n *ngIf=\"showExportButton\"\r\n mat-flat-button\r\n class=\"btn-export-mobile\"\r\n [matMenuTriggerFor]=\"exportMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>file_export</mat-icon>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\r\n </mat-menu>\r\n </div>\r\n\r\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\r\n <div class=\"mobile-filter-row\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-content\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.filterBy' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-sort-by\"\r\n [matMenuTriggerFor]=\"sortMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>unfold_more</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n <button \r\n *ngFor=\"let column of getSortableColumns()\" \r\n mat-menu-item \r\n (click)=\"onSortByClick(column.property)\">\r\n {{ labelKey(column) | translate }}\r\n </button>\r\n <button \r\n *ngIf=\"getSortableColumns().length === 0\" \r\n mat-menu-item \r\n disabled>\r\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n\r\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"line-bottom\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"action\">-->\r\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!-- </button>-->\r\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\r\n<!-- </button>-->\r\n<!-- </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:120px!important;max-width:120px!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}.main-filter-builder .mobile-view{display:none;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-filter-row{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box}.main-filter-builder .btn-filter-by,.main-filter-builder .btn-sort-by{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:40px!important;flex:1 1 0!important;min-width:0!important;padding:0 16px!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.main-filter-builder .btn-filter-by .button-content,.main-filter-builder .btn-sort-by .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-filter-by mat-icon,.main-filter-builder .btn-sort-by mat-icon{font-size:24px;width:24px;height:28px;color:#0d4261}.main-filter-builder .btn-filter-by span,.main-filter-builder .btn-sort-by span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-filter-by:hover,.main-filter-builder .btn-sort-by:hover{background:#fafafa!important}.main-filter-builder .btn-sort-by{border:1px solid #0d4261!important}.main-filter-builder .btn-sort-by .sort-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:24px;width:24px;flex-shrink:0}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up,.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{font-size:16px;width:16px;height:8px;line-height:8px;margin:0;color:#0d4261}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up{margin-bottom:-2px}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{margin-top:-2px}.main-filter-builder .btn-sort-by .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:auto}.main-filter-builder .mobile-search-row{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-search-field{flex:1;min-width:0;width:100%;max-width:none}.main-filter-builder .btn-export-mobile{background:transparent!important;border:none!important;border-radius:8px!important;height:40px!important;width:60px!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important}.main-filter-builder .btn-export-mobile .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-export-mobile mat-icon{font-size:24px;width:24px;height:24px;color:#0d4261}.main-filter-builder .btn-export-mobile .arrow-icon{font-size:16px;width:16px;height:16px}.main-filter-builder .btn-export-mobile:hover{background:#fafafa!important}.main-filter-builder .mobile-field-filter{margin:0!important;width:100%!important}.main-filter-builder .mobile-field-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-content{width:100%!important;align-items:center!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field{width:100%!important;margin:0!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:40px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:40px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-select){display:none!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}\n"] }]
|
|
2826
|
+
], template: "<div class=\"main-filter-builder\">\r\n\r\n <!-- Desktop View -->\r\n <div class=\"filterForm desktop-view\">\r\n <div class=\"filterForm__row\">\r\n <div class=\"filterForm__col\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"filterForm__filed-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <div class=\"button-group\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\">\r\n <div class=\"button-text\">\r\n <mat-icon>clear_all</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-apply-filter\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-text\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Mobile View -->\r\n <div class=\"mobile-view\">\r\n <!-- Mobile Row 1: Search Field and Export Button -->\r\n <div class=\"mobile-search-row\">\r\n <div class=\"mobile-search-field\">\r\n <app-field-filter\r\n [editable]=\"isEditable()\"\r\n [filter]=\"filter\"\r\n [pageInfo]=\"pageInfo\"\r\n *ngIf=\"isEditable()\"\r\n [filterFields]=\"filterFields\"\r\n [filterResetNonce]=\"filterResetNonce\"\r\n (filterFieldInformation)=\"formChanges($event)\"\r\n class=\"mobile-field-filter\"\r\n >\r\n </app-field-filter>\r\n </div>\r\n <button\r\n *ngIf=\"showExportButton\"\r\n mat-flat-button\r\n class=\"btn-export-mobile\"\r\n [matMenuTriggerFor]=\"exportMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>file_export</mat-icon>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #exportMenu=\"matMenu\">\r\n <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\r\n <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\r\n <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\r\n </mat-menu>\r\n </div>\r\n\r\n <!-- Mobile Row 2: Filter By and Sort By Buttons -->\r\n <div class=\"mobile-filter-row\">\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by btn-filter-by--icon-only\"\r\n type=\"button\"\r\n (click)=\"onClearFilters()\"\r\n [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\r\n <div class=\"button-content\">\r\n <mat-icon>clear_all</mat-icon>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-filter-by\"\r\n type=\"button\"\r\n (click)=\"onApplyFilter()\">\r\n <div class=\"button-content\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.filterBy' | translate }}</span>\r\n </div>\r\n </button>\r\n <button\r\n mat-flat-button\r\n class=\"btn-sort-by\"\r\n type=\"button\"\r\n [matMenuTriggerFor]=\"sortMenu\">\r\n <div class=\"button-content\">\r\n <mat-icon>unfold_more</mat-icon>\r\n <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\r\n <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </button>\r\n <mat-menu #sortMenu=\"matMenu\">\r\n <button\r\n *ngFor=\"let column of getSortableColumns()\"\r\n mat-menu-item\r\n (click)=\"onSortByClick(column.property)\">\r\n {{ labelKey(column) | translate }}\r\n </button>\r\n <button\r\n *ngIf=\"getSortableColumns().length === 0\"\r\n mat-menu-item\r\n disabled>\r\n {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n\r\n<!-- <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"line-bottom\">-->\r\n<!-- <mat-divider></mat-divider>-->\r\n<!-- </div>-->\r\n\r\n<!-- <div class=\"action\">-->\r\n<!-- <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!-- {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!-- </button>-->\r\n<!-- <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!-- {{'FILTER-BUILDER.search' | translate}}-->\r\n<!-- </button>-->\r\n<!-- </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:0!important;max-width:none!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}.main-filter-builder .mobile-view{display:none;flex-direction:column;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-filter-row{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .btn-filter-by,.main-filter-builder .btn-sort-by{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:40px!important;flex:1 1 0!important;min-width:0!important;padding:0 16px!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.main-filter-builder .btn-filter-by .button-content,.main-filter-builder .btn-sort-by .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-filter-by mat-icon,.main-filter-builder .btn-sort-by mat-icon{font-size:24px;width:24px;height:28px;color:#0d4261}.main-filter-builder .btn-filter-by span,.main-filter-builder .btn-sort-by span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-filter-by:hover,.main-filter-builder .btn-sort-by:hover{background:#fafafa!important}.main-filter-builder .btn-sort-by{border:1px solid #0d4261!important}.main-filter-builder .btn-sort-by .sort-icons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:24px;width:24px;flex-shrink:0}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up,.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{font-size:16px;width:16px;height:8px;line-height:8px;margin:0;color:#0d4261}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-up{margin-bottom:-2px}.main-filter-builder .btn-sort-by .sort-icons .sort-arrow-down{margin-top:-2px}.main-filter-builder .btn-sort-by .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:auto}.main-filter-builder .btn-filter-by.btn-filter-by--icon-only{flex:0 0 44px!important;min-width:44px!important;max-width:48px!important;padding:0 6px!important}.main-filter-builder .mobile-search-row{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box}.main-filter-builder .mobile-search-field{flex:1;min-width:0;width:100%;max-width:none}.main-filter-builder .btn-export-mobile{background:transparent!important;border:none!important;border-radius:8px!important;height:40px!important;width:60px!important;padding:0!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important}.main-filter-builder .btn-export-mobile .button-content{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-export-mobile mat-icon{font-size:24px;width:24px;height:24px;color:#0d4261}.main-filter-builder .btn-export-mobile .arrow-icon{font-size:16px;width:16px;height:16px}.main-filter-builder .btn-export-mobile:hover{background:#fafafa!important}.main-filter-builder .mobile-field-filter{margin:0!important;width:100%!important}.main-filter-builder .mobile-field-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .mobile-field-filter ::ng-deep .form-content{width:100%!important;align-items:center!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field{width:100%!important;margin:0!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:40px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:40px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep .field-column mat-form-field:has(mat-select){display:none!important}.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(input.mat-datepicker-input),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(.mat-datepicker-toggle),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-datepicker),.main-filter-builder .mobile-field-filter ::ng-deep mat-form-field:has(mat-select){display:none!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}\n"] }]
|
|
2811
2827
|
}], ctorParameters: () => [], propDecorators: { columns: [{
|
|
2812
2828
|
type: Input
|
|
2813
2829
|
}], isChecked: [{
|