npm - @unifylib/ui-lib - Versions diffs - 1.1.28 → 1.1.30 - Mend

@unifylib/ui-lib 1.1.28 → 1.1.30

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 (17) hide show

package/esm2022/lib/base-model/index.mjs +2 -1
package/esm2022/lib/base-model/permission-matrix.model.mjs +2 -0
package/esm2022/lib/components/base-form-canvas/NumbersOnlyDirective.mjs +59 -0
package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +6 -4
package/esm2022/lib/components/permission-matrix/permission-matrix.component.mjs +129 -0
package/esm2022/public-api.mjs +2 -1
package/fesm2022/unifylib-ui-lib.mjs +184 -6
package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
package/lib/base-model/index.d.ts +1 -0
package/lib/base-model/permission-matrix.model.d.ts +18 -0
package/lib/components/base-form-canvas/NumbersOnlyDirective.d.ts +11 -0
package/lib/components/permission-matrix/permission-matrix.component.d.ts +26 -0
package/package.json +1 -1
package/public-api.d.ts +1 -0
package/esm2022/iq-ui-lib.mjs +0 -5
package/fesm2022/iq-ui-lib.mjs +0 -6067
package/fesm2022/iq-ui-lib.mjs.map +0 -1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, Input, HostListener, EventEmitter, Output, Injectable, signal, ViewChild, model, computed, effect, inject } from '@angular/core';
+import { Component, Inject, Input, HostListener, EventEmitter, Output, Injectable, signal, ViewChild, Directive, model, computed, effect, inject } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, formatDate, NgSwitchDefault, DecimalPipe } from '@angular/common';
 import * as i1 from '@angular/material/dialog';
@@ -27,7 +27,8 @@ import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
 import * as i4$1 from '@angular/material/chips';
 import { MatChipListbox, MatChipOption, MatChip, MatChipsModule, MatChipInput, MatChipGrid, MatChipRow, MatChipRemove } from '@angular/material/chips';
 import * as i5 from '@angular/cdk/bidi';
-import { MatCheckbox } from '@angular/material/checkbox';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
 import { MatDatepickerInput, MatDatepicker, MatDatepickerToggle, MatDateRangeInput } from '@angular/material/datepicker';
 import { MatRadioGroup, MatRadioButton } from '@angular/material/radio';
