@unifylib/ui-lib 1.2.36 → 1.2.38

package/fesm2022/iq-ui-lib.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostListener, Input, Inject, Component, EventEmitter, Output, Injectable, signal, ViewChild, forwardRef, Directive, model, computed, inject } from '@angular/core';
+import { HostListener, Input, Inject, Component, EventEmitter, Output, Injectable, signal, ViewChild, forwardRef, Directive, model, computed, inject, ElementRef } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgForOf, NgIf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, formatDate, NgSwitchDefault, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/material/dialog';
@@ -3097,6 +3097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class FieldFilterComponent {
     constructor() {
+        this.elementRef = inject((ElementRef));
         this.editable = false;
         this.filterResetNonce = 0;
         this.selectedValue = new EventEmitter();
@@ -3104,12 +3105,24 @@ class FieldFilterComponent {
     }
     ngOnInit() {
     }
+    isVisible() {
+        const view = this.elementRef.nativeElement.ownerDocument.defaultView;
+        let node = this.elementRef.nativeElement;
+        while (node) {
+            if (view?.getComputedStyle(node).display === 'none') {
+                return false;
+            }
+            node = node.parentElement;
+        }
+        return true;
+    }
     formChanges($event) {
         this.filterForm = $event;
-        this.filterForm.valueChanges.subscribe(() => {
-            this.syncDateRangeValidity();
-            this.filterFieldInformation.emit(this.filterForm.value);
-        });
+        if (!$event) {
+            return;
+        }
+        this.syncDateRangeValidity();
+        this.filterFieldInformation.emit(typeof $event.getRawValue === 'function' ? $event.getRawValue() : $event.value);
     }
     syncDateRangeValidity() {
         const fromControl = this.filterForm.get('from');
@@ -3121,13 +3134,13 @@ class FieldFilterComponent {
         toControl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
     }
     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", filterResetNonce: "filterResetNonce" }, outputs: { selectedValue: "selectedValue", filterFieldInformation: "filterFieldInformation" }, ngImport: i0, template: "\n<app-base-form-canvas\n        [pageInfo]=\"pageInfo\"\n        [fields]=\"filterFields\"\n        [editable]=\"editable\"\n        [filterResetNonce]=\"filterResetNonce\"\n        (formUpdated)=\"formChanges($event)\"\n>\n</app-base-form-canvas>\n", styles: [""], dependencies: [{ kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "attachmentsAlwaysEditable", "emitOnValueChanges", "filterResetNonce", "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: "\n<app-base-form-canvas\n        [pageInfo]=\"pageInfo\"\n        [fields]=\"filterFields\"\n        [editable]=\"editable\"\n        [filterResetNonce]=\"filterResetNonce\"\n        [emitOnValueChanges]=\"true\"\n        (formUpdated)=\"formChanges($event)\"\n>\n</app-base-form-canvas>\n", styles: [":host{display:block;width:100%;min-width:0}\n"], dependencies: [{ kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "attachmentsAlwaysEditable", "emitOnValueChanges", "filterResetNonce", "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,
             args: [{ selector: 'app-field-filter', standalone: true, imports: [
                         BaseFormCanvasComponent
-                    ], template: "\n<app-base-form-canvas\n        [pageInfo]=\"pageInfo\"\n        [fields]=\"filterFields\"\n        [editable]=\"editable\"\n        [filterResetNonce]=\"filterResetNonce\"\n        (formUpdated)=\"formChanges($event)\"\n>\n</app-base-form-canvas>\n" }]
+                    ], template: "\n<app-base-form-canvas\n        [pageInfo]=\"pageInfo\"\n        [fields]=\"filterFields\"\n        [editable]=\"editable\"\n        [filterResetNonce]=\"filterResetNonce\"\n        [emitOnValueChanges]=\"true\"\n        (formUpdated)=\"formChanges($event)\"\n>\n</app-base-form-canvas>\n", styles: [":host{display:block;width:100%;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filter: [{
                 type: Input
             }], pageInfo: [{
@@ -3155,6 +3168,10 @@ class FilterBuilderComponent {
         this.exportDisabled = false;
         this.filters = [];
         this.dateRangeInvalid = false;
+        this.autoApplyTimeout = null;
+        this.scheduledSignature = null;
+        this.autoApplyDelayMs = 5000;
+        this.lastAppliedSignature = '[]';
         this.filterResetNonce = 0;
         this.filterInformation = new EventEmitter();
         this.isEmpty = new EventEmitter();
@@ -3203,6 +3220,7 @@ class FilterBuilderComponent {
             clearTimeout(this.searchTimeout);
             this.searchTimeout = null;
         }
+        this.clearAutoApply();
     }
     onKeyDown(event) {
         if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
@@ -3218,6 +3236,7 @@ class FilterBuilderComponent {
                     clearTimeout(this.searchTimeout);
                     this.searchTimeout = null;
                 }
+                this.clearAutoApply();
                 setTimeout(() => {
                     this.doSearch();
                     this.onApplyFilter();
@@ -3243,16 +3262,60 @@ class FilterBuilderComponent {
         this.filterInformation.emit({ filters: filtersArray, searchStr });
     }
     onApplyFilter() {
+        this.clearAutoApply();
         if (this.dateRangeInvalid) {
             return;
         }
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = null;
+        }
         setTimeout(() => {
             this.doSearch();
+            this.lastAppliedSignature = this.getPendingSignature();
             this.applyFilter.emit();
             const msg = this.translate.instant('BASE_TABLE.filterApplied');
             void this.liveAnnouncer.announce(msg, 'polite');
         }, 0);
     }
+    clearAutoApply() {
+        if (this.autoApplyTimeout) {
+            clearTimeout(this.autoApplyTimeout);
+            this.autoApplyTimeout = null;
+        }
+        this.scheduledSignature = null;
+    }
+    scheduleAutoApply() {
+        if (this.dateRangeInvalid) {
+            this.clearAutoApply();
+            return;
+        }
+        const signature = this.getPendingSignature();
+        if (signature === this.lastAppliedSignature) {
+            this.clearAutoApply();
+            return;
+        }
+        if (this.autoApplyTimeout && this.scheduledSignature === signature) {
+            return;
+        }
+        this.clearAutoApply();
+        this.scheduledSignature = signature;
+        this.autoApplyTimeout = setTimeout(() => {
+            this.autoApplyTimeout = null;
+            this.scheduledSignature = null;
+            this.onApplyFilter();
+        }, this.autoApplyDelayMs);
+    }
+    getPendingSignature() {
+        const active = (this.filters || [])
+            .filter((f) => !!f && !!f.fieldName && this.hasFilterValue(f.valueObject))
+            .map((f) => ({
+            fieldName: f.fieldName,
+            operator: f.operator,
+            valueObject: f.valueObject
+        }));
+        return JSON.stringify(active);
+    }
     scheduleSearch(delayMs = 800) {
         if (this.searchTimeout) {
             clearTimeout(this.searchTimeout);
@@ -3261,7 +3324,10 @@ class FilterBuilderComponent {
             this.doSearch();
         }, delayMs);
     }
-    formChanges($event, index, fieldInfo) {
+    formChanges($event, index, fieldInfo, source) {
+        if (source && !source.isVisible()) {
+            return;
+        }
         const formatIfDate = (type, value) => {
             if (!type || value === undefined || value === null || value === '')
                 return value;
@@ -3299,6 +3365,7 @@ class FilterBuilderComponent {
             else {
                 this.doSearch();
             }
+            this.scheduleAutoApply();
             return;
         }
         if (!this.filters) {
@@ -3332,6 +3399,7 @@ class FilterBuilderComponent {
         else {
             this.doSearch();
         }
+        this.scheduleAutoApply();
     }
     typeMap(colType) {
         const t = (colType || '').toLowerCase();
@@ -3352,10 +3420,12 @@ class FilterBuilderComponent {
         this.isEmpty.emit(true);
     }
     onClearFilters() {
+        this.clearAutoApply();
         if (this.searchTimeout) {
             clearTimeout(this.searchTimeout);
             this.searchTimeout = null;
         }
+        this.lastAppliedSignature = '[]';
         this.filterResetNonce++;
         setTimeout(() => this.deleteAll(), 0);
     }
@@ -3421,7 +3491,7 @@ class FilterBuilderComponent {
         return options.length === 0 || !options.every((code) => selected.includes(code));
     }
     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", exportDisabled: "exportDisabled" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\n\n  <!-- Desktop View -->\n  <div class=\"filterForm desktop-view\">\n    <div class=\"filterForm__row\">\n      <div class=\"filterForm__col\">\n        <app-field-filter\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event)\"\n          class=\"filterForm__filed-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <div class=\"button-group\">\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          (click)=\"onClearFilters()\">\n          <div class=\"button-text\">\n            <mat-icon>clear_all</mat-icon>\n            <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n          </div>\n        </button>\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          [disabled]=\"dateRangeInvalid\"\n          (click)=\"onApplyFilter()\">\n          <div class=\"button-text\">\n            <mat-icon>filter_list</mat-icon>\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile View -->\n  <div class=\"mobile-view\">\n    <!-- Mobile Row 1: Search Field and Export Button -->\n    <div class=\"mobile-search-row\">\n      <div class=\"mobile-search-field\">\n        <app-field-filter\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event)\"\n          class=\"mobile-field-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <button\n        *ngIf=\"showExportButton\"\n        mat-flat-button\n        class=\"btn-export-mobile\"\n        [disabled]=\"exportDisabled\"\n        [matMenuTriggerFor]=\"exportMenu\">\n        <div class=\"button-content\">\n          <mat-icon>file_export</mat-icon>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n      </mat-menu>\n    </div>\n\n    <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n    <div class=\"mobile-filter-row\">\n      <button\n        mat-flat-button\n        class=\"btn-filter-by btn-filter-by--icon-only\"\n        type=\"button\"\n        (click)=\"onClearFilters()\"\n        [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n        <div class=\"button-content\">\n          <mat-icon>delete_sweep</mat-icon>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-filter-by\"\n        type=\"button\"\n        [disabled]=\"dateRangeInvalid\"\n        (click)=\"onApplyFilter()\">\n        <div class=\"button-content\">\n          <mat-icon>filter_list</mat-icon>\n          <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-sort-by\"\n        type=\"button\"\n        [matMenuTriggerFor]=\"sortMenu\">\n        <div class=\"button-content\">\n          <mat-icon>unfold_more</mat-icon>\n          <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #sortMenu=\"matMenu\">\n        <button\n          *ngFor=\"let column of getSortableColumns()\"\n          mat-menu-item\n          (click)=\"onSortByClick(column.property)\">\n          {{ labelKey(column) | translate }}\n        </button>\n        <button\n          *ngIf=\"getSortableColumns().length === 0\"\n          mat-menu-item\n          disabled>\n          {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"line-bottom\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"action\">-->\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!--    </button>-->\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\n<!--    </button>-->\n<!--  </div>-->\n</div>\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:0!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;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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-export-mobile:disabled,.main-filter-builder .btn-export-mobile.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.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:wrap!important;gap:8px!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(.multi-state-filter){display:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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 .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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-end}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left:0!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: i7.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", exportDisabled: "exportDisabled" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter", sortByClicked: "sortByClicked", exportClicked: "exportClicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\n\n  <!-- Desktop View -->\n  <div class=\"filterForm desktop-view\">\n    <div class=\"filterForm__row\">\n      <div class=\"filterForm__col\">\n        <app-field-filter\n          #desktopFields\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event, undefined, undefined, desktopFields)\"\n          class=\"filterForm__filed-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <div class=\"button-group\">\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          (click)=\"onClearFilters()\">\n          <div class=\"button-text\">\n            <mat-icon>clear_all</mat-icon>\n            <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n          </div>\n        </button>\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          [disabled]=\"dateRangeInvalid\"\n          (click)=\"onApplyFilter()\">\n          <div class=\"button-text\">\n            <mat-icon>filter_list</mat-icon>\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile View -->\n  <div class=\"mobile-view\">\n    <!-- Mobile Row 1: Search Field and Export Button -->\n    <div class=\"mobile-search-row\">\n      <div class=\"mobile-search-field\">\n        <app-field-filter\n          #mobileFields\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event, undefined, undefined, mobileFields)\"\n          class=\"mobile-field-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <button\n        *ngIf=\"showExportButton\"\n        mat-flat-button\n        class=\"btn-export-mobile\"\n        [disabled]=\"exportDisabled\"\n        [matMenuTriggerFor]=\"exportMenu\">\n        <div class=\"button-content\">\n          <mat-icon>file_export</mat-icon>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n      </mat-menu>\n    </div>\n\n    <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n    <div class=\"mobile-filter-row\">\n      <button\n        mat-flat-button\n        class=\"btn-filter-by btn-filter-by--icon-only\"\n        type=\"button\"\n        (click)=\"onClearFilters()\"\n        [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n        <div class=\"button-content\">\n          <mat-icon>delete_sweep</mat-icon>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-filter-by\"\n        type=\"button\"\n        [disabled]=\"dateRangeInvalid\"\n        (click)=\"onApplyFilter()\">\n        <div class=\"button-content\">\n          <mat-icon>filter_list</mat-icon>\n          <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-sort-by\"\n        type=\"button\"\n        [matMenuTriggerFor]=\"sortMenu\">\n        <div class=\"button-content\">\n          <mat-icon>unfold_more</mat-icon>\n          <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #sortMenu=\"matMenu\">\n        <button\n          *ngFor=\"let column of getSortableColumns()\"\n          mat-menu-item\n          (click)=\"onSortByClick(column.property)\">\n          {{ labelKey(column) | translate }}\n        </button>\n        <button\n          *ngIf=\"getSortableColumns().length === 0\"\n          mat-menu-item\n          disabled>\n          {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"line-bottom\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"action\">-->\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!--    </button>-->\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\n<!--    </button>-->\n<!--  </div>-->\n</div>\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:0!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;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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-export-mobile:disabled,.main-filter-builder .btn-export-mobile.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.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:wrap!important;gap:8px!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(.multi-state-filter){display:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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 .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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-start}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left:0!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: i7.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,
@@ -3435,7 +3505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenuItem,
                         MatMenuTrigger,
                         NgForOf
-                    ], template: "<div class=\"main-filter-builder\">\n\n  <!-- Desktop View -->\n  <div class=\"filterForm desktop-view\">\n    <div class=\"filterForm__row\">\n      <div class=\"filterForm__col\">\n        <app-field-filter\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event)\"\n          class=\"filterForm__filed-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <div class=\"button-group\">\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          (click)=\"onClearFilters()\">\n          <div class=\"button-text\">\n            <mat-icon>clear_all</mat-icon>\n            <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n          </div>\n        </button>\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          [disabled]=\"dateRangeInvalid\"\n          (click)=\"onApplyFilter()\">\n          <div class=\"button-text\">\n            <mat-icon>filter_list</mat-icon>\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile View -->\n  <div class=\"mobile-view\">\n    <!-- Mobile Row 1: Search Field and Export Button -->\n    <div class=\"mobile-search-row\">\n      <div class=\"mobile-search-field\">\n        <app-field-filter\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event)\"\n          class=\"mobile-field-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <button\n        *ngIf=\"showExportButton\"\n        mat-flat-button\n        class=\"btn-export-mobile\"\n        [disabled]=\"exportDisabled\"\n        [matMenuTriggerFor]=\"exportMenu\">\n        <div class=\"button-content\">\n          <mat-icon>file_export</mat-icon>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n      </mat-menu>\n    </div>\n\n    <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n    <div class=\"mobile-filter-row\">\n      <button\n        mat-flat-button\n        class=\"btn-filter-by btn-filter-by--icon-only\"\n        type=\"button\"\n        (click)=\"onClearFilters()\"\n        [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n        <div class=\"button-content\">\n          <mat-icon>delete_sweep</mat-icon>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-filter-by\"\n        type=\"button\"\n        [disabled]=\"dateRangeInvalid\"\n        (click)=\"onApplyFilter()\">\n        <div class=\"button-content\">\n          <mat-icon>filter_list</mat-icon>\n          <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-sort-by\"\n        type=\"button\"\n        [matMenuTriggerFor]=\"sortMenu\">\n        <div class=\"button-content\">\n          <mat-icon>unfold_more</mat-icon>\n          <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #sortMenu=\"matMenu\">\n        <button\n          *ngFor=\"let column of getSortableColumns()\"\n          mat-menu-item\n          (click)=\"onSortByClick(column.property)\">\n          {{ labelKey(column) | translate }}\n        </button>\n        <button\n          *ngIf=\"getSortableColumns().length === 0\"\n          mat-menu-item\n          disabled>\n          {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"line-bottom\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"action\">-->\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!--    </button>-->\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\n<!--    </button>-->\n<!--  </div>-->\n</div>\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:0!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;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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-export-mobile:disabled,.main-filter-builder .btn-export-mobile.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.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:wrap!important;gap:8px!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(.multi-state-filter){display:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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 .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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-end}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left:0!important}\n"] }]
+                    ], template: "<div class=\"main-filter-builder\">\n\n  <!-- Desktop View -->\n  <div class=\"filterForm desktop-view\">\n    <div class=\"filterForm__row\">\n      <div class=\"filterForm__col\">\n        <app-field-filter\n          #desktopFields\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event, undefined, undefined, desktopFields)\"\n          class=\"filterForm__filed-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <div class=\"button-group\">\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          (click)=\"onClearFilters()\">\n          <div class=\"button-text\">\n            <mat-icon>clear_all</mat-icon>\n            <span>{{ 'FILTER-BUILDER.clearFilters' | translate }}</span>\n          </div>\n        </button>\n        <button\n          mat-flat-button\n          class=\"btn-apply-filter\"\n          type=\"button\"\n          [disabled]=\"dateRangeInvalid\"\n          (click)=\"onApplyFilter()\">\n          <div class=\"button-text\">\n            <mat-icon>filter_list</mat-icon>\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n          </div>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Mobile View -->\n  <div class=\"mobile-view\">\n    <!-- Mobile Row 1: Search Field and Export Button -->\n    <div class=\"mobile-search-row\">\n      <div class=\"mobile-search-field\">\n        <app-field-filter\n          #mobileFields\n          [editable]=\"isEditable()\"\n          [filter]=\"filter\"\n          [pageInfo]=\"pageInfo\"\n          *ngIf=\"isEditable()\"\n          [filterFields]=\"filterFields\"\n          [filterResetNonce]=\"filterResetNonce\"\n          (filterFieldInformation)=\"formChanges($event, undefined, undefined, mobileFields)\"\n          class=\"mobile-field-filter\"\n        >\n        </app-field-filter>\n      </div>\n      <button\n        *ngIf=\"showExportButton\"\n        mat-flat-button\n        class=\"btn-export-mobile\"\n        [disabled]=\"exportDisabled\"\n        [matMenuTriggerFor]=\"exportMenu\">\n        <div class=\"button-content\">\n          <mat-icon>file_export</mat-icon>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"onExportClick('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"onExportClick('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"onExportClick('csv')\">CSV</button>\n      </mat-menu>\n    </div>\n\n    <!-- Mobile Row 2: Filter By and Sort By Buttons -->\n    <div class=\"mobile-filter-row\">\n      <button\n        mat-flat-button\n        class=\"btn-filter-by btn-filter-by--icon-only\"\n        type=\"button\"\n        (click)=\"onClearFilters()\"\n        [attr.aria-label]=\"'FILTER-BUILDER.clearFilters' | translate\">\n        <div class=\"button-content\">\n          <mat-icon>delete_sweep</mat-icon>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-filter-by\"\n        type=\"button\"\n        [disabled]=\"dateRangeInvalid\"\n        (click)=\"onApplyFilter()\">\n        <div class=\"button-content\">\n          <mat-icon>filter_list</mat-icon>\n          <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\n        </div>\n      </button>\n      <button\n        mat-flat-button\n        class=\"btn-sort-by\"\n        type=\"button\"\n        [matMenuTriggerFor]=\"sortMenu\">\n        <div class=\"button-content\">\n          <mat-icon>unfold_more</mat-icon>\n          <span>{{ 'FILTER-BUILDER.sortBy' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n      <mat-menu #sortMenu=\"matMenu\">\n        <button\n          *ngFor=\"let column of getSortableColumns()\"\n          mat-menu-item\n          (click)=\"onSortByClick(column.property)\">\n          {{ labelKey(column) | translate }}\n        </button>\n        <button\n          *ngIf=\"getSortableColumns().length === 0\"\n          mat-menu-item\n          disabled>\n          {{ 'FILTER-BUILDER.noSortableColumns' | translate }}\n        </button>\n      </mat-menu>\n    </div>\n  </div>\n\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"line-bottom\">-->\n<!--    <mat-divider></mat-divider>-->\n<!--  </div>-->\n\n<!--  <div class=\"action\">-->\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\n<!--    </button>-->\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\n<!--    </button>-->\n<!--  </div>-->\n</div>\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:0!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;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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled),.main-filter-builder .btn-sort-by:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-filter-by:disabled,.main-filter-builder .btn-sort-by:disabled{opacity:.45;cursor:not-allowed}.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:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-export-mobile:disabled,.main-filter-builder .btn-export-mobile.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.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:wrap!important;gap:8px!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(.multi-state-filter){display:flex!important;flex:1 1 100%!important;width:100%!important;min-width:0!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 .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}@container base-table (min-width: 769px) and (max-width: 900px){.main-filter-builder{margin-bottom:0}.main-filter-builder .filterForm__row{align-items:flex-start}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row,.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column,.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{width:100%!important;flex-direction:row!important;flex-wrap:wrap!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex!important;gap:12px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:1 1 calc(50% - 12px)!important;width:calc(50% - 12px)!important;max-width:calc(50% - 12px)!important;min-width:180px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter,.main-filter-builder .filterForm__filed-filter ::ng-deep .multi-state-filter__trigger,.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:100%!important}.main-filter-builder .button-group{flex-direction:column-reverse!important;justify-content:flex-start!important;gap:12px!important}.main-filter-builder .btn-apply-filter{height:45px!important;margin-bottom:0!important}}@media (max-width: 768px){.main-filter-builder .desktop-view{display:none!important}.main-filter-builder .mobile-view{display:flex!important}}@media (min-width: 769px){.main-filter-builder .desktop-view{display:flex!important}.main-filter-builder .mobile-view{display:none!important}}:host-context([dir=ltr]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-right:0!important}:host-context([dir=rtl]) .main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{padding-left:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{
                 type: Input
             }], isChecked: [{
@@ -3531,6 +3601,7 @@ class BaseTableComponent extends BaseUtils {
         this.selectedColumn = new EventEmitter();
         this.listActionClicked = new EventEmitter();
         this.pendingViewModeChanged = new EventEmitter();
+        this.filtersApplied = new EventEmitter();
         this.showDialog = new EventEmitter();
         this.selectedRowIndex = -1;
         this.noDataFound = false;
@@ -4021,6 +4092,7 @@ class BaseTableComponent extends BaseUtils {
     }
     applyPendingFilters() {
         this.advancedAppliedFilter = this.pendingFilters || [];
+        this.filtersApplied.emit(this.advancedAppliedFilter);
         this.resetPaginationForFilterChange();
         this.loadData();
     }
@@ -4077,7 +4149,7 @@ class BaseTableComponent extends BaseUtils {
         return super.labelKeyByValue(column, row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: ShareDataService }, { token: i4$2.BreakpointObserver }, { token: 'securityManager' }, { token: i3$3.Router }, { token: i2$1.LiveAnnouncer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", pendingViewModeChanged: "pendingViewModeChanged", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\n  <div class=\"flex-row flex-100\" >\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n      <app-title-bar\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n        [titleMode]=\"''\"\n        [pageInfo]=\"pageInfo\"\n        [newAction]=\"showAddNew()\"\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\n        [draftSupported]=\"pageInfo.draftSupported\"\n        [isPending]=\"isPending\"\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\n        [buttons]=\"extraActions\"\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\n        (newActionClicked)=\"onAddNewAction($event)\"\n        (extractReport)=\"extractReport($event)\"\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n      </app-title-bar>\n    </div>\n  </div>\n\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n    <app-filter-builder\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\n      [pageInfo]=\"pageInfo\"\n      [columns]=\"columns\"\n      [filterFields]=\"filterFields\"\n      [pendingFilters]=\"pendingFilters\"\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\n      [exportDisabled]=\"noDataFound || !dataSource?.data?.length\"\n      (filterInformation)=\"storePendingFilters($event)\"\n      (isEmpty)=\"handleFilterEmpty($event)\"\n      (applyFilter)=\"applyPendingFilters()\"\n      (sortByClicked)=\"handleSortClick($event)\"\n      (exportClicked)=\"extractReport($event)\">\n    </app-filter-builder>\n\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\n        mat-flat-button\n        type=\"button\"\n        [matMenuTriggerFor]=\"exportMenu\"\n        class=\"btn-export\"\n        [disabled]=\"noDataFound || !dataSource?.data?.length\"\n        [attr.aria-label]=\"'export' | translate\"\n        [attr.aria-haspopup]=\"true\"\n      >\n        <div class=\"button-text\">\n          <mat-icon>file_export</mat-icon>\n          <span>{{ 'export' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n      </mat-menu>\n\n    </div>\n  </div>\n\n\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n    <div class=\"flex-100\">\n      <div class=\"flex-row flex-100 mainTable\">\n        <div\n          class=\"table-container\"\n          role=\"table\"\n          [attr.aria-label]=\"\n            pageInfo.labelsSection && !pageInfo.hideTitle\n              ? (pageInfo.labelsSection + '.list_title' | translate)\n              : null\n          \">\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                 class=\"table-header-cell\"\n                 role=\"columnheader\"\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n                 [class.first-cell]=\"i === 0\"\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n              <div class=\"table-header-content\">\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"table-body\" role=\"rowgroup\">\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n                 class=\"table-row\"\n                 role=\"row\"\n                 [attr.tabindex]=\"-1\"\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n                 [ngClass]=\"{\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n                   'table-row--dark-highlight': isDarkHighlight(row)\n                 }\"\n                 (auxclick)=\"openNewTab(row)\"\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                   class=\"table-cell\"\n                   role=\"cell\"\n                   [class.first-cell]=\"i === 0\"\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\n                    <button mat-button type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\n                    <span\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n                      class=\"mat-mdc-form-field-label hyper-link\"\n                      [attr.tabindex]=\"-1\"\n                      (click)=\"hyperLinkClicked(columnProp, row)\">\n                      {{ extractFieldName(row, columnProp) }}\n                    </span>\n                    <ng-template #plainHyperText>\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'button'\">\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'icon'\">\n                    <mat-icon [ngClass]=\"{\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\n                    }\"\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n                      {{ getIcon(row[columnProp]) }}\n                    </mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\n                    {{ getCroppedText(extractFieldName(row, columnProp), row[getColumn(columnProp)?.width]) }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'download'\">\n                    <mat-icon class=\"mainTable__td__icon-blue\"\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'onOff'\">\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'status'\">\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n                    </span>\n                    <span *ngIf=\"row[columnProp] === true\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n                    </span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'info'\">\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      [attr.tabindex]=\"-1\"\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\n                      [attr.id]=\"'table-btn-info-'+row.id\">\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'listAction'\">\n                    <app-button-actions\n                      [row]=\"row\"\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n                      [listAction]=\"listAction\"\n                      [actions]=\"listAction\"\n                      (clickedButton)=\"actionListClicked($event,row)\">\n                    </app-button-actions>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n                      </span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n                        [innerText]='extractFieldName(row, columnProp)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Card View -->\n      <div class=\"mobile-cards-container\">\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n             class=\"mobile-card\"\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n             [ngClass]=\"{\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n               'mobile-card--dark-highlight': isDarkHighlight(row)\n             }\"\n             (auxclick)=\"openNewTab(row)\"\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n          <!-- Mobile Card Header: ID/Name and Status -->\n          <div class=\"mobile-card__header\">\n            <div class=\"mobile-card__header-id\">\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n            </div>\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n              </button>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"mobile-card__divider\"></div>\n\n          <!-- Mobile Card Body: Other columns -->\n          <div class=\"mobile-card__body\">\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n              <div class=\"mobile-card__row-label\">\n                <span>{{ labelKey(column) | translate }} :</span>\n              </div>\n              <div class=\"mobile-card__row-value\">\n                <ng-container [ngSwitch]=\"column.type\">\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\n                      {{ labelKeyByValue(column, row) | translate}}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <!-- Mobile Card Actions -->\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n            <app-button-actions\n              [row]=\"row\"\n              [buttonsAction]=\"true\"\n              [listAction]=\"listAction\"\n              [actions]=\"listAction\"\n              (clickedButton)=\"actionListClicked($event,row)\">\n            </app-button-actions>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n      </div>\n\n\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n        <ng-container *ngIf=\"enablePagination\">\n          <div class=\"flex-column flex-100\">\n            <app-paginator\n              [currentPage]=\"pageIndex\"\n              [totalItems]=\"totalElements\"\n              [pageSize]=\"pageSize\"\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n              (pageChange)=\"onPageChange($event)\"\n              (pageSizeChange)=\"onPageSizeChange($event)\"\n              (loadMore)=\"onLoadMore($event)\">\n            </app-paginator>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-end!important}}.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;z-index:1!important}.mainTable{margin-top:0!important}.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}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover:not(:disabled){background:#fafafa!important}.btn-export:disabled,.btn-export.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!important}}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}:host-context([dir=rtl]) .table-row,:host-context(body.rtl) .table-row{overflow:visible;align-items:center}:host-context([dir=rtl]) .table-cell:not(.actions-cell),:host-context(body.rtl) .table-cell:not(.actions-cell){overflow:visible;align-items:center;line-height:1.7;padding-top:10px;padding-bottom:10px}:host-context([dir=rtl]) .table-cell:not(.actions-cell) span,:host-context(body.rtl) .table-cell:not(.actions-cell) span{display:inline;overflow:visible;line-height:1.7;-webkit-line-clamp:unset;line-clamp:unset}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton", "exportDisabled"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { 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"] }, { 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"] }], animations: [] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundSvgPath: "noDataFoundSvgPath", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", noResultSvgPath: "noResultSvgPath", noResultTitle: "noResultTitle", noResultSubtitle: "noResultSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", mobilePageSize: "mobilePageSize", mobileLoadMoreIncrement: "mobileLoadMoreIncrement", data: "data", listAction: "listAction", extraActions: "extraActions", buttonsDisplayMode: "buttonsDisplayMode", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { buttonClicked: "buttonClicked", pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", pendingViewModeChanged: "pendingViewModeChanged", filtersApplied: "filtersApplied", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\n  <div class=\"flex-row flex-100\" >\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n      <app-title-bar\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n        [titleMode]=\"''\"\n        [pageInfo]=\"pageInfo\"\n        [newAction]=\"showAddNew()\"\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\n        [draftSupported]=\"pageInfo.draftSupported\"\n        [isPending]=\"isPending\"\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\n        [buttons]=\"extraActions\"\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\n        (newActionClicked)=\"onAddNewAction($event)\"\n        (extractReport)=\"extractReport($event)\"\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n      </app-title-bar>\n    </div>\n  </div>\n\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n    <app-filter-builder\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\n      [pageInfo]=\"pageInfo\"\n      [columns]=\"columns\"\n      [filterFields]=\"filterFields\"\n      [pendingFilters]=\"pendingFilters\"\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\n      [exportDisabled]=\"noDataFound || !dataSource?.data?.length\"\n      (filterInformation)=\"storePendingFilters($event)\"\n      (isEmpty)=\"handleFilterEmpty($event)\"\n      (applyFilter)=\"applyPendingFilters()\"\n      (sortByClicked)=\"handleSortClick($event)\"\n      (exportClicked)=\"extractReport($event)\">\n    </app-filter-builder>\n\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\n        mat-flat-button\n        type=\"button\"\n        [matMenuTriggerFor]=\"exportMenu\"\n        class=\"btn-export\"\n        [disabled]=\"noDataFound || !dataSource?.data?.length\"\n        [attr.aria-label]=\"'export' | translate\"\n        [attr.aria-haspopup]=\"true\"\n      >\n        <div class=\"button-text\">\n          <mat-icon>file_export</mat-icon>\n          <span>{{ 'export' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n      </mat-menu>\n\n    </div>\n  </div>\n\n\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n    <div class=\"flex-100\">\n      <div class=\"flex-row flex-100 mainTable\">\n        <div\n          class=\"table-container\"\n          role=\"table\"\n          [attr.aria-label]=\"\n            pageInfo.labelsSection && !pageInfo.hideTitle\n              ? (pageInfo.labelsSection + '.list_title' | translate)\n              : null\n          \">\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                 class=\"table-header-cell\"\n                 role=\"columnheader\"\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n                 [class.first-cell]=\"i === 0\"\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n              <div class=\"table-header-content\">\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"table-body\" role=\"rowgroup\">\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n                 class=\"table-row\"\n                 role=\"row\"\n                 [attr.tabindex]=\"-1\"\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n                 [ngClass]=\"{\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n                   'table-row--dark-highlight': isDarkHighlight(row)\n                 }\"\n                 (auxclick)=\"openNewTab(row)\"\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                   class=\"table-cell\"\n                   role=\"cell\"\n                   [class.first-cell]=\"i === 0\"\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\n                    <button mat-button type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\n                    <span\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n                      class=\"mat-mdc-form-field-label hyper-link\"\n                      [attr.tabindex]=\"-1\"\n                      (click)=\"hyperLinkClicked(columnProp, row)\">\n                      {{ extractFieldName(row, columnProp) }}\n                    </span>\n                    <ng-template #plainHyperText>\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'button'\">\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'icon'\">\n                    <mat-icon [ngClass]=\"{\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\n                    }\"\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n                      {{ getIcon(row[columnProp]) }}\n                    </mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\n                    {{ getCroppedText(extractFieldName(row, columnProp), row[getColumn(columnProp)?.width]) }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'download'\">\n                    <mat-icon class=\"mainTable__td__icon-blue\"\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'onOff'\">\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'status'\">\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n                    </span>\n                    <span *ngIf=\"row[columnProp] === true\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n                    </span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'info'\">\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      [attr.tabindex]=\"-1\"\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\n                      [attr.id]=\"'table-btn-info-'+row.id\">\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTimeExact'\">\n                    {{ extractFieldName(row, columnProp) | date:'d/M/yyyy, h:mm a' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'listAction'\">\n                    <app-button-actions\n                      [row]=\"row\"\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n                      [listAction]=\"listAction\"\n                      [actions]=\"listAction\"\n                      (clickedButton)=\"actionListClicked($event,row)\">\n                    </app-button-actions>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n                      </span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n                        [innerText]='extractFieldName(row, columnProp)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Card View -->\n      <div class=\"mobile-cards-container\">\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n             class=\"mobile-card\"\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n             [ngClass]=\"{\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n               'mobile-card--dark-highlight': isDarkHighlight(row)\n             }\"\n             (auxclick)=\"openNewTab(row)\"\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n          <!-- Mobile Card Header: ID/Name and Status -->\n          <div class=\"mobile-card__header\">\n            <div class=\"mobile-card__header-id\">\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n            </div>\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n              </button>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"mobile-card__divider\"></div>\n\n          <!-- Mobile Card Body: Other columns -->\n          <div class=\"mobile-card__body\">\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n              <div class=\"mobile-card__row-label\">\n                <span>{{ labelKey(column) | translate }} :</span>\n              </div>\n              <div class=\"mobile-card__row-value\">\n                <ng-container [ngSwitch]=\"column.type\">\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\n                      {{ labelKeyByValue(column, row) | translate}}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <!-- Mobile Card Actions -->\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n            <app-button-actions\n              [row]=\"row\"\n              [buttonsAction]=\"true\"\n              [listAction]=\"listAction\"\n              [actions]=\"listAction\"\n              (clickedButton)=\"actionListClicked($event,row)\">\n            </app-button-actions>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n      </div>\n\n\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n        <ng-container *ngIf=\"enablePagination\">\n          <div class=\"flex-column flex-100\">\n            <app-paginator\n              [currentPage]=\"pageIndex\"\n              [totalItems]=\"totalElements\"\n              [pageSize]=\"pageSize\"\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n              (pageChange)=\"onPageChange($event)\"\n              (pageSizeChange)=\"onPageSizeChange($event)\"\n              (loadMore)=\"onLoadMore($event)\">\n            </app-paginator>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-start!important}:host ::ng-deep app-filter-builder .main-filter-builder .filterForm__row{align-items:flex-start!important}}.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;z-index:1!important}.mainTable{margin-top:0!important}.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}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover:not(:disabled){background:#fafafa!important}.btn-export:disabled,.btn-export.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!important}}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}:host-context([dir=rtl]) .table-row,:host-context(body.rtl) .table-row{overflow:visible;align-items:center}:host-context([dir=rtl]) .table-cell:not(.actions-cell),:host-context(body.rtl) .table-cell:not(.actions-cell){overflow:visible;align-items:center;line-height:1.7;padding-top:10px;padding-bottom:10px}:host-context([dir=rtl]) .table-cell:not(.actions-cell) span,:host-context(body.rtl) .table-cell:not(.actions-cell) span{display:inline;overflow:visible;line-height:1.7;-webkit-line-clamp:unset;line-clamp:unset}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonActionsComponent, selector: "app-button-actions", inputs: ["actions", "disabled", "buttonsAction", "listAction", "row"], outputs: ["clickedButton"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FilterBuilderComponent, selector: "app-filter-builder", inputs: ["columns", "isChecked", "filterFields", "pageInfo", "pendingFilters", "showExportButton", "exportDisabled"], outputs: ["filterInformation", "isEmpty", "applyFilter", "sortByClicked", "exportClicked"] }, { 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"] }, { 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"] }], animations: [] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
@@ -4107,7 +4179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenuTrigger,
                         MatMenu,
                         MatMenuItem,
-                    ], template: "<div class=\"flex-column baseTable\">\n  <div class=\"flex-row flex-100\" >\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n      <app-title-bar\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n        [titleMode]=\"''\"\n        [pageInfo]=\"pageInfo\"\n        [newAction]=\"showAddNew()\"\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\n        [draftSupported]=\"pageInfo.draftSupported\"\n        [isPending]=\"isPending\"\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\n        [buttons]=\"extraActions\"\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\n        (newActionClicked)=\"onAddNewAction($event)\"\n        (extractReport)=\"extractReport($event)\"\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n      </app-title-bar>\n    </div>\n  </div>\n\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n    <app-filter-builder\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\n      [pageInfo]=\"pageInfo\"\n      [columns]=\"columns\"\n      [filterFields]=\"filterFields\"\n      [pendingFilters]=\"pendingFilters\"\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\n      [exportDisabled]=\"noDataFound || !dataSource?.data?.length\"\n      (filterInformation)=\"storePendingFilters($event)\"\n      (isEmpty)=\"handleFilterEmpty($event)\"\n      (applyFilter)=\"applyPendingFilters()\"\n      (sortByClicked)=\"handleSortClick($event)\"\n      (exportClicked)=\"extractReport($event)\">\n    </app-filter-builder>\n\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\n        mat-flat-button\n        type=\"button\"\n        [matMenuTriggerFor]=\"exportMenu\"\n        class=\"btn-export\"\n        [disabled]=\"noDataFound || !dataSource?.data?.length\"\n        [attr.aria-label]=\"'export' | translate\"\n        [attr.aria-haspopup]=\"true\"\n      >\n        <div class=\"button-text\">\n          <mat-icon>file_export</mat-icon>\n          <span>{{ 'export' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n      </mat-menu>\n\n    </div>\n  </div>\n\n\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n    <div class=\"flex-100\">\n      <div class=\"flex-row flex-100 mainTable\">\n        <div\n          class=\"table-container\"\n          role=\"table\"\n          [attr.aria-label]=\"\n            pageInfo.labelsSection && !pageInfo.hideTitle\n              ? (pageInfo.labelsSection + '.list_title' | translate)\n              : null\n          \">\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                 class=\"table-header-cell\"\n                 role=\"columnheader\"\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n                 [class.first-cell]=\"i === 0\"\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n              <div class=\"table-header-content\">\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"table-body\" role=\"rowgroup\">\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n                 class=\"table-row\"\n                 role=\"row\"\n                 [attr.tabindex]=\"-1\"\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n                 [ngClass]=\"{\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n                   'table-row--dark-highlight': isDarkHighlight(row)\n                 }\"\n                 (auxclick)=\"openNewTab(row)\"\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                   class=\"table-cell\"\n                   role=\"cell\"\n                   [class.first-cell]=\"i === 0\"\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\n                    <button mat-button type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\n                    <span\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n                      class=\"mat-mdc-form-field-label hyper-link\"\n                      [attr.tabindex]=\"-1\"\n                      (click)=\"hyperLinkClicked(columnProp, row)\">\n                      {{ extractFieldName(row, columnProp) }}\n                    </span>\n                    <ng-template #plainHyperText>\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'button'\">\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'icon'\">\n                    <mat-icon [ngClass]=\"{\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\n                    }\"\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n                      {{ getIcon(row[columnProp]) }}\n                    </mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\n                    {{ getCroppedText(extractFieldName(row, columnProp), row[getColumn(columnProp)?.width]) }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'download'\">\n                    <mat-icon class=\"mainTable__td__icon-blue\"\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'onOff'\">\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'status'\">\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n                    </span>\n                    <span *ngIf=\"row[columnProp] === true\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n                    </span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'info'\">\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      [attr.tabindex]=\"-1\"\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\n                      [attr.id]=\"'table-btn-info-'+row.id\">\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'listAction'\">\n                    <app-button-actions\n                      [row]=\"row\"\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n                      [listAction]=\"listAction\"\n                      [actions]=\"listAction\"\n                      (clickedButton)=\"actionListClicked($event,row)\">\n                    </app-button-actions>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n                      </span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n                        [innerText]='extractFieldName(row, columnProp)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Card View -->\n      <div class=\"mobile-cards-container\">\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n             class=\"mobile-card\"\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n             [ngClass]=\"{\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n               'mobile-card--dark-highlight': isDarkHighlight(row)\n             }\"\n             (auxclick)=\"openNewTab(row)\"\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n          <!-- Mobile Card Header: ID/Name and Status -->\n          <div class=\"mobile-card__header\">\n            <div class=\"mobile-card__header-id\">\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n            </div>\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n              </button>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"mobile-card__divider\"></div>\n\n          <!-- Mobile Card Body: Other columns -->\n          <div class=\"mobile-card__body\">\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n              <div class=\"mobile-card__row-label\">\n                <span>{{ labelKey(column) | translate }} :</span>\n              </div>\n              <div class=\"mobile-card__row-value\">\n                <ng-container [ngSwitch]=\"column.type\">\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\n                      {{ labelKeyByValue(column, row) | translate}}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <!-- Mobile Card Actions -->\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n            <app-button-actions\n              [row]=\"row\"\n              [buttonsAction]=\"true\"\n              [listAction]=\"listAction\"\n              [actions]=\"listAction\"\n              (clickedButton)=\"actionListClicked($event,row)\">\n            </app-button-actions>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n      </div>\n\n\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n        <ng-container *ngIf=\"enablePagination\">\n          <div class=\"flex-column flex-100\">\n            <app-paginator\n              [currentPage]=\"pageIndex\"\n              [totalItems]=\"totalElements\"\n              [pageSize]=\"pageSize\"\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n              (pageChange)=\"onPageChange($event)\"\n              (pageSizeChange)=\"onPageSizeChange($event)\"\n              (loadMore)=\"onLoadMore($event)\">\n            </app-paginator>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-end!important}}.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;z-index:1!important}.mainTable{margin-top:0!important}.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}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover:not(:disabled){background:#fafafa!important}.btn-export:disabled,.btn-export.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!important}}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}:host-context([dir=rtl]) .table-row,:host-context(body.rtl) .table-row{overflow:visible;align-items:center}:host-context([dir=rtl]) .table-cell:not(.actions-cell),:host-context(body.rtl) .table-cell:not(.actions-cell){overflow:visible;align-items:center;line-height:1.7;padding-top:10px;padding-bottom:10px}:host-context([dir=rtl]) .table-cell:not(.actions-cell) span,:host-context(body.rtl) .table-cell:not(.actions-cell) span{display:inline;overflow:visible;line-height:1.7;-webkit-line-clamp:unset;line-clamp:unset}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\n"] }]
+                    ], template: "<div class=\"flex-column baseTable\">\n  <div class=\"flex-row flex-100\" >\n    <div class=\"flex-column align-start flex-100\" style=\"width: 100%;\">\n      <app-title-bar\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\n        [subTitle]=\"(pageInfo.hideTitle || pageInfo.hideSubtitle) ? '' : pageInfo.labelsSection+'.subtitle'\"\n        [titleMode]=\"''\"\n        [pageInfo]=\"pageInfo\"\n        [newAction]=\"showAddNew()\"\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\n        [draftSupported]=\"pageInfo.draftSupported\"\n        [isPending]=\"isPending\"\n        [onViewModeChange]=\"switchViewMode.bind(this)\"\n        [buttons]=\"extraActions\"\n        [buttonsDisplayMode]=\"buttonsDisplayMode\"\n        (newActionClicked)=\"onAddNewAction($event)\"\n        (extractReport)=\"extractReport($event)\"\n        (viewModeChanged)=\"onViewModeChangedReceived($event)\"\n        (buttonClicked)=\"buttonClicked.emit($event)\"\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\n      </app-title-bar>\n    </div>\n  </div>\n\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\n    <app-filter-builder\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\n      [pageInfo]=\"pageInfo\"\n      [columns]=\"columns\"\n      [filterFields]=\"filterFields\"\n      [pendingFilters]=\"pendingFilters\"\n      [showExportButton]=\"!pageInfo.hideExtractButton\"\n      [exportDisabled]=\"noDataFound || !dataSource?.data?.length\"\n      (filterInformation)=\"storePendingFilters($event)\"\n      (isEmpty)=\"handleFilterEmpty($event)\"\n      (applyFilter)=\"applyPendingFilters()\"\n      (sortByClicked)=\"handleSortClick($event)\"\n      (exportClicked)=\"extractReport($event)\">\n    </app-filter-builder>\n\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\n        mat-flat-button\n        type=\"button\"\n        [matMenuTriggerFor]=\"exportMenu\"\n        class=\"btn-export\"\n        [disabled]=\"noDataFound || !dataSource?.data?.length\"\n        [attr.aria-label]=\"'export' | translate\"\n        [attr.aria-haspopup]=\"true\"\n      >\n        <div class=\"button-text\">\n          <mat-icon>file_export</mat-icon>\n          <span>{{ 'export' | translate }}</span>\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\n        </div>\n      </button>\n\n      <mat-menu #exportMenu=\"matMenu\">\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\n      </mat-menu>\n\n    </div>\n  </div>\n\n\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\n    <div class=\"flex-100\">\n      <div class=\"flex-row flex-100 mainTable\">\n        <div\n          class=\"table-container\"\n          role=\"table\"\n          [attr.aria-label]=\"\n            pageInfo.labelsSection && !pageInfo.hideTitle\n              ? (pageInfo.labelsSection + '.list_title' | translate)\n              : null\n          \">\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\" role=\"row\">\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                 class=\"table-header-cell\"\n                 role=\"columnheader\"\n                 [attr.aria-sort]=\"getColumnAriaSort(columnProp)\"\n                 [attr.tabindex]=\"getColumn(columnProp)?.enableSorting ? 0 : null\"\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\n                 [class.first-cell]=\"i === 0\"\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\"\n                 (keydown)=\"onSortHeaderKeydown($event, columnProp)\">\n              <div class=\"table-header-content\">\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"table-body\" role=\"rowgroup\">\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n                 class=\"table-row\"\n                 role=\"row\"\n                 [attr.tabindex]=\"-1\"\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\n                 [ngClass]=\"{\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n                   'table-row--dark-highlight': isDarkHighlight(row)\n                 }\"\n                 (auxclick)=\"openNewTab(row)\"\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\n                   class=\"table-cell\"\n                   role=\"cell\"\n                   [class.first-cell]=\"i === 0\"\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\n                    <button mat-button type=\"button\" class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\" [attr.tabindex]=\"-1\">{{ getStatusDescription(row) }}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\n                    <span\n                      *ngIf=\"shouldRenderAsHyperLink(row); else plainHyperText\"\n                      class=\"mat-mdc-form-field-label hyper-link\"\n                      [attr.tabindex]=\"-1\"\n                      (click)=\"hyperLinkClicked(columnProp, row)\">\n                      {{ extractFieldName(row, columnProp) }}\n                    </span>\n                    <ng-template #plainHyperText>\n                      <span class=\"mat-mdc-form-field-label\">{{ extractFieldName(row, columnProp) }}</span>\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'button'\">\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button type=\"button\" class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'icon'\">\n                    <mat-icon [ngClass]=\"{\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\n                    }\"\n                              [attr.aria-label]=\"getIconAriaLabelKey(row[columnProp]) | translate\">\n                      {{ getIcon(row[columnProp]) }}\n                    </mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\n                    <mat-checkbox class=\"primary\" [tabIndex]=\"-1\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button type=\"button\" class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\" [attr.tabindex]=\"-1\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, columnProp) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\n                    {{ getCroppedText(extractFieldName(row, columnProp), row[getColumn(columnProp)?.width]) }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'download'\">\n                    <mat-icon class=\"mainTable__td__icon-blue\"\n                              [attr.aria-label]=\"'BASE_TABLE.downloadAction' | translate\">system_update_alt</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'onOff'\">\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(null) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(false) | translate\">flag</mat-icon>\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\"\n                              [attr.aria-label]=\"getOnOffFlagAriaLabelKey(true) | translate\">flag</mat-icon>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'status'\">\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\n                    </span>\n                    <span *ngIf=\"row[columnProp] === true\">\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\n                    </span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'info'\">\n                    <button\n                      mat-icon-button\n                      type=\"button\"\n                      [attr.tabindex]=\"-1\"\n                      [attr.aria-label]=\"'BASE_TABLE.rowDetails' | translate\"\n                      (click)=\"$event.stopPropagation();emitEvent(row)\"\n                      [attr.id]=\"'table-btn-info-'+row.id\">\n                      <mat-icon aria-hidden=\"true\">info</mat-icon>\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTimeExact'\">\n                    {{ extractFieldName(row, columnProp) | date:'d/M/yyyy, h:mm a' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'listAction'\">\n                    <app-button-actions\n                      [row]=\"row\"\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\n                      [listAction]=\"listAction\"\n                      [actions]=\"listAction\"\n                      (clickedButton)=\"actionListClicked($event,row)\">\n                    </app-button-actions>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, columnProp)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\">\n                        {{ pageInfo.labelsSection + \".\" + extractFieldName(row, columnProp) | translate }}\n                      </span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span\n                        [attr.tabindex]=\"-1\"\n                        (click)=\"$event.stopPropagation(); emitRoutePage(row)\"\n                        [innerText]='extractFieldName(row, columnProp)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Card View -->\n      <div class=\"mobile-cards-container\">\n        <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\n             class=\"mobile-card\"\n             [attr.id]=\"'mobile-card-' + (row?.id || row?.key || '')\"\n             [ngClass]=\"{\n               'mobile-card--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\n               'mobile-card--dark-highlight': isDarkHighlight(row)\n             }\"\n             (auxclick)=\"openNewTab(row)\"\n             (click)=\"$event.stopPropagation(); onSelectItem(row)\">\n\n          <!-- Mobile Card Header: ID/Name and Status -->\n          <div class=\"mobile-card__header\">\n            <div class=\"mobile-card__header-id\">\n              <span class=\"mobile-card__id-text\">{{ extractFieldName(row, getMobileCardIdColumn()?.property || 'id') }}</span>\n            </div>\n            <div class=\"mobile-card__header-status\" *ngIf=\"getMobileCardStatusColumn()\">\n              <button mat-button class=\"stateType {{ row[getMobileCardStatusColumn()?.property]}}\"\n                      [attr.id]=\"'mobile-btn-state-'+getMobileCardStatusColumn()?.property\">\n                {{ labelKeyByValue(getMobileCardStatusColumn(), row) | translate}}\n              </button>\n            </div>\n          </div>\n\n          <!-- Divider -->\n          <div class=\"mobile-card__divider\"></div>\n\n          <!-- Mobile Card Body: Other columns -->\n          <div class=\"mobile-card__body\">\n            <div *ngFor=\"let column of getMobileCardColumns()\" class=\"mobile-card__row\">\n              <div class=\"mobile-card__row-label\">\n                <span>{{ labelKey(column) | translate }} :</span>\n              </div>\n              <div class=\"mobile-card__row-value\">\n                <ng-container [ngSwitch]=\"column.type\">\n                  <ng-container *ngSwitchCase=\"'stateType'\">\n                    <button mat-button class=\"stateType {{ row[column.property]}}\"\n                            [attr.id]=\"'mobile-btn-state-'+column.property\">\n                      {{ labelKeyByValue(column, row) | translate}}\n                    </button>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'date'\">\n                    {{ extractFieldName(row, column.property) | date:'dd/MM/yyyy':'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\n                    <span class=\"mobile-card__amount-currency\">{{ row[column.currency] }}</span>\n                    <span class=\"mobile-card__amount-value\">{{ extractFieldName(row, column.property) | currency:'':'' }}</span>\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\n                    {{ extractFieldName(row, column.property) | date : extractFormat(column):'UTC' }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\n                    <small><sup class=\"mainTable__td__currency\">{{row[column.currency]}}</sup></small>\n                    {{ extractFieldName(row, column.property) | number : (column.digitInfo || '1.3-5') }}\n                  </ng-container>\n\n                  <ng-container *ngSwitchCase=\"'list'\">\n                    <ul class=\"mainTable__td__list\">\n                      <li *ngFor=\"let item of getListItems(row, column.property)\">{{ item }}</li>\n                    </ul>\n                  </ng-container>\n\n                  <ng-container *ngSwitchDefault>\n                    <ng-container *ngIf=\"column.translate; else noTranslate\">\n                      <span>{{ pageInfo.labelsSection + \".\" + extractFieldName(row, column.property) | translate }}</span>\n                    </ng-container>\n                    <ng-template #noTranslate>\n                      <span [innerText]='extractFieldName(row, column.property)'></span>\n                    </ng-template>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n\n          <!-- Mobile Card Actions -->\n          <div class=\"mobile-card__actions\" *ngIf=\"listAction && listAction.length > 0\">\n            <app-button-actions\n              [row]=\"row\"\n              [buttonsAction]=\"true\"\n              [listAction]=\"listAction\"\n              [actions]=\"listAction\"\n              (clickedButton)=\"actionListClicked($event,row)\">\n            </app-button-actions>\n          </div>\n        </div>\n      </div>\n\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\n        <img *ngIf=\"getDisplaySvgPath()\" [src]=\"getDisplaySvgPath()\" class=\"dataNotFound__icon\" alt=\"No data found\" />\n        <span class=\"dataNotFound__title\">{{ getDisplayTitle() | translate}}</span>\n        <span class=\"dataNotFound__subtitle\">{{ getDisplaySubtitle() | translate}}</span>\n      </div>\n\n\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\n        <ng-container *ngIf=\"enablePagination\">\n          <div class=\"flex-column flex-100\">\n            <app-paginator\n              [currentPage]=\"pageIndex\"\n              [totalItems]=\"totalElements\"\n              [pageSize]=\"pageSize\"\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\n              [mobileLoadMoreIncrement]=\"mobileLoadMoreIncrement\"\n              [displayedItems]=\"mobileDisplayedItems || dataSource.data.length\"\n              (pageChange)=\"onPageChange($event)\"\n              (pageSizeChange)=\"onPageSizeChange($event)\"\n              (loadMore)=\"onLoadMore($event)\">\n            </app-paginator>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box;container-type:inline-size;container-name:base-table}.baseTable{width:100%!important;max-width:100%!important;box-sizing:border-box}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}.flex-100{flex:1 1 100%}.flex-49{flex:0 0 49%}.flex-50{flex:0 0 50%}.align-start{justify-content:flex-start;align-items:flex-start}.align-center{justify-content:center;align-items:center}.align-end{justify-content:flex-end;align-items:flex-end}.gap-0{gap:0}.gap-5{gap:5px}.gap-10{gap:10px}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;min-height:280px;text-align:center;margin-top:0;padding:40px 0}.dataNotFound__icon{height:auto;width:auto;max-width:200px;max-height:200px;margin-bottom:8px;object-fit:contain}.dataNotFound__title{color:#6a6a6a;font-size:20px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:20px;font-weight:400}@media (max-width: 960px){.flex-column-sm{flex-direction:column}.align-center-sm{justify-content:center;align-items:flex-start}}.filter-row{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;max-width:100%!important;gap:16px!important;box-sizing:border-box;margin-top:20px;margin-bottom:16px;padding:0;flex-wrap:nowrap!important;min-width:0!important;min-height:48px!important;overflow:visible!important}.filter-row app-filter-builder{flex:1 1 auto!important;min-width:0!important;max-width:none!important;width:auto!important;flex-shrink:1!important;display:flex!important;align-items:center!important;overflow:visible!important}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row{align-items:flex-start!important}:host ::ng-deep app-filter-builder .main-filter-builder .filterForm__row{align-items:flex-start!important}}.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;z-index:1!important}.mainTable{margin-top:0!important}.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}.btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-apply-filter:hover{background:#fafafa!important}.btn-export{background:#fff!important;border:1px solid #0d4261!important;border-radius:8px!important;height:46px!important;min-width:109px!important;padding:0 16px!important;box-shadow:none!important;margin-bottom:7px!important}.btn-export .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.btn-export mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.btn-export .arrow-icon{font-size:16px;width:16px;height:16px;margin-left:0}.btn-export span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.btn-export:hover:not(:disabled){background:#fafafa!important}.btn-export:disabled,.btn-export.mat-mdc-button-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}@container base-table (min-width: 769px) and (max-width: 900px){.filter-row .btn-export{margin-bottom:0!important}}.arrow-icon{font-size:16px;width:16px;height:16px}@media (max-width: 1024px){.button-group{width:auto}}@media (max-width: 768px){.filter-row{flex-direction:column;align-items:stretch}.button-group{display:none!important}.btn-export{width:100%}}.table-container{width:100%;overflow:hidden;background:#f7f7f7;box-sizing:border-box;display:flex;flex-direction:column}.table-header{display:flex;align-items:center;background:#f7f7f7;border:1px solid #f0eeee;max-height:48px;height:48px;margin-bottom:16px;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-header-cell{display:flex;align-items:center;max-height:48px;height:48px;padding:8px 16px;flex:1;min-width:100px;position:sticky;top:0;background:none;z-index:10;box-sizing:border-box}.table-header-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-header-cell:last-child{border-right:none}.table-header-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-header-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}.table-header-cell.actions-cell{justify-content:center;text-align:center}.table-header-cell.actions-cell .table-header-content{justify-content:center}.table-header-cell.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table-header-cell.sortable:hover{background:#fafafa}.table-header-content{display:flex;align-items:center;gap:8px;width:100%}.table-header-label{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.sort-icon{font-size:18px;width:18px;height:18px;color:#5c5c5c;display:flex;align-items:center;justify-content:center;transition:color .2s}.sort-icon.sort-asc,.sort-icon.sort-desc{color:#0d4261}.table-body{display:flex;flex-direction:column;gap:8px;background:#f7f7f7}.table-row{display:flex;align-items:center;min-height:48px;background:#fff;border-bottom:1px solid #f0eeee;transition:background-color .2s;border-radius:8px;overflow:hidden;width:100%;box-sizing:border-box;min-width:0}.table-row:hover{background:#fafafa}.table-row--highlight{background:#f0f8ff}.table-row--dark-highlight{background:#e8f4f8}.table-row .table-cell.first-cell{border-top-left-radius:8px;border-bottom-left-radius:8px}.table-row .table-cell.last-cell{border-top-right-radius:8px;border-bottom-right-radius:8px}:host-context([dir=rtl]) .table-row,:host-context(body.rtl) .table-row{overflow:visible;align-items:center}:host-context([dir=rtl]) .table-cell:not(.actions-cell),:host-context(body.rtl) .table-cell:not(.actions-cell){overflow:visible;align-items:center;line-height:1.7;padding-top:10px;padding-bottom:10px}:host-context([dir=rtl]) .table-cell:not(.actions-cell) span,:host-context(body.rtl) .table-cell:not(.actions-cell) span{display:inline;overflow:visible;line-height:1.7;-webkit-line-clamp:unset;line-clamp:unset}.table-cell{display:flex;align-items:center;min-height:48px;max-height:none;padding:8px 16px;flex:1;min-width:100px;font-family:Lusail,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#000;box-sizing:border-box}.table-cell.has-width{flex:0 0 auto!important;min-width:0!important;max-width:none!important}.table-cell:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}.mobile-cards-container{display:none;flex-direction:column;gap:12px;width:100%;box-sizing:border-box}.mobile-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:12px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background-color .2s;box-sizing:border-box;width:100%}.mobile-card:hover{background:#fafafa}.mobile-card--highlight{background:#f0f8ff}.mobile-card--dark-highlight{background:#e8f4f8}.mobile-card__header{display:flex;align-items:center;justify-content:space-between;height:48px;width:100%;box-sizing:border-box}.mobile-card__header-id{display:flex;flex-direction:column;justify-content:center;flex:1}.mobile-card__id-text{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;text-align:left;white-space:nowrap}.mobile-card__header-status{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}.mobile-card__divider{height:.347px;width:100%;background:#f0eeee;margin:0;flex-shrink:0}.mobile-card__body{display:flex;flex-direction:column;gap:0;width:100%;box-sizing:border-box}.mobile-card__row{display:flex;align-items:center;justify-content:space-between;height:40px;width:100%;overflow:hidden;box-sizing:border-box}.mobile-card__row-label{display:flex;flex-direction:column;justify-content:center;flex-shrink:0}.mobile-card__row-label span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__row-value{display:flex;flex-direction:column;justify-content:center;flex-shrink:0;text-align:right}.mobile-card__row-value span{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;white-space:nowrap}.mobile-card__amount-currency{font-family:Lusail,sans-serif;font-weight:400;font-size:14px;line-height:1.2;color:#222;display:inline-block}.mobile-card__amount-value{font-family:Lusail,sans-serif;font-weight:700;font-size:14px;line-height:1.2;color:#222;display:inline-block;margin-left:6px;margin-right:6px}.mobile-card__actions{border-top:1px solid #f0eeee;padding-top:8px;margin-top:4px;display:flex;align-items:center;justify-content:center;min-height:48px;max-height:48px;width:100%;box-sizing:border-box}@media (max-width: 768px){.table-container{display:none}.mobile-cards-container{display:flex}}@media (min-width: 769px){.mobile-cards-container{display:none}.table-container{display:flex}}:host ::ng-deep button.mat-mdc-button.stateType,:host ::ng-deep button.mdc-button.stateType{white-space:normal!important;height:auto!important;min-height:28px!important;max-width:100%!important;align-items:center!important;justify-content:center!important;cursor:default!important}:host ::ng-deep button.mat-mdc-button.stateType .mdc-button__label,:host ::ng-deep button.mdc-button.stateType .mdc-button__label{white-space:normal!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;word-break:break-word!important;line-height:1.25!important;max-width:100%!important;text-align:center!important}@media (max-width: 450px){.mobile-card__header{flex-direction:column;justify-content:flex-start;height:auto;width:100%;box-sizing:border-box;gap:8px}}.mainTable__td__list{margin:4px 0;padding:4px 8px 4px 1.25rem;list-style-type:disc}.mainTable__td__list li{word-break:break-word;line-height:1.35;padding:2px 0}.mainTable__td__list li+li{margin-top:2px}.table-cell:has(.mainTable__td__list){align-items:flex-start;padding-top:8px;padding-bottom:8px}.mobile-card__row-value:has(.mainTable__td__list){align-items:flex-start;padding:4px 0}\n"] }]
         }], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: i4$2.BreakpointObserver }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['securityManager']
