npm - @unifylib/ui-lib - Versions diffs - 1.1.35 → 1.1.37 - Mend

@unifylib/ui-lib 1.1.35 → 1.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/fesm2022/unifylib-ui-lib.mjs CHANGED Viewed

@@ -37,7 +37,6 @@ import { MatSelect, MatOption as MatOption$1, MatFormField as MatFormField$1, Ma
 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 } from '@angular/material/autocomplete';
 import { BehaviorSubject, Subject, of, map, takeUntil } from 'rxjs';
@@ -46,7 +45,6 @@ import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { distinctUntilChanged, catchError } from 'rxjs/operators';
 import * as i2$2 from '@angular/router';
 import { MatTooltip } from '@angular/material/tooltip';
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import moment from 'moment/moment';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatOption as MatOption$2 } from '@angular/material/core';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
@@ -644,15 +642,17 @@ class TitleBarComponent {
         }
         this.viewModeChanged.emit(isPending);
     }
-    onChipSelectionChange(event) {
-        const selectedValue = event.value;
-        const isPending = selectedValue === 'PENDING';
-        if (this._isPending !== isPending) {
-            this.onViewModeChanged(isPending);
+    onChipSelectionChange(event, listbox) {
+        const value = event.value;
+        if (value !== 'COMPLETED' && value !== 'PENDING') {
+            setTimeout(() => listbox && (listbox.value = this._isPending ? 'PENDING' : 'COMPLETED'));
+            return;
         }
+        if (this._isPending !== (value === 'PENDING'))
+            this.onViewModeChanged(value === 'PENDING');
     }
     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", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, 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=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\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 *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\" (change)=\"onChipSelectionChange($event)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\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=\"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: ["", ":host{display:block;width:100%}.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;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;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}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.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" }, { 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"] }] }); }
+    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", pageInfo: "pageInfo", subTitle: "subTitle", statusDesc: "statusDesc", newAction: "newAction", extraButton: "extraButton", showDetails: "showDetails", showImport: "showImport", showButton: "showButton", extraData: "extraData", titleCorporateAdmin: "titleCorporateAdmin", hideBackButton: "hideBackButton", buttons: "buttons", buttonsDisplayMode: "buttonsDisplayMode", draftSupported: "draftSupported", isPending: "isPending", onViewModeChange: "onViewModeChange" }, outputs: { newActionClicked: "newActionClicked", extraButtonClicked: "extraButtonClicked", extractReport: "extractReport", buttonClicked: "buttonClicked", viewModeChanged: "viewModeChanged" }, 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=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\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 *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\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=\"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: ["", ":host{display:block;width:100%}.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;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;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}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.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" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TitleBarComponent, decorators: [{
             type: Component,
@@ -667,7 +667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TranslateModule,
                         MatChipListbox,
                         MatChipOption,
