@unifylib/ui-lib 1.1.45 → 1.1.46

package/fesm2022/unifylib-ui-lib.mjs

@@ -944,7 +944,7 @@ class ColumnDef {
             this.datatype = tableColumn.reportType;
         }
         else {
-            this.datatype = tableColumn.type === 'number' ? 'long' : tableColumn.type;
+            this.datatype = tableColumn.type === 'stateType' ? 'text' : tableColumn.type;
         }
         this.width = tableColumn.reportwidth ? tableColumn.reportwidth : null;
         this.showSum = tableColumn.showSum;
@@ -1062,8 +1062,8 @@ class BackendService {
             let transLabel = this.translateService.instant(this.labelKey(c, pageInfo));
             let transGroup = pageInfo.supportGroupingInExport ?
                 c.group.trim() ? this.translateService.instant(c.group) : ' ' : null;
-            if (c.type === 'stateType') {
-                transLabel = this.translateService.instant('stateType');
+            if (c.type === 'workflowStatus') {
+                transLabel = this.translateService.instant('workflowStatus');
             }
             if ((c.reportVisible === true) || (c.visible === true && c.reportVisible !== false)) {
                 columnDef.push(new ColumnDef(c, index, transLabel, this.translateService.getDefaultLang(), transGroup));
@@ -2523,6 +2523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class FieldFilterComponent {
     constructor() {
         this.editable = false;
+        this.filterResetNonce = 0;
         this.selectedValue = new EventEmitter();
         this.filterFieldInformation = new EventEmitter();
     }
@@ -2535,7 +2536,7 @@ class FieldFilterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FieldFilterComponent, decorators: [{
             type: Component,
@@ -2552,6 +2553,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], editable: [{
                 type: Input
+            }], filterResetNonce: [{
+                type: Input
             }], selectedValue: [{
                 type: Output
             }], filterFieldInformation: [{
@@ -2563,6 +2566,7 @@ class FilterBuilderComponent {
         this.pendingFilters = [];
         this.showExportButton = false;
         this.filters = [];
+        this.filterResetNonce = 0;
         this.filterInformation = new EventEmitter();
         this.isEmpty = new EventEmitter();
         this.applyFilter = new EventEmitter();
@@ -2776,6 +2780,18 @@ class FilterBuilderComponent {
         this.filters = this.filterFields ? this.filterFields.map(() => this.createDefaultFieldFilter()) : [];
         this.isEmpty.emit(true);
     }
+    onClearFilters() {
+        if (this.autoApplyTimeout) {
+            clearTimeout(this.autoApplyTimeout);
+            this.autoApplyTimeout = null;
+        }
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = null;
+        }
+        this.filterResetNonce++;
+        setTimeout(() => this.deleteAll(), 0);
+    }
     switchToAdvanced() {
         if (this.isChecked) {
             if (!this.filter || Object.keys(this.filter).length === 0) {
@@ -2793,7 +2809,7 @@ class FilterBuilderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
             type: Component,
@@ -2807,7 +2823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenuItem,
                         MatMenuTrigger,
                         NgForOf
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{
                 type: Input
             }], isChecked: [{