@unifylib/ui-lib 1.1.10 → 1.1.12

package/fesm2022/unifylib-ui-lib.mjs

@@ -1908,8 +1908,8 @@ class BaseFormCanvasComponent {
         return this.friendlyName(field.label, field.property, defaults[field.property]);
     }
     showError(prop) {
-        return (this.formParam?.get(prop)?.value || this.formParam?.get(prop)?.value == 0)
-            && this.formParam.get(prop).status === 'INVALID';
+        const CONTROL = this.formParam?.get(prop);
+        return (CONTROL?.value || CONTROL?.value === 0) && CONTROL?.status === 'INVALID';
     }
     ngOnDestroy() {
         this.defaults = null;
@@ -2268,6 +2268,24 @@ class FilterBuilderComponent {
             clearTimeout(this.searchTimeout);
             this.searchTimeout = null;
         }
+        if (this.autoApplyTimeout) {
+            clearTimeout(this.autoApplyTimeout);
+            this.autoApplyTimeout = null;
+        }
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+            const target = event.target;
+            const isInputElement = target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.tagName === 'SELECT' ||
+                target.isContentEditable;
+            if (isInputElement) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            this.onApplyFilter();
+        }
     }
     doSearch() {
         const filtersArray = (this.filters || [])
@@ -2276,11 +2294,21 @@ class FilterBuilderComponent {
         this.filterInformation.emit(filtersArray);
     }
     onApplyFilter() {
+        if (this.autoApplyTimeout) {
+            clearTimeout(this.autoApplyTimeout);
+            this.autoApplyTimeout = null;
+        }
         this.applyFilter.emit();
     }
-    hasPendingFilters() {
-        return this.pendingFilters && this.pendingFilters.length > 0 &&
-            this.pendingFilters.some(f => f && f.fieldName && f.valueObject !== undefined && f.valueObject !== null && f.valueObject !== '');
+    scheduleAutoApply() {
+        if (this.autoApplyTimeout) {
+            clearTimeout(this.autoApplyTimeout);
+            this.autoApplyTimeout = null;
+        }
+        this.autoApplyTimeout = setTimeout(() => {
+            this.onApplyFilter();
+            this.autoApplyTimeout = null;
+        }, 10000);
     }
     scheduleSearch(delayMs = 800) {
         if (this.searchTimeout) {
@@ -2291,6 +2319,10 @@ class FilterBuilderComponent {
         }, delayMs);
     }
     formChanges($event, index, fieldInfo) {
+        if (this.autoApplyTimeout) {
+            clearTimeout(this.autoApplyTimeout);
+            this.autoApplyTimeout = null;
+        }
         if (index === undefined || !fieldInfo) {
             if (!this.filterFields || !this.filterFields.length) {
                 this.filters = [];
@@ -2319,6 +2351,7 @@ class FilterBuilderComponent {
             else {
                 this.doSearch();
             }
+            this.scheduleAutoApply();
             return;
         }
         if (!this.filters) {
@@ -2352,6 +2385,7 @@ class FilterBuilderComponent {
         else {
             this.doSearch();
         }
+        this.scheduleAutoApply();
     }
     typeMap(colType) {
         const t = (colType || '').toLowerCase();
@@ -2388,7 +2422,7 @@ class FilterBuilderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterBuilderComponent, isStandalone: true, selector: "app-filter-builder", inputs: { columns: "columns", isChecked: "isChecked", filterFields: "filterFields", pageInfo: "pageInfo", pendingFilters: "pendingFilters" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter" }, ngImport: i0, template: "<div class=\"main-filter-builder\">\r\n\r\n  <div class=\"filterForm\">\r\n    <div class=\"filterForm__row\">\r\n      <div class=\"filterForm__col\">\r\n        <app-field-filter\r\n          [editable]=\"isEditable()\"\r\n          [filter]=\"filter\"\r\n          [pageInfo]=\"pageInfo\"\r\n          *ngIf=\"isEditable()\"\r\n          [filterFields]=\"filterFields\"\r\n          (filterFieldInformation)=\"formChanges($event)\"\r\n          class=\"filterForm__filed-filter\"\r\n        >\r\n        </app-field-filter>\r\n      </div>\r\n      <div class=\"button-group\">\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-apply-filter\"\r\n          [disabled]=\"!hasPendingFilters()\"\r\n          (click)=\"onApplyFilter()\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>filter_list</mat-icon>\r\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"line-bottom\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"action\">-->\r\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!--    </button>-->\r\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\r\n<!--    </button>-->\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:120px!important;max-width:120px!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.5!important;cursor:not-allowed!important;background:#f5f5f5!important;border-color:#d1d1d1!important}.main-filter-builder .btn-apply-filter:disabled mat-icon{color:#9e9e9e!important}.main-filter-builder .btn-apply-filter:disabled span{color:#9e9e9e!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldFilterComponent, selector: "app-field-filter", inputs: ["filter", "pageInfo", "filterFields", "item", "editable"], outputs: ["selectedValue", "filterFieldInformation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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"] }] }); }
+    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" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty", applyFilter: "applyFilter" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"main-filter-builder\">\r\n\r\n  <div class=\"filterForm\">\r\n    <div class=\"filterForm__row\">\r\n      <div class=\"filterForm__col\">\r\n        <app-field-filter\r\n          [editable]=\"isEditable()\"\r\n          [filter]=\"filter\"\r\n          [pageInfo]=\"pageInfo\"\r\n          *ngIf=\"isEditable()\"\r\n          [filterFields]=\"filterFields\"\r\n          (filterFieldInformation)=\"formChanges($event)\"\r\n          class=\"filterForm__filed-filter\"\r\n        >\r\n        </app-field-filter>\r\n      </div>\r\n      <div class=\"button-group\">\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-apply-filter\"\r\n          (click)=\"onApplyFilter()\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>filter_list</mat-icon>\r\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"line-bottom\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"action\">-->\r\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!--    </button>-->\r\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\r\n<!--    </button>-->\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:120px!important;max-width:120px!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldFilterComponent, selector: "app-field-filter", inputs: ["filter", "pageInfo", "filterFields", "item", "editable"], outputs: ["selectedValue", "filterFieldInformation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
             type: Component,
@@ -2398,7 +2432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TranslateModule,
                         MatButtonModule,
                         MatIcon
-                    ], template: "<div class=\"main-filter-builder\">\r\n\r\n  <div class=\"filterForm\">\r\n    <div class=\"filterForm__row\">\r\n      <div class=\"filterForm__col\">\r\n        <app-field-filter\r\n          [editable]=\"isEditable()\"\r\n          [filter]=\"filter\"\r\n          [pageInfo]=\"pageInfo\"\r\n          *ngIf=\"isEditable()\"\r\n          [filterFields]=\"filterFields\"\r\n          (filterFieldInformation)=\"formChanges($event)\"\r\n          class=\"filterForm__filed-filter\"\r\n        >\r\n        </app-field-filter>\r\n      </div>\r\n      <div class=\"button-group\">\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-apply-filter\"\r\n          [disabled]=\"!hasPendingFilters()\"\r\n          (click)=\"onApplyFilter()\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>filter_list</mat-icon>\r\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"line-bottom\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"action\">-->\r\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!--    </button>-->\r\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\r\n<!--    </button>-->\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:120px!important;max-width:120px!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover:not(:disabled){background:#fafafa!important}.main-filter-builder .btn-apply-filter:disabled{opacity:.5!important;cursor:not-allowed!important;background:#f5f5f5!important;border-color:#d1d1d1!important}.main-filter-builder .btn-apply-filter:disabled mat-icon{color:#9e9e9e!important}.main-filter-builder .btn-apply-filter:disabled span{color:#9e9e9e!important}\n"] }]
+                    ], template: "<div class=\"main-filter-builder\">\r\n\r\n  <div class=\"filterForm\">\r\n    <div class=\"filterForm__row\">\r\n      <div class=\"filterForm__col\">\r\n        <app-field-filter\r\n          [editable]=\"isEditable()\"\r\n          [filter]=\"filter\"\r\n          [pageInfo]=\"pageInfo\"\r\n          *ngIf=\"isEditable()\"\r\n          [filterFields]=\"filterFields\"\r\n          (filterFieldInformation)=\"formChanges($event)\"\r\n          class=\"filterForm__filed-filter\"\r\n        >\r\n        </app-field-filter>\r\n      </div>\r\n      <div class=\"button-group\">\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-apply-filter\"\r\n          (click)=\"onApplyFilter()\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>filter_list</mat-icon>\r\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"line-bottom\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"action\">-->\r\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!--    </button>-->\r\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\r\n<!--    </button>-->\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px;margin-bottom:7px}.main-filter-builder .filterForm{display:flex;width:100%;max-width:100%;box-sizing:border-box;align-items:center}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:nowrap;width:100%;max-width:100%;box-sizing:border-box;min-width:0}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0;max-width:none;width:auto}.main-filter-builder .filterForm__filed-filter{margin:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .main-form-canvas{display:flex!important;flex-direction:row!important;align-items:center!important;margin-top:0!important;width:100%!important;flex-wrap:nowrap!important;gap:16px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-wrapper{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1 1 auto!important;width:100%!important;min-width:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-content{width:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-row{display:flex!important;gap:16px;align-items:center;flex-wrap:nowrap;width:100%!important}.main-filter-builder .filterForm__filed-filter ::ng-deep .form-column{flex:0 0 auto;width:100%}.main-filter-builder .filterForm__filed-filter ::ng-deep .row-container{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep .field-column{flex:0 0 auto;width:auto}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field{width:auto!important;margin:0!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-infix{min-height:44px!important;padding:0 16px!important;display:flex!important;align-items:center!important;border-top:none!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-input-control{height:44px!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#000!important;overflow:visible!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-outline{border:1px solid #b7b7b7!important;border-radius:8px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix{padding-right:4px!important;display:flex!important;align-items:center!important;justify-content:center!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:10px!important;height:28px!important;color:#0d4261!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix{padding-left:4px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-icon-suffix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important;margin-top:6px}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field input::placeholder{color:#888!important;font-weight:300!important;font-size:16px!important;line-height:1.2!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-select{font-weight:300!important;font-size:16px!important;line-height:1.2!important;color:#888!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button{width:24px!important;height:24px!important;padding:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-datepicker-toggle .mat-icon-button mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0!important;min-height:0!important;margin:0!important;padding:0!important}.main-filter-builder .filterForm .action-filter{flex:0 0 auto}.main-filter-builder .filterForm .action-filter .edit-design{margin:auto}.main-filter-builder .filterForm .action-filter .edit-design__add-button{background:#fff!important;color:var(--primary-color)!important;height:48px;width:48px;border-radius:5px;border:#D9D9D9 solid 1px;margin:30px 0 0}.main-filter-builder .filterForm .action-filter .edit-design__add-button__add-button-text{margin:0 5px}.main-filter-builder .line-top mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .advanced-button{display:flex;flex-wrap:wrap;gap:8px}.main-filter-builder .advanced-button .view{background:#e3fbff!important;border:1px solid #00ABC8!important;border-radius:6px!important;margin:10px 0;padding:6px 8px;height:32px;margin-top:0!important;display:flex;align-items:center;gap:6px}.main-filter-builder .advanced-button .view__filed{margin-top:-3px;display:inline-block;color:#1c355e;font-weight:400;font-size:14px;line-height:16px;font-style:normal;text-align:center!important}.main-filter-builder .advanced-button .view__close{margin-left:6px}.main-filter-builder .advanced-button .view__close__icon{color:#1c355e;font-size:14px;cursor:pointer;display:inline-block}.main-filter-builder .line-bottom mat-divider{width:98%;margin:0 auto 10px}.main-filter-builder .action{justify-content:end;padding:5px 10px 10px}.main-filter-builder .action__clear{border:none!important;margin:0 5px}@media (max-width: 599.98px){.main-filter-builder .filterForm__row{flex-wrap:wrap}.main-filter-builder .filterForm .action-filter .edit-design__add-button{width:100%;height:45px;margin:5px 5px 10px}}@media (min-width: 600px){.main-filter-builder .add-text-responsive{display:none}}.main-filter-builder .button-group{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end;gap:8px!important;flex-shrink:0!important;flex-grow:0!important;flex-basis:auto!important;height:46px!important;white-space:nowrap!important;min-width:120px!important;max-width:120px!important}.main-filter-builder .btn-apply-filter{background:#fff!important;border:1px solid #3e627b!important;border-radius:8px!important;height:46px!important;min-width:120px!important;padding:0 16px!important;box-shadow:none!important}.main-filter-builder .btn-apply-filter .button-text{display:flex;align-items:center;justify-content:center;gap:4px;width:100%}.main-filter-builder .btn-apply-filter mat-icon{font-size:24px;width:24px;height:30px;color:#0d4261}.main-filter-builder .btn-apply-filter span{font-family:Lusail,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#0d4261;white-space:nowrap}.main-filter-builder .btn-apply-filter:hover{background:#fafafa!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{
                 type: Input
             }], isChecked: [{
@@ -2415,6 +2449,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], applyFilter: [{
                 type: Output
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }] } });
 
 class BaseTableComponent extends BaseUtils {
@@ -2833,7 +2870,7 @@ class BaseTableComponent extends BaseUtils {
         }
     }
     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: 'securityManager' }, { token: i2$2.Router }], 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", noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", data: "data", listAction: "listAction", 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: { pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div class=\"table-container\">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </mat-label>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'yyyy-MM-dd' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon>info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    <span class=\"mainTable__td__property\">{{ extractFieldName(row, columnProp) | currency:row[getColumn(columnProp)?.currency] :'' }}</span>\r\n                    {{ extractFieldName(row, getColumn(columnProp)?.additionalProperty) | currency:row[getColumn(columnProp)?.currency] :'' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span (click)=\"emitRoutePage(row)\">\r\n                        {{ extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n        <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.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:100%;text-align:center;margin-top:80px}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:40px;height:40px;width:40px;margin-bottom:8px}.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}.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{background:#fafafa!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{width:100%;justify-content:flex-start}.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;cursor:pointer;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}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;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}\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"], outputs: ["clickedButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }, { 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"], outputs: ["filterInformation", "isEmpty", "applyFilter"] }, { 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", noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", data: "data", listAction: "listAction", 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: { pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div class=\"table-container\">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </mat-label>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'yyyy-MM-dd' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon>info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span (click)=\"emitRoutePage(row)\">\r\n                        {{ extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n        <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.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:100%;text-align:center;margin-top:80px}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:40px;height:40px;width:40px;margin-bottom:8px}.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}.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{background:#fafafa!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{width:100%;justify-content:flex-start}.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;cursor:pointer;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}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;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}\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"], outputs: ["clickedButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }, { 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"], outputs: ["filterInformation", "isEmpty", "applyFilter"] }, { 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,
@@ -2881,7 +2918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenu,
                         MatMenuItem,
                         UpperCasePipe,
-                    ], template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div class=\"table-container\">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </mat-label>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'yyyy-MM-dd' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon>info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    <span class=\"mainTable__td__property\">{{ extractFieldName(row, columnProp) | currency:row[getColumn(columnProp)?.currency] :'' }}</span>\r\n                    {{ extractFieldName(row, getColumn(columnProp)?.additionalProperty) | currency:row[getColumn(columnProp)?.currency] :'' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span (click)=\"emitRoutePage(row)\">\r\n                        {{ extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n        <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.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:100%;text-align:center;margin-top:80px}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:40px;height:40px;width:40px;margin-bottom:8px}.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}.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{background:#fafafa!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{width:100%;justify-content:flex-start}.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;cursor:pointer;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}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;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}\n"] }]
+                    ], template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button mat-menu-item (click)=\"extractReport('pdf')\">PDF</button>\r\n        <button mat-menu-item (click)=\"extractReport('xlsx')\">Excel</button>\r\n        <button mat-menu-item (click)=\"extractReport('csv')\">CSV</button>\r\n      </mat-menu>\r\n\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"flex-row flex-100 baseTable__detailsColumn\">\r\n    <div class=\"flex-100\">\r\n      <div class=\"flex-row flex-100 mainTable\">\r\n        <div class=\"table-container\">\r\n          <div class=\"table-header\" [attr.data-sort]=\"sortState\">\r\n            <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                 class=\"table-header-cell\"\r\n                 [class.sortable]=\"getColumn(columnProp)?.enableSorting\"\r\n                 [class.first-cell]=\"i === 0\"\r\n                 [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                 [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                 [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                 [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\"\r\n                 (click)=\"getColumn(columnProp)?.enableSorting && handleSortClick(columnProp)\">\r\n              <div class=\"table-header-content\">\r\n                <span class=\"table-header-label\">{{ labelKey(getColumn(columnProp)) | translate }}</span>\r\n                <ng-container *ngIf=\"getColumn(columnProp)?.enableSorting\">\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'asc'\"\r\n                           class=\"sort-icon sort-asc\">arrow_drop_up</mat-icon>\r\n                  <mat-icon *ngIf=\"getSortDirection(columnProp) === 'desc'\"\r\n                           class=\"sort-icon sort-desc\">arrow_drop_down</mat-icon>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"table-body\">\r\n            <div *ngFor=\"let row of dataSource.data; let rowIndex = index\"\r\n                 class=\"table-row\"\r\n                 [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n                 [ngClass]=\"{\r\n                   'table-row--highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                   'table-row--dark-highlight': isDarkHighlight(row)\r\n                 }\"\r\n                 (auxclick)=\"openNewTab(row)\"\r\n                 (click)=\"$event.stopPropagation(); onSelectItem(row)\">\r\n              <div *ngFor=\"let columnProp of visibleColumnsArray; let i = index\"\r\n                   class=\"table-cell\"\r\n                   [class.first-cell]=\"i === 0\"\r\n                   [class.last-cell]=\"i === visibleColumnsArray.length - 1\"\r\n                   [class.actions-cell]=\"i === visibleColumnsArray.length - 1 && columnProp === 'actions'\"\r\n                   [class.has-width]=\"getColumn(columnProp)?.width\"\r\n                   [ngStyle]=\"getColumn(columnProp)?.width ? {'width': getColumn(columnProp)?.width + '%', 'flex-basis': getColumn(columnProp)?.width + '%'} : {}\">\r\n                <ng-container [ngSwitch]=\"getColumn(columnProp)?.type\">\r\n                  <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(row)}}\" [attr.id]=\"'table-btn-wf-'+columnProp+'-'+(row.id || row.key || '')\">{{ getStatusDescription(row) }}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                    <mat-label (click)=\"hyperLinkClicked(columnProp, row)\" [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(row)}\">\r\n                      {{ extractFieldName(row, columnProp) }}\r\n                    </mat-label>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'button'\">\r\n                    <button *ngIf=\"shouldShowButton(row)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(columnProp, row)\" [attr.id]=\"'table-btn-action-'+columnProp\">\r\n                      {{ labelKey(getColumn(columnProp)) + '_title' | translate }}\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'icon'\">\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': row[columnProp] === 'pass',\r\n                      'mainTable__td__icon-orange': row[columnProp] === 'warning',\r\n                      'mainTable__td__icon-red': row[columnProp] === 'error'\r\n                    }\">\r\n                      {{ getIcon(row[columnProp]) }}\r\n                    </mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                    <mat-checkbox class=\"primary\" [checked]=\"row[columnProp]\" (click)=\"$event.stopPropagation();actionCheckedClicked(columnProp,row)\"></mat-checkbox>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'stateType'\">\r\n                    <button mat-button class=\"stateType {{ row[columnProp]}}\" [attr.id]=\"'table-btn-state-'+columnProp\">{{ labelKeyByValue(getColumn(columnProp), row) | translate}}</button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'date'\">\r\n                    {{ extractFieldName(row, columnProp) | date:'yyyy-MM-dd' }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                    {{ getCroppedText(row[columnProp], row[getColumn(columnProp)?.width]) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'download'\">\r\n                    <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'onOff'\">\r\n                    <mat-icon *ngIf=\"row[columnProp] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"row[columnProp] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'status'\">\r\n                    <span *ngIf=\"row[columnProp] === null || row[columnProp] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"row[columnProp] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + getColumn(columnProp)?.label + 'Active' | translate }}\r\n                    </span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'info'\">\r\n                    <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(row)\" [attr.id]=\"'table-btn-info-'+row.id\">\r\n                      <mat-icon>info</mat-icon>\r\n                    </button>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                    <div class=\"mainTable__td__currency\" style=\"display:inline-block;\">{{ row[getColumn(columnProp)?.currency] }}</div>\r\n                    <span class=\"mainTable__td__property\" style=\"display:inline-block; margin-left:6px; margin-right:6px;\">\r\n                      {{ extractFieldName(row, columnProp) | currency:'':'' }}</span>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                    {{ extractFieldName(row, columnProp) | date : extractFormat(getColumn(columnProp)) }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                    <small><sup class=\"mainTable__td__currency\">{{row[getColumn(columnProp)?.currency]}}</sup></small>\r\n                    {{ extractFieldName(row, columnProp) | number : (getColumn(columnProp)?.digitInfo || '1.3-5') }}\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchCase=\"'listAction'\">\r\n                    <app-button-actions\r\n                      [buttonsAction]=\"getColumn(columnProp)?.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\"\r\n                      [actions]=\"listAction\"\r\n                      (clickedButton)=\"actionListClicked($event,row)\">\r\n                    </app-button-actions>\r\n                  </ng-container>\r\n\r\n                  <ng-container *ngSwitchDefault>\r\n                    <ng-container *ngIf=\"getColumn(columnProp)?.translate; else noTranslate\">\r\n                      <span (click)=\"emitRoutePage(row)\">\r\n                        {{ extractFieldName(row, columnProp) | translate }}\r\n                      </span>\r\n                    </ng-container>\r\n                    <ng-template #noTranslate>\r\n                      <span (click)=\"emitRoutePage(row)\" [innerHtml]='extractFieldName(row, columnProp)'></span>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"noDataFound\" class=\"dataNotFound flex-column\">\r\n        <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n        <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate}}</span>\r\n        <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate}}</span>\r\n      </div>\r\n\r\n\r\n      <div  *ngIf=\"(dataSource.data?.length > 0 || customizedData) && !pageInfo.hidePagination\" class=\"main-pagination flex-row\">\r\n        <ng-container *ngIf=\"enablePagination\">\r\n          <div class=\"flex-column flex-100\">\r\n            <app-paginator\r\n              [currentPage]=\"pageIndex\"\r\n              [totalItems]=\"totalElements\"\r\n              [pageSize]=\"pageSize\"\r\n              [pageSizeOptions]=\"[5, 10, 25, 50]\"\r\n              (pageChange)=\"onPageChange($event)\"\r\n              (pageSizeChange)=\"onPageSizeChange($event)\">\r\n            </app-paginator>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;max-width:100%;box-sizing:border-box}.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:100%;text-align:center;margin-top:80px}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:40px;height:40px;width:40px;margin-bottom:8px}.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}.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{background:#fafafa!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{width:100%;justify-content:flex-start}.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;cursor:pointer;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}.table-cell{display:flex;align-items:center;min-height:48px;max-height:48px;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}\n"] }]
         }], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['securityManager']