-                    ], template: "<div class=\"row mainTitleBar gap-20 default-align\">\r\n\r\n  <div class=\"column flex-auto textTitle\" >\r\n    <h2 *ngIf=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\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 *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox aria-label=\"Color selection\" [multiple]=\"false\" (change)=\"onChipSelectionChange($event)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\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=\"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: [":host{display:block;width:100%}.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;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;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}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.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=\"!pageInfo.hideTitle\" style=\"margin: 0;\">\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 *ngIf=\"pageInfo.draftSupported\" class=\"chips-container\">\r\n      <mat-chip-listbox #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"currentIsPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\">\r\n        <mat-chip-option [selected]=\"!currentIsPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"!currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\r\n          {{'finished' | translate}}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"currentIsPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          <mat-icon *ngIf=\"currentIsPending\" style=\"font-size: 14px; width: 14px; height: 14px; margin-right: 4px;\">check</mat-icon>\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=\"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: [":host{display:block;width:100%}.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;gap:12px}.mainTitleBar .textTitle h2{margin:0;padding:0;line-height:1.2}.mainTitleBar .textTitle__titleMode{font-weight:200;color:gray}.mainTitleBar .textTitle__subTitle{color:#888;font-size:16px;font-weight:300;font-style:normal}.mainTitleBar .textTitle .chips-container{margin-top:0}.mainTitleBar .end-items{display:flex;flex-direction:row;align-items:center;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}.mainTitleBar mat-chip-listbox{display:flex;flex-direction:row;gap:8px;align-items:center}.mainTitleBar mat-chip-listbox mat-chip-option{height:32px!important;min-height:32px!important;border-radius:8px!important;font-size:16px!important;line-height:1.2!important;font-weight:400!important;border:none!important;box-shadow:none!important;transition:all .2s ease;font-family:Lusail,sans-serif!important;padding:0!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true],.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true]{background:#0d4261!important;color:#fff!important;font-weight:500!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] .mdc-evolution-chip__text-label,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] .mdc-evolution-chip__text-label{color:#fff!important;font-weight:500!important;padding-left:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option.mdc-evolution-chip--selected mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[selected=true] mat-icon,.mainTitleBar mat-chip-listbox mat-chip-option[aria-selected=true] mat-icon{color:#fff!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]){background:#e9e9e9!important;color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option:not(.mdc-evolution-chip--selected):not([selected=true]):not([aria-selected=true]) .mdc-evolution-chip__text-label{color:#000!important;font-weight:400!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__action{padding:8px 12px!important;min-height:32px!important;display:flex!important;align-items:center!important;gap:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option .mdc-evolution-chip__text-label{padding:0!important;font-size:16px!important;line-height:1.2!important;font-family:Lusail,sans-serif!important}.mainTitleBar mat-chip-listbox mat-chip-option mat-icon{font-size:14px!important;width:14px!important;height:14px!important;margin-right:4px!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__graphic,.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__checkmark{display:none!important}.mainTitleBar mat-chip-listbox mat-chip-option ::ng-deep .mdc-evolution-chip__action--primary{padding:10px!important}.mainTitleBar mat-chip-listbox mat-chip-option:hover{opacity:.9}.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: [{
@@ -1957,7 +1957,6 @@ class BaseFormCanvasComponent {
         this.backendService = backendService;
         this.fb = fb;
         this.announcer = announcer;
-        this.Editor = ClassicEditor;
         this.hide = true;
         this.dateViewMode = 'month';
         this.fields = [];
@@ -1989,18 +1988,6 @@ class BaseFormCanvasComponent {
             const currentEquationValue = this.currentEquationValue().toLowerCase();
             return this.allEquationFields.pipe(map(fields => currentEquationValue ? fields?.filter(field => field.toLowerCase().includes(currentEquationValue)) : fields?.slice()));
         });
-        ClassicEditor.defaultConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList']
-            },
-            image: {
-                toolbar: ['imageStyle:side', '|', 'imageTextAlternative']
-            },
-            table: {
-                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-            },
-            language: 'en'
-        };
     }
     ngOnInit() {
         if (this.item && this.item.fieldValue) {
@@ -2145,6 +2132,8 @@ class BaseFormCanvasComponent {
                 return prefix + (field.validationMessages?.pattern || 'INVALID_FORMAT');
             if (errors['invalidMathExpression'])
                 return prefix + 'INVALID_MATH';
+            if (errors['dateRangeInvalid'])
+                return prefix + 'dateRangeInvalid';
             if (errors['serverError'])
                 return prefix + errors['serverError'];
             return prefix + 'INVALID_VALUE';
@@ -2425,7 +2414,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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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                        <ng-container *ngSwitchCase=\"'bigdecimal'\">\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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input\r\n                                  matInput\r\n                                  type=\"text\"\r\n                                  inputmode=\"numeric\"\r\n                                  formControlName=\"{{ field.property }}\"\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                                  numbersOnly  [maxDecimals]=\"field.maxDecimals\"\r\n                                  [pattern]=\"field.pattern\"\r\n                                  [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                  [required]=\"field.readonly ? false : field.required\"\r\n                                  [readonly]=\"field.readonly\">\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                        <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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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=\"'toggle'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"toggleReadonly\"\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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n                              </div>\r\n                              <mat-slide-toggle\r\n                                [disabled]=\"field.readonly\"\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                                formControlName=\"{{ field.property }}\">\r\n                              </mat-slide-toggle>\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                            </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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                            <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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n                              </div>\r\n                              <app-attachment-uploader\r\n                                [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n                                (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n                                style=\"margin-top: 5px\">\r\n                              </app-attachment-uploader>\r\n                            </ng-container>\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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 #toggleReadonly 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=\"'toggle'\">\r\n                  <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\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;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:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.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}.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: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals"] }] }); }
+        ], 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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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                        <ng-container *ngSwitchCase=\"'bigdecimal'\">\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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n                              </div>\r\n                              <mat-form-field appearance=\"outline\">\r\n                                <input\r\n                                  matInput\r\n                                  type=\"text\"\r\n                                  inputmode=\"numeric\"\r\n                                  formControlName=\"{{ field.property }}\"\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                                  numbersOnly  [maxDecimals]=\"field.maxDecimals\"\r\n                                  [pattern]=\"field.pattern\"\r\n                                  [attr.aria-describedby]=\"'error-' + field.property\"\r\n                                  [required]=\"field.readonly ? false : field.required\"\r\n                                  [readonly]=\"field.readonly\">\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                        <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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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=\"'toggle'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n                              <ng-container\r\n                                [ngTemplateOutlet]=\"toggleReadonly\"\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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n                              </div>\r\n                              <mat-slide-toggle\r\n                                [disabled]=\"field.readonly\"\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                                formControlName=\"{{ field.property }}\">\r\n                              </mat-slide-toggle>\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                            </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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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                            <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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n                              </div>\r\n                              <app-attachment-uploader\r\n                                [acceptedTypes]=\"getAcceptedFileTypes(field)\"\r\n                                (fileSelected)=\"onAttachmentFileSelected($event, field)\"\r\n                                style=\"margin-top: 5px\">\r\n                              </app-attachment-uploader>\r\n                            </ng-container>\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 && !field.hideLabel\" class=\"required-asterisk\"> * </span>\r\n                                <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </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 #toggleReadonly 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=\"'toggle'\">\r\n                  <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\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;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:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.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}.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: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: "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]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
             type: Component,
