@unifylib/ui-lib 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +3 -3
  2. package/esm2022/lib/components/base-table/base-table.component.mjs +3 -3
  3. package/esm2022/lib/validators/date-range-validator.mjs +5 -5
  4. package/fesm2022/iq-ui-lib.mjs +9 -9
  5. package/fesm2022/iq-ui-lib.mjs.map +1 -1
  6. package/fesm2022/unifylib-ui-lib.mjs +9 -9
  7. package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
  8. package/package.json +1 -1
package/esm2022/lib/validators/date-range-validator.mjs CHANGED
@@ -4,12 +4,12 @@ export function DateRangeValidator(group) {
4
4
  let toDateControl = null;
5
5
  if (group.parent instanceof FormGroup && group.parent.parent instanceof FormArray) {
6
6
  const formGroup = group.parent;
7
- fromDateControl = formGroup.get('fromDate');
8
- toDateControl = formGroup.get('toDate');
7
+ fromDateControl = formGroup.get('from');
8
+ toDateControl = formGroup.get('to');
9
9
  }
10
10
  else {
11
- fromDateControl = group.root.get('fromDate');
12
- toDateControl = group.root.get('toDate');
11
+ fromDateControl = group.root.get('from');
12
+ toDateControl = group.root.get('to');
13
13
  }
14
14
  if (fromDateControl && toDateControl) {
15
15
  const fromDateValue = fromDateControl.value;
@@ -24,4 +24,4 @@ export function DateRangeValidator(group) {
24
24
  }
25
25
  return null;
26
26
  }
27
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1yYW5nZS12YWxpZGF0b3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnZvaWNlcS91aS1saWIvc3JjL2xpYi92YWxpZGF0b3JzL2RhdGUtcmFuZ2UtdmFsaWRhdG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBcUMsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXpGLE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxLQUFzQjtJQUN2RCxJQUFJLGVBQWUsR0FBMkIsSUFBSSxDQUFDO0lBQ25ELElBQUksYUFBYSxHQUEyQixJQUFJLENBQUM7SUFFakQsSUFBSSxLQUFLLENBQUMsTUFBTSxZQUFZLFNBQVMsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLE1BQU0sWUFBWSxTQUFTLEVBQUUsQ0FBQztRQUNsRixNQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDO1FBQy9CLGVBQWUsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzVDLGFBQWEsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzFDLENBQUM7U0FBTSxDQUFDO1FBQ04sZUFBZSxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQzdDLGFBQWEsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUMzQyxDQUFDO0lBRUQsSUFBSSxlQUFlLElBQUksYUFBYSxFQUFFLENBQUM7UUFDckMsTUFBTSxhQUFhLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQztRQUM1QyxNQUFNLFdBQVcsR0FBRyxhQUFhLENBQUMsS0FBSyxDQUFDO1FBRXhDLElBQUksYUFBYSxJQUFJLFdBQVcsRUFBRSxDQUFDO1lBQ2pDLE1BQU0sUUFBUSxHQUFHLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3pDLE1BQU0sTUFBTSxHQUFHLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBRXJDLElBQUksUUFBUSxHQUFHLE1BQU0sRUFBRSxDQUFDO2dCQUN0QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUscURBQXFELEVBQUUsQ0FBQztZQUNyRixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPLElBQUksQ0FBQztBQUNkLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIFZhbGlkYXRpb25FcnJvcnMsIEZvcm1BcnJheSwgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuZXhwb3J0IGZ1bmN0aW9uIERhdGVSYW5nZVZhbGlkYXRvcihncm91cDogQWJzdHJhY3RDb250cm9sKTogVmFsaWRhdGlvbkVycm9ycyB8IG51bGwge1xyXG4gIGxldCBmcm9tRGF0ZUNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCB8IG51bGwgPSBudWxsO1xyXG4gIGxldCB0b0RhdGVDb250cm9sOiBBYnN0cmFjdENvbnRyb2wgfCBudWxsID0gbnVsbDtcclxuXHJcbiAgaWYgKGdyb3VwLnBhcmVudCBpbnN0YW5jZW9mIEZvcm1Hcm91cCAmJiBncm91cC5wYXJlbnQucGFyZW50IGluc3RhbmNlb2YgRm9ybUFycmF5KSB7XHJcbiAgICBjb25zdCBmb3JtR3JvdXAgPSBncm91cC5wYXJlbnQ7XHJcbiAgICBmcm9tRGF0ZUNvbnRyb2wgPSBmb3JtR3JvdXAuZ2V0KCdmcm9tRGF0ZScpO1xyXG4gICAgdG9EYXRlQ29udHJvbCA9IGZvcm1Hcm91cC5nZXQoJ3RvRGF0ZScpO1xyXG4gIH0gZWxzZSB7XHJcbiAgICBmcm9tRGF0ZUNvbnRyb2wgPSBncm91cC5yb290LmdldCgnZnJvbURhdGUnKTtcclxuICAgIHRvRGF0ZUNvbnRyb2wgPSBncm91cC5yb290LmdldCgndG9EYXRlJyk7XHJcbiAgfVxyXG5cclxuICBpZiAoZnJvbURhdGVDb250cm9sICYmIHRvRGF0ZUNvbnRyb2wpIHtcclxuICAgIGNvbnN0IGZyb21EYXRlVmFsdWUgPSBmcm9tRGF0ZUNvbnRyb2wudmFsdWU7XHJcbiAgICBjb25zdCB0b0RhdGVWYWx1ZSA9IHRvRGF0ZUNvbnRyb2wudmFsdWU7XHJcblxyXG4gICAgaWYgKGZyb21EYXRlVmFsdWUgJiYgdG9EYXRlVmFsdWUpIHtcclxuICAgICAgY29uc3QgZnJvbURhdGUgPSBuZXcgRGF0ZShmcm9tRGF0ZVZhbHVlKTtcclxuICAgICAgY29uc3QgdG9EYXRlID0gbmV3IERhdGUodG9EYXRlVmFsdWUpO1xyXG5cclxuICAgICAgaWYgKGZyb21EYXRlID4gdG9EYXRlKSB7XHJcbiAgICAgICAgcmV0dXJuIHsgZGF0ZVJhbmdlSW52YWxpZDogJ0ludmFsaWQgRGF0ZSBSYW5nZTogVG8gZGF0ZSBtdXN0IGJlIGFmdGVyIGZyb20gZGF0ZScgfTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcmV0dXJuIG51bGw7XHJcbn1cclxuIl19
27
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1yYW5nZS12YWxpZGF0b3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pbnZvaWNlcS91aS1saWIvc3JjL2xpYi92YWxpZGF0b3JzL2RhdGUtcmFuZ2UtdmFsaWRhdG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBcUMsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXpGLE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxLQUFzQjtJQUN2RCxJQUFJLGVBQWUsR0FBMkIsSUFBSSxDQUFDO0lBQ25ELElBQUksYUFBYSxHQUEyQixJQUFJLENBQUM7SUFFakQsSUFBSSxLQUFLLENBQUMsTUFBTSxZQUFZLFNBQVMsSUFBSSxLQUFLLENBQUMsTUFBTSxDQUFDLE1BQU0sWUFBWSxTQUFTLEVBQUUsQ0FBQztRQUNsRixNQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDO1FBQy9CLGVBQWUsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3hDLGFBQWEsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3RDLENBQUM7U0FBTSxDQUFDO1FBQ04sZUFBZSxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3pDLGFBQWEsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRUQsSUFBSSxlQUFlLElBQUksYUFBYSxFQUFFLENBQUM7UUFDckMsTUFBTSxhQUFhLEdBQUcsZUFBZSxDQUFDLEtBQUssQ0FBQztRQUM1QyxNQUFNLFdBQVcsR0FBRyxhQUFhLENBQUMsS0FBSyxDQUFDO1FBRXhDLElBQUksYUFBYSxJQUFJLFdBQVcsRUFBRSxDQUFDO1lBQ2pDLE1BQU0sUUFBUSxHQUFHLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQ3pDLE1BQU0sTUFBTSxHQUFHLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1lBRXJDLElBQUksUUFBUSxHQUFHLE1BQU0sRUFBRSxDQUFDO2dCQUN0QixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUscURBQXFELEVBQUUsQ0FBQztZQUNyRixDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFRCxPQUFPLElBQUksQ0FBQztBQUNkLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBYnN0cmFjdENvbnRyb2wsIFZhbGlkYXRpb25FcnJvcnMsIEZvcm1BcnJheSwgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuZXhwb3J0IGZ1bmN0aW9uIERhdGVSYW5nZVZhbGlkYXRvcihncm91cDogQWJzdHJhY3RDb250cm9sKTogVmFsaWRhdGlvbkVycm9ycyB8IG51bGwge1xyXG4gIGxldCBmcm9tRGF0ZUNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCB8IG51bGwgPSBudWxsO1xyXG4gIGxldCB0b0RhdGVDb250cm9sOiBBYnN0cmFjdENvbnRyb2wgfCBudWxsID0gbnVsbDtcclxuXHJcbiAgaWYgKGdyb3VwLnBhcmVudCBpbnN0YW5jZW9mIEZvcm1Hcm91cCAmJiBncm91cC5wYXJlbnQucGFyZW50IGluc3RhbmNlb2YgRm9ybUFycmF5KSB7XHJcbiAgICBjb25zdCBmb3JtR3JvdXAgPSBncm91cC5wYXJlbnQ7XHJcbiAgICBmcm9tRGF0ZUNvbnRyb2wgPSBmb3JtR3JvdXAuZ2V0KCdmcm9tJyk7XHJcbiAgICB0b0RhdGVDb250cm9sID0gZm9ybUdyb3VwLmdldCgndG8nKTtcclxuICB9IGVsc2Uge1xyXG4gICAgZnJvbURhdGVDb250cm9sID0gZ3JvdXAucm9vdC5nZXQoJ2Zyb20nKTtcclxuICAgIHRvRGF0ZUNvbnRyb2wgPSBncm91cC5yb290LmdldCgndG8nKTtcclxuICB9XHJcblxyXG4gIGlmIChmcm9tRGF0ZUNvbnRyb2wgJiYgdG9EYXRlQ29udHJvbCkge1xyXG4gICAgY29uc3QgZnJvbURhdGVWYWx1ZSA9IGZyb21EYXRlQ29udHJvbC52YWx1ZTtcclxuICAgIGNvbnN0IHRvRGF0ZVZhbHVlID0gdG9EYXRlQ29udHJvbC52YWx1ZTtcclxuXHJcbiAgICBpZiAoZnJvbURhdGVWYWx1ZSAmJiB0b0RhdGVWYWx1ZSkge1xyXG4gICAgICBjb25zdCBmcm9tRGF0ZSA9IG5ldyBEYXRlKGZyb21EYXRlVmFsdWUpO1xyXG4gICAgICBjb25zdCB0b0RhdGUgPSBuZXcgRGF0ZSh0b0RhdGVWYWx1ZSk7XHJcblxyXG4gICAgICBpZiAoZnJvbURhdGUgPiB0b0RhdGUpIHtcclxuICAgICAgICByZXR1cm4geyBkYXRlUmFuZ2VJbnZhbGlkOiAnSW52YWxpZCBEYXRlIFJhbmdlOiBUbyBkYXRlIG11c3QgYmUgYWZ0ZXIgZnJvbSBkYXRlJyB9O1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICByZXR1cm4gbnVsbDtcclxufVxyXG4iXX0=
package/fesm2022/iq-ui-lib.mjs CHANGED
@@ -12,7 +12,7 @@ import { MatCell, MatCellDef, MatHeaderCell, MatHeaderCellDef, MatTableDataSourc
12
12
  import * as i7$1 from '@angular/material/sort';
13
13
  import { MatSortModule } from '@angular/material/sort';
14
14
  import * as i1$1 from '@angular/common';
15
- import { NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, CommonModule, NgSwitchDefault, DecimalPipe, UpperCasePipe, JsonPipe, formatDate } from '@angular/common';
15
+ import { NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, CommonModule, NgSwitchDefault, DecimalPipe, JsonPipe, UpperCasePipe, formatDate } from '@angular/common';
16
16
  import * as i9$1 from 'ngx-pagination';
17
17
  import { NgxPaginationModule } from 'ngx-pagination';
18
18
  import * as i6 from '@angular/material/form-field';
@@ -819,12 +819,12 @@ function DateRangeValidator(group) {
819
819
  let toDateControl = null;
820
820
  if (group.parent instanceof FormGroup && group.parent.parent instanceof FormArray) {
821
821
  const formGroup = group.parent;
822
- fromDateControl = formGroup.get('fromDate');
823
- toDateControl = formGroup.get('toDate');
822
+ fromDateControl = formGroup.get('from');
823
+ toDateControl = formGroup.get('to');
824
824
  }
825
825
  else {
826
- fromDateControl = group.root.get('fromDate');
827
- toDateControl = group.root.get('toDate');
826
+ fromDateControl = group.root.get('from');
827
+ toDateControl = group.root.get('to');
828
828
  }
829
829
  if (fromDateControl && toDateControl) {
830
830
  const fromDateValue = fromDateControl.value;
@@ -2388,7 +2388,7 @@ class FilterBuilderComponent {
2388
2388
  };
2389
2389
  }
2390
2390
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2391
- 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}.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:has(input[formcontrolname=invoiceNumber]){width:283px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=from]){width:225px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=to]){width:227px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(.mat-mdc-select[formcontrolname=invoiceType]){width:237px!important;min-width:200px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-text-field-wrapper{height:44px!important;padding: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:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-infix{padding-left:48px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix{padding-right:8px!important;padding-left:0!important;margin-left:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.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-mdc-select-arrow-wrapper .mat-mdc-select-arrow{display:none!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .custom-select-arrow{font-size:24px!important;width:24px!important;height:24px!important;color:#000!important;margin-right:0!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{display:none!important;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"] }] }); }
2391
+ 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:has(input[formcontrolname=invoiceNumber]){width:283px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=from]){width:225px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=to]){width:227px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(.mat-mdc-select[formcontrolname=invoiceType]){width:237px!important;min-width:200px!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:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-infix{padding-left:48px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix{padding-right:8px!important;padding-left:0!important;margin-left:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.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-mdc-select-arrow-wrapper .mat-mdc-select-arrow{display:none!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .custom-select-arrow{font-size:24px!important;width:24px!important;height:24px!important;color:#000!important;margin-right:0!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"] }] }); }
2392
2392
  }
2393
2393
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
2394
2394
  type: Component,
@@ -2398,7 +2398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2398
2398
  TranslateModule,
2399
2399
  MatButtonModule,
2400
2400
  MatIcon
2401
- ], 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}.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:has(input[formcontrolname=invoiceNumber]){width:283px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=from]){width:225px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=to]){width:227px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(.mat-mdc-select[formcontrolname=invoiceType]){width:237px!important;min-width:200px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .mat-mdc-text-field-wrapper{height:44px!important;padding: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:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-infix{padding-left:48px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix{padding-right:8px!important;padding-left:0!important;margin-left:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.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-mdc-select-arrow-wrapper .mat-mdc-select-arrow{display:none!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .custom-select-arrow{font-size:24px!important;width:24px!important;height:24px!important;color:#000!important;margin-right:0!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{display:none!important;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"] }]
2401
+ ], 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:has(input[formcontrolname=invoiceNumber]){width:283px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=from]){width:225px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=to]){width:227px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(.mat-mdc-select[formcontrolname=invoiceType]){width:237px!important;min-width:200px!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:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-infix{padding-left:48px!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix{padding-right:8px!important;padding-left:0!important;margin-left:0!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field:has(input[formcontrolname=invoiceNumber]) .mat-mdc-form-field-icon-prefix mat-icon{font-size:24px!important;width:24px!important;height:24px!important;color:#0d4261!important}.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-mdc-select-arrow-wrapper .mat-mdc-select-arrow{display:none!important}.main-filter-builder .filterForm__filed-filter ::ng-deep mat-form-field .custom-select-arrow{font-size:24px!important;width:24px!important;height:24px!important;color:#000!important;margin-right:0!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"] }]
2402
2402
  }], ctorParameters: () => [], propDecorators: { columns: [{
2403
2403
  type: Input
2404
2404
  }], isChecked: [{
@@ -2833,7 +2833,7 @@ class BaseTableComponent extends BaseUtils {
2833
2833
  }
2834
2834
  }
2835
2835
  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 }); }
2836
- 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\r\n mat-menu-item\r\n *ngFor=\"let type of types\"\r\n (click)=\"extractReport(type)\"\r\n >\r\n <span>{{ type | uppercase }}</span>\r\n </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 (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 <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> of\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}.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}.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}.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}.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}.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:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}\n"], dependencies: [{ 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"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], animations: [] }); }
2836
+ 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 (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 <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> of\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}.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}.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}.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}.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:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}\n"], dependencies: [{ 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: [] }); }
2837
2837
  }
2838
2838
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
2839
2839
  type: Component,
@@ -2881,7 +2881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2881
2881
  MatMenu,
2882
2882
  MatMenuItem,
2883
2883
  UpperCasePipe,
2884
- ], 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\r\n mat-menu-item\r\n *ngFor=\"let type of types\"\r\n (click)=\"extractReport(type)\"\r\n >\r\n <span>{{ type | uppercase }}</span>\r\n </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 (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 <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> of\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}.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}.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}.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}.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}.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:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}\n"] }]
2884
+ ], 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 (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 <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> of\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}.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}.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}.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}.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:last-child{border-right:none}.table-cell.actions-cell{justify-content:center;text-align:center}\n"] }]
2885
2885
  }], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
2886
2886
  type: Inject,
2887
2887
  args: ['securityManager']