@@ -4052,7 +4089,7 @@ class SectionFormCanvasComponent {
         this.buttonClicked.emit({ ...btn, sectionKey: sectionKey });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", isTranslateTitle: "isTranslateTitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n        {{ pageInfo.labelsSection + '.' + title | translate }}\r\n      </h3>\r\n      <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\">\r\n      <div class=\"row flex-auto buttons-wrapper\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header,.location-card .panel-body{padding:0 15px}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center}.location-card .card-header .card-title{margin:0;font-size:18px;font-weight:600;color:#222}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:inline-block;text-align-last:end;margin:0!important}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", isTranslateTitle: "isTranslateTitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n          {{ pageInfo.labelsSection + '.' + title | translate }}\r\n        </h3>\r\n        <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n        <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n          {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n        </button>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\">\r\n      <div class=\"row flex-auto buttons-wrapper\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          type=\"button\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:inline-block;text-align-last:end;margin:0!important}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
             type: Component,
@@ -4062,13 +4099,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BaseFormComponent,
                         BaseFormCanvasComponent,
                         NgIf,
+                        NgClass,
                         TranslateModule,
                         MatExpansionPanel,
                         MatExpansionPanelTitle,
                         MatExpansionPanelDescription,
                         MatExpansionPanelHeader,
                         NgForOf
-                    ], template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n        {{ pageInfo.labelsSection + '.' + title | translate }}\r\n      </h3>\r\n      <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\">\r\n      <div class=\"row flex-auto buttons-wrapper\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header,.location-card .panel-body{padding:0 15px}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center}.location-card .card-header .card-title{margin:0;font-size:18px;font-weight:600;color:#222}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:inline-block;text-align-last:end;margin:0!important}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}\n"] }]
+                    ], template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n          {{ pageInfo.labelsSection + '.' + title | translate }}\r\n        </h3>\r\n        <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n        <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n          {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n        </button>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\">\r\n      <div class=\"row flex-auto buttons-wrapper\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          type=\"button\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:inline-block;text-align-last:end;margin:0!important}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}\n"] }]
         }], propDecorators: { pageInfo: [{
                 type: Input
             }], fields: [{
@@ -4099,6 +4137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], buttons: [{
                 type: Input
+            }], itemStatus: [{
+                type: Input
             }], buttonClicked: [{
                 type: Output
             }] } });
