@unifylib/ui-lib 1.1.5 → 1.1.6

package/fesm2022/unifylib-ui-lib.mjs

@@ -4,18 +4,18 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i6 from '@angular/material/button';
+import * as i7 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i2$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatCell, MatCellDef, MatHeaderCell, MatHeaderCellDef, MatTableDataSource, MatColumnDef, MatTable, MatRow, MatRowDef, MatHeaderRow, MatHeaderRowDef } from '@angular/material/table';
-import * as i5$2 from '@angular/material/sort';
+import * as i7$1 from '@angular/material/sort';
 import { MatSortModule } from '@angular/material/sort';
 import * as i1$1 from '@angular/common';
 import { NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, CommonModule, NgSwitchDefault, DecimalPipe, UpperCasePipe, JsonPipe, formatDate } from '@angular/common';
 import * as i9$1 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
-import * as i6$1 from '@angular/material/form-field';
+import * as i6 from '@angular/material/form-field';
 import { MatFormField, MatLabel, MatFormFieldModule, MatError } from '@angular/material/form-field';
 import * as i4 from '@angular/forms';
 import { FormsModule, Validators, FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -28,17 +28,17 @@ import * as i4$1 from '@angular/material/chips';
 import { MatChip, MatChipsModule, MatChipInput, MatChipGrid, MatChipListbox, MatChipRow, MatChipOption, MatChipRemove } from '@angular/material/chips';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import * as i5 from '@angular/cdk/bidi';
-import { MatSelect, MatOption, MatFormField as MatFormField$1, MatSelectModule } from '@angular/material/select';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
 import { MatDatepickerInput, MatDatepicker, MatDatepickerToggle, MatDateRangeInput } from '@angular/material/datepicker';
 import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
+import { MatSelect, MatOption as MatOption$1, MatFormField as MatFormField$1, MatSelectModule } from '@angular/material/select';
 import { MatDivider } from '@angular/material/divider';
 import * as i10 from 'ngx-json-viewer';
 import { NgxJsonViewerModule } from 'ngx-json-viewer';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
 import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
-import { MatAutocompleteTrigger, MatAutocomplete, MatOption as MatOption$1 } from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/material/autocomplete';
 import { BehaviorSubject, Subject, of, map, takeUntil } from 'rxjs';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
@@ -83,7 +83,7 @@ class ActionConfirmationComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"header-row\">\r\n    <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <p class=\"message\">\r\n    {{ subMsg | translate }}\r\n  </p>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      mat-stroked-button\r\n      class=\"btn-none-background-primary btn-cancel\"\r\n      (click)=\"cancel()\"\r\n      id=\"rejectActionLabel\">\r\n      {{ rejectActionLabel | translate }}\r\n    </button>\r\n\r\n    <button\r\n      mat-flat-button\r\n      class=\"btn-background-primary btn-confirm\"\r\n      (click)=\"commentAndClose()\"\r\n      id=\"acceptActionLabel\">\r\n      {{ acceptActionLabel | translate }}\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:32px;min-width:500px;box-sizing:border-box}.header-row{display:flex;justify-content:space-between;align-items:center}.title{margin:0;font-size:20px;font-weight:700;color:#222}.close-btn mat-icon{font-size:24px;color:#333}.message{margin-top:20px;font-size:16px;color:#333}.actions{display:flex;justify-content:flex-end;gap:16px;margin-top:40px}.btn-cancel{width:121px!important;margin:0!important}.btn-confirm{width:171px!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"header-row\">\r\n    <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <p class=\"message\">\r\n    {{ subMsg | translate }}\r\n  </p>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      mat-stroked-button\r\n      class=\"btn-none-background-primary btn-cancel\"\r\n      (click)=\"cancel()\"\r\n      id=\"rejectActionLabel\">\r\n      {{ rejectActionLabel | translate }}\r\n    </button>\r\n\r\n    <button\r\n      mat-flat-button\r\n      class=\"btn-background-primary btn-confirm\"\r\n      (click)=\"commentAndClose()\"\r\n      id=\"acceptActionLabel\">\r\n      {{ acceptActionLabel | translate }}\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:32px;min-width:500px;box-sizing:border-box}.header-row{display:flex;justify-content:space-between;align-items:center}.title{margin:0;font-size:20px;font-weight:700;color:#222}.close-btn mat-icon{font-size:24px;color:#333}.message{margin-top:20px;font-size:16px;color:#333}.actions{display:flex;justify-content:flex-end;gap:16px;margin-top:40px}.btn-cancel{width:121px!important;margin:0!important}.btn-confirm{width:auto!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, decorators: [{
             type: Component,
@@ -92,7 +92,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatButton,
                         MatIconButton,
                         MatIcon
-                    ], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"header-row\">\r\n    <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <p class=\"message\">\r\n    {{ subMsg | translate }}\r\n  </p>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      mat-stroked-button\r\n      class=\"btn-none-background-primary btn-cancel\"\r\n      (click)=\"cancel()\"\r\n      id=\"rejectActionLabel\">\r\n      {{ rejectActionLabel | translate }}\r\n    </button>\r\n\r\n    <button\r\n      mat-flat-button\r\n      class=\"btn-background-primary btn-confirm\"\r\n      (click)=\"commentAndClose()\"\r\n      id=\"acceptActionLabel\">\r\n      {{ acceptActionLabel | translate }}\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:32px;min-width:500px;box-sizing:border-box}.header-row{display:flex;justify-content:space-between;align-items:center}.title{margin:0;font-size:20px;font-weight:700;color:#222}.close-btn mat-icon{font-size:24px;color:#333}.message{margin-top:20px;font-size:16px;color:#333}.actions{display:flex;justify-content:flex-end;gap:16px;margin-top:40px}.btn-cancel{width:121px!important;margin:0!important}.btn-confirm{width:171px!important;margin:0!important}\n"] }]
+                    ], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n  <div class=\"header-row\">\r\n    <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n    <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <p class=\"message\">\r\n    {{ subMsg | translate }}\r\n  </p>\r\n\r\n  <div class=\"actions\">\r\n    <button\r\n      mat-stroked-button\r\n      class=\"btn-none-background-primary btn-cancel\"\r\n      (click)=\"cancel()\"\r\n      id=\"rejectActionLabel\">\r\n      {{ rejectActionLabel | translate }}\r\n    </button>\r\n\r\n    <button\r\n      mat-flat-button\r\n      class=\"btn-background-primary btn-confirm\"\r\n      (click)=\"commentAndClose()\"\r\n      id=\"acceptActionLabel\">\r\n      {{ acceptActionLabel | translate }}\r\n    </button>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:32px;min-width:500px;box-sizing:border-box}.header-row{display:flex;justify-content:space-between;align-items:center}.title{margin:0;font-size:20px;font-weight:700;color:#222}.close-btn mat-icon{font-size:24px;color:#333}.message{margin-top:20px;font-size:16px;color:#333}.actions{display:flex;justify-content:flex-end;gap:16px;margin-top:40px}.btn-cancel{width:121px!important;margin:0!important}.btn-confirm{width:auto!important;margin:0!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -321,6 +321,7 @@ class FieldInfo {
         this.validationMessages = fieldInfo.validationMessages;
         this.hideLabel = fieldInfo.hideLabel;
         this.searchOperator = fieldInfo.searchOperator || 'EQUALS';
+        this.showSearchIcon = fieldInfo.showSearchIcon;
     }
 }
 
@@ -578,6 +579,7 @@ class TitleBarComponent {
         this.isRoot = false;
         this.hideBackButton = true;
         this.buttons = [];
+        this.buttonsDisplayMode = 'dropdown';
         this.buttonClicked = new EventEmitter();
     }
     ngOnInit() {
@@ -610,7 +612,7 @@ class TitleBarComponent {
         this.buttonClicked.emit(btn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, deps: [{ token: i1$1.Location }, { token: i5.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"false\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span  *ngIf=\"false\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <button\r\n        mat-flat-button\r\n        *ngFor=\"let btn of buttons\"\r\n        [color]=\"btn.color || 'primary'\"\r\n        (click)=\"onButtonClick(btn)\"\r\n        class=\"btn-background-primary action-btn\"\r\n        [attr.id]=\"btn.id || ('title-bar-btn-' + (btn.action || btn.label || btn.key))\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>{{ btn.icon }}</mat-icon>\r\n          <span>{{ btn.label | translate }}</span>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["", ".mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#222;font-size:14px;font-weight:300;font-style:normal}.mainTitleBar .end-items{display:flex;flex-direction:column;align-items:flex-end;gap:20px}.mainTitleBar .buttons-wrapper{display:inline-block;text-align-last:end}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TitleBarComponent, isStandalone: true, selector: "app-title-bar", inputs: { pageTitle: "pageTitle", showExtractButton: "showExtractButton", totalElements: "totalElements", titleMode: "titleMode", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"pageTitle\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n        <button\r\n          *ngIf=\"buttons && buttons.length > 0\"\r\n          mat-flat-button\r\n          [matMenuTriggerFor]=\"actionMenu\"\r\n          class=\"title-bar-action-button\"\r\n          [attr.id]=\"'title-bar-action-button'\">\r\n          <div class=\"button-content\">\r\n            <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n            <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n            <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n          </div>\r\n        </button>\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of buttons\"\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n        <button\r\n          *ngFor=\"let btn of buttons\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"title-bar-list-button\"\r\n          (click)=\"onButtonClick(btn)\"\r\n          [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n          <mat-icon>{{ btn.icon }}</mat-icon>\r\n          <span>{{ btn.label | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["", ".mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#222;font-size:14px;font-weight:300;font-style:normal}.mainTitleBar .end-items{display:flex;flex-direction:column;align-items:flex-end;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, decorators: [{
             type: Component,
@@ -623,7 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgForOf,
                         MatMenuTrigger,
                         TranslateModule,
-                    ], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"false\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span  *ngIf=\"false\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <button\r\n        mat-flat-button\r\n        *ngFor=\"let btn of buttons\"\r\n        [color]=\"btn.color || 'primary'\"\r\n        (click)=\"onButtonClick(btn)\"\r\n        class=\"btn-background-primary action-btn\"\r\n        [attr.id]=\"btn.id || ('title-bar-btn-' + (btn.action || btn.label || btn.key))\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>{{ btn.icon }}</mat-icon>\r\n          <span>{{ btn.label | translate }}</span>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#222;font-size:14px;font-weight:300;font-style:normal}.mainTitleBar .end-items{display:flex;flex-direction:column;align-items:flex-end;gap:20px}.mainTitleBar .buttons-wrapper{display:inline-block;text-align-last:end}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"] }]
+                    ], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"pageTitle\">\r\n      <span class=\"textTitle__titleMode\">{{ titleMode | translate }}</span>\r\n      {{ listTitle | translate }}\r\n      <span *ngIf=\"titleCorporateAdmin && isRoot\">({{ titleCorporateAdmin }})</span>\r\n      {{ extraData }}\r\n    </h2>\r\n    <span *ngIf=\"subTitle\" class=\"textTitle__subTitle\">{{ subTitle | translate }}</span>\r\n  </div>\r\n\r\n  <div class=\"column end-items gap-20\">\r\n    <button mat-flat-button color=\"primary\" style=\"width: 100px\" *ngIf=\"!hideBackButton\" (click)=\"goBack()\" id=\"title-bar-back-btn\">\r\n      <mat-icon color=\"second\">{{ backIcon }}</mat-icon>\r\n      <span style=\"font-weight: bold\">{{ 'back' | translate }}</span>\r\n    </button>\r\n\r\n    <div class=\"row flex-auto gap-20 buttons-wrapper\">\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'dropdown'\">\r\n        <button\r\n          *ngIf=\"buttons && buttons.length > 0\"\r\n          mat-flat-button\r\n          [matMenuTriggerFor]=\"actionMenu\"\r\n          class=\"title-bar-action-button\"\r\n          [attr.id]=\"'title-bar-action-button'\">\r\n          <div class=\"button-content\">\r\n            <mat-icon class=\"button-icon\">{{ buttons[0].icon }}</mat-icon>\r\n            <span class=\"button-label\">{{ buttons[0].label | translate }}</span>\r\n            <mat-icon class=\"button-arrow\">keyboard_arrow_down</mat-icon>\r\n          </div>\r\n        </button>\r\n        <mat-menu #actionMenu=\"matMenu\" class=\"title-bar-action-menu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of buttons\"\r\n            (click)=\"onButtonClick(btn)\"\r\n            [attr.id]=\"btn.id || ('title-bar-menu-btn-' + (btn.action || btn.label || btn.key))\">\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"buttonsDisplayMode === 'list'\">\r\n        <button\r\n          *ngFor=\"let btn of buttons\"\r\n          mat-flat-button\r\n          color=\"primary\"\r\n          class=\"title-bar-list-button\"\r\n          (click)=\"onButtonClick(btn)\"\r\n          [attr.id]=\"btn.id || ('title-bar-list-btn-' + (btn.action || btn.label || btn.key))\">\r\n          <mat-icon>{{ btn.icon }}</mat-icon>\r\n          <span>{{ btn.label | translate }}</span>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mainTitleBar{display:flex;width:100%;gap:20px;align-items:center;justify-content:flex-start}.mainTitleBar.row{flex-direction:row;margin-left:0!important;margin-right:0!important;padding-bottom:20px;border-bottom:1px solid #F0EEEE}.mainTitleBar.column{flex-direction:column}.mainTitleBar .textTitle{flex:1 1 0;display:flex;flex-direction:column;width:auto}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#222;font-size:14px;font-weight:300;font-style:normal}.mainTitleBar .end-items{display:flex;flex-direction:column;align-items:flex-end;gap:20px}.mainTitleBar .buttons-wrapper{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-direction:row;text-align-last:end;margin-left:0!important;margin-right:0!important}.mainTitleBar .buttons-wrapper .action-btn{width:210px!important}.mainTitleBar .title-bar-action-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 12px!important;min-width:209px!important;box-shadow:none!important}.mainTitleBar .title-bar-action-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-action-button .button-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.mainTitleBar .title-bar-action-button .button-icon{font-size:14px;width:14px;height:14px;color:#fff}.mainTitleBar .title-bar-action-button .button-label{font-weight:500;font-size:16px;line-height:1.2;color:#fff;white-space:nowrap;height:16px}.mainTitleBar .title-bar-action-button .button-arrow{font-size:14px;width:14px;height:14px;color:#fff;margin-left:auto}.mainTitleBar .actionButton{width:100%}.mainTitleBar .actionButton__expand{font-size:20px!important;color:var(--accent-color);margin-top:5px}.mainTitleBar .title-bar-list-button{background:#0d4261!important;color:#fff!important;border-radius:8px!important;height:44px!important;padding:8px 16px!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:8px!important;font-weight:500!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap!important}.mainTitleBar .title-bar-list-button:hover{background:#0a3550!important}.mainTitleBar .title-bar-list-button mat-icon{font-size:20px!important;width:20px!important;height:28px!important;color:#fff!important;margin:0!important}.mainTitleBar .title-bar-list-button span{color:#fff!important}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:auto}.fx-flex-fill{width:100%;height:100%;flex:1 1 auto}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.end-items{align-items:flex-end}.gap-20{gap:20px}@media (max-width: 960px){.mainTitleBar.row.default-align{justify-content:flex-end}}@media (max-width: 768px){.mainTitleBar.row,.mainTitleBar.column{flex-direction:column;align-items:flex-start;gap:20px}.end-items{align-items:flex-start}}@media (max-width: 600px){.gap-20{gap:10px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.Location }, { type: i5.Directionality }], propDecorators: { pageTitle: [{
                 type: Input
             }], showExtractButton: [{
@@ -660,6 +662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], buttons: [{
                 type: Input
+            }], buttonsDisplayMode: [{
+                type: Input
             }], buttonClicked: [{
                 type: Output
             }] } });
@@ -724,12 +728,57 @@ class PaginatorComponent {
         this.pageSizeChange.emit(this.pageSize);
         this.pageChange.emit(this.currentPage);
     }