@@ -4181,6 +4253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], pendingViewModeChanged: [{
                 type: Output
+            }], filtersApplied: [{
+                type: Output
             }], showDialog: [{
                 type: Output
             }], customizedData: [{
@@ -4916,7 +4990,7 @@ class SharedListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedListComponent, deps: [{ token: i3$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SharedListComponent, isStandalone: true, selector: "app-shared-list", ngImport: i0, template: "<ng-container *ngIf=\"readyToLoad\">\n  @if (editableTable) {\n    <app-editable-base-table [filterRequest]=\"filterRequest\" [pageInfo]=\"pageInfo\"\n                    [fields]=\"fields\"\n                    [isPending]=\"isPending\"\n    ></app-editable-base-table>\n\n  } @else {\n\n    <app-base-table [filters]=\"filters\" [pageInfo]=\"pageInfo\"\n                    [columns]=\"columnsDefinition\"\n                    [listAction]=\"listAction\"\n                    [isPending]=\"isPending\"\n    ></app-base-table>\n\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EditableBaseTableComponent, selector: "app-editable-base-table", inputs: ["filterRequest", "superDataElements", "pageInfo", "enforceRefresh", "isPending", "isBulkItemsSupported", "fields", "searchFormFields", "translationKey", "actionRequestCallback"], outputs: ["formUpdated", "saveActionEmitter", "saveAttachmentEmitter"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SharedListComponent, isStandalone: true, selector: "app-shared-list", ngImport: i0, template: "<ng-container *ngIf=\"readyToLoad\">\n  @if (editableTable) {\n    <app-editable-base-table [filterRequest]=\"filterRequest\" [pageInfo]=\"pageInfo\"\n                    [fields]=\"fields\"\n                    [isPending]=\"isPending\"\n    ></app-editable-base-table>\n\n  } @else {\n\n    <app-base-table [filters]=\"filters\" [pageInfo]=\"pageInfo\"\n                    [columns]=\"columnsDefinition\"\n                    [listAction]=\"listAction\"\n                    [isPending]=\"isPending\"\n    ></app-base-table>\n\n  }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "filtersApplied", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EditableBaseTableComponent, selector: "app-editable-base-table", inputs: ["filterRequest", "superDataElements", "pageInfo", "enforceRefresh", "isPending", "isBulkItemsSupported", "fields", "searchFormFields", "translationKey", "actionRequestCallback"], outputs: ["formUpdated", "saveActionEmitter", "saveAttachmentEmitter"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SharedListComponent, decorators: [{
             type: Component,
@@ -5422,7 +5496,7 @@ class ReportDetailsDialogComponent {
         return `${mainLine}${directorateLine}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportDetailsDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.TranslateService }, { token: BackendService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportDetailsDialogComponent, isStandalone: true, selector: "app-audit-log-details-dialog", host: { listeners: { "window:keyup.esc": "onKeyUp()", "document:click": "onBackdropClick($event)" } }, ngImport: i0, template: "<mat-dialog-content style=\"max-height: 70vh; overflow: auto; position: relative;\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"close-button\"\n    (click)=\"cancel()\"\n    [attr.dir]=\"dialogDirection\"\n    id=\"report-details-close-btn\"\n    [attr.aria-label]=\"'BASE_TABLE.closeDialog' | translate\">\n    <mat-icon aria-hidden=\"true\">close</mat-icon>\n  </button>\n\n    <h1 mat-dialog-title [innerHTML]=\"getTitle()\"></h1>\n\n    <app-base-table\n            [pageInfo]=\"pageInfo\"\n            [columns]=\"columns\"\n            id=\"junior\"\n            [enforceRefresh]=\"true\"\n            [reportRequest]=\"reportRequest\">\n    </app-base-table>\n</mat-dialog-content>\n\n", styles: ["::ng-deep .mat-dialog-actions{justify-content:flex-end!important}.close-button{position:absolute;right:8px;top:8px;z-index:10;background-color:#fff;border-radius:50%}:host-context([dir=\"rtl\"]) .close-button{right:auto;left:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "showDialog", "clickRoutePage"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportDetailsDialogComponent, isStandalone: true, selector: "app-audit-log-details-dialog", host: { listeners: { "window:keyup.esc": "onKeyUp()", "document:click": "onBackdropClick($event)" } }, ngImport: i0, template: "<mat-dialog-content style=\"max-height: 70vh; overflow: auto; position: relative;\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"close-button\"\n    (click)=\"cancel()\"\n    [attr.dir]=\"dialogDirection\"\n    id=\"report-details-close-btn\"\n    [attr.aria-label]=\"'BASE_TABLE.closeDialog' | translate\">\n    <mat-icon aria-hidden=\"true\">close</mat-icon>\n  </button>\n\n    <h1 mat-dialog-title [innerHTML]=\"getTitle()\"></h1>\n\n    <app-base-table\n            [pageInfo]=\"pageInfo\"\n            [columns]=\"columns\"\n            id=\"junior\"\n            [enforceRefresh]=\"true\"\n            [reportRequest]=\"reportRequest\">\n    </app-base-table>\n</mat-dialog-content>\n\n", styles: ["::ng-deep .mat-dialog-actions{justify-content:flex-end!important}.close-button{position:absolute;right:8px;top:8px;z-index:10;background-color:#fff;border-radius:50%}:host-context([dir=\"rtl\"]) .close-button{right:auto;left:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "filtersApplied", "showDialog", "clickRoutePage"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportDetailsDialogComponent, decorators: [{
             type: Component,
@@ -5868,7 +5942,7 @@ class ReportFormComponent {
         return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, deps: [{ token: i2.TranslateService }, { token: BackendService }, { token: i3$3.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i3$1.Directionality }, { token: i1.MatDialog }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"column full-width\">\n\n  <div class=\"row align-start-center\" style=\"margin-bottom: 10px;\">\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\n\n    <mat-icon\n      *ngIf=\"pageInfo?.hasHint\"\n      role=\"img\"\n      [attr.aria-label]=\"(pageInfo.labelsSection + '.hint') | translate\"\n      [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\n      matTooltipPosition=\"right\"\n      color=\"primary\"\n      class=\"hint-icon\"\n      matTooltipClass=\"custom-tooltip\">\n      help_outline\n    </mat-icon>\n  </div>\n\n  <app-base-form-canvas\n    [pageInfo]=\"pageInfo\"\n    [fields]=\"fields\"\n    [editable]=\"isEditable\"\n    [errors]=\"errors\"\n    [item]=\"this.reportForm?.value || {}\"\n    (formUpdated)=\"updateForm($event)\"\n  ></app-base-form-canvas>\n\n  <br><br>\n\n  <div class=\"column\">\n    <div class=\"row gap-10 responsive-row\">\n      <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\" [disabled]=\"!isValidForm()\" id=\"report-generate-btn\">\n        {{ 'REPORTS.generate' | translate }}\n      </button>\n\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\" color=\"primary\" id=\"report-extract-trigger\">\n        {{ 'extract' | translate }}\n        <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\n      </button>\n\n      <button mat-flat-button (click)=\"clear()\" [disabled]=\"isFormEmpty() || activeLevel > 1\" id=\"report-clear-btn\">\n        {{ 'REPORTS.clear' | translate }}\n      </button>\n\n      <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button (click)=\"drillDown()\" id=\"report-drilldown-btn\">\n        {{ drillDownLabel() | translate }}\n      </button>\n\n      <button *ngIf=\"activeLevel > 1 && backButtonEnabled\" color=\"warn\" mat-flat-button (click)=\"goUp()\" id=\"report-up-btn\">\n        {{ 'REPORTS.up' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"activeLevel >= 1\" class=\"main-form-canvas row align-start-start responsive-table\" style=\"margin-top: 3vh;\">\n    <div class=\"column full-width\">\n      <app-base-table\n        *ngIf=\"activeLevel === 1\"\n        [pageInfo]=\"pageInfo\"\n        [columns]=\"columnsDefinition\"\n        [enforceRefresh]=\"reloadData\"\n        id=\"parent\"\n        [reportRequest]=\"reportRequest\"\n        (userAction)=\"emitUserAction($event)\"\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n      </app-base-table>\n\n      <app-base-table\n        *ngIf=\"activeLevel === 2\"\n        [pageInfo]=\"drillDownPageInfo\"\n        [columns]=\"drillDownColumns\"\n        id=\"child\"\n        [reportRequest]=\"childReportRequest\"\n        (userAction)=\"emitJuniorAction($event)\"\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n      </app-base-table>\n\n      <app-base-table\n        *ngIf=\"activeLevel === 3\"\n        [pageInfo]=\"juniorPageInfo\"\n        [columns]=\"juniorColumns\"\n        id=\"junior\"\n        [reportRequest]=\"juniorReportRequest\">\n      </app-base-table>\n    </div>\n  </div>\n\n</div>\n\n<mat-menu #menu=\"matMenu\">\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'report-extract-item-' + type\">\n    {{ type }}\n  </button>\n</mat-menu>\n", styles: [".column{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-start-start{align-items:flex-start;justify-content:flex-start}.gap-10>*+*{margin-left:10px}.full-width{width:100%}.hint-icon{cursor:pointer;margin-left:10px}.responsive-row{flex-wrap:wrap}@media (max-width: 960px){.responsive-row{flex-direction:column;align-items:flex-start}}@media (max-width: 600px){.responsive-table{justify-content:center}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "attachmentsAlwaysEditable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { 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: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"column full-width\">\n\n  <div class=\"row align-start-center\" style=\"margin-bottom: 10px;\">\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\n\n    <mat-icon\n      *ngIf=\"pageInfo?.hasHint\"\n      role=\"img\"\n      [attr.aria-label]=\"(pageInfo.labelsSection + '.hint') | translate\"\n      [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\n      matTooltipPosition=\"right\"\n      color=\"primary\"\n      class=\"hint-icon\"\n      matTooltipClass=\"custom-tooltip\">\n      help_outline\n    </mat-icon>\n  </div>\n\n  <app-base-form-canvas\n    [pageInfo]=\"pageInfo\"\n    [fields]=\"fields\"\n    [editable]=\"isEditable\"\n    [errors]=\"errors\"\n    [item]=\"this.reportForm?.value || {}\"\n    (formUpdated)=\"updateForm($event)\"\n  ></app-base-form-canvas>\n\n  <br><br>\n\n  <div class=\"column\">\n    <div class=\"row gap-10 responsive-row\">\n      <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\" [disabled]=\"!isValidForm()\" id=\"report-generate-btn\">\n        {{ 'REPORTS.generate' | translate }}\n      </button>\n\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\" color=\"primary\" id=\"report-extract-trigger\">\n        {{ 'extract' | translate }}\n        <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\n      </button>\n\n      <button mat-flat-button (click)=\"clear()\" [disabled]=\"isFormEmpty() || activeLevel > 1\" id=\"report-clear-btn\">\n        {{ 'REPORTS.clear' | translate }}\n      </button>\n\n      <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button (click)=\"drillDown()\" id=\"report-drilldown-btn\">\n        {{ drillDownLabel() | translate }}\n      </button>\n\n      <button *ngIf=\"activeLevel > 1 && backButtonEnabled\" color=\"warn\" mat-flat-button (click)=\"goUp()\" id=\"report-up-btn\">\n        {{ 'REPORTS.up' | translate }}\n      </button>\n    </div>\n  </div>\n\n  <div *ngIf=\"activeLevel >= 1\" class=\"main-form-canvas row align-start-start responsive-table\" style=\"margin-top: 3vh;\">\n    <div class=\"column full-width\">\n      <app-base-table\n        *ngIf=\"activeLevel === 1\"\n        [pageInfo]=\"pageInfo\"\n        [columns]=\"columnsDefinition\"\n        [enforceRefresh]=\"reloadData\"\n        id=\"parent\"\n        [reportRequest]=\"reportRequest\"\n        (userAction)=\"emitUserAction($event)\"\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n      </app-base-table>\n\n      <app-base-table\n        *ngIf=\"activeLevel === 2\"\n        [pageInfo]=\"drillDownPageInfo\"\n        [columns]=\"drillDownColumns\"\n        id=\"child\"\n        [reportRequest]=\"childReportRequest\"\n        (userAction)=\"emitJuniorAction($event)\"\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n      </app-base-table>\n\n      <app-base-table\n        *ngIf=\"activeLevel === 3\"\n        [pageInfo]=\"juniorPageInfo\"\n        [columns]=\"juniorColumns\"\n        id=\"junior\"\n        [reportRequest]=\"juniorReportRequest\">\n      </app-base-table>\n    </div>\n  </div>\n\n</div>\n\n<mat-menu #menu=\"matMenu\">\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'report-extract-item-' + type\">\n    {{ type }}\n  </button>\n</mat-menu>\n", styles: [".column{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-start-start{align-items:flex-start;justify-content:flex-start}.gap-10>*+*{margin-left:10px}.full-width{width:100%}.hint-icon{cursor:pointer;margin-left:10px}.responsive-row{flex-wrap:wrap}@media (max-width: 960px){.responsive-row{flex-direction:column;align-items:flex-start}}@media (max-width: 600px){.responsive-table{justify-content:center}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "attachmentsAlwaysEditable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { 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: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "filtersApplied", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, decorators: [{
             type: Component,
@@ -6328,7 +6402,7 @@ class ActivityReportFormComponent {
         return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, deps: [{ token: i2.TranslateService }, { token: BackendService }, { token: i3$3.ActivatedRoute }, { token: i0.Injector }, { token: i3$3.Router }, { token: i3$3.ActivatedRoute }, { token: i1.MatDialog }, { token: i3$1.Directionality }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"page-container\">\n\n  <div class=\"row row-center-start mb-10px full-width\">\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\n    <mat-icon *ngIf=\"pageInfo?.hasHint\"\n              [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\n              matTooltipPosition=\"right\"\n              color=\"primary\"\n              class=\"help-icon\"\n              matTooltipClass=\"custom-tooltip\">\n      help_outline\n    </mat-icon>\n  </div>\n\n  <app-base-form-canvas\n    [pageInfo]=\"pageInfo\"\n    [fields]=\"fields\"\n    [editable]=\"isEditable\"\n    [errors]=\"errors\"\n    [item]=\"reportForm?.value || {}\"\n    (formUpdated)=\"updateForm($event)\">\n  </app-base-form-canvas>\n\n  <div class=\"row main-form-canvas mt-3vh\">\n    <div class=\"column flex-49\">\n      <div class=\"row row-center-start\">\n        <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\"\n                [disabled]=\"!isValidForm()\" class=\"action-button\" id=\"activity-generate-btn\">\n          {{ 'REPORTS.generate' | translate }}\n        </button>\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\"\n                color=\"primary\" class=\"btn-none-background-primary action-button\" id=\"activity-extract-trigger\">\n          {{ 'extract' | translate }}\n          <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\n        </button>\n        <button mat-flat-button (click)=\"clear()\"\n                [disabled]=\"isFormEmpty() || activeLevel > 1\"\n                class=\"action-button\" id=\"activity-clear-btn\">\n          {{ 'REPORTS.clear' | translate }}\n        </button>\n        <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button\n                (click)=\"drillDown()\" class=\"action-button\" id=\"activity-drilldown-btn\">\n          {{ drillDownLabel() | translate }}\n        </button>\n        <button *ngIf=\"activeLevel > 1 && !(isComparisonReport && activeLevel == 2)\" color=\"warn\"\n                mat-flat-button (click)=\"goUp()\" class=\"action-button\" id=\"activity-up-btn\">\n          {{ 'REPORTS.up' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"column flex-49\"></div>\n  </div>\n\n  <!-- Base tables -->\n  <ng-container *ngIf=\"activeLevel === 1\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"pageInfo\" [columns]=\"columnsDefinition\" [enforceRefresh]=\"reloadData\"\n                        id=\"parent\" [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"activeLevel === 2\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"child\"\n                        [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"activeLevel === 3\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"junior\"\n                        [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"activeLevel === 4\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\"\n                        [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n</div>\n\n<!-- Menu -->\n<mat-menu #menu=\"matMenu\">\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'activity-extract-item-' + type\">\n    {{ type }}\n  </button>\n</mat-menu>\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;width:100%}.column{display:flex;flex-direction:column}.flex-49{flex:0 0 49%}.flex-100{flex:0 0 100%}.row-center-start{align-items:center;justify-content:flex-start}.mt-3vh{margin-top:3vh}.mb-10px{margin-bottom:10px}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}.help-icon{cursor:pointer;margin-left:10px}@media (max-width: 960px){.flex-49,.flex-100{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}.help-icon{margin-left:0;margin-top:5px}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "attachmentsAlwaysEditable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { 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: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"page-container\">\n\n  <div class=\"row row-center-start mb-10px full-width\">\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\n    <mat-icon *ngIf=\"pageInfo?.hasHint\"\n              [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\n              matTooltipPosition=\"right\"\n              color=\"primary\"\n              class=\"help-icon\"\n              matTooltipClass=\"custom-tooltip\">\n      help_outline\n    </mat-icon>\n  </div>\n\n  <app-base-form-canvas\n    [pageInfo]=\"pageInfo\"\n    [fields]=\"fields\"\n    [editable]=\"isEditable\"\n    [errors]=\"errors\"\n    [item]=\"reportForm?.value || {}\"\n    (formUpdated)=\"updateForm($event)\">\n  </app-base-form-canvas>\n\n  <div class=\"row main-form-canvas mt-3vh\">\n    <div class=\"column flex-49\">\n      <div class=\"row row-center-start\">\n        <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\"\n                [disabled]=\"!isValidForm()\" class=\"action-button\" id=\"activity-generate-btn\">\n          {{ 'REPORTS.generate' | translate }}\n        </button>\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\"\n                color=\"primary\" class=\"btn-none-background-primary action-button\" id=\"activity-extract-trigger\">\n          {{ 'extract' | translate }}\n          <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\n        </button>\n        <button mat-flat-button (click)=\"clear()\"\n                [disabled]=\"isFormEmpty() || activeLevel > 1\"\n                class=\"action-button\" id=\"activity-clear-btn\">\n          {{ 'REPORTS.clear' | translate }}\n        </button>\n        <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button\n                (click)=\"drillDown()\" class=\"action-button\" id=\"activity-drilldown-btn\">\n          {{ drillDownLabel() | translate }}\n        </button>\n        <button *ngIf=\"activeLevel > 1 && !(isComparisonReport && activeLevel == 2)\" color=\"warn\"\n                mat-flat-button (click)=\"goUp()\" class=\"action-button\" id=\"activity-up-btn\">\n          {{ 'REPORTS.up' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"column flex-49\"></div>\n  </div>\n\n  <!-- Base tables -->\n  <ng-container *ngIf=\"activeLevel === 1\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"pageInfo\" [columns]=\"columnsDefinition\" [enforceRefresh]=\"reloadData\"\n                        id=\"parent\" [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"activeLevel === 2\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"child\"\n                        [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"activeLevel === 3\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"junior\"\n                        [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"activeLevel === 4\">\n    <div class=\"row main-form-canvas mt-3vh\">\n      <div class=\"column flex-100\">\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\"\n                        [reportRequest]=\"reportRequest\"\n                        (userAction)=\"emitUserAction($event)\"\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\n        </app-base-table>\n      </div>\n    </div>\n  </ng-container>\n\n</div>\n\n<!-- Menu -->\n<mat-menu #menu=\"matMenu\">\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'activity-extract-item-' + type\">\n    {{ type }}\n  </button>\n</mat-menu>\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;width:100%}.column{display:flex;flex-direction:column}.flex-49{flex:0 0 49%}.flex-100{flex:0 0 100%}.row-center-start{align-items:center;justify-content:flex-start}.mt-3vh{margin-top:3vh}.mb-10px{margin-bottom:10px}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}.help-icon{cursor:pointer;margin-left:10px}@media (max-width: 960px){.flex-49,.flex-100{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}.help-icon{margin-left:0;margin-top:5px}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "attachmentsAlwaysEditable", "emitOnValueChanges", "filterResetNonce", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { 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: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundSvgPath", "noDataFoundTitle", "noDataFoundSubtitle", "noResultSvgPath", "noResultTitle", "noResultSubtitle", "pageInfo", "enablePagination", "mobilePageSize", "mobileLoadMoreIncrement", "data", "listAction", "extraActions", "buttonsDisplayMode", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["buttonClicked", "pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "pendingViewModeChanged", "filtersApplied", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, decorators: [{
             type: Component,