@@ -5138,13 +5178,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class LineItem {
-    constructor(code, description, unitPrice, qty, discount, total) {
-        this.gtinCode = code;
+    constructor(itemType, itemLine, description, unitPrice, quantity, discount, totalAmount) {
+        this.itemType = itemType;
+        this.itemLine = itemLine;
         this.description = description;
         this.unitPrice = unitPrice;
-        this.qty = qty;
+        this.quantity = quantity;
         this.discount = discount;
-        this.total = total;
+        this.totalAmount = totalAmount;
     }
 }
 
@@ -5480,7 +5521,7 @@ class ItemLineEditorComponent {
             : `${this.pageInfo.labelsSection}.${configuredKey}`;
     }
     blankItem() {
-        return { gtinCode: '', description: '', unitPrice: 0, qty: 1, discount: 0, total: 0 };
+        return { itemLine: '', description: '', unitPrice: 0, quantity: 1, discount: 0, totalAmount: 0 };
     }
     ngOnChanges(changes) {
         if (changes['items'] && changes['items'].currentValue) {
@@ -5538,7 +5579,7 @@ class ItemLineEditorComponent {
                     return it;
                 const v = this.getCurrentValues(i) || it || {};
                 const up = Number(v?.unitPrice || 0);
-                const q = Number(v?.qty || 0);
+                const q = Number(v?.quantity || 0);
                 const disc = Number(v?.discount || 0);
                 const total = Math.max(0, up * q - disc);
                 return { ...it, ...v, total };
@@ -5601,21 +5642,21 @@ class ItemLineEditorComponent {
             return null;
         const val = { ...src };
         val.unitPrice = val.unitPrice === null || val.unitPrice === '' ? null : Number(val.unitPrice);
-        val.qty = val.qty === null || val.qty === '' ? null : Number(val.qty);
+        val.quantity = val.quantity === null || val.quantity === '' ? null : Number(val.quantity);
         val.discount = val.discount === null || val.discount === '' ? null : Number(val.discount);
         return val;
     }
     calcLineTotal(index) {
         const val = this.getCurrentValues(index);
         if (!val)
-            return Number(this.items[index]?.total || 0);
-        return Math.max(0, (val.unitPrice || 0) * (val.qty || 0) - (val.discount || 0));
+            return Number(this.items[index]?.totalAmount || 0);
+        return Math.max(0, (val.unitPrice || 0) * (val.quantity || 0) - (val.discount || 0));
     }
     get subtotal() {
         return this.items.reduce((s, _it, i) => {
             const v = this.getCurrentValues(i);
             const up = Number(v?.unitPrice || 0);
-            const q = Number(v?.qty || 0);
+            const q = Number(v?.quantity || 0);
             return s + (up * q);
         }, 0);
     }
@@ -5662,7 +5703,7 @@ class ItemLineEditorComponent {
             const val = this.getCurrentValues(index);
             if (!val)
                 return null;
-            const totalBeforeDiscount = (val.unitPrice ?? 0) * (val.qty ?? 0);
+            const totalBeforeDiscount = (val.unitPrice ?? 0) * (val.quantity ?? 0);
             const discount = val.discount ?? null;
             if (discount != null && discount > totalBeforeDiscount) {
                 return { discountTooHigh: true };