+    getPageNumbers() {
+        const TOTAL = this.totalPages;
+        const CURRENT = this.currentPage;
+        const PAGES = [];
+        if (TOTAL <= 7) {
+            for (let i = 1; i <= TOTAL; i++) {
+                PAGES.push(i);
+            }
+        }
+        else {
+            PAGES.push(1);
+            if (CURRENT <= 3) {
+                for (let i = 2; i <= 4; i++) {
+                    PAGES.push(i);
+                }
+                PAGES.push('...');
+                PAGES.push(TOTAL - 1);
+                PAGES.push(TOTAL);
+            }
+            else if (CURRENT >= TOTAL - 2) {
+                PAGES.push(2);
+                PAGES.push('...');
+                for (let i = TOTAL - 3; i <= TOTAL; i++) {
+                    PAGES.push(i);
+                }
+            }
+            else {
+                PAGES.push(2);
+                PAGES.push('...');
+                PAGES.push(CURRENT - 1);
+                PAGES.push(CURRENT);
+                PAGES.push(CURRENT + 1);
+                PAGES.push('...');
+                PAGES.push(TOTAL - 1);
+                PAGES.push(TOTAL);
+            }
+        }
+        return PAGES;
+    }
+    isEllipsis(page) {
+        return page === '...';
+    }
+    isActive(page) {
+        return typeof page === 'number' && page === this.currentPage;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, deps: [{ token: i5.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { currentPage: "currentPage", totalItems: "totalItems", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-paginator\" [dir]=\"currentDirection\">\r\n  <span class=\"range-label\">\r\n    {{ (currentPage - 1) * pageSize + 1 }} -\r\n    {{ Math.min(currentPage * pageSize, totalItems) }}\r\n    {{'PAGINATION.of' | translate}} {{ totalItems }}\r\n  </span>\r\n\r\n  <div class=\"right-section\">\r\n    <div class=\"rows-per-page\">\r\n      {{'PAGINATION.rowsPerPage' | translate}}:\r\n      <mat-select [(value)]=\"pageSize\" (selectionChange)=\"onPageSizeChange($event.value)\">\r\n        <mat-option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n    <div class=\"nav-buttons\">\r\n      <button mat-icon-button (click)=\"previousPage()\" [disabled]=\"currentPage === 1\" id=\"paginator-prev-btn\">\r\n        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_right' : 'chevron_left' }}</mat-icon>\r\n      </button>\r\n      <span><span style=\"color: var(--primary-color)\">{{ currentPage }}</span> / {{ totalPages }}</span>\r\n      <button mat-icon-button\r\n              (click)=\"nextPage()\"\r\n              [disabled]=\"currentPage === totalPages\"\r\n              [ngClass]=\"{'active-chevron': currentPage !== totalPages, 'disabled-chevron': currentPage === totalPages}\"\r\n              id=\"paginator-next-btn\">\r\n        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_left' : 'chevron_right' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".custom-paginator{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border:1px solid #f0f0f0;border-radius:6px;background:#fff;font-size:14px;color:#555!important;gap:16px;margin-top:4px}.custom-paginator .range-label{color:#6b7280;font-size:13px}.custom-paginator .right-section{display:flex;align-items:center;gap:16px}.custom-paginator .right-section .rows-per-page{display:flex;align-items:center;gap:4px}.custom-paginator .right-section .rows-per-page mat-select{width:60px;font-size:13px;color:#555}.custom-paginator .right-section .nav-buttons{display:flex;align-items:center;gap:8px}.custom-paginator .right-section .nav-buttons span{min-width:40px;text-align:center;font-size:13px}.custom-paginator button{border:1px solid #dbdbdb;border-radius:5px!important;width:28px;height:28px;padding:0!important;font-size:18px}.custom-paginator button.active-chevron mat-icon{color:var(--primary-color)}.custom-paginator button.disabled-chevron mat-icon{color:#555}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginatorComponent, isStandalone: true, selector: "app-paginator", inputs: { currentPage: "currentPage", totalItems: "totalItems", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"paginator-container\" [dir]=\"currentDirection\" [class.rtl]=\"currentDirection === 'rtl'\">\r\n  <button\r\n    class=\"paginator-button paginator-nav-button\"\r\n    [class.disabled]=\"currentPage === 1\"\r\n    [disabled]=\"currentPage === 1\"\r\n    (click)=\"previousPage()\"\r\n    type=\"button\">\r\n    <mat-icon class=\"paginator-icon paginator-icon-left\">chevron_left</mat-icon>\r\n  </button>\r\n\r\n  <ng-container *ngFor=\"let page of getPageNumbers()\">\r\n    <button\r\n      *ngIf=\"!isEllipsis(page)\"\r\n      class=\"paginator-button paginator-page-button\"\r\n      [class.active]=\"isActive(page)\"\r\n      [disabled]=\"isActive(page)\"\r\n      (click)=\"goToPage(+page)\"\r\n      type=\"button\">\r\n      <span class=\"paginator-page-number\">{{ page }}</span>\r\n    </button>\r\n    <div *ngIf=\"isEllipsis(page)\" class=\"paginator-button paginator-ellipsis\">\r\n      <span class=\"paginator-ellipsis-text\">...</span>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <button\r\n    class=\"paginator-button paginator-nav-button\"\r\n    [class.disabled]=\"currentPage === totalPages\"\r\n    [disabled]=\"currentPage === totalPages\"\r\n    (click)=\"nextPage()\"\r\n    type=\"button\">\r\n    <mat-icon class=\"paginator-icon paginator-icon-right\">chevron_right</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".paginator-container{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;margin-top:16px}.paginator-container.rtl .paginator-icon,.paginator-container[dir=rtl] .paginator-icon{transform:rotate(180deg)}.paginator-button{width:32px;height:32px;border-radius:8px;border:1px solid #f0eeee;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;transition:all .2s;font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;color:#888;font-weight:300}.paginator-button:hover:not(.disabled):not(.active){background:#fafafa}.paginator-button.disabled{cursor:not-allowed;opacity:.5}.paginator-page-button{font-weight:300}.paginator-page-button.active{border-color:#0d4261;background:#fff;color:#0d4261;font-weight:500;cursor:default}.paginator-page-number{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:inherit;color:inherit;height:14px}.paginator-ellipsis{border:1px solid #f0eeee;background:#fff;cursor:default;color:#888}.paginator-ellipsis-text{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:300;color:#888}.paginator-nav-button{border:1px solid #f0eeee;background:#fff}.paginator-icon{font-size:16px;width:16px;height:16px;color:#000;display:flex;align-items:center;justify-content:center}.paginator-button.disabled .paginator-icon{opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-paginator', standalone: true, imports: [MatIconModule, MatButtonModule, NgIf, NgForOf, MatSelect, MatOption, NgClass, TranslateModule], template: "<div class=\"custom-paginator\" [dir]=\"currentDirection\">\r\n  <span class=\"range-label\">\r\n    {{ (currentPage - 1) * pageSize + 1 }} -\r\n    {{ Math.min(currentPage * pageSize, totalItems) }}\r\n    {{'PAGINATION.of' | translate}} {{ totalItems }}\r\n  </span>\r\n\r\n  <div class=\"right-section\">\r\n    <div class=\"rows-per-page\">\r\n      {{'PAGINATION.rowsPerPage' | translate}}:\r\n      <mat-select [(value)]=\"pageSize\" (selectionChange)=\"onPageSizeChange($event.value)\">\r\n        <mat-option *ngFor=\"let size of pageSizeOptions\" [value]=\"size\">{{ size }}</mat-option>\r\n      </mat-select>\r\n    </div>\r\n\r\n    <div class=\"nav-buttons\">\r\n      <button mat-icon-button (click)=\"previousPage()\" [disabled]=\"currentPage === 1\" id=\"paginator-prev-btn\">\r\n        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_right' : 'chevron_left' }}</mat-icon>\r\n      </button>\r\n      <span><span style=\"color: var(--primary-color)\">{{ currentPage }}</span> / {{ totalPages }}</span>\r\n      <button mat-icon-button\r\n              (click)=\"nextPage()\"\r\n              [disabled]=\"currentPage === totalPages\"\r\n              [ngClass]=\"{'active-chevron': currentPage !== totalPages, 'disabled-chevron': currentPage === totalPages}\"\r\n              id=\"paginator-next-btn\">\r\n        <mat-icon>{{ currentDirection === 'rtl' ? 'chevron_left' : 'chevron_right' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".custom-paginator{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border:1px solid #f0f0f0;border-radius:6px;background:#fff;font-size:14px;color:#555!important;gap:16px;margin-top:4px}.custom-paginator .range-label{color:#6b7280;font-size:13px}.custom-paginator .right-section{display:flex;align-items:center;gap:16px}.custom-paginator .right-section .rows-per-page{display:flex;align-items:center;gap:4px}.custom-paginator .right-section .rows-per-page mat-select{width:60px;font-size:13px;color:#555}.custom-paginator .right-section .nav-buttons{display:flex;align-items:center;gap:8px}.custom-paginator .right-section .nav-buttons span{min-width:40px;text-align:center;font-size:13px}.custom-paginator button{border:1px solid #dbdbdb;border-radius:5px!important;width:28px;height:28px;padding:0!important;font-size:18px}.custom-paginator button.active-chevron mat-icon{color:var(--primary-color)}.custom-paginator button.disabled-chevron mat-icon{color:#555}\n"] }]
+            args: [{ selector: 'app-paginator', standalone: true, imports: [MatIconModule, MatButtonModule, NgIf, NgForOf], template: "<div class=\"paginator-container\" [dir]=\"currentDirection\" [class.rtl]=\"currentDirection === 'rtl'\">\r\n  <button\r\n    class=\"paginator-button paginator-nav-button\"\r\n    [class.disabled]=\"currentPage === 1\"\r\n    [disabled]=\"currentPage === 1\"\r\n    (click)=\"previousPage()\"\r\n    type=\"button\">\r\n    <mat-icon class=\"paginator-icon paginator-icon-left\">chevron_left</mat-icon>\r\n  </button>\r\n\r\n  <ng-container *ngFor=\"let page of getPageNumbers()\">\r\n    <button\r\n      *ngIf=\"!isEllipsis(page)\"\r\n      class=\"paginator-button paginator-page-button\"\r\n      [class.active]=\"isActive(page)\"\r\n      [disabled]=\"isActive(page)\"\r\n      (click)=\"goToPage(+page)\"\r\n      type=\"button\">\r\n      <span class=\"paginator-page-number\">{{ page }}</span>\r\n    </button>\r\n    <div *ngIf=\"isEllipsis(page)\" class=\"paginator-button paginator-ellipsis\">\r\n      <span class=\"paginator-ellipsis-text\">...</span>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <button\r\n    class=\"paginator-button paginator-nav-button\"\r\n    [class.disabled]=\"currentPage === totalPages\"\r\n    [disabled]=\"currentPage === totalPages\"\r\n    (click)=\"nextPage()\"\r\n    type=\"button\">\r\n    <mat-icon class=\"paginator-icon paginator-icon-right\">chevron_right</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".paginator-container{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;margin-top:16px}.paginator-container.rtl .paginator-icon,.paginator-container[dir=rtl] .paginator-icon{transform:rotate(180deg)}.paginator-button{width:32px;height:32px;border-radius:8px;border:1px solid #f0eeee;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box;transition:all .2s;font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;color:#888;font-weight:300}.paginator-button:hover:not(.disabled):not(.active){background:#fafafa}.paginator-button.disabled{cursor:not-allowed;opacity:.5}.paginator-page-button{font-weight:300}.paginator-page-button.active{border-color:#0d4261;background:#fff;color:#0d4261;font-weight:500;cursor:default}.paginator-page-number{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:inherit;color:inherit;height:14px}.paginator-ellipsis{border:1px solid #f0eeee;background:#fff;cursor:default;color:#888}.paginator-ellipsis-text{font-family:Lusail,sans-serif;font-size:14px;line-height:1.2;font-weight:300;color:#888}.paginator-nav-button{border:1px solid #f0eeee;background:#fff}.paginator-icon{font-size:16px;width:16px;height:16px;color:#000;display:flex;align-items:center;justify-content:center}.paginator-button.disabled .paginator-icon{opacity:.5}\n"] }]
         }], ctorParameters: () => [{ type: i5.Directionality }], propDecorators: { currentPage: [{
                 type: Input
             }], totalItems: [{
@@ -1291,7 +1340,7 @@ class MultiAutoCompleteComponent {
         return this.field.property;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiAutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiAutoCompleteComponent, isStandalone: true, selector: "app-multi-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", pathParam: "pathParam", readonly: "readonly" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true }, { propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.field\" class=\"main-multi-auto\">\r\n  <div class=\"matField\" (click)=\"this.filterLookupItems('', autocompleteTrigger)\">\r\n    <mat-form-field class=\"full-width\" appearance=\"outline\" floatLabel=\"always\">\r\n      <mat-label>{{ getLabel() }}</mat-label>\r\n      <mat-chip-listbox #chipList [selectable]=\"true\">\r\n        <mat-chip\r\n          *ngFor=\"let item of selectedItems\"\r\n          [removable]=\"true\"\r\n          (removed)=\"remove(item)\">\r\n          {{ itemNameByLag(item) }}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip>\r\n        <input class=\"chip-input\" type=\"text\"\r\n               [id]=\"getId()\" #itemInput\r\n               [formControl]=\"multiControl\"\r\n               [matAutocomplete]=\"auto\" matInput\r\n               [readonly]=\"readonly\"\r\n               [required]=\"isRequired\"\r\n               (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n               [disabled]=\"field.readonly\"\r\n               #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n        >\r\n      </mat-chip-listbox>\r\n\r\n      <mat-icon class=\"arrow_drop_down_autocomplete\">arrow_drop_down</mat-icon>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn\"\r\n                        (optionSelected)=\"selected($event.option.value)\">\r\n        <ng-container *ngIf=\"!field.readonly\">\r\n          <mat-option *ngFor=\"let item of  lookupItems$ | async\" [value]=\"item\"\r\n                      [disabled]=\"field.readonly || isSelected(item)\"\r\n                      (click)=\"$event.stopPropagation(); autocompleteTrigger.openPanel()\">\r\n            {{ itemNameByLag(item) }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-container>\r\n", styles: [":is() .matField{margin-bottom:24px!important}:is() .matField .mat-form-field-wrapper{padding:0!important;margin-bottom:0!important}.full-width{width:100%}.chip-input{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiAutoCompleteComponent, isStandalone: true, selector: "app-multi-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", pathParam: "pathParam", readonly: "readonly" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true }, { propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"this.field\" class=\"main-multi-auto\">\r\n  <div class=\"matField\" (click)=\"this.filterLookupItems('', autocompleteTrigger)\">\r\n    <mat-form-field class=\"full-width\" appearance=\"outline\" floatLabel=\"always\">\r\n      <mat-label>{{ getLabel() }}</mat-label>\r\n      <mat-chip-listbox #chipList [selectable]=\"true\">\r\n        <mat-chip\r\n          *ngFor=\"let item of selectedItems\"\r\n          [removable]=\"true\"\r\n          (removed)=\"remove(item)\">\r\n          {{ itemNameByLag(item) }}\r\n          <mat-icon matChipRemove>cancel</mat-icon>\r\n        </mat-chip>\r\n        <input class=\"chip-input\" type=\"text\"\r\n               [id]=\"getId()\" #itemInput\r\n               [formControl]=\"multiControl\"\r\n               [matAutocomplete]=\"auto\" matInput\r\n               [readonly]=\"readonly\"\r\n               [required]=\"isRequired\"\r\n               (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n               [disabled]=\"field.readonly\"\r\n               #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n        >\r\n      </mat-chip-listbox>\r\n\r\n      <mat-icon class=\"arrow_drop_down_autocomplete\">arrow_drop_down</mat-icon>\r\n      <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn\"\r\n                        (optionSelected)=\"selected($event.option.value)\">\r\n        <ng-container *ngIf=\"!field.readonly\">\r\n          <mat-option *ngFor=\"let item of  lookupItems$ | async\" [value]=\"item\"\r\n                      [disabled]=\"field.readonly || isSelected(item)\"\r\n                      (click)=\"$event.stopPropagation(); autocompleteTrigger.openPanel()\">\r\n            {{ itemNameByLag(item) }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n  </div>\r\n</ng-container>\r\n", styles: [":is() .matField{margin-bottom:24px!important}:is() .matField .mat-form-field-wrapper{padding:0!important;margin-bottom:0!important}.full-width{width:100%}.chip-input{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiAutoCompleteComponent, decorators: [{
             type: Component,
@@ -1307,7 +1356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatChipInput,
                         MatInput,
                         MatAutocomplete,
-                        MatOption$1,
+                        MatOption,
                         AsyncPipe,
                         NgIf,
                         MatChipGrid,
@@ -1564,7 +1613,7 @@ class AutoCompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: 'secretsManager' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n  <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n    <div class=\"label-and-asterisk-container\">\r\n      <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n        {{ field.label! | translate }}\r\n      </span>\r\n      <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n    </div>\r\n\r\n    <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n      <input type=\"text\"\r\n             [placeholder]=\"'search_placeholder' | translate\"\r\n             [id]=\"getId()\"\r\n             [formControl]=\"myControl\"\r\n             (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n             [matAutocomplete]=\"auto\"\r\n             matInput\r\n             [required]=\"isRequired\"\r\n             #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n             [readonly]=\"readonly\"\r\n      >\r\n\r\n      <button mat-button matSuffix\r\n              color=\"primary\"\r\n              class=\"autocomplete-button\"\r\n              (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n              [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n        <mat-icon>arrow_drop_down</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n                        (optionSelected)=\"itemSelected($event.option.value)\"\r\n                        (closed)=\"closed()\">\r\n        <ng-container *ngIf=\"!field.readonly\">\r\n          <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n          <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n            {{ itemNameByLag(item) }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n\r\n  </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n  <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n    <div class=\"label-and-asterisk-container\">\r\n      <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n        {{ field.label! | translate }}\r\n      </span>\r\n      <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n    </div>\r\n\r\n    <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n      <input type=\"text\"\r\n             [placeholder]=\"'search_placeholder' | translate\"\r\n             [id]=\"getId()\"\r\n             [formControl]=\"myControl\"\r\n             (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n             [matAutocomplete]=\"auto\"\r\n             matInput\r\n             [required]=\"isRequired\"\r\n             #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n             [readonly]=\"readonly\"\r\n      >\r\n\r\n      <button mat-button matSuffix\r\n              color=\"primary\"\r\n              class=\"autocomplete-button\"\r\n              (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n              [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n        <mat-icon>arrow_drop_down</mat-icon>\r\n      </button>\r\n\r\n      <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n                        (optionSelected)=\"itemSelected($event.option.value)\"\r\n                        (closed)=\"closed()\">\r\n        <ng-container *ngIf=\"!field.readonly\">\r\n          <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n          <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n            {{ itemNameByLag(item) }}\r\n          </mat-option>\r\n        </ng-container>\r\n      </mat-autocomplete>\r\n    </mat-form-field>\r\n\r\n  </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
@@ -1577,7 +1626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgIf,
                         MatAutocomplete,
                         AsyncPipe,
-                        MatOption$1,
+                        MatOption,
                         NgClass,
                         MatIcon,
                         NgForOf,
@@ -2063,7 +2112,7 @@ class BaseFormCanvasComponent {
             },
             { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
             { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
-        ], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n  <div class=\"form-wrapper\">\r\n    <ng-container *ngIf=\"defaults\">\r\n      <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n        <form [formGroup]=\"formParam\" class=\"form-content\">\r\n          <div class=\"form-row\">\r\n            <div class=\"form-column\">\r\n              <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n                <div class=\"row-container\">\r\n                  <ng-container *ngFor=\"let field of row.value\">\r\n                    <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n                      <ng-container [ngSwitch]=\"field.type\">\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n        <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n          {{ field.label! | translate }}\r\n        </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input matInput\r\n                                       [matDatepicker]=\"picker\"\r\n                                       [value]=\"formParam.get(field.property)?.value\"\r\n                                       (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       formControlName=\"{{field.property}}\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n                                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n                                <mat-datepicker #picker\r\n                                                [startView]=\"getView(field)\"\r\n                                                (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n                                                panelClass=\"example-month-picker\">\r\n                                </mat-datepicker>\r\n\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <div class=\"phone-input-wrapper\">\r\n                                  <ngx-mat-intl-tel-input\r\n                                    formControlName=\"{{ field.property }}\"\r\n                                    [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                    [preferredCountries]=\"['qa']\"\r\n                                    [enablePlaceholder]=\"true\"\r\n                                    [enableSearch]=\"true\"\r\n                                    [onlyCountries]=\"getCountryCodeList()\"\r\n                                    [required]=\"field.required\"\r\n                                    [attr.aria-required]=\"field.required\"\r\n                                    [attr.aria-invalid]=\"showError(field.property)\"\r\n                                    [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                    [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                  </ngx-mat-intl-tel-input>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'password'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input matInput\r\n                                     class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n                                     [readonly]=\"field.readonly\"\r\n                                     [required]=\"field.required\"\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [attr.aria-required]=\"field.required\"\r\n                                     [attr.aria-invalid]=\"showError(field.property)\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                     [attr.aria-describedby]=\"'error-' + field.property\">\r\n                              <!--                                                    <mat-icon matSuffix-->\r\n                              <!--                                                              (click)=\"hide = !hide\">-->\r\n                              <!--                                                      {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n                              <!--                                                    </mat-icon>-->\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       (keyup)=\"fixArabicNumbers($event.target)\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n\r\n                              <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                             formControlName=\"{{ field.property }}\">\r\n                                <mat-chip-row\r\n                                  *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n                                  [removable]=\"removable\"\r\n                                  (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n                                  {{ mail }}\r\n                                  <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n                                </mat-chip-row>\r\n\r\n                                <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matChipInputAddOnBlur]=\"addOnBlur\"\r\n                                       (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n                              </mat-chip-grid>\r\n                              <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                         aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'amount'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'sequence'\">\r\n                          <ng-container\r\n                            *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     matInput\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [readonly]=\"true\"\r\n                                     [disabled]=\"true\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\">\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #noSequence>\r\n                          <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                            <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                          </div>\r\n                          <mat-form-field appearance=\"outline\">\r\n                            <input class=\"app-input\"\r\n                                   formControlName=\"{{ field.property }}\"\r\n                                   matInput\r\n                                   [readonly]=\"false\"\r\n                                   [disabled]=\"false\"\r\n                                   [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                   [required]=\"field.required\"\r\n                                   [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                   [attr.aria-required]=\"field.required\"\r\n                                   [attr.aria-invalid]=\"showError(field.property)\"\r\n                                   [attr.aria-describedby]=\"'error-' + field.property\">\r\n                            <mat-error\r\n                              id=\"error-{{ field.property }}\"\r\n                              *ngIf=\"showError(field.property)\"\r\n                              aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </mat-form-field>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-container *ngSwitchCase=\"'textarea'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                                      <textarea cdkFocusInitial\r\n                                                                formControlName=\"{{ field.property }}\"\r\n                                                                matInput\r\n                                                                cdkTextareaAutosize\r\n                                                                cdkAutosizeMinRows=\"3\"\r\n                                                                [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                                                [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                                                [attr.aria-required]=\"field.required\"\r\n                                                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                                                [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                                                [readonly]=\"field.readonly\"\r\n                                                                [required]=\"field.required\"></textarea>\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                       [required]=\"field.readonly ? false : field.required\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [pattern]=\"field.pattern\">\r\n                                <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                           aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'time'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input\r\n                                  matInput\r\n                                  class=\"app-input\"\r\n                                  formControlName=\"{{ field.property }}\"\r\n                                  type=\"time\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [readonly]=\"field.readonly\"\r\n                                  [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                  [required]=\"field.required\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-checkbox\r\n                                appearance=\"outline\"\r\n                                style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n                                [disabled]=\"field.readonly\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                formControlName=\"{{ field.property }}\">\r\n                                {{ field.label! | translate }}\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-checkbox>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'color-picker'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n                              <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n                              <input\r\n                                ejs-colorpicker\r\n                                type=\"color\"\r\n                                id=\"colorpicker\"\r\n                                formControlName=\"{{ field.property }}\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                              />\r\n                            </div>\r\n                            <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-radio-group\r\n                                formControlName=\"{{field.property}}\"\r\n                                class=\"app-radio\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\">\r\n                                <div class=\"field-row\">\r\n                                  <div class=\"field-label\">\r\n                                    <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n                                  </div>\r\n                                  <div class=\"field-input\">\r\n                                    <div class=\"radio-group-custom\">\r\n                                      <mat-radio-button\r\n                                        *ngFor=\"let option of field.listOptions\"\r\n                                        [value]=\"option\"\r\n                                        [attr.aria-labelledby]=\"option\">\r\n                                        {{ option | translate }}\r\n                                      </mat-radio-button>\r\n                                    </div>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-radio-group>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n                                <mat-select\r\n                                  formControlName=\"{{field.property}}\"\r\n                                  [attr.aria-label]=\"field.label! | translate\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  [multiple]=\"field.multi || false\"\r\n                                  [required]=\"field.readonly ? false : field.required\"\r\n                                  [(value)]=\"field.defaultListOption\">\r\n                                  <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions; let i = index\"\r\n                                      [value]=\"item\">\r\n                                      {{ friendlyName(field.label, field.property, item) | translate }}\r\n                                    </mat-option>\r\n                                  </ng-container>\r\n                                  <ng-template #lookup_no_translation>\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions\"\r\n                                      [value]=\"item\">\r\n                                      {{ getOptionValue(item) }}\r\n                                    </mat-option>\r\n                                  </ng-template>\r\n                                </mat-select>\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the attachment control when ready -->\r\n                            <!-- <ag-attachment-control\r\n                                  [allowMulti]=\"field.multi\"\r\n                                  [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n                                  [supportedTypes]=\"field.supportedTypes\"\r\n                                  [buttonType]=\"field.buttonType\"\r\n                                  [hideListOfFiles]=\"field.hideFiles\"\r\n                                  (filesList)=\"updateFilesList($event, field)\"\r\n                                  (actionExecuted)=\"actionExecuted($event, field)\"\r\n                                  style=\"margin-top: 5px\"\r\n                                  label=\"{{field.label! | translate}}\">\r\n                            </ag-attachment-control> -->\r\n                            <mat-error class=\"iq-error\"\r\n                                       *ngIf=\"showError(field.property)\"\r\n                                       aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [supportingAttributes]=\"supportingAttributes\"\r\n                                [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <!-- Uncomment and use the currency control when ready -->\r\n                              <!-- <app-currency\r\n                                    [form]=\"formParam\"\r\n                                    [field]=\"field\"\r\n                                    [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                    (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n                              </app-currency> -->\r\n                              <mat-error\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-multi-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [defaultValue]=\"getMultiValue(field)\"\r\n                                (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-multi-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the rich text editor when ready -->\r\n                            <!-- <ckeditor\r\n                                  [editor]=\"Editor\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  formControlName=\"{{field.property}}\">\r\n                            </ckeditor> -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'divider'\">\r\n                          <mat-divider></mat-divider>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                          <div>\r\n                            <mat-label\r\n                              (click)=\"getHyperTextEvent()\"\r\n                              class=\"hyper-link\">\r\n                              {{ field.label! | translate }}\r\n                            </mat-label>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'section-title'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"hrdivider-mid\">\r\n                              <span>{{ field.label | translate }}</span>\r\n                            </div>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\" dir=\"ltr\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <!--                                              <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n                        <!--                                                <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n                        <!--                                                  <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n                        <!--                                                    <ng-container-->\r\n                        <!--                                                      [ngTemplateOutlet]=\"dateReadonly\"-->\r\n                        <!--                                                      [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n                        <!--                                                    </ng-container>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                  <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n                        <!--                                                    <div style=\"display: flex; width: 350%\">-->\r\n                        <!--                                                      <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n                        <!--                                                      <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n                        <!--                                                        <mat-chip-grid #chipGrid>-->\r\n                        <!--                                                          <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n                        <!--                                                            <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n                        <!--                                                              {{ equationValue }}-->\r\n                        <!--                                                              <button-->\r\n                        <!--                                                                matChipRemove-->\r\n                        <!--                                                                [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n                        <!--                                                                <mat-icon>cancel</mat-icon>-->\r\n                        <!--                                                              </button>-->\r\n                        <!--                                                            </mat-chip-row>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-chip-grid>-->\r\n                        <!--                                                        <input-->\r\n                        <!--                                                          [(ngModel)]=\"currentEquationValue\"-->\r\n                        <!--                                                          [matChipInputFor]=\"chipGrid\"-->\r\n                        <!--                                                          [matAutocomplete]=\"auto\"-->\r\n                        <!--                                                          [ngModelOptions]=\"{ standalone: true }\"-->\r\n                        <!--                                                          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n                        <!--                                                          (matChipInputTokenEnd)=\"add($event)\"-->\r\n                        <!--                                                          aria-label=\"Add equation value\" />-->\r\n                        <!--                                                        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n                        <!--                                                          <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n                        <!--                                                            <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-autocomplete>-->\r\n                        <!--                                                      </mat-form-field>-->\r\n                        <!--                                                    </div>-->\r\n                        <!--                                                    <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n                        <!--                                                      {{ getErrors(field.property) | translate }}-->\r\n                        <!--                                                    </mat-error>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                </ng-container>-->\r\n                        <!--                                              </ng-container>-->\r\n\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n  <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <div class=\"readonly-value json-viewer\">\r\n        <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #normalText>\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n      <ng-template #showNo>\r\n        <mat-icon color=\"warn\">close</mat-icon>\r\n      </ng-template>\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n      {{ listShowValue(defaults, field) | translate }}\r\n    </span>\r\n    <ng-template #noTranslate>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <mat-chip-grid class=\"readonly-value chipList\">\r\n      <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n        {{ filedProp }}\r\n      </mat-chip>\r\n    </mat-chip-grid>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n    <mat-chip-listbox class=\"readonly-value chipList\">\r\n      <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n                       [selectable]=\"true\"\r\n                       color=\"warn\"\r\n                       [removable]=\"false\">\r\n        {{ loc }}\r\n      </mat-chip-option>\r\n    </mat-chip-listbox>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n  <div class=\"row-wrapper\">\r\n    <div class=\"column-wrapper\">\r\n      <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n        <div class=\"row-container\">\r\n          <ng-container *ngFor=\"let field of row.value\">\r\n            <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n              <ng-container [ngSwitch]=\"field.type\">\r\n\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                  <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'time'\">\r\n                  <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'textarea'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'currency'\">\r\n                  <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                  <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'status'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'lookup'\">\r\n                  <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'amount'\">\r\n                  <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                  <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'sequence'\">\r\n                  <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                  <p class=\"label\">\r\n                    <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n                    <span> : </span>\r\n                    <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n                  </p>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'section-title'\">\r\n                  <div class=\"hrdivider-mid\">\r\n                    <span>{{ field.label | translate }}</span>\r\n                  </div>\r\n                </ng-container>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;margin-top:3vh;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
+        ], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n  <div class=\"form-wrapper\">\r\n    <ng-container *ngIf=\"defaults\">\r\n      <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n        <form [formGroup]=\"formParam\" class=\"form-content\">\r\n          <div class=\"form-row\">\r\n            <div class=\"form-column\">\r\n              <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n                <div class=\"row-container\">\r\n                  <ng-container *ngFor=\"let field of row.value\">\r\n                    <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n                      <ng-container [ngSwitch]=\"field.type\">\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n        <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n          {{ field.label! | translate }}\r\n        </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input matInput\r\n                                       [matDatepicker]=\"picker\"\r\n                                       [value]=\"formParam.get(field.property)?.value\"\r\n                                       (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       formControlName=\"{{field.property}}\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n                                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n                                <mat-datepicker #picker\r\n                                                [startView]=\"getView(field)\"\r\n                                                (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n                                                panelClass=\"example-month-picker\">\r\n                                </mat-datepicker>\r\n\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <div class=\"phone-input-wrapper\">\r\n                                  <ngx-mat-intl-tel-input\r\n                                    formControlName=\"{{ field.property }}\"\r\n                                    [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                    [preferredCountries]=\"['qa']\"\r\n                                    [enablePlaceholder]=\"true\"\r\n                                    [enableSearch]=\"true\"\r\n                                    [onlyCountries]=\"getCountryCodeList()\"\r\n                                    [required]=\"field.required\"\r\n                                    [attr.aria-required]=\"field.required\"\r\n                                    [attr.aria-invalid]=\"showError(field.property)\"\r\n                                    [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                    [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                  </ngx-mat-intl-tel-input>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'password'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input matInput\r\n                                     class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n                                     [readonly]=\"field.readonly\"\r\n                                     [required]=\"field.required\"\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [attr.aria-required]=\"field.required\"\r\n                                     [attr.aria-invalid]=\"showError(field.property)\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                     [attr.aria-describedby]=\"'error-' + field.property\">\r\n                              <!--                                                    <mat-icon matSuffix-->\r\n                              <!--                                                              (click)=\"hide = !hide\">-->\r\n                              <!--                                                      {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n                              <!--                                                    </mat-icon>-->\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       (keyup)=\"fixArabicNumbers($event.target)\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n\r\n                              <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                             formControlName=\"{{ field.property }}\">\r\n                                <mat-chip-row\r\n                                  *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n                                  [removable]=\"removable\"\r\n                                  (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n                                  {{ mail }}\r\n                                  <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n                                </mat-chip-row>\r\n\r\n                                <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matChipInputAddOnBlur]=\"addOnBlur\"\r\n                                       (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n                              </mat-chip-grid>\r\n                              <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                         aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'amount'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'sequence'\">\r\n                          <ng-container\r\n                            *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     matInput\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [readonly]=\"true\"\r\n                                     [disabled]=\"true\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\">\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #noSequence>\r\n                          <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                            <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                          </div>\r\n                          <mat-form-field appearance=\"outline\">\r\n                            <input class=\"app-input\"\r\n                                   formControlName=\"{{ field.property }}\"\r\n                                   matInput\r\n                                   [readonly]=\"false\"\r\n                                   [disabled]=\"false\"\r\n                                   [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                   [required]=\"field.required\"\r\n                                   [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                   [attr.aria-required]=\"field.required\"\r\n                                   [attr.aria-invalid]=\"showError(field.property)\"\r\n                                   [attr.aria-describedby]=\"'error-' + field.property\">\r\n                            <mat-error\r\n                              id=\"error-{{ field.property }}\"\r\n                              *ngIf=\"showError(field.property)\"\r\n                              aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </mat-form-field>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-container *ngSwitchCase=\"'textarea'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                                      <textarea cdkFocusInitial\r\n                                                                formControlName=\"{{ field.property }}\"\r\n                                                                matInput\r\n                                                                cdkTextareaAutosize\r\n                                                                cdkAutosizeMinRows=\"3\"\r\n                                                                [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                                                [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                                                [attr.aria-required]=\"field.required\"\r\n                                                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                                                [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                                                [readonly]=\"field.readonly\"\r\n                                                                [required]=\"field.required\"></textarea>\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                       [required]=\"field.readonly ? false : field.required\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [pattern]=\"field.pattern\">\r\n                                <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                           aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'time'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input\r\n                                  matInput\r\n                                  class=\"app-input\"\r\n                                  formControlName=\"{{ field.property }}\"\r\n                                  type=\"time\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [readonly]=\"field.readonly\"\r\n                                  [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                  [required]=\"field.required\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-checkbox\r\n                                appearance=\"outline\"\r\n                                style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n                                [disabled]=\"field.readonly\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                formControlName=\"{{ field.property }}\">\r\n                                {{ field.label! | translate }}\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-checkbox>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'color-picker'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n                              <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n                              <input\r\n                                ejs-colorpicker\r\n                                type=\"color\"\r\n                                id=\"colorpicker\"\r\n                                formControlName=\"{{ field.property }}\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                              />\r\n                            </div>\r\n                            <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-radio-group\r\n                                formControlName=\"{{field.property}}\"\r\n                                class=\"app-radio\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\">\r\n                                <div class=\"field-row\">\r\n                                  <div class=\"field-label\">\r\n                                    <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n                                  </div>\r\n                                  <div class=\"field-input\">\r\n                                    <div class=\"radio-group-custom\">\r\n                                      <mat-radio-button\r\n                                        *ngFor=\"let option of field.listOptions\"\r\n                                        [value]=\"option\"\r\n                                        [attr.aria-labelledby]=\"option\">\r\n                                        {{ option | translate }}\r\n                                      </mat-radio-button>\r\n                                    </div>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-radio-group>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n                                <mat-select\r\n                                  formControlName=\"{{field.property}}\"\r\n                                  [attr.aria-label]=\"field.label! | translate\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  [multiple]=\"field.multi || false\"\r\n                                  [required]=\"field.readonly ? false : field.required\"\r\n                                  [(value)]=\"field.defaultListOption\">\r\n                                  <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions; let i = index\"\r\n                                      [value]=\"item\">\r\n                                      {{ friendlyName(field.label, field.property, item) | translate }}\r\n                                    </mat-option>\r\n                                  </ng-container>\r\n                                  <ng-template #lookup_no_translation>\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions\"\r\n                                      [value]=\"item\">\r\n                                      {{ getOptionValue(item) }}\r\n                                    </mat-option>\r\n                                  </ng-template>\r\n                                </mat-select>\r\n                                <mat-icon matSuffix class=\"custom-select-arrow\">keyboard_arrow_down</mat-icon>\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the attachment control when ready -->\r\n                            <!-- <ag-attachment-control\r\n                                  [allowMulti]=\"field.multi\"\r\n                                  [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n                                  [supportedTypes]=\"field.supportedTypes\"\r\n                                  [buttonType]=\"field.buttonType\"\r\n                                  [hideListOfFiles]=\"field.hideFiles\"\r\n                                  (filesList)=\"updateFilesList($event, field)\"\r\n                                  (actionExecuted)=\"actionExecuted($event, field)\"\r\n                                  style=\"margin-top: 5px\"\r\n                                  label=\"{{field.label! | translate}}\">\r\n                            </ag-attachment-control> -->\r\n                            <mat-error class=\"iq-error\"\r\n                                       *ngIf=\"showError(field.property)\"\r\n                                       aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [supportingAttributes]=\"supportingAttributes\"\r\n                                [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <!-- Uncomment and use the currency control when ready -->\r\n                              <!-- <app-currency\r\n                                    [form]=\"formParam\"\r\n                                    [field]=\"field\"\r\n                                    [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                    (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n                              </app-currency> -->\r\n                              <mat-error\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-multi-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [defaultValue]=\"getMultiValue(field)\"\r\n                                (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-multi-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the rich text editor when ready -->\r\n                            <!-- <ckeditor\r\n                                  [editor]=\"Editor\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  formControlName=\"{{field.property}}\">\r\n                            </ckeditor> -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'divider'\">\r\n                          <mat-divider></mat-divider>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                          <div>\r\n                            <mat-label\r\n                              (click)=\"getHyperTextEvent()\"\r\n                              class=\"hyper-link\">\r\n                              {{ field.label! | translate }}\r\n                            </mat-label>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'section-title'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"hrdivider-mid\">\r\n                              <span>{{ field.label | translate }}</span>\r\n                            </div>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\" dir=\"ltr\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <!--                                              <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n                        <!--                                                <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n                        <!--                                                  <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n                        <!--                                                    <ng-container-->\r\n                        <!--                                                      [ngTemplateOutlet]=\"dateReadonly\"-->\r\n                        <!--                                                      [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n                        <!--                                                    </ng-container>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                  <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n                        <!--                                                    <div style=\"display: flex; width: 350%\">-->\r\n                        <!--                                                      <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n                        <!--                                                      <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n                        <!--                                                        <mat-chip-grid #chipGrid>-->\r\n                        <!--                                                          <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n                        <!--                                                            <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n                        <!--                                                              {{ equationValue }}-->\r\n                        <!--                                                              <button-->\r\n                        <!--                                                                matChipRemove-->\r\n                        <!--                                                                [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n                        <!--                                                                <mat-icon>cancel</mat-icon>-->\r\n                        <!--                                                              </button>-->\r\n                        <!--                                                            </mat-chip-row>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-chip-grid>-->\r\n                        <!--                                                        <input-->\r\n                        <!--                                                          [(ngModel)]=\"currentEquationValue\"-->\r\n                        <!--                                                          [matChipInputFor]=\"chipGrid\"-->\r\n                        <!--                                                          [matAutocomplete]=\"auto\"-->\r\n                        <!--                                                          [ngModelOptions]=\"{ standalone: true }\"-->\r\n                        <!--                                                          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n                        <!--                                                          (matChipInputTokenEnd)=\"add($event)\"-->\r\n                        <!--                                                          aria-label=\"Add equation value\" />-->\r\n                        <!--                                                        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n                        <!--                                                          <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n                        <!--                                                            <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-autocomplete>-->\r\n                        <!--                                                      </mat-form-field>-->\r\n                        <!--                                                    </div>-->\r\n                        <!--                                                    <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n                        <!--                                                      {{ getErrors(field.property) | translate }}-->\r\n                        <!--                                                    </mat-error>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                </ng-container>-->\r\n                        <!--                                              </ng-container>-->\r\n\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n  <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <div class=\"readonly-value json-viewer\">\r\n        <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #normalText>\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n      <ng-template #showNo>\r\n        <mat-icon color=\"warn\">close</mat-icon>\r\n      </ng-template>\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n      {{ listShowValue(defaults, field) | translate }}\r\n    </span>\r\n    <ng-template #noTranslate>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <mat-chip-grid class=\"readonly-value chipList\">\r\n      <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n        {{ filedProp }}\r\n      </mat-chip>\r\n    </mat-chip-grid>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n    <mat-chip-listbox class=\"readonly-value chipList\">\r\n      <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n                       [selectable]=\"true\"\r\n                       color=\"warn\"\r\n                       [removable]=\"false\">\r\n        {{ loc }}\r\n      </mat-chip-option>\r\n    </mat-chip-listbox>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n  <div class=\"row-wrapper\">\r\n    <div class=\"column-wrapper\">\r\n      <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n        <div class=\"row-container\">\r\n          <ng-container *ngFor=\"let field of row.value\">\r\n            <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n              <ng-container [ngSwitch]=\"field.type\">\r\n\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                  <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'time'\">\r\n                  <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'textarea'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'currency'\">\r\n                  <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                  <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'status'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'lookup'\">\r\n                  <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'amount'\">\r\n                  <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                  <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'sequence'\">\r\n                  <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                  <p class=\"label\">\r\n                    <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n                    <span> : </span>\r\n                    <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n                  </p>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'section-title'\">\r\n                  <div class=\"hrdivider-mid\">\r\n                    <span>{{ field.label | translate }}</span>\r\n                  </div>\r\n                </ng-container>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;margin-top:3vh;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
             type: Component,
@@ -2093,7 +2142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatCheckbox,
                         MatRadioButton,
                         MatSelect,
-                        MatOption,
+                        MatOption$1,
                         MatDivider,
                         DatePipe,
                         NgxJsonViewerModule,
@@ -2123,7 +2172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         },
                         { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
                         { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
-                    ], template: "<div class=\"main-form-canvas\">\r\n  <div class=\"form-wrapper\">\r\n    <ng-container *ngIf=\"defaults\">\r\n      <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n        <form [formGroup]=\"formParam\" class=\"form-content\">\r\n          <div class=\"form-row\">\r\n            <div class=\"form-column\">\r\n              <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n                <div class=\"row-container\">\r\n                  <ng-container *ngFor=\"let field of row.value\">\r\n                    <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n                      <ng-container [ngSwitch]=\"field.type\">\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n        <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n          {{ field.label! | translate }}\r\n        </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input matInput\r\n                                       [matDatepicker]=\"picker\"\r\n                                       [value]=\"formParam.get(field.property)?.value\"\r\n                                       (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       formControlName=\"{{field.property}}\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n                                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n                                <mat-datepicker #picker\r\n                                                [startView]=\"getView(field)\"\r\n                                                (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n                                                panelClass=\"example-month-picker\">\r\n                                </mat-datepicker>\r\n\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <div class=\"phone-input-wrapper\">\r\n                                  <ngx-mat-intl-tel-input\r\n                                    formControlName=\"{{ field.property }}\"\r\n                                    [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                    [preferredCountries]=\"['qa']\"\r\n                                    [enablePlaceholder]=\"true\"\r\n                                    [enableSearch]=\"true\"\r\n                                    [onlyCountries]=\"getCountryCodeList()\"\r\n                                    [required]=\"field.required\"\r\n                                    [attr.aria-required]=\"field.required\"\r\n                                    [attr.aria-invalid]=\"showError(field.property)\"\r\n                                    [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                    [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                  </ngx-mat-intl-tel-input>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'password'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input matInput\r\n                                     class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n                                     [readonly]=\"field.readonly\"\r\n                                     [required]=\"field.required\"\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [attr.aria-required]=\"field.required\"\r\n                                     [attr.aria-invalid]=\"showError(field.property)\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                     [attr.aria-describedby]=\"'error-' + field.property\">\r\n                              <!--                                                    <mat-icon matSuffix-->\r\n                              <!--                                                              (click)=\"hide = !hide\">-->\r\n                              <!--                                                      {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n                              <!--                                                    </mat-icon>-->\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       (keyup)=\"fixArabicNumbers($event.target)\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n\r\n                              <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                             formControlName=\"{{ field.property }}\">\r\n                                <mat-chip-row\r\n                                  *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n                                  [removable]=\"removable\"\r\n                                  (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n                                  {{ mail }}\r\n                                  <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n                                </mat-chip-row>\r\n\r\n                                <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matChipInputAddOnBlur]=\"addOnBlur\"\r\n                                       (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n                              </mat-chip-grid>\r\n                              <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                         aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'amount'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'sequence'\">\r\n                          <ng-container\r\n                            *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     matInput\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [readonly]=\"true\"\r\n                                     [disabled]=\"true\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\">\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #noSequence>\r\n                          <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                            <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                          </div>\r\n                          <mat-form-field appearance=\"outline\">\r\n                            <input class=\"app-input\"\r\n                                   formControlName=\"{{ field.property }}\"\r\n                                   matInput\r\n                                   [readonly]=\"false\"\r\n                                   [disabled]=\"false\"\r\n                                   [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                   [required]=\"field.required\"\r\n                                   [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                   [attr.aria-required]=\"field.required\"\r\n                                   [attr.aria-invalid]=\"showError(field.property)\"\r\n                                   [attr.aria-describedby]=\"'error-' + field.property\">\r\n                            <mat-error\r\n                              id=\"error-{{ field.property }}\"\r\n                              *ngIf=\"showError(field.property)\"\r\n                              aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </mat-form-field>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-container *ngSwitchCase=\"'textarea'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                                      <textarea cdkFocusInitial\r\n                                                                formControlName=\"{{ field.property }}\"\r\n                                                                matInput\r\n                                                                cdkTextareaAutosize\r\n                                                                cdkAutosizeMinRows=\"3\"\r\n                                                                [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                                                [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                                                [attr.aria-required]=\"field.required\"\r\n                                                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                                                [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                                                [readonly]=\"field.readonly\"\r\n                                                                [required]=\"field.required\"></textarea>\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                       [required]=\"field.readonly ? false : field.required\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [pattern]=\"field.pattern\">\r\n                                <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                           aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'time'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input\r\n                                  matInput\r\n                                  class=\"app-input\"\r\n                                  formControlName=\"{{ field.property }}\"\r\n                                  type=\"time\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [readonly]=\"field.readonly\"\r\n                                  [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                  [required]=\"field.required\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-checkbox\r\n                                appearance=\"outline\"\r\n                                style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n                                [disabled]=\"field.readonly\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                formControlName=\"{{ field.property }}\">\r\n                                {{ field.label! | translate }}\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-checkbox>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'color-picker'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n                              <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n                              <input\r\n                                ejs-colorpicker\r\n                                type=\"color\"\r\n                                id=\"colorpicker\"\r\n                                formControlName=\"{{ field.property }}\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                              />\r\n                            </div>\r\n                            <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-radio-group\r\n                                formControlName=\"{{field.property}}\"\r\n                                class=\"app-radio\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\">\r\n                                <div class=\"field-row\">\r\n                                  <div class=\"field-label\">\r\n                                    <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n                                  </div>\r\n                                  <div class=\"field-input\">\r\n                                    <div class=\"radio-group-custom\">\r\n                                      <mat-radio-button\r\n                                        *ngFor=\"let option of field.listOptions\"\r\n                                        [value]=\"option\"\r\n                                        [attr.aria-labelledby]=\"option\">\r\n                                        {{ option | translate }}\r\n                                      </mat-radio-button>\r\n                                    </div>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-radio-group>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n                                <mat-select\r\n                                  formControlName=\"{{field.property}}\"\r\n                                  [attr.aria-label]=\"field.label! | translate\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  [multiple]=\"field.multi || false\"\r\n                                  [required]=\"field.readonly ? false : field.required\"\r\n                                  [(value)]=\"field.defaultListOption\">\r\n                                  <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions; let i = index\"\r\n                                      [value]=\"item\">\r\n                                      {{ friendlyName(field.label, field.property, item) | translate }}\r\n                                    </mat-option>\r\n                                  </ng-container>\r\n                                  <ng-template #lookup_no_translation>\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions\"\r\n                                      [value]=\"item\">\r\n                                      {{ getOptionValue(item) }}\r\n                                    </mat-option>\r\n                                  </ng-template>\r\n                                </mat-select>\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the attachment control when ready -->\r\n                            <!-- <ag-attachment-control\r\n                                  [allowMulti]=\"field.multi\"\r\n                                  [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n                                  [supportedTypes]=\"field.supportedTypes\"\r\n                                  [buttonType]=\"field.buttonType\"\r\n                                  [hideListOfFiles]=\"field.hideFiles\"\r\n                                  (filesList)=\"updateFilesList($event, field)\"\r\n                                  (actionExecuted)=\"actionExecuted($event, field)\"\r\n                                  style=\"margin-top: 5px\"\r\n                                  label=\"{{field.label! | translate}}\">\r\n                            </ag-attachment-control> -->\r\n                            <mat-error class=\"iq-error\"\r\n                                       *ngIf=\"showError(field.property)\"\r\n                                       aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [supportingAttributes]=\"supportingAttributes\"\r\n                                [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <!-- Uncomment and use the currency control when ready -->\r\n                              <!-- <app-currency\r\n                                    [form]=\"formParam\"\r\n                                    [field]=\"field\"\r\n                                    [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                    (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n                              </app-currency> -->\r\n                              <mat-error\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-multi-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [defaultValue]=\"getMultiValue(field)\"\r\n                                (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-multi-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the rich text editor when ready -->\r\n                            <!-- <ckeditor\r\n                                  [editor]=\"Editor\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  formControlName=\"{{field.property}}\">\r\n                            </ckeditor> -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'divider'\">\r\n                          <mat-divider></mat-divider>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                          <div>\r\n                            <mat-label\r\n                              (click)=\"getHyperTextEvent()\"\r\n                              class=\"hyper-link\">\r\n                              {{ field.label! | translate }}\r\n                            </mat-label>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'section-title'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"hrdivider-mid\">\r\n                              <span>{{ field.label | translate }}</span>\r\n                            </div>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\" dir=\"ltr\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <!--                                              <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n                        <!--                                                <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n                        <!--                                                  <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n                        <!--                                                    <ng-container-->\r\n                        <!--                                                      [ngTemplateOutlet]=\"dateReadonly\"-->\r\n                        <!--                                                      [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n                        <!--                                                    </ng-container>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                  <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n                        <!--                                                    <div style=\"display: flex; width: 350%\">-->\r\n                        <!--                                                      <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n                        <!--                                                      <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n                        <!--                                                        <mat-chip-grid #chipGrid>-->\r\n                        <!--                                                          <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n                        <!--                                                            <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n                        <!--                                                              {{ equationValue }}-->\r\n                        <!--                                                              <button-->\r\n                        <!--                                                                matChipRemove-->\r\n                        <!--                                                                [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n                        <!--                                                                <mat-icon>cancel</mat-icon>-->\r\n                        <!--                                                              </button>-->\r\n                        <!--                                                            </mat-chip-row>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-chip-grid>-->\r\n                        <!--                                                        <input-->\r\n                        <!--                                                          [(ngModel)]=\"currentEquationValue\"-->\r\n                        <!--                                                          [matChipInputFor]=\"chipGrid\"-->\r\n                        <!--                                                          [matAutocomplete]=\"auto\"-->\r\n                        <!--                                                          [ngModelOptions]=\"{ standalone: true }\"-->\r\n                        <!--                                                          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n                        <!--                                                          (matChipInputTokenEnd)=\"add($event)\"-->\r\n                        <!--                                                          aria-label=\"Add equation value\" />-->\r\n                        <!--                                                        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n                        <!--                                                          <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n                        <!--                                                            <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-autocomplete>-->\r\n                        <!--                                                      </mat-form-field>-->\r\n                        <!--                                                    </div>-->\r\n                        <!--                                                    <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n                        <!--                                                      {{ getErrors(field.property) | translate }}-->\r\n                        <!--                                                    </mat-error>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                </ng-container>-->\r\n                        <!--                                              </ng-container>-->\r\n\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n  <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <div class=\"readonly-value json-viewer\">\r\n        <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #normalText>\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n      <ng-template #showNo>\r\n        <mat-icon color=\"warn\">close</mat-icon>\r\n      </ng-template>\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n      {{ listShowValue(defaults, field) | translate }}\r\n    </span>\r\n    <ng-template #noTranslate>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <mat-chip-grid class=\"readonly-value chipList\">\r\n      <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n        {{ filedProp }}\r\n      </mat-chip>\r\n    </mat-chip-grid>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n    <mat-chip-listbox class=\"readonly-value chipList\">\r\n      <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n                       [selectable]=\"true\"\r\n                       color=\"warn\"\r\n                       [removable]=\"false\">\r\n        {{ loc }}\r\n      </mat-chip-option>\r\n    </mat-chip-listbox>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n  <div class=\"row-wrapper\">\r\n    <div class=\"column-wrapper\">\r\n      <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n        <div class=\"row-container\">\r\n          <ng-container *ngFor=\"let field of row.value\">\r\n            <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n              <ng-container [ngSwitch]=\"field.type\">\r\n\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                  <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'time'\">\r\n                  <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'textarea'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'currency'\">\r\n                  <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                  <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'status'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'lookup'\">\r\n                  <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'amount'\">\r\n                  <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                  <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'sequence'\">\r\n                  <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                  <p class=\"label\">\r\n                    <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n                    <span> : </span>\r\n                    <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n                  </p>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'section-title'\">\r\n                  <div class=\"hrdivider-mid\">\r\n                    <span>{{ field.label | translate }}</span>\r\n                  </div>\r\n                </ng-container>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;margin-top:3vh;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"] }]
+                    ], template: "<div class=\"main-form-canvas\">\r\n  <div class=\"form-wrapper\">\r\n    <ng-container *ngIf=\"defaults\">\r\n      <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n        <form [formGroup]=\"formParam\" class=\"form-content\">\r\n          <div class=\"form-row\">\r\n            <div class=\"form-column\">\r\n              <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n                <div class=\"row-container\">\r\n                  <ng-container *ngFor=\"let field of row.value\">\r\n                    <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n                      <ng-container [ngSwitch]=\"field.type\">\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n        <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n          {{ field.label! | translate }}\r\n        </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input matInput\r\n                                       [matDatepicker]=\"picker\"\r\n                                       [value]=\"formParam.get(field.property)?.value\"\r\n                                       (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       formControlName=\"{{field.property}}\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n                                <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n                                <mat-datepicker #picker\r\n                                                [startView]=\"getView(field)\"\r\n                                                (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n                                                panelClass=\"example-month-picker\">\r\n                                </mat-datepicker>\r\n\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <div class=\"phone-input-wrapper\">\r\n                                  <ngx-mat-intl-tel-input\r\n                                    formControlName=\"{{ field.property }}\"\r\n                                    [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                    [preferredCountries]=\"['qa']\"\r\n                                    [enablePlaceholder]=\"true\"\r\n                                    [enableSearch]=\"true\"\r\n                                    [onlyCountries]=\"getCountryCodeList()\"\r\n                                    [required]=\"field.required\"\r\n                                    [attr.aria-required]=\"field.required\"\r\n                                    [attr.aria-invalid]=\"showError(field.property)\"\r\n                                    [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                    [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                  </ngx-mat-intl-tel-input>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'password'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input matInput\r\n                                     class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n                                     [readonly]=\"field.readonly\"\r\n                                     [required]=\"field.required\"\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [attr.aria-required]=\"field.required\"\r\n                                     [attr.aria-invalid]=\"showError(field.property)\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                     [attr.aria-describedby]=\"'error-' + field.property\">\r\n                              <!--                                                    <mat-icon matSuffix-->\r\n                              <!--                                                              (click)=\"hide = !hide\">-->\r\n                              <!--                                                      {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n                              <!--                                                    </mat-icon>-->\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'text'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       (keyup)=\"fixArabicNumbers($event.target)\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n\r\n                              <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                             formControlName=\"{{ field.property }}\">\r\n                                <mat-chip-row\r\n                                  *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n                                  [removable]=\"removable\"\r\n                                  (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n                                  {{ mail }}\r\n                                  <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n                                </mat-chip-row>\r\n\r\n                                <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n                                       [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                                       [matChipInputAddOnBlur]=\"addOnBlur\"\r\n                                       (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n                              </mat-chip-grid>\r\n                              <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                         aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'amount'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'sequence'\">\r\n                          <ng-container\r\n                            *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n                            <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                              <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                            </div>\r\n                            <mat-form-field appearance=\"outline\">\r\n                              <input class=\"app-input\"\r\n                                     formControlName=\"{{ field.property }}\"\r\n                                     matInput\r\n                                     [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                     [readonly]=\"true\"\r\n                                     [disabled]=\"true\"\r\n                                     [attr.aria-labelledby]=\"'label-' + field.property\">\r\n                              <mat-error\r\n                                id=\"error-{{ field.property }}\"\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </mat-form-field>\r\n\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-template #noSequence>\r\n                          <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                            <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                          </div>\r\n                          <mat-form-field appearance=\"outline\">\r\n                            <input class=\"app-input\"\r\n                                   formControlName=\"{{ field.property }}\"\r\n                                   matInput\r\n                                   [readonly]=\"false\"\r\n                                   [disabled]=\"false\"\r\n                                   [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                   [required]=\"field.required\"\r\n                                   [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                   [attr.aria-required]=\"field.required\"\r\n                                   [attr.aria-invalid]=\"showError(field.property)\"\r\n                                   [attr.aria-describedby]=\"'error-' + field.property\">\r\n                            <mat-error\r\n                              id=\"error-{{ field.property }}\"\r\n                              *ngIf=\"showError(field.property)\"\r\n                              aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </mat-form-field>\r\n\r\n                        </ng-template>\r\n\r\n                        <ng-container *ngSwitchCase=\"'textarea'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                                      <textarea cdkFocusInitial\r\n                                                                formControlName=\"{{ field.property }}\"\r\n                                                                matInput\r\n                                                                cdkTextareaAutosize\r\n                                                                cdkAutosizeMinRows=\"3\"\r\n                                                                [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                                                [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                                                [attr.aria-required]=\"field.required\"\r\n                                                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                                                [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                                                [readonly]=\"field.readonly\"\r\n                                                                [required]=\"field.required\"></textarea>\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'number'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       type=\"number\"\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                       [required]=\"field.readonly ? false : field.required\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [pattern]=\"field.pattern\">\r\n                                <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n                                           aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'time'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input\r\n                                  matInput\r\n                                  class=\"app-input\"\r\n                                  formControlName=\"{{ field.property }}\"\r\n                                  type=\"time\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [readonly]=\"field.readonly\"\r\n                                  [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                  [required]=\"field.required\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-checkbox\r\n                                appearance=\"outline\"\r\n                                style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n                                [disabled]=\"field.readonly\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                                formControlName=\"{{ field.property }}\">\r\n                                {{ field.label! | translate }}\r\n                                <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-checkbox>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'color-picker'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n                              <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n                              <input\r\n                                ejs-colorpicker\r\n                                type=\"color\"\r\n                                id=\"colorpicker\"\r\n                                formControlName=\"{{ field.property }}\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\"\r\n                              />\r\n                            </div>\r\n                            <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <mat-radio-group\r\n                                formControlName=\"{{field.property}}\"\r\n                                class=\"app-radio\"\r\n                                [attr.aria-label]=\"field.label! | translate\"\r\n                                [attr.aria-required]=\"field.required\"\r\n                                [attr.aria-invalid]=\"showError(field.property)\">\r\n                                <div class=\"field-row\">\r\n                                  <div class=\"field-label\">\r\n                                    <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n                                  </div>\r\n                                  <div class=\"field-input\">\r\n                                    <div class=\"radio-group-custom\">\r\n                                      <mat-radio-button\r\n                                        *ngFor=\"let option of field.listOptions\"\r\n                                        [value]=\"option\"\r\n                                        [attr.aria-labelledby]=\"option\">\r\n                                        {{ option | translate }}\r\n                                      </mat-radio-button>\r\n                                    </div>\r\n                                  </div>\r\n                                </div>\r\n\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-radio-group>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'list'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n                                <mat-select\r\n                                  formControlName=\"{{field.property}}\"\r\n                                  [attr.aria-label]=\"field.label! | translate\"\r\n                                  [attr.aria-required]=\"field.required\"\r\n                                  [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                  [attr.aria-invalid]=\"showError(field.property)\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  [multiple]=\"field.multi || false\"\r\n                                  [required]=\"field.readonly ? false : field.required\"\r\n                                  [(value)]=\"field.defaultListOption\">\r\n                                  <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions; let i = index\"\r\n                                      [value]=\"item\">\r\n                                      {{ friendlyName(field.label, field.property, item) | translate }}\r\n                                    </mat-option>\r\n                                  </ng-container>\r\n                                  <ng-template #lookup_no_translation>\r\n                                    <mat-option\r\n                                      *ngFor=\"let item of field.listOptions\"\r\n                                      [value]=\"item\">\r\n                                      {{ getOptionValue(item) }}\r\n                                    </mat-option>\r\n                                  </ng-template>\r\n                                </mat-select>\r\n                                <mat-icon matSuffix class=\"custom-select-arrow\">keyboard_arrow_down</mat-icon>\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the attachment control when ready -->\r\n                            <!-- <ag-attachment-control\r\n                                  [allowMulti]=\"field.multi\"\r\n                                  [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n                                  [supportedTypes]=\"field.supportedTypes\"\r\n                                  [buttonType]=\"field.buttonType\"\r\n                                  [hideListOfFiles]=\"field.hideFiles\"\r\n                                  (filesList)=\"updateFilesList($event, field)\"\r\n                                  (actionExecuted)=\"actionExecuted($event, field)\"\r\n                                  style=\"margin-top: 5px\"\r\n                                  label=\"{{field.label! | translate}}\">\r\n                            </ag-attachment-control> -->\r\n                            <mat-error class=\"iq-error\"\r\n                                       *ngIf=\"showError(field.property)\"\r\n                                       aria-live=\"assertive\">\r\n                              {{ getErrors(field.property) | translate }}\r\n                            </mat-error>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [supportingAttributes]=\"supportingAttributes\"\r\n                                [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <!-- Uncomment and use the currency control when ready -->\r\n                              <!-- <app-currency\r\n                                    [form]=\"formParam\"\r\n                                    [field]=\"field\"\r\n                                    [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n                                    (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n                              </app-currency> -->\r\n                              <mat-error\r\n                                *ngIf=\"showError(field.property)\"\r\n                                aria-live=\"assertive\">\r\n                                {{ getErrors(field.property) | translate }}\r\n                              </mat-error>\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <app-multi-auto-complete\r\n                                [form]=\"formParam\"\r\n                                [field]=\"field\"\r\n                                [defaultValue]=\"getMultiValue(field)\"\r\n                                (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n                                <mat-error\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </app-multi-auto-complete>\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n\r\n                        <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <!-- Uncomment and use the rich text editor when ready -->\r\n                            <!-- <ckeditor\r\n                                  [editor]=\"Editor\"\r\n                                  [disabled]=\"field.readonly\"\r\n                                  formControlName=\"{{field.property}}\">\r\n                            </ckeditor> -->\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'divider'\">\r\n                          <mat-divider></mat-divider>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                          <div>\r\n                            <mat-label\r\n                              (click)=\"getHyperTextEvent()\"\r\n                              class=\"hyper-link\">\r\n                              {{ field.label! | translate }}\r\n                            </mat-label>\r\n                          </div>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'section-title'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <div class=\"hrdivider-mid\">\r\n                              <span>{{ field.label | translate }}</span>\r\n                            </div>\r\n                          </ng-container>\r\n                        </ng-container>\r\n\r\n                        <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\">\r\n                              </ng-container>\r\n                            </ng-container>\r\n\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n                                                      <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n                                                        {{ field.label! | translate }}\r\n                                                      </span>\r\n                                <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input class=\"app-input\" dir=\"ltr\"\r\n                                       formControlName=\"{{ field.property }}\"\r\n                                       matInput\r\n                                       [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n                                       [readonly]=\"field.readonly\"\r\n                                       [required]=\"field.required\"\r\n                                       [attr.aria-required]=\"field.required\"\r\n                                       [attr.aria-invalid]=\"showError(field.property)\"\r\n                                       [attr.aria-labelledby]=\"'label-' + field.property\"\r\n                                       [attr.aria-describedby]=\"'error-' + field.property\">\r\n                                <mat-error\r\n                                  id=\"error-{{ field.property }}\"\r\n                                  *ngIf=\"showError(field.property)\"\r\n                                  aria-live=\"assertive\">\r\n                                  {{ getErrors(field.property) | translate }}\r\n                                </mat-error>\r\n                              </mat-form-field>\r\n\r\n\r\n                            </ng-container>\r\n                          </ng-container>\r\n                        </ng-container>\r\n                        <!--                                              <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n                        <!--                                                <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n                        <!--                                                  <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n                        <!--                                                    <ng-container-->\r\n                        <!--                                                      [ngTemplateOutlet]=\"dateReadonly\"-->\r\n                        <!--                                                      [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n                        <!--                                                    </ng-container>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                  <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n                        <!--                                                    <div style=\"display: flex; width: 350%\">-->\r\n                        <!--                                                      <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n                        <!--                                                      <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n                        <!--                                                        <mat-chip-grid #chipGrid>-->\r\n                        <!--                                                          <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n                        <!--                                                            <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n                        <!--                                                              {{ equationValue }}-->\r\n                        <!--                                                              <button-->\r\n                        <!--                                                                matChipRemove-->\r\n                        <!--                                                                [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n                        <!--                                                                <mat-icon>cancel</mat-icon>-->\r\n                        <!--                                                              </button>-->\r\n                        <!--                                                            </mat-chip-row>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-chip-grid>-->\r\n                        <!--                                                        <input-->\r\n                        <!--                                                          [(ngModel)]=\"currentEquationValue\"-->\r\n                        <!--                                                          [matChipInputFor]=\"chipGrid\"-->\r\n                        <!--                                                          [matAutocomplete]=\"auto\"-->\r\n                        <!--                                                          [ngModelOptions]=\"{ standalone: true }\"-->\r\n                        <!--                                                          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n                        <!--                                                          (matChipInputTokenEnd)=\"add($event)\"-->\r\n                        <!--                                                          aria-label=\"Add equation value\" />-->\r\n                        <!--                                                        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n                        <!--                                                          <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n                        <!--                                                            <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n                        <!--                                                          </ng-container>-->\r\n                        <!--                                                        </mat-autocomplete>-->\r\n                        <!--                                                      </mat-form-field>-->\r\n                        <!--                                                    </div>-->\r\n                        <!--                                                    <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n                        <!--                                                      {{ getErrors(field.property) | translate }}-->\r\n                        <!--                                                    </mat-error>-->\r\n                        <!--                                                  </ng-container>-->\r\n                        <!--                                                </ng-container>-->\r\n                        <!--                                              </ng-container>-->\r\n\r\n                      </ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n  <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <div class=\"readonly-value json-viewer\">\r\n        <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #normalText>\r\n    <div class=\"readonly-item\">\r\n      <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n      <ng-template #showNo>\r\n        <mat-icon color=\"warn\">close</mat-icon>\r\n      </ng-template>\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n      {{ listShowValue(defaults, field) | translate }}\r\n    </span>\r\n    <ng-template #noTranslate>\r\n      <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n    </ng-template>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <span class=\"readonly-value\">\r\n      {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n    <mat-chip-grid class=\"readonly-value chipList\">\r\n      <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n        {{ filedProp }}\r\n      </mat-chip>\r\n    </mat-chip-grid>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n  <div class=\"readonly-item\">\r\n    <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n    <mat-chip-listbox class=\"readonly-value chipList\">\r\n      <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n                       [selectable]=\"true\"\r\n                       color=\"warn\"\r\n                       [removable]=\"false\">\r\n        {{ loc }}\r\n      </mat-chip-option>\r\n    </mat-chip-listbox>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n  <div class=\"row-wrapper\">\r\n    <div class=\"column-wrapper\">\r\n      <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n        <div class=\"row-container\">\r\n          <ng-container *ngFor=\"let field of row.value\">\r\n            <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n              <ng-container [ngSwitch]=\"field.type\">\r\n\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                  <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'time'\">\r\n                  <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'phone-number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'text'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'textarea'\">\r\n                  <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'number'\">\r\n                  <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'currency'\">\r\n                  <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'radio-button'\">\r\n                  <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'status'\">\r\n                  <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'lookup'\">\r\n                  <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'amount'\">\r\n                  <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'multi-select'\">\r\n                  <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'chip-list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'sequence'\">\r\n                  <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'list'\">\r\n                  <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n                                [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'iban-text'\">\r\n                  <p class=\"label\">\r\n                    <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n                    <span> : </span>\r\n                    <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n                  </p>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'section-title'\">\r\n                  <div class=\"hrdivider-mid\">\r\n                    <span>{{ field.label | translate }}</span>\r\n                  </div>\r\n                </ng-container>\r\n\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;margin-top:3vh;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"] }]
         }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$2.ActivatedRoute }, { type: BackendService }, { type: i4.FormBuilder }, { type: i5$1.LiveAnnouncer }], propDecorators: { pageInfo: [{
                 type: Input
             }], currency: [{
@@ -2199,9 +2248,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
 class FilterBuilderComponent {
     constructor() {
+        this.pendingFilters = [];
         this.filters = [];
         this.filterInformation = new EventEmitter();
         this.isEmpty = new EventEmitter();
+        this.applyFilter = new EventEmitter();
     }
     ngOnInit() {
         this.switchToAdvanced();
@@ -2224,6 +2275,13 @@ class FilterBuilderComponent {
             .map(f => ({ ...f }));
         this.filterInformation.emit(filtersArray);
     }
+    onApplyFilter() {
+        this.applyFilter.emit();
+    }
+    hasPendingFilters() {
+        return this.pendingFilters && this.pendingFilters.length > 0 &&
+            this.pendingFilters.some(f => f && f.fieldName && f.valueObject !== undefined && f.valueObject !== null && f.valueObject !== '');
+    }
     scheduleSearch(delayMs = 800) {
         if (this.searchTimeout) {
             clearTimeout(this.searchTimeout);
@@ -2330,15 +2388,17 @@ class FilterBuilderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterBuilderComponent, isStandalone: true, selector: "app-filter-builder", inputs: { columns: "columns", isChecked: "isChecked", filterFields: "filterFields", pageInfo: "pageInfo" }, outputs: { filterInformation: "filterInformation", isEmpty: "isEmpty" }, 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>\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 .filterForm{display:block}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:12px;margin:6px 0;flex-wrap:wrap}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0}.main-filter-builder .filterForm__filed-filter{margin:5px 0 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}}\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 }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-filter-builder', standalone: true, imports: [
                         CommonModule,
                         FieldFilterComponent,
-                        TranslateModule
-                    ], 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>\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 .filterForm{display:block}.main-filter-builder .filterForm__row{display:flex;align-items:center;gap:12px;margin:6px 0;flex-wrap:wrap}.main-filter-builder .filterForm__col{flex:1 1 auto;min-width:0}.main-filter-builder .filterForm__filed-filter{margin:5px 0 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}}\n"] }]
+                        TranslateModule,
+                        MatButtonModule,
+                        MatIcon
+                    ], template: "<div class=\"main-filter-builder\">\r\n\r\n  <div class=\"filterForm\">\r\n    <div class=\"filterForm__row\">\r\n      <div class=\"filterForm__col\">\r\n        <app-field-filter\r\n          [editable]=\"isEditable()\"\r\n          [filter]=\"filter\"\r\n          [pageInfo]=\"pageInfo\"\r\n          *ngIf=\"isEditable()\"\r\n          [filterFields]=\"filterFields\"\r\n          (filterFieldInformation)=\"formChanges($event)\"\r\n          class=\"filterForm__filed-filter\"\r\n        >\r\n        </app-field-filter>\r\n      </div>\r\n      <div class=\"button-group\">\r\n        <button\r\n          mat-flat-button\r\n          class=\"btn-apply-filter\"\r\n          [disabled]=\"!hasPendingFilters()\"\r\n          (click)=\"onApplyFilter()\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>filter_list</mat-icon>\r\n            <span>{{ 'FILTER-BUILDER.applyFilter' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n<!--  <div *ngIf=\"checkIsEmpty()\" class=\"line-top\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"line-bottom\">-->\r\n<!--    <mat-divider></mat-divider>-->\r\n<!--  </div>-->\r\n\r\n<!--  <div class=\"action\">-->\r\n<!--    <button class=\"btn-none-background-primary action__clear\" mat-button (click)=\"deleteAll()\">-->\r\n<!--      {{'FILTER-BUILDER.clearAllFilters' | translate}}-->\r\n<!--    </button>-->\r\n<!--    <button class=\"btn-background-primary\" mat-button (click)=\"doSearch()\">-->\r\n<!--      {{'FILTER-BUILDER.search' | translate}}-->\r\n<!--    </button>-->\r\n<!--  </div>-->\r\n</div>\r\n", styles: [".main-filter-builder{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0;display:flex;align-items:center;overflow:visible;min-height:48px}.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"] }]
         }], ctorParameters: () => [], propDecorators: { columns: [{
                 type: Input
             }], isChecked: [{
@@ -2347,10 +2407,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], pageInfo: [{
                 type: Input
+            }], pendingFilters: [{
+                type: Input
             }], filterInformation: [{
                 type: Output
             }], isEmpty: [{
                 type: Output
+            }], applyFilter: [{
+                type: Output
             }] } });
 
 class BaseTableComponent extends BaseUtils {
@@ -2388,6 +2452,7 @@ class BaseTableComponent extends BaseUtils {
         this.pageSize = 15;
         this.selectedStatusFilter = [];
         this.advancedAppliedFilter = [];
+        this.pendingFilters = [];
         this.searchStr = '';
         this.filterRequest = new FilterRequest();
         this.pageInfo = EMPTY_PAGE_INFO;
@@ -2412,6 +2477,7 @@ class BaseTableComponent extends BaseUtils {
         this.noDataFound = false;
         this.totalRequiredCountItem = 0;
         this.clickRoutePage = new EventEmitter();
+        this.sortState = {};
         this.groupNames = [];
         this.groupSpans = new Map();
         this.dataSource = new MatTableDataSource();
@@ -2461,6 +2527,33 @@ class BaseTableComponent extends BaseUtils {
         this.buildGroups();
         return this.columns.filter(column => column.visible).map(column => column.property);
     }
+    get visibleColumnsArray() {
+        return this.visibleColumns;
+    }
+    getColumn(property) {
+        return this.columns.find(c => c.property === property);
+    }
+    getSortDirection(property) {
+        if (this.reportRequest?.filterRequest?.sortKey === property) {
+            return this.reportRequest.filterRequest.sortDirection === 'ASC' ? 'asc' : 'desc';
+        }
+        return '';
+    }
+    handleSortClick(property) {
+        const COLUMN = this.getColumn(property);
+        if (!COLUMN || !COLUMN.enableSorting) {
+            return;
+        }
+        const CURRENT_DIRECTION = this.getSortDirection(property);
+        let NEW_DIRECTION = 'asc';
+        if (CURRENT_DIRECTION === 'asc') {
+            NEW_DIRECTION = 'desc';
+        }
+        this.onSortAction({
+            active: property,
+            direction: NEW_DIRECTION
+        });
+    }
     getNext(pageIndex) {
         this.reportRequest.filterRequest.pageIndex = pageIndex;
         this.reportRequest.filterRequest.pageSize = this.pageSize;
@@ -2717,15 +2810,30 @@ class BaseTableComponent extends BaseUtils {
             this.loadData();
         }
     }
+    storePendingFilters($event) {
+        this.pendingFilters = $event || [];
+    }
+    applyPendingFilters() {
+        this.advancedAppliedFilter = this.pendingFilters || [];
+        this.loadData();
+    }
+    handleFilterEmpty($event) {
+        if ($event) {
+            this.pendingFilters = [];
+            this.advancedAppliedFilter = [];
+            this.loadData();
+        }
+    }
     resetData($event) {
         if ($event) {
             this.advancedAppliedFilter = [];
+            this.pendingFilters = [];
             this.loadData();
             // this.paginator.firstPage();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: ShareDataService }, { token: 'securityManager' }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseTableComponent, isStandalone: true, selector: "app-base-table", inputs: { filterFields: "filterFields", noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", enablePagination: "enablePagination", data: "data", listAction: "listAction", columns: "columns", filters: "filters", pathParam: "pathParam", extraButton: "extraButton", enforceRefresh: "enforceRefresh", isPending: "isPending", trigger: "trigger", reportRequest: "reportRequest", separateEndpointData: "separateEndpointData", manageablePages: "manageablePages", totalPagesCount: "totalPagesCount", currentPageIndex: "currentPageIndex", customizedData: "customizedData" }, outputs: { pageChange: "pageChange", userAction: "userAction", hyperLinkAction: "hyperLinkAction", extraAction: "extraAction", selectedColumn: "selectedColumn", listActionClicked: "listActionClicked", showDialog: "showDialog", clickRoutePage: "clickRoutePage" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      (filterInformation)=\"doAdvancedSearch($event)\"\r\n      (isEmpty)=\"resetData($event)\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" >\r\n\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        color=\"primary\"\r\n        class=\"btn-none-background-primary 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\">arrow_drop_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        <table [dataSource]=\"dataSource\" class=\"flex-fill\" mat-table matSort (matSortChange)=\"onSortAction($event)\">\r\n          <ng-container *ngFor=\"let column of this.columns; let last=last\">\r\n            <ng-container matColumnDef=\"{{column.property}}\">\r\n              <ng-container *ngIf=\"column.enableSorting; else withoutSortingColumn\">\r\n                <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell mat-sort-header>\r\n                  {{ labelKey(column) | translate }}\r\n                </th>\r\n              </ng-container>\r\n              <ng-template #withoutSortingColumn>\r\n                <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}</th>\r\n              </ng-template>\r\n\r\n              <ng-container [ngSwitch]=\"column.type\">\r\n                <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(element)}}\" [attr.id]=\"'table-btn-wf-'+column.property+'-'+(element.id || element.key || '')\">{{ getStatusDescription(element) }}</button>\r\n                  </td>\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(element)}}\" [attr.id]=\"'table-btn-wf2-'+column.property+'-'+(element.id || element.key || '')\">{{ getStatusDescription(element) }}</button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" (click)=\"hyperLinkClicked(column.property,element)\" mat-cell>\r\n                    <mat-label [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(element)}\">\r\n                      {{ extractFieldName(element, column.property) }}\r\n                    </mat-label>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'button'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <button *ngIf=\"shouldShowButton(element)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(column.property, element)\" [attr.id]=\"'table-btn-action-'+column.property\">\r\n                      {{ labelKey(column) + '_title' | translate }}\r\n                    </button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'icon'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td\" mat-cell>\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': element[column.property] === 'pass',\r\n                      'mainTable__td__icon-orange': element[column.property] === 'warning',\r\n                      'mainTable__td__icon-red': element[column.property] === 'error'\r\n                    }\">\r\n                      {{ getIcon(element[column.property]) }}\r\n                    </mat-icon>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <mat-checkbox class=\"primary\" [checked]=\"element[column.property]\" (click)=\"$event.stopPropagation();actionCheckedClicked(column.property,element)\"></mat-checkbox>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'stateType'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <button mat-button class=\"stateType {{ element[column.property]}}\" [attr.id]=\"'table-btn-state-'+column.property\">{{ labelKeyByValue(column, element) | translate}}</button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    {{ extractFieldName(element, column.property) | date:'yyyy-MM-dd' }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    {{ getCroppedText(element[column.property], element[column.width]) }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'download'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" style=\"padding: 0;margin: 0;text-align: center;\" mat-cell>\r\n                    <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'onOff'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <mat-icon *ngIf=\"element[column.property] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"element[column.property] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"element[column.property] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'status'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <span *ngIf=\"element[column.property] === null || element[column.property] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"element[column.property] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + column.label + 'Active' | translate }}\r\n                    </span>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'info'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td text-secondary\" mat-cell>\r\n                    <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(element)\" [attr.id]=\"'table-btn-info-'+element.id\">\r\n                      <mat-icon>info</mat-icon>\r\n                    </button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <small><sup class=\"mainTable__td__currency\">{{element[column.currency]}}</sup></small>\r\n                    <span class=\"mainTable__td__property\">{{ extractFieldName(element, column.property) | currency:element[column.currency] :'' }}</span> of\r\n                    {{ extractFieldName(element, column.additionalProperty) | currency:element[column.currency] :'' }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    {{ extractFieldName(element, column.property) | date : extractFormat(column) }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <small><sup class=\"mainTable__td__currency\">{{element[column.currency]}}</sup></small>\r\n                    {{ extractFieldName(element, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'listAction'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" style=\"padding: 0!important;\" mat-cell>\r\n                    <app-button-actions \r\n                      [buttonsAction]=\"column.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\" \r\n                      [actions]=\"listAction\" \r\n                      (clickedButton)=\"actionListClicked($event,element)\">\r\n                    </app-button-actions>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchDefault>\r\n                  <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n                    <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" (click)=\"emitRoutePage(element)\" mat-cell>\r\n                      {{ extractFieldName(element, column.property) | translate }}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-template #noTranslate>\r\n                    <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" (click)=\"emitRoutePage(element)\" mat-cell [innerHtml]='extractFieldName(element, column.property)'></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"hasGroups()\">\r\n            <ng-container *ngFor=\"let groupName of this.groupNames\">\r\n              <ng-container matColumnDef=\"{{groupName}}\">\r\n                <th mat-header-cell class=\"extra-header\" *matHeaderCellDef [attr.colspan]=\"groupSpans.get(groupName)\">\r\n                  {{ (isHumanMade(groupName) ? groupName : \"\") | translate }}\r\n                </th>\r\n              </ng-container>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\"this.groupNames\"></tr>\r\n          </ng-container>\r\n\r\n          <tr *matHeaderRowDef=\"visibleColumns\" mat-header-row></tr>\r\n          <tr (auxclick)=\"openNewTab(row)\" (click)=\"$event.stopPropagation(); onSelectItem(row)\" *matRowDef=\"let row; columns: visibleColumns\"\r\n              [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n              [ngClass]=\"{\r\n                'mainTable__highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                'mainTable__dark_highlight': isDarkHighlight(row)\r\n              }\"\r\n              mat-row>\r\n          </tr>\r\n        </table>\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: [".flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.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}.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;align-items:center;width:100%;gap:12px}.filter-row app-filter-builder{flex:1}.button-group{width:15%;display:flex;justify-content:flex-end;gap:8px}.btn-export{height:44px!important}.arrow-icon{font-size:20px;margin-left:4px}@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%}}.stateType{font-size:14px!important}\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: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { 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"], 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"], outputs: ["filterInformation", "isEmpty"] }, { 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: [] }); }
+    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: [] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
@@ -2773,7 +2881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenu,
                         MatMenuItem,
                         UpperCasePipe,
-                    ], template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      (filterInformation)=\"doAdvancedSearch($event)\"\r\n      (isEmpty)=\"resetData($event)\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" >\r\n\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        color=\"primary\"\r\n        class=\"btn-none-background-primary 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\">arrow_drop_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        <table [dataSource]=\"dataSource\" class=\"flex-fill\" mat-table matSort (matSortChange)=\"onSortAction($event)\">\r\n          <ng-container *ngFor=\"let column of this.columns; let last=last\">\r\n            <ng-container matColumnDef=\"{{column.property}}\">\r\n              <ng-container *ngIf=\"column.enableSorting; else withoutSortingColumn\">\r\n                <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell mat-sort-header>\r\n                  {{ labelKey(column) | translate }}\r\n                </th>\r\n              </ng-container>\r\n              <ng-template #withoutSortingColumn>\r\n                <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}</th>\r\n              </ng-template>\r\n\r\n              <ng-container [ngSwitch]=\"column.type\">\r\n                <ng-container *ngSwitchCase=\"'workflowStatus'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(element)}}\" [attr.id]=\"'table-btn-wf-'+column.property+'-'+(element.id || element.key || '')\">{{ getStatusDescription(element) }}</button>\r\n                  </td>\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <button mat-button class=\"wfStatus {{ getStatusDescription(element)}}\" [attr.id]=\"'table-btn-wf2-'+column.property+'-'+(element.id || element.key || '')\">{{ getStatusDescription(element) }}</button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" (click)=\"hyperLinkClicked(column.property,element)\" mat-cell>\r\n                    <mat-label [ngClass]=\"{'hyper-link': shouldRenderAsHyperLink(element)}\">\r\n                      {{ extractFieldName(element, column.property) }}\r\n                    </mat-label>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'button'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <button *ngIf=\"shouldShowButton(element)\" mat-button class=\"primary\" (click)=\"$event.stopPropagation(); actionButtonClicked(column.property, element)\" [attr.id]=\"'table-btn-action-'+column.property\">\r\n                      {{ labelKey(column) + '_title' | translate }}\r\n                    </button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'icon'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td\" mat-cell>\r\n                    <mat-icon [ngClass]=\"{\r\n                      'mainTable__td__icon-green': element[column.property] === 'pass',\r\n                      'mainTable__td__icon-orange': element[column.property] === 'warning',\r\n                      'mainTable__td__icon-red': element[column.property] === 'error'\r\n                    }\">\r\n                      {{ getIcon(element[column.property]) }}\r\n                    </mat-icon>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'checkbox'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <mat-checkbox class=\"primary\" [checked]=\"element[column.property]\" (click)=\"$event.stopPropagation();actionCheckedClicked(column.property,element)\"></mat-checkbox>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'stateType'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary\" mat-cell>\r\n                    <button mat-button class=\"stateType {{ element[column.property]}}\" [attr.id]=\"'table-btn-state-'+column.property\">{{ labelKeyByValue(column, element) | translate}}</button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'date'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    {{ extractFieldName(element, column.property) | date:'yyyy-MM-dd' }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'croppedText'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    {{ getCroppedText(element[column.property], element[column.width]) }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'download'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" style=\"padding: 0;margin: 0;text-align: center;\" mat-cell>\r\n                    <mat-icon class=\"mainTable__td__icon-blue\">system_update_alt</mat-icon>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'onOff'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <mat-icon *ngIf=\"element[column.property] === null\" class=\"mainTable__td__icon-darkorange\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"element[column.property] === false\" class=\"mainTable__td__icon-red\">flag</mat-icon>\r\n                    <mat-icon *ngIf=\"element[column.property] === true\" class=\"mainTable__td__icon-green\">flag</mat-icon>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'status'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <span *ngIf=\"element[column.property] === null || element[column.property] === false\">\r\n                      {{ pageInfo.labelsSection + '.' + column.label + 'InActive' | translate }}\r\n                    </span>\r\n                    <span *ngIf=\"element[column.property] === true\">\r\n                      {{ pageInfo.labelsSection + '.' + column.label + 'Active' | translate }}\r\n                    </span>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'info'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td text-secondary\" mat-cell>\r\n                    <button mat-icon-button (click)=\"$event.stopPropagation();emitEvent(element)\" [attr.id]=\"'table-btn-info-'+element.id\">\r\n                      <mat-icon>info</mat-icon>\r\n                    </button>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'netAmount'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <small><sup class=\"mainTable__td__currency\">{{element[column.currency]}}</sup></small>\r\n                    <span class=\"mainTable__td__property\">{{ extractFieldName(element, column.property) | currency:element[column.currency] :'' }}</span> of\r\n                    {{ extractFieldName(element, column.additionalProperty) | currency:element[column.currency] :'' }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'localDateTime'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    {{ extractFieldName(element, column.property) | date : extractFormat(column) }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'bigdecimal'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                    <small><sup class=\"mainTable__td__currency\">{{element[column.currency]}}</sup></small>\r\n                    {{ extractFieldName(element, column.property) | number : (column.digitInfo || '1.3-5') }}\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchCase=\"'listAction'\">\r\n                  <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" style=\"padding: 0!important;\" mat-cell>\r\n                    <app-button-actions \r\n                      [buttonsAction]=\"column.viewType === 'buttonsAction'\"\r\n                      [listAction]=\"listAction\" \r\n                      [actions]=\"listAction\" \r\n                      (clickedButton)=\"actionListClicked($event,element)\">\r\n                    </app-button-actions>\r\n                  </td>\r\n                </ng-container>\r\n\r\n                <ng-container *ngSwitchDefault>\r\n                  <ng-container *ngIf=\"column.translate; else noTranslate\">\r\n                    <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" (click)=\"emitRoutePage(element)\" mat-cell>\r\n                      {{ extractFieldName(element, column.property) | translate }}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-template #noTranslate>\r\n                    <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" (click)=\"emitRoutePage(element)\" mat-cell [innerHtml]='extractFieldName(element, column.property)'></td>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"hasGroups()\">\r\n            <ng-container *ngFor=\"let groupName of this.groupNames\">\r\n              <ng-container matColumnDef=\"{{groupName}}\">\r\n                <th mat-header-cell class=\"extra-header\" *matHeaderCellDef [attr.colspan]=\"groupSpans.get(groupName)\">\r\n                  {{ (isHumanMade(groupName) ? groupName : \"\") | translate }}\r\n                </th>\r\n              </ng-container>\r\n            </ng-container>\r\n            <tr mat-header-row *matHeaderRowDef=\"this.groupNames\"></tr>\r\n          </ng-container>\r\n\r\n          <tr *matHeaderRowDef=\"visibleColumns\" mat-header-row></tr>\r\n          <tr (auxclick)=\"openNewTab(row)\" (click)=\"$event.stopPropagation(); onSelectItem(row)\" *matRowDef=\"let row; columns: visibleColumns\"\r\n              [attr.id]=\"'table-row-' + (row?.id || row?.key || '')\"\r\n              [ngClass]=\"{\r\n                'mainTable__highlight': selectedRowIndex == row.id || (pageInfo.groupByProperty && pageInfo.groupByValue?.includes(row[pageInfo.groupByProperty])),\r\n                'mainTable__dark_highlight': isDarkHighlight(row)\r\n              }\"\r\n              mat-row>\r\n          </tr>\r\n        </table>\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: [".flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.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}.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;align-items:center;width:100%;gap:12px}.filter-row app-filter-builder{flex:1}.button-group{width:15%;display:flex;justify-content:flex-end;gap:8px}.btn-export{height:44px!important}.arrow-icon{font-size:20px;margin-left:4px}@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%}}.stateType{font-size:14px!important}\n"] }]
+                    ], template: "<div class=\"flex-column baseTable\">\r\n  <div class=\"flex-row flex-100\" *ngIf=\"!pageInfo.hideTitle\">\r\n    <div [class.flex-50]=\"pageInfo.draftSupported\" [class.flex-100]=\"!pageInfo.draftSupported\" class=\"flex-column align-start\">\r\n      <app-title-bar\r\n        [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n        [titleMode]=\"''\"\r\n        [newAction]=\"showAddNew()\"\r\n        [showExtractButton]=\"!pageInfo.hideExtractButton\"\r\n        [extraButton]=\"extraButton\"\r\n        (newActionClicked)=\"onAddNewAction($event)\"\r\n        (extractReport)=\"extractReport($event)\"\r\n        [totalElements]=\"pageInfo.hideTitle ? undefined : totalElements\">\r\n      </app-title-bar>\r\n    </div>\r\n    <div class=\"flex-50 flex-column align-end\" *ngIf=\"pageInfo.draftSupported\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\" (click)=\"switchViewMode(false)\">\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\" (click)=\"switchViewMode(true)\">\r\n          {{'todo' | translate}}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"filter-row\" *ngIf=\"!pageInfo.hideAdvancedFilter\">\r\n    <app-filter-builder\r\n      *ngIf=\"!pageInfo.hideAdvancedFilter\"\r\n      [pageInfo]=\"pageInfo\"\r\n      [columns]=\"columns\"\r\n      [filterFields]=\"filterFields\"\r\n      [pendingFilters]=\"pendingFilters\"\r\n      (filterInformation)=\"storePendingFilters($event)\"\r\n      (isEmpty)=\"handleFilterEmpty($event)\"\r\n      (applyFilter)=\"applyPendingFilters()\">\r\n    </app-filter-builder>\r\n\r\n    <div class=\"button-group\" *ngIf=\"!pageInfo.hideExtractButton\">\r\n      <button *ngIf=\"!pageInfo.hideExtractButton\"\r\n        mat-flat-button\r\n        [matMenuTriggerFor]=\"exportMenu\"\r\n        class=\"btn-export\"\r\n      >\r\n        <div class=\"button-text\">\r\n          <mat-icon>file_export</mat-icon>\r\n          <span>{{ 'export' | translate }}</span>\r\n          <mat-icon class=\"arrow-icon\">keyboard_arrow_down</mat-icon>\r\n        </div>\r\n      </button>\r\n\r\n      <mat-menu #exportMenu=\"matMenu\">\r\n        <button\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"] }]
         }], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: ShareDataService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['securityManager']