@@ -2461,7 +2450,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         DatePipe,
                         NgxJsonViewerModule,
                         CurrencyPipe,
-                        CKEditorModule,
                         NgxMatIntlTelInputComponent,
                         MatChipGrid,
                         MatChipInput,
@@ -2629,6 +2617,15 @@ class FilterBuilderComponent {
             if (isInputElement) {
                 event.preventDefault();
                 event.stopPropagation();
+                if (this.searchTimeout) {
+                    clearTimeout(this.searchTimeout);
+                    this.searchTimeout = null;
+                }
+                setTimeout(() => {
+                    this.doSearch();
+                    this.onApplyFilter();
+                }, 0);
+                return;
             }
             this.onApplyFilter();
         }
@@ -3260,11 +3257,8 @@ class BaseTableComponent extends BaseUtils {
         return !groupByValues.some(v => value.includes(v) && value.length >= v.length);
     }
     storePendingFilters($event) {
-        console.log("$event", $event);
         this.pendingFilters = $event.filters || [];
-        if ($event.searchStr) {
-            this.searchStr = $event.searchStr;
-        }
+        this.searchStr = $event.searchStr;
     }
     applyPendingFilters() {
         this.advancedAppliedFilter = this.pendingFilters || [];
@@ -3913,6 +3907,16 @@ class EditableBaseTableComponent extends BaseUtils {
         this.isPending = b;
         this.loadData();
     }
+    onChipSelectionChange(event, listbox) {
+        const value = event.value;
+        if (value !== 'COMPLETED' && value !== 'PENDING') {
+            setTimeout(() => listbox && (listbox.value = this.isPending ? 'PENDING' : 'COMPLETED'));
+            return;
+        }
+        const isPending = value === 'PENDING';
+        if (this.isPending !== isPending)
+            this.switchViewMode(isPending);
+    }
     addBulkItems() {
         const merged = [];
         this.dataFormArray.controls.forEach((group) => {
@@ -4050,7 +4054,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: 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", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], 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 #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"isPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\" *ngIf=\"pageInfo.draftSupported\">\r\n        <mat-chip-option [selected]=\"!isPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          {{ 'finished' | translate }}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"isPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          {{ '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", "pageInfo", "subTitle", "statusDesc", "newAction", "extraButton", "showDetails", "showImport", "showButton", "extraData", "titleCorporateAdmin", "hideBackButton", "buttons", "buttonsDisplayMode", "draftSupported", "isPending", "onViewModeChange"], outputs: ["newActionClicked", "extraButtonClicked", "extractReport", "buttonClicked", "viewModeChanged"] }, { kind: "component", type: PaginatorComponent, selector: "app-paginator", inputs: ["currentPage", "totalItems", "pageSize", "pageSizeOptions", "mobileLoadMoreIncrement", "displayedItems"], outputs: ["pageChange", "pageSizeChange", "loadMore"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes"], 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,
@@ -4106,7 +4110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     //   deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
                     // },
                     // { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-                    ], 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"] }]
+                    ], 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 #box aria-label=\"Color selection\" [multiple]=\"false\" [value]=\"isPending ? 'PENDING' : 'COMPLETED'\" (click)=\"$event.stopPropagation()\" (change)=\"onChipSelectionChange($event, box)\" *ngIf=\"pageInfo.draftSupported\">\r\n        <mat-chip-option [selected]=\"!isPending\" [color]=\"'accent'\" value=\"COMPLETED\" (click)=\"$event.stopPropagation()\">\r\n          {{ 'finished' | translate }}\r\n        </mat-chip-option>\r\n        <mat-chip-option [selected]=\"isPending\" [color]=\"'accent'\" value=\"PENDING\" (click)=\"$event.stopPropagation()\">\r\n          {{ '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"] }]
         }], ctorParameters: () => [{ type: BackendService }, { type: i2$2.Router }, { type: i4.FormBuilder }, { type: i1.MatDialog }, { type: i5.Directionality }], propDecorators: { filterRequest: [{
                 type: Input
             }], superDataElements: [{
@@ -4207,18 +4211,6 @@ class BaseFormComponent extends BaseUtils {
         this.SAVE = SAVE;
         this.getPositiveWfActionKey = getPositiveWfActionKey;
         this.getNegativeWfActionKey = getNegativeWfActionKey;
-        ClassicEditor.defaultConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList']
-            },
-            image: {
-                toolbar: ['imageStyle:side', '|', 'imageTextAlternative']
-            },
-            table: {
-                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-            },
-            language: 'en'
-        };
     }
     ngOnInit() {
         this.currentDirection = this.directionality.value;
@@ -4484,7 +4476,7 @@ class SectionFormCanvasComponent {
         return this.buttons.filter(btn => btn.id !== 'download');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", subtitle: "subtitle", isTranslateTitle: "isTranslateTitle", isTranslateSubtitle: "isTranslateSubtitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n          {{ pageInfo.labelsSection + '.' + title | translate }}\r\n        </h3>\r\n        <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n        <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n          <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n          <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n        </p>\r\n        <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n          {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n        </button>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n      <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          type=\"button\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n      \r\n      <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n          class=\"btn-download-mobile\"\r\n          [attr.id]=\"getDownloadButton()?.id\"\r\n        >\r\n          <mat-icon>{{ getDownloadButton()?.icon }}</mat-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"getMenuButtons().length > 0\"\r\n          mat-stroked-button\r\n          type=\"button\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          class=\"btn-menu-mobile\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of getMenuButtons()\"\r\n            (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n            [attr.id]=\"btn.id\"\r\n          >\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <ng-content></ng-content>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", subtitle: "subtitle", isTranslateTitle: "isTranslateTitle", isTranslateSubtitle: "isTranslateSubtitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n          {{ pageInfo.labelsSection + '.' + title | translate }}\r\n        </h3>\r\n        <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n        <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n          <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n          <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n        </p>\r\n        <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n          {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n        </button>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n      <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          type=\"button\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n      \r\n      <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n          class=\"btn-download-mobile\"\r\n          [attr.id]=\"getDownloadButton()?.id\"\r\n        >\r\n          <mat-icon>{{ getDownloadButton()?.icon }}</mat-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"getMenuButtons().length > 0\"\r\n          mat-stroked-button\r\n          type=\"button\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          class=\"btn-menu-mobile\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of getMenuButtons()\"\r\n            (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n            [attr.id]=\"btn.id\"\r\n          >\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <ng-content></ng-content>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
             type: Component,
@@ -4504,7 +4496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatMenu,
                         MatMenuTrigger,
                         MatMenuItem
-                    ], template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n          {{ pageInfo.labelsSection + '.' + title | translate }}\r\n        </h3>\r\n        <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n        <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n          <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n          <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n        </p>\r\n        <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n          {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n        </button>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n      <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          type=\"button\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n      \r\n      <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n          class=\"btn-download-mobile\"\r\n          [attr.id]=\"getDownloadButton()?.id\"\r\n        >\r\n          <mat-icon>{{ getDownloadButton()?.icon }}</mat-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"getMenuButtons().length > 0\"\r\n          mat-stroked-button\r\n          type=\"button\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          class=\"btn-menu-mobile\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of getMenuButtons()\"\r\n            (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n            [attr.id]=\"btn.id\"\r\n          >\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <ng-content></ng-content>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"] }]
+                    ], template: "<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"isExpanded\"\r\n                     [hideToggle]=\"hideToggle\"\r\n                     (opened)=\"alwaysOpen ? panel.open() : null\"\r\n                     (closed)=\"alwaysOpen ? panel.open() : null\">\r\n  <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n          {{ pageInfo.labelsSection + '.' + title | translate }}\r\n        </h3>\r\n        <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n        <p class=\"card-subtitle\" *ngIf=\"subtitle\">\r\n          <span *ngIf=\"isTranslateSubtitle\">{{ pageInfo.labelsSection + '.' + subtitle | translate }}</span>\r\n          <span *ngIf=\"!isTranslateSubtitle\">{{ subtitle }}</span>\r\n        </p>\r\n        <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n          {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n        </button>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n    <mat-panel-description class=\"panel-description\" *ngIf=\"buttons && buttons.length > 0\">\r\n      <div class=\"row flex-auto buttons-wrapper desktop-buttons\" [class.show-on-mobile]=\"!getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          *ngFor=\"let btn of buttons\"\r\n          type=\"button\"\r\n          [color]=\"btn.color || 'primary'\"\r\n          (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n          class=\"btn-none-background-primary action\"\r\n          [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n        >\r\n          <div class=\"button-text\">\r\n            <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </div>\r\n        </button>\r\n      </div>\r\n      \r\n      <div class=\"mobile-buttons\" *ngIf=\"getDownloadButton()\">\r\n        <button\r\n          mat-flat-button\r\n          type=\"button\"\r\n          color=\"primary\"\r\n          (click)=\"onButtonClick(getDownloadButton()!, key); $event.stopPropagation()\"\r\n          class=\"btn-download-mobile\"\r\n          [attr.id]=\"getDownloadButton()?.id\"\r\n        >\r\n          <mat-icon>{{ getDownloadButton()?.icon }}</mat-icon>\r\n        </button>\r\n        <button\r\n          *ngIf=\"getMenuButtons().length > 0\"\r\n          mat-stroked-button\r\n          type=\"button\"\r\n          [matMenuTriggerFor]=\"menu\"\r\n          class=\"btn-menu-mobile\"\r\n        >\r\n          <mat-icon>more_vert</mat-icon>\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button\r\n            mat-menu-item\r\n            *ngFor=\"let btn of getMenuButtons()\"\r\n            (click)=\"onButtonClick(btn, key); $event.stopPropagation()\"\r\n            [attr.id]=\"btn.id\"\r\n          >\r\n            <mat-icon>{{ btn.icon }}</mat-icon>\r\n            <span>{{ btn.label | translate }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </mat-panel-description>\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <ng-content></ng-content>\r\n    <app-base-form-canvas\r\n      [pageInfo]=\"pageInfo\"\r\n      [fields]=\"fields\"\r\n      [editable]=\"editable\"\r\n      [item]=\"item\"\r\n      (formUpdated)=\"formUpdated($event)\"\r\n    ></app-base-form-canvas>\r\n  </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"] }]
         }], propDecorators: { pageInfo: [{
                 type: Input
             }], fields: [{
@@ -4671,18 +4663,6 @@ class ReportFormComponent {
         this.juniorReportRequest = new ReportRequest({});
         this.readyToSearch = false;
         this.disableExportAction = false;
-        ClassicEditor.defaultConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList']
-            },
-            image: {
-                toolbar: ['imageStyle:side', '|', 'imageTextAlternative']
-            },
-            table: {
-                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-            },
-            language: 'en'
-        };
     }
     ngOnInit() {
         this.currentDirection = this.directionality.value;
@@ -5144,18 +5124,6 @@ class ActivityReportFormComponent {
         this.juniorReportRequest = new ReportRequest({});
         this.readyToSearch = false;
         this.isComparisonReport = false;
-        ClassicEditor.defaultConfig = {
-            toolbar: {
-                items: ['heading', '|', 'bold', 'italic', '|', 'bulletedList', 'numberedList']
-            },
-            image: {
-                toolbar: ['imageStyle:side', '|', 'imageTextAlternative']
-            },
-            table: {
-                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
-            },
-            language: 'en'
-        };
     }
     ngOnInit() {
         this.currentDirection = this.directionality.value;