@@ -1799,6 +1800,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
+class DecimalOnlyDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    onKeyDown(event) {
+        const input = this.el.nativeElement;
+        const value = input.value;
+        const start = input.selectionStart ?? 0;
+        const end = input.selectionEnd ?? 0;
+        if (event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete', 'Home', 'End'].includes(event.key)) {
+            return;
+        }
+        if (event.key === '.') {
+            if (value.includes('.') || start === 0 || start === value.length) {
+                event.preventDefault();
+            }
+            return;
+        }
+        if (event.key < '0' || event.key > '9') {
+            event.preventDefault();
+        }
+    }
+    onBlur() {
+        const input = this.el.nativeElement;
+        if (input.value.endsWith('.')) {
+            input.value = input.value.slice(0, -1);
+        }
+    }
+    onPaste(event) {
+        const pasted = event.clipboardData?.getData('text') ?? '';
+        if (!/^\d+(\.\d+)?$/.test(pasted)) {
+            event.preventDefault();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DecimalOnlyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: DecimalOnlyDirective, isStandalone: true, selector: "[numbersOnly]", host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()", "paste": "onPaste($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DecimalOnlyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[numbersOnly]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
 const DD_MM_YYYY_Format = {
     parse: { dateInput: 'DD/MM/YYYY' },
     display: {
@@ -2294,7 +2352,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\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"] }] }); }
+        ], 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\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\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\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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
             type: Component,
@@ -2347,7 +2405,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatHeaderCell,
                         MatHeaderCellDef,
                         NgStyle,
-                        AttachmentUploaderComponent
+                        AttachmentUploaderComponent,
+                        DecimalOnlyDirective
                     ], providers: [
                         {
                             provide: DateAdapter,
@@ -2356,7 +2415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         },
                         { provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
                         { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
-                    ], template: "<div class=\"main-form-canvas\">\r\n  <div class=\"form-wrapper\">\r\n    <ng-container *ngIf=\"defaults\">\r\n      <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n        <form [formGroup]=\"formParam\" class=\"form-content\">\r\n          <div class=\"form-row\">\r\n            <div class=\"form-column\">\r\n              <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n                <div class=\"row-container\">\r\n                  <ng-container *ngFor=\"let field of row.value\">\r\n                    <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n                      <ng-container [ngSwitch]=\"field.type\">\r\n                        <ng-container *ngSwitchCase=\"'date'\">\r\n                          <ng-container *ngIf=\"showField(defaults, field)\">\r\n                            <ng-container *ngIf=\"workflowEditableField(field)\">\r\n                              <div class=\"label-and-asterisk-container\">\r\n        <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n          {{ field.label! | translate }}\r\n        </span>\r\n                                <span *ngIf=\"field.required && !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\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"] }]
+                    ], 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\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\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\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"] }]
         }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$2.ActivatedRoute }, { type: BackendService }, { type: i4.FormBuilder }, { type: i5$1.LiveAnnouncer }], propDecorators: { pageInfo: [{
                 type: Input
             }], currency: [{
@@ -6055,6 +6114,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
+class PermissionMatrixComponent {
+    constructor() {
+        this.items = [];
+        this.permissions = [
+            { key: 'view', labelKey: 'GROUPS.view' },
+            { key: 'edit', labelKey: 'GROUPS.edit' },
+            { key: 'completeAndTerminate', labelKey: 'GROUPS.completeAndTerminate', combinedKeys: ['completePermission', 'terminatePermission'] }
+        ];
+        this.titleKey = 'GROUPS.groupMatrix';
+        this.selectAllLabelKey = 'GROUPS.selectAll';
+        this.expandAllLabelKey = 'GROUPS.expandAll';
+        this.collapseAllLabelKey = 'GROUPS.collapseAll';
+        this.readonly = false;
+        this.itemsChange = new EventEmitter();
+        this.permissionChange = new EventEmitter();
+    }
+    areAllExpanded() {
+        return this.items.length > 0 && this.items.every(item => item.expanded);
+    }
+    expandAllGroups() {
+        const expand = !this.areAllExpanded();
+        this.items.forEach(item => item.expanded = expand);
+        this.emitItemsChange();
+    }
+    toggleGroup(item) {
+        item.expanded = !item.expanded;
+        this.emitItemsChange();
+    }
+    isAllPermissionsSelected(item) {
+        return this.permissions.every(perm => {
+            if (perm.combinedKeys) {
+                return perm.combinedKeys.every(key => item.permissions[key]);
+            }
+            return item.permissions[perm.key];
+        });
+    }
+    toggleSelectAll(item) {
+        if (this.readonly)
+            return;
+        const allSelected = this.isAllPermissionsSelected(item);
+        const newValue = !allSelected;
+        this.permissions.forEach(perm => {
+            if (perm.combinedKeys) {
+                perm.combinedKeys.forEach(key => {
+                    item.permissions[key] = newValue;
+                });
+            }
+            else {
+                item.permissions[perm.key] = newValue;
+            }
+        });
+        this.emitItemsChange();
+    }
+    isPermissionSelected(item, permission) {
+        if (permission.combinedKeys) {
+            return permission.combinedKeys.every(key => item.permissions[key]);
+        }
+        return item.permissions[permission.key];
+    }
+    togglePermission(item, permission) {
+        if (this.readonly)
+            return;
+        const currentValue = this.isPermissionSelected(item, permission);
+        const newValue = !currentValue;
+        if (permission.combinedKeys) {
+            permission.combinedKeys.forEach(key => {
+                item.permissions[key] = newValue;
+            });
+        }
+        else {
+            item.permissions[permission.key] = newValue;
+        }
+        this.permissionChange.emit({
+            item,
+            permissionKey: permission.key,
+            newValue
+        });
+        this.emitItemsChange();
+    }
+    emitItemsChange() {
+        this.itemsChange.emit([...this.items]);
+    }
+    trackByItem(index, item) {
+        return item.id ?? index;
+    }
+    trackByPermission(index, permission) {
+        return permission.key;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PermissionMatrixComponent, isStandalone: true, selector: "lib-permission-matrix", inputs: { items: "items", permissions: "permissions", titleKey: "titleKey", selectAllLabelKey: "selectAllLabelKey", expandAllLabelKey: "expandAllLabelKey", collapseAllLabelKey: "collapseAllLabelKey", readonly: "readonly" }, outputs: { itemsChange: "itemsChange", permissionChange: "permissionChange" }, ngImport: i0, template: "<div class=\"permission-matrix-card\">\r\n  <div class=\"matrix-header\">\r\n    <h3 class=\"matrix-title\">{{ titleKey | translate }}</h3>\r\n    <button\r\n      class=\"expand-all-btn\"\r\n      type=\"button\"\r\n      (click)=\"expandAllGroups()\"\r\n      [attr.aria-label]=\"(areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate\">\r\n      <mat-icon class=\"expand-icon\" [class.rotated]=\"areAllExpanded()\">unfold_more</mat-icon>\r\n      <span>{{ (areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"matrix-divider\"></div>\r\n\r\n  <div class=\"matrix-accordion-list\">\r\n    <div\r\n      *ngFor=\"let item of items; trackBy: trackByItem\"\r\n      class=\"matrix-accordion-item\"\r\n      [class.expanded]=\"item.expanded\">\r\n\r\n      <!-- Accordion Header -->\r\n      <div\r\n        class=\"accordion-header\"\r\n        (click)=\"toggleGroup(item)\"\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [attr.aria-expanded]=\"item.expanded\"\r\n        (keydown.enter)=\"toggleGroup(item)\"\r\n        (keydown.space)=\"toggleGroup(item); $event.preventDefault()\">\r\n        <div class=\"accordion-content\">\r\n          <h4 class=\"accordion-title\">{{ item.title }}</h4>\r\n          <p *ngIf=\"item.description\" class=\"accordion-description\">{{ item.description }}</p>\r\n        </div>\r\n        <mat-icon class=\"accordion-icon\" [class.rotated]=\"item.expanded\">keyboard_arrow_down</mat-icon>\r\n      </div>\r\n\r\n      <!-- Accordion Body -->\r\n      <ng-container *ngIf=\"item.expanded\">\r\n        <div class=\"accordion-divider\"></div>\r\n        <div class=\"accordion-body\">\r\n          <!-- Permission Header Row -->\r\n          <div class=\"permission-header-row\">\r\n            <span class=\"permission-group-label\">{{ item.title }}</span>\r\n            <div class=\"permission-separator\"></div>\r\n            <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\r\n              <span class=\"select-all-label\">{{ selectAllLabelKey | translate }}</span>\r\n              <mat-checkbox\r\n                [checked]=\"isAllPermissionsSelected(item)\"\r\n                [disabled]=\"readonly\"\r\n                (change)=\"toggleSelectAll(item)\"\r\n                color=\"primary\"\r\n                class=\"select-all-checkbox\">\r\n              </mat-checkbox>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Permissions Row -->\r\n          <div class=\"permissions-row\" (click)=\"$event.stopPropagation()\">\r\n            <div\r\n              *ngFor=\"let permission of permissions; trackBy: trackByPermission\"\r\n              class=\"permission-item\">\r\n              <mat-checkbox\r\n                [checked]=\"isPermissionSelected(item, permission)\"\r\n                [disabled]=\"readonly\"\r\n                (change)=\"togglePermission(item, permission)\"\r\n                color=\"primary\">\r\n              </mat-checkbox>\r\n              <span class=\"permission-label\">{{ permission.labelKey | translate }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".permission-matrix-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px}.matrix-header{display:flex;align-items:center;justify-content:space-between;min-height:27px}.matrix-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:#000;margin:0}.expand-all-btn{display:flex;align-items:center;gap:4px;background:transparent;border:none;cursor:pointer;padding:0;font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000;transition:all .2s ease}.expand-all-btn:hover{color:#0d4261}.expand-all-btn:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.expand-icon{font-size:24px;width:24px;height:24px;color:#000;transition:transform .3s ease}.expand-icon.rotated{transform:rotate(180deg)}.matrix-divider{height:2px;background-color:#0d4261;width:100%}.matrix-accordion-list{display:flex;flex-direction:column;gap:0}.matrix-accordion-item{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;margin-bottom:0;transition:all .2s ease}.matrix-accordion-item:not(:last-child){margin-bottom:20px}.accordion-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;width:100%}.accordion-header:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.accordion-content{flex:1;display:flex;flex-direction:column;gap:0}.accordion-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:#000;margin:0 0 4px}.accordion-description{font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;margin:0}.accordion-icon{font-size:24px;width:24px;height:24px;color:#222;transition:transform .3s ease;flex-shrink:0}.accordion-icon.rotated{transform:rotate(180deg)}.accordion-divider{margin-top:16px;height:1px;background-color:#f0eeee;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;border:none}.accordion-body{padding-top:16px;display:flex;flex-direction:column;gap:12px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.permission-header-row{display:flex;align-items:center;gap:4px;width:100%}.permission-group-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#5c5c5c;flex-shrink:0}.permission-separator{flex:1;height:1px;background-color:#f0eeee;margin:0 4px}.select-all-container{display:flex;align-items:center;gap:4px;flex-shrink:0;flex-direction:row-reverse}.select-all-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000}.select-all-checkbox{flex-shrink:0}.permissions-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.permission-item{display:flex;align-items:center;gap:4px;min-height:19px}.permission-label{font-family:lusail-medium,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#222;white-space:nowrap}::ng-deep .select-all-checkbox .mdc-checkbox__background,::ng-deep .permission-item .mdc-checkbox__background{border-color:#b7b7b7!important;border-radius:4px!important}::ng-deep .select-all-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,::ng-deep .permission-item.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#0d4261!important;border-color:#0d4261!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox{display:inline-block;position:relative;flex:0 0 18px;box-sizing:content-box;width:18px;height:28px!important;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;padding:calc((var(--mdc-checkbox-state-layer-size) - 25px) / 2)!important;margin:calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2)}:host-context([dir=rtl]) .matrix-header{direction:rtl}:host-context([dir=rtl]) .accordion-header{direction:rtl}:host-context([dir=rtl]) .select-all-container{flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionMatrixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-permission-matrix', standalone: true, imports: [
+                        CommonModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        TranslateModule
+                    ], template: "<div class=\"permission-matrix-card\">\r\n  <div class=\"matrix-header\">\r\n    <h3 class=\"matrix-title\">{{ titleKey | translate }}</h3>\r\n    <button\r\n      class=\"expand-all-btn\"\r\n      type=\"button\"\r\n      (click)=\"expandAllGroups()\"\r\n      [attr.aria-label]=\"(areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate\">\r\n      <mat-icon class=\"expand-icon\" [class.rotated]=\"areAllExpanded()\">unfold_more</mat-icon>\r\n      <span>{{ (areAllExpanded() ? collapseAllLabelKey : expandAllLabelKey) | translate }}</span>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"matrix-divider\"></div>\r\n\r\n  <div class=\"matrix-accordion-list\">\r\n    <div\r\n      *ngFor=\"let item of items; trackBy: trackByItem\"\r\n      class=\"matrix-accordion-item\"\r\n      [class.expanded]=\"item.expanded\">\r\n\r\n      <!-- Accordion Header -->\r\n      <div\r\n        class=\"accordion-header\"\r\n        (click)=\"toggleGroup(item)\"\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [attr.aria-expanded]=\"item.expanded\"\r\n        (keydown.enter)=\"toggleGroup(item)\"\r\n        (keydown.space)=\"toggleGroup(item); $event.preventDefault()\">\r\n        <div class=\"accordion-content\">\r\n          <h4 class=\"accordion-title\">{{ item.title }}</h4>\r\n          <p *ngIf=\"item.description\" class=\"accordion-description\">{{ item.description }}</p>\r\n        </div>\r\n        <mat-icon class=\"accordion-icon\" [class.rotated]=\"item.expanded\">keyboard_arrow_down</mat-icon>\r\n      </div>\r\n\r\n      <!-- Accordion Body -->\r\n      <ng-container *ngIf=\"item.expanded\">\r\n        <div class=\"accordion-divider\"></div>\r\n        <div class=\"accordion-body\">\r\n          <!-- Permission Header Row -->\r\n          <div class=\"permission-header-row\">\r\n            <span class=\"permission-group-label\">{{ item.title }}</span>\r\n            <div class=\"permission-separator\"></div>\r\n            <div class=\"select-all-container\" (click)=\"$event.stopPropagation()\">\r\n              <span class=\"select-all-label\">{{ selectAllLabelKey | translate }}</span>\r\n              <mat-checkbox\r\n                [checked]=\"isAllPermissionsSelected(item)\"\r\n                [disabled]=\"readonly\"\r\n                (change)=\"toggleSelectAll(item)\"\r\n                color=\"primary\"\r\n                class=\"select-all-checkbox\">\r\n              </mat-checkbox>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Permissions Row -->\r\n          <div class=\"permissions-row\" (click)=\"$event.stopPropagation()\">\r\n            <div\r\n              *ngFor=\"let permission of permissions; trackBy: trackByPermission\"\r\n              class=\"permission-item\">\r\n              <mat-checkbox\r\n                [checked]=\"isPermissionSelected(item, permission)\"\r\n                [disabled]=\"readonly\"\r\n                (change)=\"togglePermission(item, permission)\"\r\n                color=\"primary\">\r\n              </mat-checkbox>\r\n              <span class=\"permission-label\">{{ permission.labelKey | translate }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".permission-matrix-card{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:20px}.matrix-header{display:flex;align-items:center;justify-content:space-between;min-height:27px}.matrix-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:#000;margin:0}.expand-all-btn{display:flex;align-items:center;gap:4px;background:transparent;border:none;cursor:pointer;padding:0;font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000;transition:all .2s ease}.expand-all-btn:hover{color:#0d4261}.expand-all-btn:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.expand-icon{font-size:24px;width:24px;height:24px;color:#000;transition:transform .3s ease}.expand-icon.rotated{transform:rotate(180deg)}.matrix-divider{height:2px;background-color:#0d4261;width:100%}.matrix-accordion-list{display:flex;flex-direction:column;gap:0}.matrix-accordion-item{background:#fff;border:1px solid #f0eeee;border-radius:8px;padding:16px;margin-bottom:0;transition:all .2s ease}.matrix-accordion-item:not(:last-child){margin-bottom:20px}.accordion-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;width:100%}.accordion-header:focus-visible{outline:2px solid #0d4261;outline-offset:2px;border-radius:4px}.accordion-content{flex:1;display:flex;flex-direction:column;gap:0}.accordion-title{font-family:lusail-bold,sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:#000;margin:0 0 4px}.accordion-description{font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;margin:0}.accordion-icon{font-size:24px;width:24px;height:24px;color:#222;transition:transform .3s ease;flex-shrink:0}.accordion-icon.rotated{transform:rotate(180deg)}.accordion-divider{margin-top:16px;height:1px;background-color:#f0eeee;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;border:none}.accordion-body{padding-top:16px;display:flex;flex-direction:column;gap:12px;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.permission-header-row{display:flex;align-items:center;gap:4px;width:100%}.permission-group-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:16px;line-height:1.2;color:#5c5c5c;flex-shrink:0}.permission-separator{flex:1;height:1px;background-color:#f0eeee;margin:0 4px}.select-all-container{display:flex;align-items:center;gap:4px;flex-shrink:0;flex-direction:row-reverse}.select-all-label{font-family:lusail-regular,sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:#000}.select-all-checkbox{flex-shrink:0}.permissions-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.permission-item{display:flex;align-items:center;gap:4px;min-height:19px}.permission-label{font-family:lusail-medium,sans-serif;font-weight:500;font-size:16px;line-height:1.2;color:#222;white-space:nowrap}::ng-deep .select-all-checkbox .mdc-checkbox__background,::ng-deep .permission-item .mdc-checkbox__background{border-color:#b7b7b7!important;border-radius:4px!important}::ng-deep .select-all-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background,::ng-deep .permission-item.mat-mdc-checkbox-checked .mdc-checkbox__background{background-color:#0d4261!important;border-color:#0d4261!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox{display:inline-block;position:relative;flex:0 0 18px;box-sizing:content-box;width:18px;height:28px!important;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;padding:calc((var(--mdc-checkbox-state-layer-size) - 25px) / 2)!important;margin:calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2)}:host-context([dir=rtl]) .matrix-header{direction:rtl}:host-context([dir=rtl]) .accordion-header{direction:rtl}:host-context([dir=rtl]) .select-all-container{flex-direction:row}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], permissions: [{
+                type: Input
+            }], titleKey: [{
+                type: Input
+            }], selectAllLabelKey: [{
+                type: Input
+            }], expandAllLabelKey: [{
+                type: Input
+            }], collapseAllLabelKey: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], itemsChange: [{
+                type: Output
+            }], permissionChange: [{
+                type: Output
+            }] } });
 /*
  * Public API Surface of invoiceq-lib
  */