@@ -2958,7 +3066,7 @@ class AuditLogComponent {
        ${this.translateService.instant('audit-log.executed')} ${this.translateService.instant(auditLog.action.toString())}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, deps: [{ token: i1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i1$1.DatePipe }, { token: i2.TranslateService }, { token: i2$2.Router }, { token: i5.Directionality }, { token: 'securityManager' }, { token: BackendService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogComponent, isStandalone: true, selector: "app-audit-log", inputs: { pageInfo: "pageInfo", fields: "fields", showHiddenFields: "showHiddenFields" }, providers: [DatePipe], ngImport: i0, template: "<h4>\r\n  <span class=\"audit-log-title\">{{ 'audit-log.title' | translate }}</span>\r\n</h4>\r\n\r\n<div class=\"hrdivider-mini\">\r\n  <hr class=\"header-hr\" />\r\n</div>\r\n\r\n<div class=\"audit-log-container\" *ngFor=\"let auditLog of auditLogEntries; let i = index\">\r\n  <div class=\"audit-log-entry\">\r\n    <p *ngIf=\"i === 0\" class=\"audit-log-spacer\"></p>\r\n\r\n    <p class=\"audit-log-text\">\r\n      {{ getDescription(auditLog) }}\r\n      <button mat-stroked-button color=\"secondary\" (click)=\"viewObject(auditLog)\" [attr.id]=\"'audit-view-details-' + i\">\r\n        {{ 'audit-log.view_details' | translate }}\r\n      </button>\r\n    </p>\r\n\r\n    <p class=\"invoice-label-text\"></p>\r\n\r\n    <div class=\"hrdivider-mini\">\r\n      <hr class=\"header-hr\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".audit-log-title{font-weight:400;color:#222}.hrdivider-mini{width:100%}.header-hr{height:4px;background-color:#339dff;border:none;margin:5px 0}.audit-log-container{display:flex;flex-direction:row;gap:5px;justify-content:flex-start;align-items:flex-start;width:100%;flex-wrap:wrap}.audit-log-entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 100%}.audit-log-spacer{margin-bottom:15px;margin-top:0}.audit-log-text{margin:0;word-wrap:break-word}@media (max-width: 960px){.audit-log-container{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogComponent, isStandalone: true, selector: "app-audit-log", inputs: { pageInfo: "pageInfo", fields: "fields", showHiddenFields: "showHiddenFields" }, providers: [DatePipe], ngImport: i0, template: "<h4>\r\n  <span class=\"audit-log-title\">{{ 'audit-log.title' | translate }}</span>\r\n</h4>\r\n\r\n<div class=\"hrdivider-mini\">\r\n  <hr class=\"header-hr\" />\r\n</div>\r\n\r\n<div class=\"audit-log-container\" *ngFor=\"let auditLog of auditLogEntries; let i = index\">\r\n  <div class=\"audit-log-entry\">\r\n    <p *ngIf=\"i === 0\" class=\"audit-log-spacer\"></p>\r\n\r\n    <p class=\"audit-log-text\">\r\n      {{ getDescription(auditLog) }}\r\n      <button mat-stroked-button color=\"secondary\" (click)=\"viewObject(auditLog)\" [attr.id]=\"'audit-view-details-' + i\">\r\n        {{ 'audit-log.view_details' | translate }}\r\n      </button>\r\n    </p>\r\n\r\n    <p class=\"invoice-label-text\"></p>\r\n\r\n    <div class=\"hrdivider-mini\">\r\n      <hr class=\"header-hr\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".audit-log-title{font-weight:400;color:#222}.hrdivider-mini{width:100%}.header-hr{height:4px;background-color:#339dff;border:none;margin:5px 0}.audit-log-container{display:flex;flex-direction:row;gap:5px;justify-content:flex-start;align-items:flex-start;width:100%;flex-wrap:wrap}.audit-log-entry{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 100%}.audit-log-spacer{margin-bottom:15px;margin-top:0}.audit-log-text{margin:0;word-wrap:break-word}@media (max-width: 960px){.audit-log-container{flex-direction:column;align-items:stretch}}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, decorators: [{
             type: Component,
@@ -3120,14 +3228,14 @@ class EquationBuilderComponent {
         this.emitChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EquationBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EquationBuilderComponent, isStandalone: true, selector: "lib-equation-builder", inputs: { form: "form", field: "field", isPending: "isPending", readOnly: "readOnly" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"flex-row gap-10 fill align-start-center\">\r\n  <ng-container *ngFor=\"let item of items; let i = index\">\r\n    <div class=\"flex-row align-start-center gap-5\">\r\n      <ng-container [ngSwitch]=\"item.type\">\r\n        <ng-container *ngSwitchCase=\"'lookup'\">\r\n          <app-auto-complete\r\n            class=\"flex-full\"\r\n            [field]=\"field\"\r\n            [form]=\"form\"\r\n            [defaultValue]=\"item.value\"\r\n            (selectedValue)=\"onLookupChange(i, $event)\">\r\n          </app-auto-complete>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n          <mat-form-field class=\"flex-none\" appearance=\"outline\" style=\"width: 100px\">\r\n            <mat-select [disabled]=\"readOnly\" [value]=\"item.value\" (selectionChange)=\"onDropdownChange(i, $event.value)\">\r\n              <mat-option *ngFor=\"let opt of operators\" [value]=\"opt.value\">\r\n                {{ opt.label }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <button [disabled]=\"isPending\" mat-icon-button color=\"warn\" (click)=\"onClearAll()\" *ngIf=\"items.length > 0\" id=\"equation-clear-all-btn\">\r\n    <mat-icon>delete</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-full{flex:1 1 auto}.flex-none{flex:0 0 auto}.fill{width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-5{gap:5px}.gap-10{gap:10px}\n"], dependencies: [{ kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EquationBuilderComponent, isStandalone: true, selector: "lib-equation-builder", inputs: { form: "form", field: "field", isPending: "isPending", readOnly: "readOnly" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"flex-row gap-10 fill align-start-center\">\r\n  <ng-container *ngFor=\"let item of items; let i = index\">\r\n    <div class=\"flex-row align-start-center gap-5\">\r\n      <ng-container [ngSwitch]=\"item.type\">\r\n        <ng-container *ngSwitchCase=\"'lookup'\">\r\n          <app-auto-complete\r\n            class=\"flex-full\"\r\n            [field]=\"field\"\r\n            [form]=\"form\"\r\n            [defaultValue]=\"item.value\"\r\n            (selectedValue)=\"onLookupChange(i, $event)\">\r\n          </app-auto-complete>\r\n        </ng-container>\r\n\r\n        <ng-container *ngSwitchCase=\"'dropdown'\">\r\n          <mat-form-field class=\"flex-none\" appearance=\"outline\" style=\"width: 100px\">\r\n            <mat-select [disabled]=\"readOnly\" [value]=\"item.value\" (selectionChange)=\"onDropdownChange(i, $event.value)\">\r\n              <mat-option *ngFor=\"let opt of operators\" [value]=\"opt.value\">\r\n                {{ opt.label }}\r\n              </mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <button [disabled]=\"isPending\" mat-icon-button color=\"warn\" (click)=\"onClearAll()\" *ngIf=\"items.length > 0\" id=\"equation-clear-all-btn\">\r\n    <mat-icon>delete</mat-icon>\r\n  </button>\r\n</div>\r\n", styles: [".flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-full{flex:1 1 auto}.flex-none{flex:0 0 auto}.fill{width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-5{gap:5px}.gap-10{gap:10px}\n"], dependencies: [{ kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EquationBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-equation-builder', standalone: true, imports: [
                         AutoCompleteComponent,
                         MatSelect,
-                        MatOption,
+                        MatOption$1,
                         MatFormField$1,
                         NgSwitch,
                         NgForOf,
@@ -3517,7 +3625,7 @@ class EditableBaseTableComponent extends BaseUtils {
         //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
         // },
         // { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        ], viewQueries: [{ propertyName: "uploaderComponent", first: true, predicate: ["uploader"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"baseTable flex-column\">\r\n  <div class=\"left-align\">\r\n    <app-attachment-uploader #uploader\r\n                             *ngIf=\"isBulkItemsSupported\"\r\n                             (fileSelected)=\"handleFileUpload($event)\">\r\n    </app-attachment-uploader>\r\n  </div>\r\n\r\n  <div class=\"flex-row full-width\">\r\n    <div class=\"flex-half flex-column align-center-start\">\r\n      <app-title-bar [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n                     [titleMode]=\"''\"\r\n                     [newAction]=\"false\"\r\n                     [showExtractButton]=\"!pageInfo.hideExtractButton\">\r\n      </app-title-bar>\r\n      <span class=\"font-small\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n    </div>\r\n    <div class=\"flex-half flex-column align-start-end\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\" *ngIf=\"pageInfo.draftSupported\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\"\r\n                         (click)=\"switchViewMode(false)\">{{ 'finished' | translate }}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\"\r\n                         (click)=\"switchViewMode(true)\">{{ 'todo' | translate }}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"showSearch()\">\r\n    <div class=\"flex-row full-width\">\r\n      <div class=\"flex-80 flex-column align-start-end\">\r\n        <app-base-form-canvas class=\"flex-fill\"\r\n                              [pageInfo]=\"pageInfo\"\r\n                              [fields]=\"searchFormFields\"\r\n                              [editable]=\"true\"\r\n                              (formUpdated)=\"updateSearchForm($event)\">\r\n        </app-base-form-canvas>\r\n      </div>\r\n      <div class=\"flex-15 flex-column align-start-end\">\r\n        <div class=\"flex-row align-center-center gap-8 full-width\">\r\n          <button mat-button color=\"primary\" type=\"button\" (click)=\"doSearch()\" id=\"editable-search-btn\">\r\n            <mat-icon>search</mat-icon>\r\n            {{ 'search' | translate }}\r\n          </button>\r\n          <button mat-button color=\"primary\" type=\"button\" (click)=\"clearSearch()\" id=\"editable-clear-search-btn\">\r\n            <mat-icon>clear</mat-icon>\r\n            {{ 'clear' | translate }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"flex-row full-width baseTable__detailsColumn\">\r\n    <div class=\"flex-full\">\r\n      <ng-container *ngIf=\"isLoaded\">\r\n        <div class=\"flex-row mainTable gap-0 align-start-start\">\r\n          <form [formGroup]=\"formParam\" class=\"flex-fill\">\r\n            <table [dataSource]=\"dataFormArray.controls\" class=\"flex-fill\" mat-table matSort>\r\n              <ng-container *ngFor=\"let column of this.fields; let i = index\">\r\n                <ng-container matColumnDef=\"{{column.property}}\">\r\n                  <ng-container [ngSwitch]=\"column.type\">\r\n                    <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\" mat-cell>\r\n                        <lib-equation-builder\r\n                          [form]=\"element\"\r\n                          [field]=\"column\"\r\n                          [readOnly]=\"column.readonly\"\r\n                          [isPending]=\"isPending\"\r\n                          (valueChanged)=\"handleEquationChange($event, element, column)\">\r\n                        </lib-equation-builder>\r\n                      </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngSwitchCase=\"'lookup'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <app-auto-complete\r\n                          [form]=\"element\"\r\n                          [field]=\"column\"\r\n                          [defaultValue]=\"element.get(column.property)?.value\"\r\n                          (selectedValue)=\"patchLookupValue($event, column.property)\">\r\n                        </app-auto-complete>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'list'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}</th>\r\n                      <td  *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                           [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                           mat-cell>\r\n                        <mat-label>{{element}}</mat-label>\r\n                        <mat-select\r\n                          formControlName=\"{{column.property}}\"\r\n                          [attr.aria-label]=\"column.label! | translate\"\r\n                          [multiple]=\"false\"\r\n                          [(value)]=\"element[column.property]\">\r\n                          <ng-container>\r\n                            <mat-option\r\n                              *ngFor=\"let item of column.listOptions\"\r\n                              [value]=\"item\">\r\n                              {{ getOptionValue(item) }}\r\n                            </mat-option>\r\n                          </ng-container>\r\n                        </mat-select>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'stateType'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ 'action' | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                        <div class=\"flex-column\">\r\n                          <div class=\"flex-row full-width\">\r\n                            <div class=\"flex-third flex-column align-center-center\">\r\n                              <button mat-button class=\"btn-none-background-primary\"\r\n                                      color=\"primary\"\r\n                                      [disabled]=\"disabledSaveButton(element)\"\r\n                                      (click)=\"fieldButtonEvent(column,element,SAVE)\"\r\n                                      [attr.id]=\"'editable-save-' + (element.value?.id || '')\">\r\n                                {{ getPositiveWfActionKey(element.value.stateType) | translate }}\r\n                              </button>\r\n                            </div>\r\n                            <div class=\"flex-third flex-column align-center-center\">\r\n                              <button *ngIf=\"isPending\" mat-button class=\"btn-none-background-primary\"\r\n                                      color=\"accent\"\r\n                                      (click)=\"fieldButtonEvent(column,element,REJECT)\"\r\n                                      [attr.id]=\"'editable-reject-' + (element.value?.id || '')\">\r\n                                {{ getNegativeWfActionKey(element.value.stateType) | translate }}\r\n                              </button>\r\n                            </div>\r\n                            <div class=\"flex-third flex-column align-center-center\"></div>\r\n                          </div>\r\n                        </div>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'year'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <mat-label>{{ labelKey(column) | translate }}</mat-label>\r\n                          <input matInput\r\n                                 [disabled]=\"column.readonly\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [matDatepicker]=\"picker\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                          <mat-datepicker #picker startView=\"multi-year\"\r\n                                          (yearSelected)=\"setMonthAndYear($event, picker, element,column)\"\r\n                                          panelClass=\"example-month-picker\"></mat-datepicker>\r\n\r\n                        </mat-form-field>\r\n                        <!--                      <mat-form-field class=\"flex-auto\" appearance=\"outline\" fxFlexFill>-->\r\n                        <!--                        <input matInput [formControl]=\"getField(element, column)\">-->\r\n                        <!--                      </mat-form-field>-->\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'number'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <!-- Visually hidden label just to trigger the floating label and asterisk -->\r\n                          <mat-label>\r\n                          </mat-label>\r\n\r\n                          <input matInput\r\n                                 type=\"number\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'status'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-checkbox\r\n                          style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n                          [formControl]=\"getField(element, column)\"\r\n                          [required]=\"column.required\"\r\n                          [attr.aria-required]=\"column.required\"\r\n                          [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                          [attr.aria-describedby]=\"'error-' + column.property\"\r\n                          [style.pointer-events]=\"column.readonly ? 'none' : 'auto'\"\r\n                          [style.opacity]=\"column.readonly ? 0.7 : 1\"\r\n                          (click)=\"column.readonly ? $event.preventDefault() : null\">\r\n                        </mat-checkbox>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'text'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <mat-label>\r\n                            {{ labelKey(column) | translate }}\r\n                          </mat-label>\r\n                          <input matInput\r\n                                 type=\"text\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'date'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <input matInput\r\n                                 [matDatepicker]=\"xpicker\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [disabled]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                          <mat-datepicker-toggle\r\n                            matSuffix\r\n                            [for]=\"xpicker\"\r\n                            [disabled]=\"column.readonly\">\r\n                          </mat-datepicker-toggle>\r\n                          <mat-datepicker #xpicker></mat-datepicker>\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngSwitchDefault>\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <input matInput\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [formControl]=\"getField(element, column)\">\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <tr *matHeaderRowDef=\"visibleColumns\" mat-header-row></tr>\r\n              <tr (click)=\"onSelectItem(row)\" (auxclick)=\"openNewTab(row)\"\r\n                  *matRowDef=\"let row; columns: visibleColumns  | paginate:config\"\r\n                  [attr.id]=\"'editable-row-' + (row?.value?.id || row?.value?.key || '')\"\r\n                  mat-row></tr>\r\n            </table>\r\n          </form>\r\n        </div>\r\n\r\n        <div *ngIf=\"noDataFound && !pageInfo.lazyLoadData\" class=\"flex-row dataNotFound\">\r\n          <div class=\"flex-column flex-full\">\r\n            <span class=\"dataNotFound__details\">\r\n              <mat-icon class=\"dataNotFound__details__icon\">info</mat-icon>\r\n              <span>{{ 'dataNotFound' | translate }}</span>\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"flex-row mainTable\" *ngIf=\"!selectedFileFromUploader\">\r\n          <div>\r\n            <button *ngIf=\"!isPending && pageInfo.hasAddButton\" mat-button color=\"primary\" type=\"button\"\r\n                    (click)=\"addNewItem()\" id=\"editable-add-item-btn\">\r\n              <mat-icon>add_box</mat-icon>\r\n              {{ translationKey | translate }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"flex-row flex-wrap align-center-center main-pagination\" *ngIf=\"totalElements > 0\">\r\n          <div class=\"flex-column flex-full\">\r\n            <app-paginator [currentPage]=\"pageIndex\" [totalItems]=\"totalElements\" [pageSize]=\"pageSize\"\r\n                           [pageSizeOptions]=\"[5, 10, 25, 50]\" (pageChange)=\"onPageChange($event)\"\r\n                           (pageSizeChange)=\"onPageSizeChange($event)\"></app-paginator>\r\n          </div>\r\n          <div class=\"flex-column flex-full countItem hide-gt-xs\">\r\n            <span class=\"countItem__totalElement\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n          </div>\r\n          <div class=\"flex-column flex-2\"></div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"isBulkItemsSupported\" class=\"flex-row gap-10 align-start-start mainTable\">\r\n    <div>\r\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"addBulkItems()\" [disabled]=\"shouldDisableBulkAdd()\" id=\"editable-bulk-add-btn\">\r\n        <mat-icon>add_box</mat-icon>\r\n        {{ 'addAll' | translate }}\r\n      </button>\r\n    </div>\r\n    <div>\r\n      <button mat-flat-button color=\"warn\" type=\"button\" [disabled]=\"!hasDataToClear()\" (click)=\"clearBulkItems()\" id=\"editable-bulk-clear-btn\">\r\n        <mat-icon>delete</mat-icon>\r\n        {{ 'clearAll' | translate }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".baseTable{padding:20px}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.responsive-top-gap{margin-top:20px}@media (max-width: 959px){.responsive-top-gap{margin-top:1px}.baseTable{padding:20px;margin-inline:8px;width:max-content}}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-half{flex:0 0 50%}.flex-80{flex:0 0 80%}.flex-15{flex:0 0 15%}.flex-2{flex:0 0 2%}.flex-full{flex:0 0 100%}.align-start-start{justify-content:flex-start;align-items:flex-start}.align-start-end{justify-content:flex-end;align-items:flex-start}.align-center-start{justify-content:flex-start;align-items:center}.align-center-center{justify-content:center;align-items:center}.align-end-start{justify-content:flex-start;align-items:flex-end}.align-end-end{justify-content:flex-end;align-items:flex-end}.gap-8{gap:8px}.gap-10{gap:10px}.gap-0{gap:0px}@media (max-width: 959px){.flex-column.lt-md{flex-direction:column}.flex-row.lt-md{flex-direction:row}.flex-full.lt-md{flex:0 0 100%}.align-center-center.lt-md{justify-content:center;align-items:center}}@media (max-width: 599px){.flex-hide.gt-xs{display:none!important}}\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: i5$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i9$1.PaginatePipe, name: "paginate" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "component", type: MatFormField$2, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", outputs: ["fileSelected"] }, { kind: "component", type: EquationBuilderComponent, selector: "lib-equation-builder", inputs: ["form", "field", "isPending", "readOnly"], outputs: ["valueChanged"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "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"] }], animations: [] }); }
+        ], viewQueries: [{ propertyName: "uploaderComponent", first: true, predicate: ["uploader"], descendants: true }, { propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"baseTable flex-column\">\r\n  <div class=\"left-align\">\r\n    <app-attachment-uploader #uploader\r\n                             *ngIf=\"isBulkItemsSupported\"\r\n                             (fileSelected)=\"handleFileUpload($event)\">\r\n    </app-attachment-uploader>\r\n  </div>\r\n\r\n  <div class=\"flex-row full-width\">\r\n    <div class=\"flex-half flex-column align-center-start\">\r\n      <app-title-bar [pageTitle]=\"pageInfo.hideTitle ? '' : pageInfo.labelsSection+'.list_title'\"\r\n                     [titleMode]=\"''\"\r\n                     [newAction]=\"false\"\r\n                     [showExtractButton]=\"!pageInfo.hideExtractButton\">\r\n      </app-title-bar>\r\n      <span class=\"font-small\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n    </div>\r\n    <div class=\"flex-half flex-column align-start-end\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\" *ngIf=\"pageInfo.draftSupported\">\r\n        <mat-chip-option [selected]=\"!this.isPending\" [color]=\"'accent'\" [value]=\"'COMPLETED'\"\r\n                         (click)=\"switchViewMode(false)\">{{ 'finished' | translate }}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"this.isPending\" [color]=\"'accent'\" [value]=\"'PENDING'\"\r\n                         (click)=\"switchViewMode(true)\">{{ 'todo' | translate }}\r\n        </mat-chip-option>\r\n      </mat-chip-listbox>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"showSearch()\">\r\n    <div class=\"flex-row full-width\">\r\n      <div class=\"flex-80 flex-column align-start-end\">\r\n        <app-base-form-canvas class=\"flex-fill\"\r\n                              [pageInfo]=\"pageInfo\"\r\n                              [fields]=\"searchFormFields\"\r\n                              [editable]=\"true\"\r\n                              (formUpdated)=\"updateSearchForm($event)\">\r\n        </app-base-form-canvas>\r\n      </div>\r\n      <div class=\"flex-15 flex-column align-start-end\">\r\n        <div class=\"flex-row align-center-center gap-8 full-width\">\r\n          <button mat-button color=\"primary\" type=\"button\" (click)=\"doSearch()\" id=\"editable-search-btn\">\r\n            <mat-icon>search</mat-icon>\r\n            {{ 'search' | translate }}\r\n          </button>\r\n          <button mat-button color=\"primary\" type=\"button\" (click)=\"clearSearch()\" id=\"editable-clear-search-btn\">\r\n            <mat-icon>clear</mat-icon>\r\n            {{ 'clear' | translate }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"flex-row full-width baseTable__detailsColumn\">\r\n    <div class=\"flex-full\">\r\n      <ng-container *ngIf=\"isLoaded\">\r\n        <div class=\"flex-row mainTable gap-0 align-start-start\">\r\n          <form [formGroup]=\"formParam\" class=\"flex-fill\">\r\n            <table [dataSource]=\"dataFormArray.controls\" class=\"flex-fill\" mat-table matSort>\r\n              <ng-container *ngFor=\"let column of this.fields; let i = index\">\r\n                <ng-container matColumnDef=\"{{column.property}}\">\r\n                  <ng-container [ngSwitch]=\"column.type\">\r\n                    <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\" mat-cell>\r\n                        <lib-equation-builder\r\n                          [form]=\"element\"\r\n                          [field]=\"column\"\r\n                          [readOnly]=\"column.readonly\"\r\n                          [isPending]=\"isPending\"\r\n                          (valueChanged)=\"handleEquationChange($event, element, column)\">\r\n                        </lib-equation-builder>\r\n                      </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngSwitchCase=\"'lookup'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <app-auto-complete\r\n                          [form]=\"element\"\r\n                          [field]=\"column\"\r\n                          [defaultValue]=\"element.get(column.property)?.value\"\r\n                          (selectedValue)=\"patchLookupValue($event, column.property)\">\r\n                        </app-auto-complete>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'list'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}</th>\r\n                      <td  *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                           [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                           mat-cell>\r\n                        <mat-label>{{element}}</mat-label>\r\n                        <mat-select\r\n                          formControlName=\"{{column.property}}\"\r\n                          [attr.aria-label]=\"column.label! | translate\"\r\n                          [multiple]=\"false\"\r\n                          [(value)]=\"element[column.property]\">\r\n                          <ng-container>\r\n                            <mat-option\r\n                              *ngFor=\"let item of column.listOptions\"\r\n                              [value]=\"item\">\r\n                              {{ getOptionValue(item) }}\r\n                            </mat-option>\r\n                          </ng-container>\r\n                        </mat-select>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'stateType'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ 'action' | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td mainTable__td__text-secondary__td\" mat-cell>\r\n                        <div class=\"flex-column\">\r\n                          <div class=\"flex-row full-width\">\r\n                            <div class=\"flex-third flex-column align-center-center\">\r\n                              <button mat-button class=\"btn-none-background-primary\"\r\n                                      color=\"primary\"\r\n                                      [disabled]=\"disabledSaveButton(element)\"\r\n                                      (click)=\"fieldButtonEvent(column,element,SAVE)\"\r\n                                      [attr.id]=\"'editable-save-' + (element.value?.id || '')\">\r\n                                {{ getPositiveWfActionKey(element.value.stateType) | translate }}\r\n                              </button>\r\n                            </div>\r\n                            <div class=\"flex-third flex-column align-center-center\">\r\n                              <button *ngIf=\"isPending\" mat-button class=\"btn-none-background-primary\"\r\n                                      color=\"accent\"\r\n                                      (click)=\"fieldButtonEvent(column,element,REJECT)\"\r\n                                      [attr.id]=\"'editable-reject-' + (element.value?.id || '')\">\r\n                                {{ getNegativeWfActionKey(element.value.stateType) | translate }}\r\n                              </button>\r\n                            </div>\r\n                            <div class=\"flex-third flex-column align-center-center\"></div>\r\n                          </div>\r\n                        </div>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'year'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <mat-label>{{ labelKey(column) | translate }}</mat-label>\r\n                          <input matInput\r\n                                 [disabled]=\"column.readonly\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [matDatepicker]=\"picker\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                          <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                          <mat-datepicker #picker startView=\"multi-year\"\r\n                                          (yearSelected)=\"setMonthAndYear($event, picker, element,column)\"\r\n                                          panelClass=\"example-month-picker\"></mat-datepicker>\r\n\r\n                        </mat-form-field>\r\n                        <!--                      <mat-form-field class=\"flex-auto\" appearance=\"outline\" fxFlexFill>-->\r\n                        <!--                        <input matInput [formControl]=\"getField(element, column)\">-->\r\n                        <!--                      </mat-form-field>-->\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'number'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <!-- Visually hidden label just to trigger the floating label and asterisk -->\r\n                          <mat-label>\r\n                          </mat-label>\r\n\r\n                          <input matInput\r\n                                 type=\"number\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'status'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-checkbox\r\n                          style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n                          [formControl]=\"getField(element, column)\"\r\n                          [required]=\"column.required\"\r\n                          [attr.aria-required]=\"column.required\"\r\n                          [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                          [attr.aria-describedby]=\"'error-' + column.property\"\r\n                          [style.pointer-events]=\"column.readonly ? 'none' : 'auto'\"\r\n                          [style.opacity]=\"column.readonly ? 0.7 : 1\"\r\n                          (click)=\"column.readonly ? $event.preventDefault() : null\">\r\n                        </mat-checkbox>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'text'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <mat-label>\r\n                            {{ labelKey(column) | translate }}\r\n                          </mat-label>\r\n                          <input matInput\r\n                                 type=\"text\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n                    <ng-container *ngSwitchCase=\"'date'\">\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>\r\n                        {{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <input matInput\r\n                                 [matDatepicker]=\"xpicker\"\r\n                                 [formControl]=\"getField(element, column)\"\r\n                                 [required]=\"column.required\"\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [disabled]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [attr.aria-labelledby]=\"'label-' + column.property\"\r\n                                 [attr.aria-describedby]=\"'error-' + column.property\">\r\n                          <mat-datepicker-toggle\r\n                            matSuffix\r\n                            [for]=\"xpicker\"\r\n                            [disabled]=\"column.readonly\">\r\n                          </mat-datepicker-toggle>\r\n                          <mat-datepicker #xpicker></mat-datepicker>\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n\r\n                    <ng-container *ngSwitchDefault>\r\n                      <th *matHeaderCellDef class=\"mainTable__th\" mat-header-cell>{{ labelKey(column) | translate }}\r\n                      </th>\r\n                      <td *matCellDef=\"let element\" class=\"mainTable__td\"\r\n                          [ngClass]=\"['mainTable__td__text-secondary__td']\"\r\n                          mat-cell>\r\n                        <mat-form-field class=\"flex-auto fx-flex-fill\" appearance=\"outline\">\r\n                          <input matInput\r\n                                 [readonly]=\"column.readonly\"\r\n                                 [attr.aria-required]=\"column.required\"\r\n                                 [formControl]=\"getField(element, column)\">\r\n                        </mat-form-field>\r\n                      </td>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </ng-container>\r\n              </ng-container>\r\n              <tr *matHeaderRowDef=\"visibleColumns\" mat-header-row></tr>\r\n              <tr (click)=\"onSelectItem(row)\" (auxclick)=\"openNewTab(row)\"\r\n                  *matRowDef=\"let row; columns: visibleColumns  | paginate:config\"\r\n                  [attr.id]=\"'editable-row-' + (row?.value?.id || row?.value?.key || '')\"\r\n                  mat-row></tr>\r\n            </table>\r\n          </form>\r\n        </div>\r\n\r\n        <div *ngIf=\"noDataFound && !pageInfo.lazyLoadData\" class=\"flex-row dataNotFound\">\r\n          <div class=\"flex-column flex-full\">\r\n            <span class=\"dataNotFound__details\">\r\n              <mat-icon class=\"dataNotFound__details__icon\">info</mat-icon>\r\n              <span>{{ 'dataNotFound' | translate }}</span>\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"flex-row mainTable\" *ngIf=\"!selectedFileFromUploader\">\r\n          <div>\r\n            <button *ngIf=\"!isPending && pageInfo.hasAddButton\" mat-button color=\"primary\" type=\"button\"\r\n                    (click)=\"addNewItem()\" id=\"editable-add-item-btn\">\r\n              <mat-icon>add_box</mat-icon>\r\n              {{ translationKey | translate }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"flex-row flex-wrap align-center-center main-pagination\" *ngIf=\"totalElements > 0\">\r\n          <div class=\"flex-column flex-full\">\r\n            <app-paginator [currentPage]=\"pageIndex\" [totalItems]=\"totalElements\" [pageSize]=\"pageSize\"\r\n                           [pageSizeOptions]=\"[5, 10, 25, 50]\" (pageChange)=\"onPageChange($event)\"\r\n                           (pageSizeChange)=\"onPageSizeChange($event)\"></app-paginator>\r\n          </div>\r\n          <div class=\"flex-column flex-full countItem hide-gt-xs\">\r\n            <span class=\"countItem__totalElement\">{{ 'totalCountItem' | translate }} : {{ this.totalElements }}</span>\r\n          </div>\r\n          <div class=\"flex-column flex-2\"></div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"isBulkItemsSupported\" class=\"flex-row gap-10 align-start-start mainTable\">\r\n    <div>\r\n      <button mat-flat-button color=\"primary\" type=\"button\" (click)=\"addBulkItems()\" [disabled]=\"shouldDisableBulkAdd()\" id=\"editable-bulk-add-btn\">\r\n        <mat-icon>add_box</mat-icon>\r\n        {{ 'addAll' | translate }}\r\n      </button>\r\n    </div>\r\n    <div>\r\n      <button mat-flat-button color=\"warn\" type=\"button\" [disabled]=\"!hasDataToClear()\" (click)=\"clearBulkItems()\" id=\"editable-bulk-clear-btn\">\r\n        <mat-icon>delete</mat-icon>\r\n        {{ 'clearAll' | translate }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".baseTable{padding:20px}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.responsive-top-gap{margin-top:20px}@media (max-width: 959px){.responsive-top-gap{margin-top:1px}.baseTable{padding:20px;margin-inline:8px;width:max-content}}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.flex-half{flex:0 0 50%}.flex-80{flex:0 0 80%}.flex-15{flex:0 0 15%}.flex-2{flex:0 0 2%}.flex-full{flex:0 0 100%}.align-start-start{justify-content:flex-start;align-items:flex-start}.align-start-end{justify-content:flex-end;align-items:flex-start}.align-center-start{justify-content:flex-start;align-items:center}.align-center-center{justify-content:center;align-items:center}.align-end-start{justify-content:flex-start;align-items:flex-end}.align-end-end{justify-content:flex-end;align-items:flex-end}.gap-8{gap:8px}.gap-10{gap:10px}.gap-0{gap:0px}@media (max-width: 959px){.flex-column.lt-md{flex-direction:column}.flex-row.lt-md{flex-direction:row}.flex-full.lt-md{flex:0 0 100%}.align-center-center.lt-md{justify-content:center;align-items:center}}@media (max-width: 599px){.flex-hide.gt-xs{display:none!important}}\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: i7$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { 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: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "ngmodule", type: NgxPaginationModule }, { kind: "pipe", type: i9$1.PaginatePipe, name: "paginate" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "component", type: MatFormField$2, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", outputs: ["fileSelected"] }, { kind: "component", type: EquationBuilderComponent, selector: "lib-equation-builder", inputs: ["form", "field", "isPending", "readOnly"], outputs: ["valueChanged"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "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"] }], animations: [] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableBaseTableComponent, decorators: [{
             type: Component,
@@ -3883,7 +3991,7 @@ class BaseFormComponent extends BaseUtils {
         return (!this.isPending && element.stateType == 'PENDING') && this.pageInfo.draftSupported;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, deps: [{ token: i1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: i5.Directionality }, { token: i1$1.Location }, { token: 'securityManager' }, { token: BackendService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseFormComponent, isStandalone: true, selector: "app-base-form", inputs: { pageInfo: "pageInfo", fields: "fields", errors: "errors", editable: "editable", itemId: "itemId", hideBackButton: "hideBackButton" }, outputs: { actionResultEmitter: "actionResultEmitter", formUpdated: "formUpdated", itemLoaded: "itemLoaded", extraAction: "extraAction", hyperTextEvent: "hyperTextEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n  <div class=\"row full-width mt-2vh\">\r\n    <div class=\"column full-width\">\r\n      <app-title-bar\r\n        [pageTitle]=\"getTitle()\"\r\n        [newAction]=\"false\"\r\n        [hideBackButton]=\"hideBackButton\">\r\n      </app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <app-base-form-canvas\r\n    [pageInfo]=\"pageInfo\"\r\n    [fields]=\"fields\"\r\n    [editable]=\"editable\"\r\n    [errors]=\"errors\"\r\n    [item]=\"item\"\r\n    (formUpdated)=\"updateForm($event)\">\r\n  </app-base-form-canvas>\r\n\r\n  <div class=\"row main-form-canvas mt-3vh\">\r\n    <div class=\"column flex-49\">\r\n      <div class=\"row row-center-start\">\r\n        <button *ngIf=\"hasWfPositivePermission()\" color=\"primary\" mat-flat-button\r\n                (click)=\"doSaveApproveAction()\"\r\n                [disabled]=\"disabledSaveButton(item)\"\r\n                class=\"action-button\"\r\n                id=\"base-form-positive-btn\">\r\n          {{ getPositiveWfActionKey(item?.stateType) | translate }}\r\n        </button>\r\n        <button *ngIf=\"hasWfNegativePermission()\" color=\"second\" mat-raised-button\r\n                (click)=\"doCancelRejectAction()\"\r\n                [disabled]=\"disabledSaveButton(item)\"\r\n                class=\"action-button\"\r\n                id=\"base-form-negative-btn\">\r\n          {{ getNegativeWfActionKey(item?.stateType) | translate }}\r\n        </button>\r\n        <button *ngIf=\"pageInfo.hideExtractButton === false && itemId > 0 && editable\" color=\"primary\" mat-raised-button\r\n                (click)=\"doExtraAction()\"\r\n                class=\"action-button\"\r\n                id=\"base-form-extra-btn\">\r\n          {{ pageInfo.labelsSection + \".\" + \"EXTRA_BUTTON_NAME\" | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"column flex-49\"></div>\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"!pageInfo.hideAuditLog\">\r\n    <div class=\"row main-form-canvas mt-4vh pb-5vh\">\r\n      <div class=\"column flex-95\">\r\n        <app-audit-log [pageInfo]=\"pageInfo\" [fields]=\"fields\"></app-audit-log>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;width:100%;flex-wrap:wrap}.column{display:flex;flex-direction:column}.full-width{width:100%}.flex-49{flex:0 0 49%}.flex-95{flex:0 0 95%}.row-center-start{align-items:center;justify-content:flex-start}.mt-2vh{margin-top:2vh}.mt-3vh{margin-top:3vh}.mt-4vh{margin-top:4vh}.pb-5vh{padding-bottom:5vh}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}@media (max-width: 960px){.flex-49,.flex-95{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: AuditLogComponent, selector: "app-audit-log", inputs: ["pageInfo", "fields", "showHiddenFields"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseFormComponent, isStandalone: true, selector: "app-base-form", inputs: { pageInfo: "pageInfo", fields: "fields", errors: "errors", editable: "editable", itemId: "itemId", hideBackButton: "hideBackButton" }, outputs: { actionResultEmitter: "actionResultEmitter", formUpdated: "formUpdated", itemLoaded: "itemLoaded", extraAction: "extraAction", hyperTextEvent: "hyperTextEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n  <div class=\"row full-width mt-2vh\">\r\n    <div class=\"column full-width\">\r\n      <app-title-bar\r\n        [pageTitle]=\"getTitle()\"\r\n        [newAction]=\"false\"\r\n        [hideBackButton]=\"hideBackButton\">\r\n      </app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <app-base-form-canvas\r\n    [pageInfo]=\"pageInfo\"\r\n    [fields]=\"fields\"\r\n    [editable]=\"editable\"\r\n    [errors]=\"errors\"\r\n    [item]=\"item\"\r\n    (formUpdated)=\"updateForm($event)\">\r\n  </app-base-form-canvas>\r\n\r\n  <div class=\"row main-form-canvas mt-3vh\">\r\n    <div class=\"column flex-49\">\r\n      <div class=\"row row-center-start\">\r\n        <button *ngIf=\"hasWfPositivePermission()\" color=\"primary\" mat-flat-button\r\n                (click)=\"doSaveApproveAction()\"\r\n                [disabled]=\"disabledSaveButton(item)\"\r\n                class=\"action-button\"\r\n                id=\"base-form-positive-btn\">\r\n          {{ getPositiveWfActionKey(item?.stateType) | translate }}\r\n        </button>\r\n        <button *ngIf=\"hasWfNegativePermission()\" color=\"second\" mat-raised-button\r\n                (click)=\"doCancelRejectAction()\"\r\n                [disabled]=\"disabledSaveButton(item)\"\r\n                class=\"action-button\"\r\n                id=\"base-form-negative-btn\">\r\n          {{ getNegativeWfActionKey(item?.stateType) | translate }}\r\n        </button>\r\n        <button *ngIf=\"pageInfo.hideExtractButton === false && itemId > 0 && editable\" color=\"primary\" mat-raised-button\r\n                (click)=\"doExtraAction()\"\r\n                class=\"action-button\"\r\n                id=\"base-form-extra-btn\">\r\n          {{ pageInfo.labelsSection + \".\" + \"EXTRA_BUTTON_NAME\" | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"column flex-49\"></div>\r\n  </div>\r\n\r\n\r\n  <ng-container *ngIf=\"!pageInfo.hideAuditLog\">\r\n    <div class=\"row main-form-canvas mt-4vh pb-5vh\">\r\n      <div class=\"column flex-95\">\r\n        <app-audit-log [pageInfo]=\"pageInfo\" [fields]=\"fields\"></app-audit-log>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;width:100%;flex-wrap:wrap}.column{display:flex;flex-direction:column}.full-width{width:100%}.flex-49{flex:0 0 49%}.flex-95{flex:0 0 95%}.row-center-start{align-items:center;justify-content:flex-start}.mt-2vh{margin-top:2vh}.mt-3vh{margin-top:3vh}.mt-4vh{margin-top:4vh}.pb-5vh{padding-bottom:5vh}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}@media (max-width: 960px){.flex-49,.flex-95{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}}\n"], dependencies: [{ 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: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: AuditLogComponent, selector: "app-audit-log", inputs: ["pageInfo", "fields", "showHiddenFields"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormComponent, decorators: [{
             type: Component,
@@ -4520,7 +4628,7 @@ class ReportFormComponent {
         return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, deps: [{ token: i2.TranslateService }, { token: BackendService }, { token: i2$2.ActivatedRoute }, { token: i0.Injector }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5.Directionality }, { token: i1.MatDialog }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"column full-width\">\r\n\r\n  <div class=\"row align-start-center\" style=\"margin-bottom: 10px;\">\r\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n\r\n    <mat-icon\r\n      *ngIf=\"pageInfo?.hasHint\"\r\n      [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n      matTooltipPosition=\"right\"\r\n      color=\"primary\"\r\n      class=\"hint-icon\"\r\n      matTooltipClass=\"custom-tooltip\">\r\n      help_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <app-base-form-canvas\r\n    [pageInfo]=\"pageInfo\"\r\n    [fields]=\"fields\"\r\n    [editable]=\"isEditable\"\r\n    [errors]=\"errors\"\r\n    [item]=\"this.reportForm?.value || {}\"\r\n    (formUpdated)=\"updateForm($event)\"\r\n  ></app-base-form-canvas>\r\n\r\n  <br><br>\r\n\r\n  <div class=\"column\">\r\n    <div class=\"row gap-10 responsive-row\">\r\n      <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\" [disabled]=\"!isValidForm()\" id=\"report-generate-btn\">\r\n        {{ 'REPORTS.generate' | translate }}\r\n      </button>\r\n\r\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\" color=\"primary\" id=\"report-extract-trigger\">\r\n        {{ 'extract' | translate }}\r\n        <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n      </button>\r\n\r\n      <button mat-flat-button (click)=\"clear()\" [disabled]=\"isFormEmpty() || activeLevel > 1\" id=\"report-clear-btn\">\r\n        {{ 'REPORTS.clear' | translate }}\r\n      </button>\r\n\r\n      <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button (click)=\"drillDown()\" id=\"report-drilldown-btn\">\r\n        {{ drillDownLabel() | translate }}\r\n      </button>\r\n\r\n      <button *ngIf=\"activeLevel > 1 && backButtonEnabled\" color=\"warn\" mat-flat-button (click)=\"goUp()\" id=\"report-up-btn\">\r\n        {{ 'REPORTS.up' | translate }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"activeLevel >= 1\" class=\"main-form-canvas row align-start-start responsive-table\" style=\"margin-top: 3vh;\">\r\n    <div class=\"column full-width\">\r\n      <app-base-table\r\n        *ngIf=\"activeLevel === 1\"\r\n        [pageInfo]=\"pageInfo\"\r\n        [columns]=\"columnsDefinition\"\r\n        [enforceRefresh]=\"reloadData\"\r\n        id=\"parent\"\r\n        [reportRequest]=\"reportRequest\"\r\n        (userAction)=\"emitUserAction($event)\"\r\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n      </app-base-table>\r\n\r\n      <app-base-table\r\n        *ngIf=\"activeLevel === 2\"\r\n        [pageInfo]=\"drillDownPageInfo\"\r\n        [columns]=\"drillDownColumns\"\r\n        id=\"child\"\r\n        [reportRequest]=\"childReportRequest\"\r\n        (userAction)=\"emitJuniorAction($event)\"\r\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n      </app-base-table>\r\n\r\n      <app-base-table\r\n        *ngIf=\"activeLevel === 3\"\r\n        [pageInfo]=\"juniorPageInfo\"\r\n        [columns]=\"juniorColumns\"\r\n        id=\"junior\"\r\n        [reportRequest]=\"juniorReportRequest\">\r\n      </app-base-table>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'report-extract-item-' + type\">\r\n    {{ type }}\r\n  </button>\r\n</mat-menu>\r\n", styles: [".column{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-start-start{align-items:flex-start;justify-content:flex-start}.gap-10>*+*{margin-left:10px}.full-width{width:100%}.hint-icon{cursor:pointer;margin-left:10px}.responsive-row{flex-wrap:wrap}@media (max-width: 960px){.responsive-row{flex-direction:column;align-items:flex-start}}@media (max-width: 600px){.responsive-table{justify-content:center}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundIcon", "noDataFoundTitle", "noDataFoundSubtitle", "pageInfo", "enablePagination", "data", "listAction", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"column full-width\">\r\n\r\n  <div class=\"row align-start-center\" style=\"margin-bottom: 10px;\">\r\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n\r\n    <mat-icon\r\n      *ngIf=\"pageInfo?.hasHint\"\r\n      [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n      matTooltipPosition=\"right\"\r\n      color=\"primary\"\r\n      class=\"hint-icon\"\r\n      matTooltipClass=\"custom-tooltip\">\r\n      help_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <app-base-form-canvas\r\n    [pageInfo]=\"pageInfo\"\r\n    [fields]=\"fields\"\r\n    [editable]=\"isEditable\"\r\n    [errors]=\"errors\"\r\n    [item]=\"this.reportForm?.value || {}\"\r\n    (formUpdated)=\"updateForm($event)\"\r\n  ></app-base-form-canvas>\r\n\r\n  <br><br>\r\n\r\n  <div class=\"column\">\r\n    <div class=\"row gap-10 responsive-row\">\r\n      <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\" [disabled]=\"!isValidForm()\" id=\"report-generate-btn\">\r\n        {{ 'REPORTS.generate' | translate }}\r\n      </button>\r\n\r\n      <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\" color=\"primary\" id=\"report-extract-trigger\">\r\n        {{ 'extract' | translate }}\r\n        <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n      </button>\r\n\r\n      <button mat-flat-button (click)=\"clear()\" [disabled]=\"isFormEmpty() || activeLevel > 1\" id=\"report-clear-btn\">\r\n        {{ 'REPORTS.clear' | translate }}\r\n      </button>\r\n\r\n      <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button (click)=\"drillDown()\" id=\"report-drilldown-btn\">\r\n        {{ drillDownLabel() | translate }}\r\n      </button>\r\n\r\n      <button *ngIf=\"activeLevel > 1 && backButtonEnabled\" color=\"warn\" mat-flat-button (click)=\"goUp()\" id=\"report-up-btn\">\r\n        {{ 'REPORTS.up' | translate }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"activeLevel >= 1\" class=\"main-form-canvas row align-start-start responsive-table\" style=\"margin-top: 3vh;\">\r\n    <div class=\"column full-width\">\r\n      <app-base-table\r\n        *ngIf=\"activeLevel === 1\"\r\n        [pageInfo]=\"pageInfo\"\r\n        [columns]=\"columnsDefinition\"\r\n        [enforceRefresh]=\"reloadData\"\r\n        id=\"parent\"\r\n        [reportRequest]=\"reportRequest\"\r\n        (userAction)=\"emitUserAction($event)\"\r\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n      </app-base-table>\r\n\r\n      <app-base-table\r\n        *ngIf=\"activeLevel === 2\"\r\n        [pageInfo]=\"drillDownPageInfo\"\r\n        [columns]=\"drillDownColumns\"\r\n        id=\"child\"\r\n        [reportRequest]=\"childReportRequest\"\r\n        (userAction)=\"emitJuniorAction($event)\"\r\n        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n      </app-base-table>\r\n\r\n      <app-base-table\r\n        *ngIf=\"activeLevel === 3\"\r\n        [pageInfo]=\"juniorPageInfo\"\r\n        [columns]=\"juniorColumns\"\r\n        id=\"junior\"\r\n        [reportRequest]=\"juniorReportRequest\">\r\n      </app-base-table>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<mat-menu #menu=\"matMenu\">\r\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'report-extract-item-' + type\">\r\n    {{ type }}\r\n  </button>\r\n</mat-menu>\r\n", styles: [".column{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-start-start{align-items:flex-start;justify-content:flex-start}.gap-10>*+*{margin-left:10px}.full-width{width:100%}.hint-icon{cursor:pointer;margin-left:10px}.responsive-row{flex-wrap:wrap}@media (max-width: 960px){.responsive-row{flex-direction:column;align-items:flex-start}}@media (max-width: 600px){.responsive-table{justify-content:center}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundIcon", "noDataFoundTitle", "noDataFoundSubtitle", "pageInfo", "enablePagination", "data", "listAction", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReportFormComponent, decorators: [{
             type: Component,
@@ -4992,7 +5100,7 @@ class ActivityReportFormComponent {
         return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, deps: [{ token: i2.TranslateService }, { token: BackendService }, { token: i2$2.ActivatedRoute }, { token: i0.Injector }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1.MatDialog }, { token: i5.Directionality }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n  <div class=\"row row-center-start mb-10px full-width\">\r\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n    <mat-icon *ngIf=\"pageInfo?.hasHint\"\r\n              [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n              matTooltipPosition=\"right\"\r\n              color=\"primary\"\r\n              class=\"help-icon\"\r\n              matTooltipClass=\"custom-tooltip\">\r\n      help_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <app-base-form-canvas\r\n    [pageInfo]=\"pageInfo\"\r\n    [fields]=\"fields\"\r\n    [editable]=\"isEditable\"\r\n    [errors]=\"errors\"\r\n    [item]=\"reportForm?.value || {}\"\r\n    (formUpdated)=\"updateForm($event)\">\r\n  </app-base-form-canvas>\r\n\r\n  <div class=\"row main-form-canvas mt-3vh\">\r\n    <div class=\"column flex-49\">\r\n      <div class=\"row row-center-start\">\r\n        <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\"\r\n                [disabled]=\"!isValidForm()\" class=\"action-button\" id=\"activity-generate-btn\">\r\n          {{ 'REPORTS.generate' | translate }}\r\n        </button>\r\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\"\r\n                color=\"primary\" class=\"btn-none-background-primary action-button\" id=\"activity-extract-trigger\">\r\n          {{ 'extract' | translate }}\r\n          <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n        </button>\r\n        <button mat-flat-button (click)=\"clear()\"\r\n                [disabled]=\"isFormEmpty() || activeLevel > 1\"\r\n                class=\"action-button\" id=\"activity-clear-btn\">\r\n          {{ 'REPORTS.clear' | translate }}\r\n        </button>\r\n        <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button\r\n                (click)=\"drillDown()\" class=\"action-button\" id=\"activity-drilldown-btn\">\r\n          {{ drillDownLabel() | translate }}\r\n        </button>\r\n        <button *ngIf=\"activeLevel > 1 && !(isComparisonReport && activeLevel == 2)\" color=\"warn\"\r\n                mat-flat-button (click)=\"goUp()\" class=\"action-button\" id=\"activity-up-btn\">\r\n          {{ 'REPORTS.up' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"column flex-49\"></div>\r\n  </div>\r\n\r\n  <!-- Base tables -->\r\n  <ng-container *ngIf=\"activeLevel === 1\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"pageInfo\" [columns]=\"columnsDefinition\" [enforceRefresh]=\"reloadData\"\r\n                        id=\"parent\" [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeLevel === 2\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"child\"\r\n                        [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeLevel === 3\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"junior\"\r\n                        [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeLevel === 4\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\"\r\n                        [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\">\r\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'activity-extract-item-' + type\">\r\n    {{ type }}\r\n  </button>\r\n</mat-menu>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;width:100%}.column{display:flex;flex-direction:column}.flex-49{flex:0 0 49%}.flex-100{flex:0 0 100%}.row-center-start{align-items:center;justify-content:flex-start}.mt-3vh{margin-top:3vh}.mb-10px{margin-bottom:10px}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}.help-icon{cursor:pointer;margin-left:10px}@media (max-width: 960px){.flex-49,.flex-100{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}.help-icon{margin-left:0;margin-top:5px}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundIcon", "noDataFoundTitle", "noDataFoundSubtitle", "pageInfo", "enablePagination", "data", "listAction", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActivityReportFormComponent, isStandalone: true, selector: "app-report-form", inputs: { showDetails: "showDetails", showExtractButton: "showExtractButton", columns: "columns", actionRequestCallback: "actionRequestCallback", enrichDrillDownReportRequest: "enrichDrillDownReportRequest", enrichHyperLinkReportRequest: "enrichHyperLinkReportRequest", enrichJuniorReportRequest: "enrichJuniorReportRequest" }, outputs: { userAction: "userAction" }, ngImport: i0, template: "<div class=\"page-container\">\r\n\r\n  <div class=\"row row-center-start mb-10px full-width\">\r\n    <app-title-bar [pageTitle]=\"getTitle()\" [newAction]=\"false\"></app-title-bar>\r\n    <mat-icon *ngIf=\"pageInfo?.hasHint\"\r\n              [matTooltip]=\"pageInfo.labelsSection + '.hint' | translate\"\r\n              matTooltipPosition=\"right\"\r\n              color=\"primary\"\r\n              class=\"help-icon\"\r\n              matTooltipClass=\"custom-tooltip\">\r\n      help_outline\r\n    </mat-icon>\r\n  </div>\r\n\r\n  <app-base-form-canvas\r\n    [pageInfo]=\"pageInfo\"\r\n    [fields]=\"fields\"\r\n    [editable]=\"isEditable\"\r\n    [errors]=\"errors\"\r\n    [item]=\"reportForm?.value || {}\"\r\n    (formUpdated)=\"updateForm($event)\">\r\n  </app-base-form-canvas>\r\n\r\n  <div class=\"row main-form-canvas mt-3vh\">\r\n    <div class=\"column flex-49\">\r\n      <div class=\"row row-center-start\">\r\n        <button *ngIf=\"activeLevel === 1\" color=\"primary\" mat-flat-button (click)=\"doAction(x)\"\r\n                [disabled]=\"!isValidForm()\" class=\"action-button\" id=\"activity-generate-btn\">\r\n          {{ 'REPORTS.generate' | translate }}\r\n        </button>\r\n        <button mat-raised-button [matMenuTriggerFor]=\"menu\" [disabled]=\"getIsEmptyList()\"\r\n                color=\"primary\" class=\"btn-none-background-primary action-button\" id=\"activity-extract-trigger\">\r\n          {{ 'extract' | translate }}\r\n          <mat-icon class=\"expand_more actionButton__expand\">expand_more</mat-icon>\r\n        </button>\r\n        <button mat-flat-button (click)=\"clear()\"\r\n                [disabled]=\"isFormEmpty() || activeLevel > 1\"\r\n                class=\"action-button\" id=\"activity-clear-btn\">\r\n          {{ 'REPORTS.clear' | translate }}\r\n        </button>\r\n        <button *ngIf=\"activeLevel === 1 && drillDownEnabled()\" color=\"warn\" mat-flat-button\r\n                (click)=\"drillDown()\" class=\"action-button\" id=\"activity-drilldown-btn\">\r\n          {{ drillDownLabel() | translate }}\r\n        </button>\r\n        <button *ngIf=\"activeLevel > 1 && !(isComparisonReport && activeLevel == 2)\" color=\"warn\"\r\n                mat-flat-button (click)=\"goUp()\" class=\"action-button\" id=\"activity-up-btn\">\r\n          {{ 'REPORTS.up' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <div class=\"column flex-49\"></div>\r\n  </div>\r\n\r\n  <!-- Base tables -->\r\n  <ng-container *ngIf=\"activeLevel === 1\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"pageInfo\" [columns]=\"columnsDefinition\" [enforceRefresh]=\"reloadData\"\r\n                        id=\"parent\" [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeLevel === 2\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"child\"\r\n                        [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeLevel === 3\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\" id=\"junior\"\r\n                        [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeLevel === 4\">\r\n    <div class=\"row main-form-canvas mt-3vh\">\r\n      <div class=\"column flex-100\">\r\n        <app-base-table [pageInfo]=\"drillDownPageInfo\" [columns]=\"drillDownColumns\"\r\n                        [reportRequest]=\"reportRequest\"\r\n                        (userAction)=\"emitUserAction($event)\"\r\n                        (hyperLinkAction)=\"emitHyperLinkAction($event)\">\r\n        </app-base-table>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n</div>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\">\r\n  <button type=\"button\" mat-menu-item *ngFor=\"let type of types\" (click)=\"extractReport(type)\" [attr.id]=\"'activity-extract-item-' + type\">\r\n    {{ type }}\r\n  </button>\r\n</mat-menu>\r\n", styles: [".page-container{display:flex;flex-direction:column;width:100%}.row{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;width:100%}.column{display:flex;flex-direction:column}.flex-49{flex:0 0 49%}.flex-100{flex:0 0 100%}.row-center-start{align-items:center;justify-content:flex-start}.mt-3vh{margin-top:3vh}.mb-10px{margin-bottom:10px}.action-button{font-weight:700;min-width:140px;max-width:200px;margin:0 10px}.help-icon{cursor:pointer;margin-left:10px}@media (max-width: 960px){.flex-49,.flex-100{flex:1 1 100%}}@media (max-width: 600px){.row{flex-direction:column;align-items:center}.action-button{width:100%;max-width:300px;margin:5px 0}.help-icon{margin-left:0;margin-top:5px}}\n"], dependencies: [{ kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: BaseTableComponent, selector: "app-base-table", inputs: ["filterFields", "noDataFoundIcon", "noDataFoundTitle", "noDataFoundSubtitle", "pageInfo", "enablePagination", "data", "listAction", "columns", "filters", "pathParam", "extraButton", "enforceRefresh", "isPending", "trigger", "reportRequest", "separateEndpointData", "manageablePages", "totalPagesCount", "currentPageIndex", "customizedData"], outputs: ["pageChange", "userAction", "hyperLinkAction", "extraAction", "selectedColumn", "listActionClicked", "showDialog", "clickRoutePage"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActivityReportFormComponent, decorators: [{
             type: Component,
@@ -5083,7 +5191,7 @@ class BaseInputDialogComponent extends BaseUtils {
         this.dialogRef.close(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseInputDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseInputDialogComponent, isStandalone: true, selector: "lib-base-input-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"title-row\">\r\n    <div class=\"full-column\">\r\n      <app-title-bar [pageTitle]=\"getTitle()\"></app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isLoaded\">\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fieldsInfo\"\r\n      [editable]=\"true\"\r\n      [item]=\"default\"\r\n      (formUpdated)=\"captureForm($event)\">\r\n    </app-base-form-canvas>\r\n\r\n    <div class=\"button-row\">\r\n      <div class=\"half-column\"></div>\r\n      <div class=\"half-column right-align\">\r\n        <div class=\"button-group\">\r\n          <ng-container>\r\n            <button\r\n              mat-stroked-button\r\n              class=\"btn-none-background-primary\"\r\n              type=\"button\"\r\n              (click)=\"doCancel('cancel')\"\r\n              id=\"base-input-cancel-btn\">\r\n              Cancel\r\n            </button>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <button\r\n              [ngClass]=\"saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'\"\r\n              [disabled]=\"saveDisabled()\"\r\n              mat-stroked-button\r\n              type=\"button\"\r\n              (click)=\"doSave('save')\"\r\n              id=\"base-input-save-btn\">\r\n              Save\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".container{display:flex;flex-direction:column;width:98%}.title-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin:2vh 0}.full-column{flex:1 1 100%;display:flex;flex-direction:column}.button-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin-top:2vh}.half-column{flex:0 0 49%;display:flex;flex-direction:column}.right-align{align-items:flex-end}.button-group{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:10px;margin:1% 2%}@media (max-width: 768px){.button-row{flex-direction:column}.half-column{flex:1 1 100%}.right-align{align-items:center}.button-group{justify-content:center;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: TitleBarComponent, selector: "app-title-bar", inputs: ["pageTitle", "showExtractButton", "totalElements", "titleMode", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BaseInputDialogComponent, isStandalone: true, selector: "lib-base-input-dialog", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"title-row\">\r\n    <div class=\"full-column\">\r\n      <app-title-bar [pageTitle]=\"getTitle()\"></app-title-bar>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"isLoaded\">\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fieldsInfo\"\r\n      [editable]=\"true\"\r\n      [item]=\"default\"\r\n      (formUpdated)=\"captureForm($event)\">\r\n    </app-base-form-canvas>\r\n\r\n    <div class=\"button-row\">\r\n      <div class=\"half-column\"></div>\r\n      <div class=\"half-column right-align\">\r\n        <div class=\"button-group\">\r\n          <ng-container>\r\n            <button\r\n              mat-stroked-button\r\n              class=\"btn-none-background-primary\"\r\n              type=\"button\"\r\n              (click)=\"doCancel('cancel')\"\r\n              id=\"base-input-cancel-btn\">\r\n              Cancel\r\n            </button>\r\n          </ng-container>\r\n\r\n          <ng-container>\r\n            <button\r\n              [ngClass]=\"saveDisabled() ? 'btn-none-background-primary' : 'btn-background-primary'\"\r\n              [disabled]=\"saveDisabled()\"\r\n              mat-stroked-button\r\n              type=\"button\"\r\n              (click)=\"doSave('save')\"\r\n              id=\"base-input-save-btn\">\r\n              Save\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n", styles: [".container{display:flex;flex-direction:column;width:98%}.title-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin:2vh 0}.full-column{flex:1 1 100%;display:flex;flex-direction:column}.button-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;width:100%;margin-top:2vh}.half-column{flex:0 0 49%;display:flex;flex-direction:column}.right-align{align-items:flex-end}.button-group{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:10px;margin:1% 2%}@media (max-width: 768px){.button-row{flex-direction:column}.half-column{flex:1 1 100%}.right-align{align-items:center}.button-group{justify-content:center;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseInputDialogComponent, decorators: [{
             type: Component,
@@ -5133,14 +5241,14 @@ class SearchBarComponent {
         return this.columns.filter((column) => ['text', 'date', 'localDateTime'].includes(column.type));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ag-search-bar", inputs: { columns: "columns", defaultSortKey: "defaultSortKey" }, outputs: { searchTriggered: "searchTriggered" }, ngImport: i0, template: "<div class=\"mainSearchBar\">\r\n  <div class=\"search row align-start-center gap-16\">\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-50\">\r\n      <input\r\n        matInput\r\n        class=\"search__input\"\r\n        placeholder=\"Search...\"\r\n        (keydown.enter)=\"onSearch()\"\r\n        [(ngModel)]=\"searchValue\" />\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n      <mat-select\r\n        class=\"search__toggle\"\r\n        [(ngModel)]=\"searchType\"\r\n        placeholder=\"Type\">\r\n        <mat-option value=\"exact\">Exact</mat-option>\r\n        <mat-option value=\"like\">Like</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n      <mat-select\r\n        class=\"search__toggle\"\r\n        [(ngModel)]=\"selectedSortKey\"\r\n        placeholder=\"Sort By\">\r\n        <mat-option *ngFor=\"let col of getColumns()\" [value]=\"col.property\">\r\n          {{ labelKey(col) | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-10\">\r\n      <mat-select\r\n        class=\"search__toggle\"\r\n        [(ngModel)]=\"selectedSortType\"\r\n        placeholder=\"Type\">\r\n        <mat-option value=\"ASC\">ASC</mat-option>\r\n        <mat-option value=\"DESC\">DESC</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <div class=\"search__button row align-center-center\">\r\n      <div class=\"icon-design\" (click)=\"onSearch()\">\r\n        <mat-icon class=\"icon-search\" color=\"primary\">search</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .search__button{display:flex;align-items:center;justify-content:center;height:56px;margin-top:-6px}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-16>*+*{margin-left:16px}.flex-50{flex:0 0 50%}.flex-15{flex:0 0 15%}.flex-10{flex:0 0 10%}.search{width:100%;padding:0 16px;margin-bottom:16px}.search__button{margin-bottom:6px}.icon-search{height:30px;width:30px;font-size:30px;margin-bottom:15px;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchBarComponent, isStandalone: true, selector: "ag-search-bar", inputs: { columns: "columns", defaultSortKey: "defaultSortKey" }, outputs: { searchTriggered: "searchTriggered" }, ngImport: i0, template: "<div class=\"mainSearchBar\">\r\n  <div class=\"search row align-start-center gap-16\">\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-50\">\r\n      <input\r\n        matInput\r\n        class=\"search__input\"\r\n        placeholder=\"Search...\"\r\n        (keydown.enter)=\"onSearch()\"\r\n        [(ngModel)]=\"searchValue\" />\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n      <mat-select\r\n        class=\"search__toggle\"\r\n        [(ngModel)]=\"searchType\"\r\n        placeholder=\"Type\">\r\n        <mat-option value=\"exact\">Exact</mat-option>\r\n        <mat-option value=\"like\">Like</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-15\">\r\n      <mat-select\r\n        class=\"search__toggle\"\r\n        [(ngModel)]=\"selectedSortKey\"\r\n        placeholder=\"Sort By\">\r\n        <mat-option *ngFor=\"let col of getColumns()\" [value]=\"col.property\">\r\n          {{ labelKey(col) | translate }}\r\n        </mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <mat-form-field appearance=\"outline\" class=\"search__field flex-10\">\r\n      <mat-select\r\n        class=\"search__toggle\"\r\n        [(ngModel)]=\"selectedSortType\"\r\n        placeholder=\"Type\">\r\n        <mat-option value=\"ASC\">ASC</mat-option>\r\n        <mat-option value=\"DESC\">DESC</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n\r\n    <div class=\"search__button row align-center-center\">\r\n      <div class=\"icon-design\" (click)=\"onSearch()\">\r\n        <mat-icon class=\"icon-search\" color=\"primary\">search</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep .search__button{display:flex;align-items:center;justify-content:center;height:56px;margin-top:-6px}.row{display:flex;flex-direction:row;width:100%}.column{display:flex;flex-direction:column;width:100%}.align-start-center{align-items:center;justify-content:flex-start}.align-center-center{align-items:center;justify-content:center}.gap-16>*+*{margin-left:16px}.flex-50{flex:0 0 50%}.flex-15{flex:0 0 15%}.flex-10{flex:0 0 10%}.search{width:100%;padding:0 16px;margin-bottom:16px}.search__button{margin-bottom:6px}.icon-search{height:30px;width:30px;font-size:30px;margin-bottom:15px;cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ag-search-bar', standalone: true, imports: [
                         MatFormField,
                         MatSelect,
-                        MatOption,
+                        MatOption$1,
                         FormsModule,
                         MatIcon,
                         MatInput,
@@ -5563,7 +5671,7 @@ class ItemLineEditorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n\r\n  <h3 class=\"title\">{{ title | translate }}</h3>\r\n  <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n  <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n    <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n      <div class=\"col\">\r\n        {{ labelOf(f)  | translate }}\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  @if (!noDataFound) {\r\n    <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n      <div class=\"table-row\">\r\n\r\n        <div class=\"row-inputs\">\r\n          <app-base-form-canvas\r\n            [pageInfo]=\"pageInfo\"\r\n            [fields]=\"fields\"\r\n            [editable]=\"editing[i]\"\r\n            [emitOnValueChanges]=\"true\"\r\n            [item]=\"it\"\r\n            [currency]=\"currency\"\r\n            (formUpdated)=\"onFormUpdated($event, i)\">\r\n          </app-base-form-canvas>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div class=\"row-actions\">\r\n\r\n        <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n                [disabled]=\"!canSave(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>check</mat-icon>\r\n            <span>{{ 'item-line.save' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n                (click)=\"editRow(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>edit</mat-icon>\r\n            <span>{{ 'item-line.edit' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n                (click)=\"deleteItem(i)\" type=\"button\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>delete</mat-icon>\r\n            <span>{{ 'item-line.delete' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (noDataFound) {\r\n    <div 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 class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n    <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n    <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n            [disabled]=\"!canAddNew\">\r\n      <div class=\"button-text\">\r\n        <mat-icon>add</mat-icon>\r\n        <span>  {{ 'item-line.addNewItem' | translate }}</span>\r\n      </div>\r\n    </button>\r\n\r\n  </div>\r\n\r\n  @if (!noDataFound) {\r\n    <div class=\"totals-box\">\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n        <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n        <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"divider\"></div>\r\n\r\n      <div class=\"total-row grand\">\r\n        <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n        <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n\r\n  <h3 class=\"title\">{{ title | translate }}</h3>\r\n  <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n  <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n    <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n      <div class=\"col\">\r\n        {{ labelOf(f)  | translate }}\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  @if (!noDataFound) {\r\n    <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n      <div class=\"table-row\">\r\n\r\n        <div class=\"row-inputs\">\r\n          <app-base-form-canvas\r\n            [pageInfo]=\"pageInfo\"\r\n            [fields]=\"fields\"\r\n            [editable]=\"editing[i]\"\r\n            [emitOnValueChanges]=\"true\"\r\n            [item]=\"it\"\r\n            [currency]=\"currency\"\r\n            (formUpdated)=\"onFormUpdated($event, i)\">\r\n          </app-base-form-canvas>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div class=\"row-actions\">\r\n\r\n        <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n                [disabled]=\"!canSave(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>check</mat-icon>\r\n            <span>{{ 'item-line.save' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n                (click)=\"editRow(i)\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>edit</mat-icon>\r\n            <span>{{ 'item-line.edit' | translate }}</span>\r\n          </div>\r\n        </button>\r\n\r\n        <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n                (click)=\"deleteItem(i)\" type=\"button\">\r\n          <div class=\"button-text\">\r\n            <mat-icon>delete</mat-icon>\r\n            <span>{{ 'item-line.delete' | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  @if (noDataFound) {\r\n    <div 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 class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n    <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n    <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n            [disabled]=\"!canAddNew\">\r\n      <div class=\"button-text\">\r\n        <mat-icon>add</mat-icon>\r\n        <span>  {{ 'item-line.addNewItem' | translate }}</span>\r\n      </div>\r\n    </button>\r\n\r\n  </div>\r\n\r\n  @if (!noDataFound) {\r\n    <div class=\"totals-box\">\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n        <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"total-row\">\r\n        <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n        <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n      </div>\r\n\r\n      <div class=\"divider\"></div>\r\n\r\n      <div class=\"total-row grand\">\r\n        <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n        <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, decorators: [{
             type: Component,