@@ -6063,5 +6241,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { ADD_NEW_RECORD_ACTION, ALL_ITEM, APPROVE, ASSIGNED_DEPARTMENT_FILTER, ASSIGNED_TO_ME_FILTER, ActionButtonComponent, ActionCardComponent, ActionCommentComponent, ActionConfirmationComponent, ActivityReportFormComponent, AuditLogComponent, AuditLogDetailsDialogComponent, BackendService, BaseFormCanvasComponent, BaseFormComponent, BaseInputDialogComponent, BaseTableComponent, ButtonActionSettings, CLEAR_FILTERS, DD_MM_YYYY_Format, DRILL_DOWN_ACTION, DateRangeValidator, DoActionRequest, EMPTY_PAGE_INFO, EXTRA_ACTION, EditableBaseTableComponent, FRONT_END_COLUMN_TYPES, FieldInfo, Filter, FilterRequest, HIDE_TERMINATED, ItemLineEditorComponent, ItemsTotal, JUNIOR_DOWN_ACTION, LineItem, LookupItem, MultiEmailValidator, NEW, PENDING_STATUS_FILTER, REJECT, ReportDetailsDialogComponent, ReportFormComponent, ReportRequest, RequireMatch, SAVE, SAVE_AND_COMPLETE, SELECT_RECORD_ACTION, SearchBarComponent, SectionFormCanvasComponent, ShareDataService, SharedListComponent, SnackMessage, SnackbarStaticComponent, TABLE_RECORD_ACTION, TitleBarComponent, TopPanel };
+export { ADD_NEW_RECORD_ACTION, ALL_ITEM, APPROVE, ASSIGNED_DEPARTMENT_FILTER, ASSIGNED_TO_ME_FILTER, ActionButtonComponent, ActionCardComponent, ActionCommentComponent, ActionConfirmationComponent, ActivityReportFormComponent, AuditLogComponent, AuditLogDetailsDialogComponent, BackendService, BaseFormCanvasComponent, BaseFormComponent, BaseInputDialogComponent, BaseTableComponent, ButtonActionSettings, CLEAR_FILTERS, DD_MM_YYYY_Format, DRILL_DOWN_ACTION, DateRangeValidator, DoActionRequest, EMPTY_PAGE_INFO, EXTRA_ACTION, EditableBaseTableComponent, FRONT_END_COLUMN_TYPES, FieldInfo, Filter, FilterRequest, HIDE_TERMINATED, ItemLineEditorComponent, ItemsTotal, JUNIOR_DOWN_ACTION, LineItem, LookupItem, MultiEmailValidator, NEW, PENDING_STATUS_FILTER, PermissionMatrixComponent, REJECT, ReportDetailsDialogComponent, ReportFormComponent, ReportRequest, RequireMatch, SAVE, SAVE_AND_COMPLETE, SELECT_RECORD_ACTION, SearchBarComponent, SectionFormCanvasComponent, ShareDataService, SharedListComponent, SnackMessage, SnackbarStaticComponent, TABLE_RECORD_ACTION, TitleBarComponent, TopPanel };
 //# sourceMappingURL=unifylib-ui-lib.mjs.map