@unifylib/ui-lib 1.1.12 → 1.1.14
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.
- package/esm2022/lib/components/action-confirmation/action-confirmation.component.mjs +19 -6
- package/esm2022/lib/components/advanced-filter/filter-builder/filter-builder.component.mjs +12 -4
- package/esm2022/lib/components/auto-complete/auto-complete.component.mjs +3 -3
- package/esm2022/lib/components/base-form-canvas/base-form-canvas.component.mjs +3 -3
- package/esm2022/lib/components/item-line-editor/item-line-editor.component.mjs +3 -3
- package/esm2022/lib/components/section-form-canvas/section-form-canvas.component.mjs +3 -3
- package/fesm2022/iq-ui-lib.mjs +35 -16
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/fesm2022/unifylib-ui-lib.mjs +35 -16
- package/fesm2022/unifylib-ui-lib.mjs.map +1 -1
- package/lib/components/action-confirmation/action-confirmation.component.d.ts +9 -1
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Inject, HostListener, EventEmitter,
|
|
2
|
+
import { Component, Inject, Input, HostListener, EventEmitter, Output, Injectable, signal, ViewChild, model, computed, effect, inject } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
4
|
+
import { CommonModule, NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, formatDate, NgSwitchDefault, DecimalPipe, JsonPipe, UpperCasePipe } from '@angular/common';
|
|
3
5
|
import * as i1 from '@angular/material/dialog';
|
|
4
6
|
import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
|
|
5
7
|
import * as i2 from '@ngx-translate/core';
|
|
@@ -11,8 +13,6 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
|
11
13
|
import { MatCell, MatCellDef, MatHeaderCell, MatHeaderCellDef, MatTableDataSource, MatColumnDef, MatTable, MatRow, MatRowDef, MatHeaderRow, MatHeaderRowDef } from '@angular/material/table';
|
|
12
14
|
import * as i7$1 from '@angular/material/sort';
|
|
13
15
|
import { MatSortModule } from '@angular/material/sort';
|
|
14
|
-
import * as i1$1 from '@angular/common';
|
|
15
|
-
import { NgIf, NgForOf, NgClass, AsyncPipe, NgSwitch, NgTemplateOutlet, KeyValuePipe, NgSwitchCase, DatePipe, CurrencyPipe, NgStyle, CommonModule, NgSwitchDefault, DecimalPipe, JsonPipe, UpperCasePipe, formatDate } from '@angular/common';
|
|
16
16
|
import * as i9$1 from 'ngx-pagination';
|
|
17
17
|
import { NgxPaginationModule } from 'ngx-pagination';
|
|
18
18
|
import * as i6 from '@angular/material/form-field';
|
|
@@ -58,10 +58,14 @@ class ActionConfirmationComponent {
|
|
|
58
58
|
constructor(dialogRef, data) {
|
|
59
59
|
this.dialogRef = dialogRef;
|
|
60
60
|
this.data = data;
|
|
61
|
+
this.icon = { name: 'check_circle', color: '#0d7d6a' };
|
|
61
62
|
this.acceptActionLabel = '';
|
|
62
63
|
this.rejectActionLabel = '';
|
|
63
64
|
this.subMsg = '';
|
|
64
65
|
this.titleMsg = '';
|
|
66
|
+
this.listTitle = '';
|
|
67
|
+
this.listMessages = [];
|
|
68
|
+
this.extraWarningMsg = '';
|
|
65
69
|
this.currentDirection = 'ltr';
|
|
66
70
|
dialogRef.disableClose = true;
|
|
67
71
|
}
|
|
@@ -73,7 +77,11 @@ class ActionConfirmationComponent {
|
|
|
73
77
|
this.rejectActionLabel = this.data.rejectActionLabel || 'reject';
|
|
74
78
|
this.subMsg = this.data.warningMsg || '';
|
|
75
79
|
this.titleMsg = this.data.confirmMsg || '';
|
|
80
|
+
this.listTitle = this.data.listTitle || '';
|
|
81
|
+
this.listMessages = this.data.listMessages || [];
|
|
82
|
+
this.extraWarningMsg = this.data.extraWarningMsg || '';
|
|
76
83
|
this.currentDirection = this.data.direction;
|
|
84
|
+
this.icon = this.data.icon || { name: 'check_circle', color: '#0d7d6a' };
|
|
77
85
|
}
|
|
78
86
|
commentAndClose() {
|
|
79
87
|
this.dialogRef.close('accept');
|
|
@@ -83,20 +91,23 @@ class ActionConfirmationComponent {
|
|
|
83
91
|
this.dialogRef.close();
|
|
84
92
|
}
|
|
85
93
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-
|
|
94
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ActionConfirmationComponent, isStandalone: true, selector: "app-action-confirmation", inputs: { icon: "icon" }, host: { listeners: { "window:keyup.esc": "onKeyUp()" } }, ngImport: i0, template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-section\">\r\n <div class=\"header-row\">\r\n <div class=\"icon-container\">\r\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\r\n </div>\r\n <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"title-container\">\r\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"message-container\">\r\n <p class=\"message\" *ngIf=\"subMsg\">\r\n {{ subMsg | translate }}\r\n </p>\r\n\r\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\r\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\r\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\r\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\r\n {{ message | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\r\n {{ extraWarningMsg | translate }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button\r\n mat-stroked-button\r\n class=\"btn-cancel\"\r\n (click)=\"cancel()\"\r\n id=\"rejectActionLabel\">\r\n {{ rejectActionLabel | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-confirm\"\r\n (click)=\"commentAndClose()\"\r\n id=\"acceptActionLabel\">\r\n {{ acceptActionLabel | translate }}\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.close-btn{position:absolute;right:0;top:0;width:24px;height:24px;padding:0;flex-shrink:0;background:transparent!important;border:none!important}.close-btn mat-icon{font-size:24px;width:24px;height:24px;color:#222;line-height:24px}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel{width:122px;height:32px;margin:0!important;background:#fff;border:1px solid #3E627B!important;border-radius:8px;color:#3e627b!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{height:32px;margin:0!important;background:#0d4261!important;border-radius:8px!important;color:#fff!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;min-width:auto}.btn-confirm:hover{background:#082b41}\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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
87
95
|
}
|
|
88
96
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ActionConfirmationComponent, decorators: [{
|
|
89
97
|
type: Component,
|
|
90
98
|
args: [{ selector: 'app-action-confirmation', standalone: true, imports: [
|
|
99
|
+
CommonModule,
|
|
91
100
|
TranslateModule,
|
|
92
101
|
MatButton,
|
|
93
102
|
MatIconButton,
|
|
94
103
|
MatIcon
|
|
95
|
-
], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-
|
|
104
|
+
], template: "<div class=\"confirm-dialog\" [dir]=\"currentDirection\">\r\n\r\n <div class=\"header-section\">\r\n <div class=\"header-row\">\r\n <div class=\"icon-container\">\r\n <mat-icon class=\"check-icon\" [style.color]=\"icon.color\">{{ icon.name }}</mat-icon>\r\n </div>\r\n <button mat-icon-button class=\"close-btn\" (click)=\"cancel()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"title-container\">\r\n <h2 class=\"title\">{{ titleMsg | translate }}</h2>\r\n </div>\r\n </div>\r\n\r\n <div class=\"message-container\">\r\n <p class=\"message\" *ngIf=\"subMsg\">\r\n {{ subMsg | translate }}\r\n </p>\r\n\r\n <div class=\"list-section\" *ngIf=\"listTitle || listMessages.length > 0\">\r\n <p class=\"list-title\" *ngIf=\"listTitle\"><strong>{{ listTitle | translate }}</strong></p>\r\n <ul class=\"list-messages\" *ngIf=\"listMessages.length > 0\">\r\n <li *ngFor=\"let message of listMessages\" class=\"list-item\">\r\n {{ message | translate }}\r\n </li>\r\n </ul>\r\n </div>\r\n\r\n <p class=\"extra-warning\" *ngIf=\"extraWarningMsg\">\r\n {{ extraWarningMsg | translate }}\r\n </p>\r\n </div>\r\n\r\n <div class=\"actions\">\r\n <button\r\n mat-stroked-button\r\n class=\"btn-cancel\"\r\n (click)=\"cancel()\"\r\n id=\"rejectActionLabel\">\r\n {{ rejectActionLabel | translate }}\r\n </button>\r\n\r\n <button\r\n mat-flat-button\r\n class=\"btn-confirm\"\r\n (click)=\"commentAndClose()\"\r\n id=\"acceptActionLabel\">\r\n {{ acceptActionLabel | translate }}\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".confirm-dialog{padding:24px;min-width:547px;box-sizing:border-box;background:#fff;border:1px solid #f0eeee;border-radius:8px;box-shadow:0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f;display:flex;flex-direction:column;gap:8px}.header-section{display:flex;flex-direction:column;gap:8px;width:100%}.header-row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;width:100%;min-height:32px}.title-container{display:flex;align-items:flex-start;width:100%}.icon-container{width:32px;height:32px;background:#edfffa;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.check-icon{font-size:32px;width:32px;height:38px;line-height:32px}.title{margin:0;font-size:20px;font-weight:500;font-family:lusail-medium,sans-serif;color:#222;line-height:1.2}.close-btn{position:absolute;right:0;top:0;width:24px;height:24px;padding:0;flex-shrink:0;background:transparent!important;border:none!important}.close-btn mat-icon{font-size:24px;width:24px;height:24px;color:#222;line-height:24px}.message-container{padding:0 0 16px;width:100%}.message{margin:0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-section{margin-top:8px}.list-title{margin:0 0 8px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-messages{margin:0;padding-left:20px;list-style-type:disc}.list-item{margin:0 0 4px;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.list-item:last-child{margin-bottom:0}.extra-warning{margin:16px 0 0;font-size:16px;font-weight:400;font-family:lusail-regular,sans-serif;color:#5c5c5c;line-height:1.2}.actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;width:100%}.btn-cancel{width:122px;height:32px;margin:0!important;background:#fff;border:1px solid #3E627B!important;border-radius:8px;color:#3e627b!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center}.btn-cancel:hover{background:#f5f5f5}.btn-confirm{height:32px;margin:0!important;background:#0d4261!important;border-radius:8px!important;color:#fff!important;font-size:16px;font-weight:500;font-family:lusail-medium,sans-serif;line-height:1.2;text-align:center;padding:0 16px;display:flex;align-items:center;justify-content:center;min-width:auto}.btn-confirm:hover{background:#082b41}\n"] }]
|
|
96
105
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
97
106
|
type: Inject,
|
|
98
107
|
args: [MAT_DIALOG_DATA]
|
|
99
|
-
}] }], propDecorators: {
|
|
108
|
+
}] }], propDecorators: { icon: [{
|
|
109
|
+
type: Input
|
|
110
|
+
}], onKeyUp: [{
|
|
100
111
|
type: HostListener,
|
|
101
112
|
args: ['window:keyup.esc']
|
|
102
113
|
}] } });
|
|
@@ -1613,7 +1624,7 @@ class AutoCompleteComponent {
|
|
|
1613
1624
|
}
|
|
1614
1625
|
}
|
|
1615
1626
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }, { token: 'secretsManager' }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1616
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n matInput\r\n [required]=\"isRequired\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1627
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AutoCompleteComponent, isStandalone: true, selector: "app-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", readonly: "readonly", supportingAttributes: "supportingAttributes" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n matInput\r\n [required]=\"isRequired\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
1617
1628
|
}
|
|
1618
1629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
1619
1630
|
type: Component,
|
|
@@ -1632,7 +1643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1632
1643
|
NgForOf,
|
|
1633
1644
|
MatIconButton,
|
|
1634
1645
|
MatButton,
|
|
1635
|
-
], template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n matInput\r\n [required]=\"isRequired\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"] }]
|
|
1646
|
+
], template: "<ng-container *ngIf=\"field\" class=\"main-auto-complete\">\r\n <div class=\"mat-field-wrapper\" [formGroup]=\"form\">\r\n\r\n <div class=\"label-and-asterisk-container\">\r\n <span class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n <span *ngIf=\"!field.required\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\r\n </div>\r\n\r\n <mat-form-field class=\"autocomplete-field\" appearance=\"outline\">\r\n <input type=\"text\"\r\n [placeholder]=\"'search_placeholder' | translate\"\r\n [id]=\"getId()\"\r\n [formControl]=\"myControl\"\r\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\r\n [matAutocomplete]=\"auto\"\r\n matInput\r\n [required]=\"isRequired\"\r\n #autocompleteTrigger=\"matAutocompleteTrigger\"\r\n [readonly]=\"readonly\"\r\n >\r\n\r\n <button mat-button matSuffix\r\n color=\"primary\"\r\n class=\"autocomplete-button\"\r\n (click)=\"autocompleteTrigger.openPanel(); filterLookupItems('', autocompleteTrigger); $event.stopPropagation()\"\r\n [attr.id]=\"'autocomplete-trigger-' + field.property\">\r\n <mat-icon>arrow_drop_down</mat-icon>\r\n </button>\r\n\r\n <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption [displayWith]=\"displayFn.bind(this)\"\r\n (optionSelected)=\"itemSelected($event.option.value)\"\r\n (closed)=\"closed()\">\r\n <ng-container *ngIf=\"!field.readonly\">\r\n <mat-option *ngIf=\"items.length > 1 && lookupItems$\" [value]=\"null\">{{ \"none\" | translate }}</mat-option>\r\n <mat-option *ngFor=\"let item of lookupItems$ | async\" [value]=\"item\" [ngClass]=\"_allowSelection(item)\">\r\n {{ itemNameByLag(item) }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-autocomplete>\r\n </mat-form-field>\r\n\r\n </div>\r\n</ng-container>\r\n", styles: [".main-auto-complete,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px;margin-bottom:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.autocomplete-field{width:100%;display:flex;align-items:center}.autocomplete-button{margin-left:4px}@media (max-width: 600px){.main-auto-complete,.mat-field-wrapper,.autocomplete-field{flex-direction:column;width:100%}.autocomplete-button{margin-left:0;margin-top:4px}}\n"] }]
|
|
1636
1647
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }, { type: undefined, decorators: [{
|
|
1637
1648
|
type: Inject,
|
|
1638
1649
|
args: ['secretsManager']
|
|
@@ -2112,7 +2123,7 @@ class BaseFormCanvasComponent {
|
|
|
2112
2123
|
},
|
|
2113
2124
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2114
2125
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2115
|
-
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [value]=\"formParam.get(field.property)?.value\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n />\r\n </div>\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the attachment control when ready -->\r\n <!-- <ag-attachment-control\r\n [allowMulti]=\"field.multi\"\r\n [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n [supportedTypes]=\"field.supportedTypes\"\r\n [buttonType]=\"field.buttonType\"\r\n [hideListOfFiles]=\"field.hideFiles\"\r\n (filesList)=\"updateFilesList($event, field)\"\r\n (actionExecuted)=\"actionExecuted($event, field)\"\r\n style=\"margin-top: 5px\"\r\n label=\"{{field.label! | translate}}\">\r\n </ag-attachment-control> -->\r\n <mat-error class=\"iq-error\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;margin-top:3vh;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
2126
|
+
], 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=\"'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 <!-- Uncomment and use the attachment control when ready -->\r\n <!-- <ag-attachment-control\r\n [allowMulti]=\"field.multi\"\r\n [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n [supportedTypes]=\"field.supportedTypes\"\r\n [buttonType]=\"field.buttonType\"\r\n [hideListOfFiles]=\"field.hideFiles\"\r\n (filesList)=\"updateFilesList($event, field)\"\r\n (actionExecuted)=\"actionExecuted($event, field)\"\r\n style=\"margin-top: 5px\"\r\n label=\"{{field.label! | translate}}\">\r\n </ag-attachment-control> -->\r\n <mat-error class=\"iq-error\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !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 #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }] }); }
|
|
2116
2127
|
}
|
|
2117
2128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
|
|
2118
2129
|
type: Component,
|
|
@@ -2172,7 +2183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2172
2183
|
},
|
|
2173
2184
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2174
2185
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2175
|
-
], template: "<div class=\"main-form-canvas\">\r\n <div class=\"form-wrapper\">\r\n <ng-container *ngIf=\"defaults\">\r\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\r\n <form [formGroup]=\"formParam\" class=\"form-content\">\r\n <div class=\"form-row\">\r\n <div class=\"form-column\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n <ng-container [ngSwitch]=\"field.type\">\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n [matDatepicker]=\"picker\"\r\n [value]=\"formParam.get(field.property)?.value\"\r\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\"\r\n [required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n\r\n <mat-datepicker #picker\r\n [startView]=\"getView(field)\"\r\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\r\n panelClass=\"example-month-picker\">\r\n </mat-datepicker>\r\n\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <div class=\"phone-input-wrapper\">\r\n <ngx-mat-intl-tel-input\r\n formControlName=\"{{ field.property }}\"\r\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [preferredCountries]=\"['qa']\"\r\n [enablePlaceholder]=\"true\"\r\n [enableSearch]=\"true\"\r\n [onlyCountries]=\"getCountryCodeList()\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n </ngx-mat-intl-tel-input>\r\n </div>\r\n\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'password'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <!-- <mat-icon matSuffix-->\r\n <!-- (click)=\"hide = !hide\">-->\r\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\r\n <!-- </mat-icon>-->\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n (keyup)=\"fixArabicNumbers($event.target)\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n\r\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\r\n formControlName=\"{{ field.property }}\">\r\n <mat-chip-row\r\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\r\n [removable]=\"removable\"\r\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\r\n {{ mail }}\r\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\r\n </mat-chip-row>\r\n\r\n <input [attr.aria-labelledby]=\"'label-' + field.property\" [matChipInputFor]=\"null\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\r\n </mat-chip-grid>\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container\r\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"true\"\r\n [disabled]=\"true\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-template #noSequence>\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [readonly]=\"false\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [required]=\"field.required\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-template>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea cdkFocusInitial\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n cdkTextareaAutosize\r\n cdkAutosizeMinRows=\"3\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"></textarea>\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n type=\"number\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [readonly]=\"field.readonly\"\r\n [pattern]=\"field.pattern\">\r\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n class=\"app-input\"\r\n formControlName=\"{{ field.property }}\"\r\n type=\"time\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-describedby]=\"'error-' + field.property\"\r\n [required]=\"field.required\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-checkbox\r\n appearance=\"outline\"\r\n style=\"padding-bottom: 14px; padding-top: 14px;\"\r\n [disabled]=\"field.readonly\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n formControlName=\"{{ field.property }}\">\r\n {{ field.label! | translate }}\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-checkbox>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'color-picker'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\r\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\r\n <input\r\n ejs-colorpicker\r\n type=\"color\"\r\n id=\"colorpicker\"\r\n formControlName=\"{{ field.property }}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n />\r\n </div>\r\n <mat-error *ngIf=\"showError(field.property)\" aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <mat-radio-group\r\n formControlName=\"{{field.property}}\"\r\n class=\"app-radio\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\">\r\n <div class=\"field-row\">\r\n <div class=\"field-label\">\r\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\r\n </div>\r\n <div class=\"field-input\">\r\n <div class=\"radio-group-custom\">\r\n <mat-radio-button\r\n *ngFor=\"let option of field.listOptions\"\r\n [value]=\"option\"\r\n [attr.aria-labelledby]=\"option\">\r\n {{ option | translate }}\r\n </mat-radio-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-radio-group>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\r\n <mat-select\r\n formControlName=\"{{field.property}}\"\r\n [attr.aria-label]=\"field.label! | translate\"\r\n [attr.aria-required]=\"field.required\"\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [disabled]=\"field.readonly\"\r\n [multiple]=\"field.multi || false\"\r\n [required]=\"field.readonly ? false : field.required\"\r\n [(value)]=\"field.defaultListOption\">\r\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions; let i = index\"\r\n [value]=\"item\">\r\n {{ friendlyName(field.label, field.property, item) | translate }}\r\n </mat-option>\r\n </ng-container>\r\n <ng-template #lookup_no_translation>\r\n <mat-option\r\n *ngFor=\"let item of field.listOptions\"\r\n [value]=\"item\">\r\n {{ getOptionValue(item) }}\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the attachment control when ready -->\r\n <!-- <ag-attachment-control\r\n [allowMulti]=\"field.multi\"\r\n [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n [supportedTypes]=\"field.supportedTypes\"\r\n [buttonType]=\"field.buttonType\"\r\n [hideListOfFiles]=\"field.hideFiles\"\r\n (filesList)=\"updateFilesList($event, field)\"\r\n (actionExecuted)=\"actionExecuted($event, field)\"\r\n style=\"margin-top: 5px\"\r\n label=\"{{field.label! | translate}}\">\r\n </ag-attachment-control> -->\r\n <mat-error class=\"iq-error\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n <mat-form-field appearance=\"outline\">\r\n <input class=\"app-input\" dir=\"ltr\"\r\n formControlName=\"{{ field.property }}\"\r\n matInput\r\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\r\n [readonly]=\"field.readonly\"\r\n [required]=\"field.required\"\r\n [attr.aria-required]=\"field.required\"\r\n [attr.aria-invalid]=\"showError(field.property)\"\r\n [attr.aria-labelledby]=\"'label-' + field.property\"\r\n [attr.aria-describedby]=\"'error-' + field.property\">\r\n <mat-error\r\n id=\"error-{{ field.property }}\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\r\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\r\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\r\n <!-- <ng-container-->\r\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\r\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\r\n <!-- <div style=\"display: flex; width: 350%\">-->\r\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\r\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\r\n <!-- <mat-chip-grid #chipGrid>-->\r\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\r\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\r\n <!-- {{ equationValue }}-->\r\n <!-- <button-->\r\n <!-- matChipRemove-->\r\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\r\n <!-- <mat-icon>cancel</mat-icon>-->\r\n <!-- </button>-->\r\n <!-- </mat-chip-row>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-chip-grid>-->\r\n <!-- <input-->\r\n <!-- [(ngModel)]=\"currentEquationValue\"-->\r\n <!-- [matChipInputFor]=\"chipGrid\"-->\r\n <!-- [matAutocomplete]=\"auto\"-->\r\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\r\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\r\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\r\n <!-- aria-label=\"Add equation value\" />-->\r\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\r\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\r\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\r\n <!-- </ng-container>-->\r\n <!-- </mat-autocomplete>-->\r\n <!-- </mat-form-field>-->\r\n <!-- </div>-->\r\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\r\n <!-- {{ getErrors(field.property) | translate }}-->\r\n <!-- </mat-error>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n <!-- </ng-container>-->\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </form>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n<ng-template #dateReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: 'dd/MM/yyyy' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #timeReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneNumberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textareaReadonly let-field=\"field\">\r\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <div class=\"readonly-value json-viewer\">\r\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #normalText>\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #numberReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #currencyReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #radioButtonReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #richTextReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #checkboxReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\r\n <ng-template #showNo>\r\n <mat-icon color=\"warn\">close</mat-icon>\r\n </ng-template>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;margin-top:3vh;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"] }]
|
|
2186
|
+
], 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=\"'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 <!-- Uncomment and use the attachment control when ready -->\r\n <!-- <ag-attachment-control\r\n [allowMulti]=\"field.multi\"\r\n [attachmentDefaultExternal]=\"pageInfo?.attachmentDefaultExternal\"\r\n [supportedTypes]=\"field.supportedTypes\"\r\n [buttonType]=\"field.buttonType\"\r\n [hideListOfFiles]=\"field.hideFiles\"\r\n (filesList)=\"updateFilesList($event, field)\"\r\n (actionExecuted)=\"actionExecuted($event, field)\"\r\n style=\"margin-top: 5px\"\r\n label=\"{{field.label! | translate}}\">\r\n </ag-attachment-control> -->\r\n <mat-error class=\"iq-error\"\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [supportingAttributes]=\"supportingAttributes\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchLookupValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <!-- Uncomment and use the currency control when ready -->\r\n <!-- <app-currency\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\r\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\r\n </app-currency> -->\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <app-multi-auto-complete\r\n [form]=\"formParam\"\r\n [field]=\"field\"\r\n [defaultValue]=\"getMultiValue(field)\"\r\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\r\n <mat-error\r\n *ngIf=\"showError(field.property)\"\r\n aria-live=\"assertive\">\r\n {{ getErrors(field.property) | translate }}\r\n </mat-error>\r\n </app-multi-auto-complete>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <!-- Uncomment and use the rich text editor when ready -->\r\n <!-- <ckeditor\r\n [editor]=\"Editor\"\r\n [disabled]=\"field.readonly\"\r\n formControlName=\"{{field.property}}\">\r\n </ckeditor> -->\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <mat-divider></mat-divider>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'hyper-text'\">\r\n <div>\r\n <mat-label\r\n (click)=\"getHyperTextEvent()\"\r\n class=\"hyper-link\">\r\n {{ field.label! | translate }}\r\n </mat-label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'equation-builder'\">\r\n <ng-container *ngIf=\"showField(defaults, field)\">\r\n <ng-container *ngIf=\"!workflowEditableField(field)\">\r\n <ng-container\r\n [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"workflowEditableField(field)\">\r\n <div class=\"label-and-asterisk-container\">\r\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\r\n {{ field.label! | translate }}\r\n </span>\r\n <span *ngIf=\"field.required && !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 #listReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\r\n {{ listShowValue(defaults, field) | translate }}\r\n </span>\r\n <ng-template #noTranslate>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #sequenceReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #lookupReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #amountReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <span class=\"readonly-value\">\r\n {{ extractFieldName(defaults, field.property) | currency: currency }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #multiSelectReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\r\n <mat-chip-grid class=\"readonly-value chipList\">\r\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\r\n {{ filedProp }}\r\n </mat-chip>\r\n </mat-chip-grid>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #chipListReadonly let-field=\"field\">\r\n <div class=\"readonly-item\">\r\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\r\n <mat-chip-listbox class=\"readonly-value chipList\">\r\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\r\n [selectable]=\"true\"\r\n color=\"warn\"\r\n [removable]=\"false\">\r\n {{ loc }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #readonlyView>\r\n <div class=\"row-wrapper\">\r\n <div class=\"column-wrapper\">\r\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\r\n <div class=\"row-container\">\r\n <ng-container *ngFor=\"let field of row.value\">\r\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\r\n\r\n <ng-container [ngSwitch]=\"field.type\">\r\n\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'phone-number'\">\r\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'currency'\">\r\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'radio-button'\">\r\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'status'\">\r\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'lookup'\">\r\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'amount'\">\r\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'chip-list'\">\r\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'sequence'\">\r\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'list'\">\r\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\r\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'iban-text'\">\r\n <p class=\"label\">\r\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\r\n <span> : </span>\r\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\r\n </p>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'section-title'\">\r\n <div class=\"hrdivider-mid\">\r\n <span>{{ field.label | translate }}</span>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:2px}.optional-text{color:#9b9b9b;font-size:14px;font-weight:400}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%}.readonly-item .readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-item .readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-item .json-viewer{width:100%}.readonly-item .chipList{display:flex;flex-wrap:wrap;gap:4px}.readonly-item mat-icon{font-size:18px;vertical-align:middle}.row-wrapper{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.column-wrapper{display:flex;flex-direction:column;width:100%;align-items:flex-start}.row-container{display:flex;flex-direction:row;gap:20px;width:100%;flex-wrap:wrap}.field-column{display:flex;flex-direction:column;min-width:50px!important}.field-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start}.field-label{flex:0 0 40%;display:flex;flex-direction:column;justify-content:center}.field-input{flex:0 0 60%;display:flex;flex-direction:column}.radio-group-custom{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}@media (max-width: 600px){.main-form-canvas{flex-direction:column;align-items:center}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}\n"] }]
|
|
2176
2187
|
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$2.ActivatedRoute }, { type: BackendService }, { type: i4.FormBuilder }, { type: i5$1.LiveAnnouncer }], propDecorators: { pageInfo: [{
|
|
2177
2188
|
type: Input
|
|
2178
2189
|
}], currency: [{
|
|
@@ -2323,6 +2334,14 @@ class FilterBuilderComponent {
|
|
|
2323
2334
|
clearTimeout(this.autoApplyTimeout);
|
|
2324
2335
|
this.autoApplyTimeout = null;
|
|
2325
2336
|
}
|
|
2337
|
+
const formatIfDate = (type, value) => {
|
|
2338
|
+
if (!type || value === undefined || value === null || value === '')
|
|
2339
|
+
return value;
|
|
2340
|
+
if ((type || '').toLowerCase().includes('date')) {
|
|
2341
|
+
return formatDate(value, 'yyyy-MM-dd', 'en_US');
|
|
2342
|
+
}
|
|
2343
|
+
return value;
|
|
2344
|
+
};
|
|
2326
2345
|
if (index === undefined || !fieldInfo) {
|
|
2327
2346
|
if (!this.filterFields || !this.filterFields.length) {
|
|
2328
2347
|
this.filters = [];
|
|
@@ -2341,7 +2360,7 @@ class FilterBuilderComponent {
|
|
|
2341
2360
|
operator: fi.filterOperator || 'EQUALS',
|
|
2342
2361
|
filterType: 'FILED_FILTER',
|
|
2343
2362
|
fieldType: this.typeMap(fi.type),
|
|
2344
|
-
valueObject: value
|
|
2363
|
+
valueObject: formatIfDate(fi.type, value)
|
|
2345
2364
|
};
|
|
2346
2365
|
});
|
|
2347
2366
|
const hasTextField = (this.filterFields || []).some(fi => ((fi.type || '').toLowerCase() === 'text'));
|
|
@@ -2375,7 +2394,7 @@ class FilterBuilderComponent {
|
|
|
2375
2394
|
operator: fieldInfo.filterOperator || 'EQUALS',
|
|
2376
2395
|
filterType: 'FILED_FILTER',
|
|
2377
2396
|
fieldType: this.typeMap(fieldInfo.type),
|
|
2378
|
-
valueObject: value
|
|
2397
|
+
valueObject: formatIfDate(fieldInfo.type, value)
|
|
2379
2398
|
};
|
|
2380
2399
|
}
|
|
2381
2400
|
const isTextField = ((fieldInfo.type || '').toLowerCase() === 'text');
|
|
@@ -4089,7 +4108,7 @@ class SectionFormCanvasComponent {
|
|
|
4089
4108
|
this.buttonClicked.emit({ ...btn, sectionKey: sectionKey });
|
|
4090
4109
|
}
|
|
4091
4110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4092
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", isTranslateTitle: "isTranslateTitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:
|
|
4111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SectionFormCanvasComponent, isStandalone: true, selector: "lib-section-form-canvas", inputs: { pageInfo: "pageInfo", fields: "fields", itemId: "itemId", editable: "editable", hideBackButton: "hideBackButton", item: "item", title: "title", isTranslateTitle: "isTranslateTitle", key: "key", hideToggle: "hideToggle", isExpanded: "isExpanded", alwaysOpen: "alwaysOpen", buttons: "buttons", itemStatus: "itemStatus" }, outputs: { actionEdit: "actionEdit", formEdit: "formEdit", buttonClicked: "buttonClicked" }, ngImport: i0, template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.buttons-wrapper .action{min-height:32px!important;min-width:20px!important;width:auto!important;padding:0 12px!important;border-radius:9999px!important}.buttons-wrapper .action .mat-icon{font-size:18px!important;width:18px!important;height:22px!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
|
|
4093
4112
|
}
|
|
4094
4113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SectionFormCanvasComponent, decorators: [{
|
|
4095
4114
|
type: Component,
|
|
@@ -4106,7 +4125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4106
4125
|
MatExpansionPanelDescription,
|
|
4107
4126
|
MatExpansionPanelHeader,
|
|
4108
4127
|
NgForOf
|
|
4109
|
-
], template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:
|
|
4128
|
+
], template: "<mat-expansion-panel class=\"location-card\"\r\n #panel=\"matExpansionPanel\"\r\n [expanded]=\"isExpanded\"\r\n [hideToggle]=\"hideToggle\"\r\n (opened)=\"alwaysOpen ? panel.open() : null\"\r\n (closed)=\"alwaysOpen ? panel.open() : null\">\r\n <mat-expansion-panel-header class=\"card-header\" (click)=\"toggleExpand()\">\r\n <mat-panel-title>\r\n <div class=\"title-container\">\r\n <h3 class=\"card-title\" *ngIf=\"isTranslateTitle\">\r\n {{ pageInfo.labelsSection + '.' + title | translate }}\r\n </h3>\r\n <h3 class=\"card-title\" *ngIf=\"!isTranslateTitle\">{{ title }}</h3>\r\n <button mat-button *ngIf=\"itemStatus\" class=\"stateType\" [ngClass]=\"itemStatus\">\r\n {{ pageInfo.labelsSection + '.' + itemStatus | translate }}\r\n </button>\r\n </div>\r\n </mat-panel-title>\r\n\r\n <mat-panel-description class=\"panel-description\">\r\n <div class=\"row flex-auto buttons-wrapper\">\r\n <button\r\n mat-flat-button\r\n *ngFor=\"let btn of buttons\"\r\n type=\"button\"\r\n [color]=\"btn.color || 'primary'\"\r\n (click)=\"onButtonClick(btn , key); $event.stopPropagation()\"\r\n class=\"btn-none-background-primary action\"\r\n [attr.id]=\"btn.id || ('section-btn-' + (btn.action || btn.label || btn.key))\"\r\n >\r\n <div class=\"button-text\">\r\n <mat-icon *ngIf=\"btn.icon\">{{ btn.icon }}</mat-icon>\r\n <span>{{ btn.label | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <div class=\"panel-body\">\r\n <hr class=\"divider\"/>\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editable\"\r\n [item]=\"item\"\r\n (formUpdated)=\"formUpdated($event)\"\r\n ></app-base-form-canvas>\r\n </div>\r\n</mat-expansion-panel>\r\n", styles: [".location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 20px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.buttons-wrapper .action{min-height:32px!important;min-width:20px!important;width:auto!important;padding:0 12px!important;border-radius:9999px!important}.buttons-wrapper .action .mat-icon{font-size:18px!important;width:18px!important;height:22px!important}}\n"] }]
|
|
4110
4129
|
}], propDecorators: { pageInfo: [{
|
|
4111
4130
|
type: Input
|
|
4112
4131
|
}], fields: [{
|
|
@@ -5712,7 +5731,7 @@ class ItemLineEditorComponent {
|
|
|
5712
5731
|
};
|
|
5713
5732
|
}
|
|
5714
5733
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5715
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n\r\n <h3 class=\"title\">{{ title | translate }}</h3>\r\n <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n <div class=\"col\">\r\n {{ labelOf(f) | translate }}\r\n </div>\r\n </ng-container>\r\n </div>\r\n @if (!noDataFound) {\r\n <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n <div class=\"table-row\">\r\n\r\n <div class=\"row-inputs\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editing[i]\"\r\n [emitOnValueChanges]=\"true\"\r\n [item]=\"it\"\r\n [currency]=\"currency\"\r\n (formUpdated)=\"onFormUpdated($event, i)\">\r\n </app-base-form-canvas>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row-actions\">\r\n\r\n <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n [disabled]=\"!canSave(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>check</mat-icon>\r\n <span>{{ 'item-line.save' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n (click)=\"editRow(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>edit</mat-icon>\r\n <span>{{ 'item-line.edit' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n (click)=\"deleteItem(i)\" type=\"button\">\r\n <div class=\"button-text\">\r\n <mat-icon>delete</mat-icon>\r\n <span>{{ 'item-line.delete' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (noDataFound) {\r\n <div class=\"dataNotFound flex-column\">\r\n <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n </div>\r\n\r\n }\r\n <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n [disabled]=\"!canAddNew\">\r\n <div class=\"button-text\">\r\n <mat-icon>add</mat-icon>\r\n <span> {{ 'item-line.addNewItem' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n </div>\r\n\r\n @if (!noDataFound) {\r\n <div class=\"totals-box\">\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"divider\"></div>\r\n\r\n <div class=\"total-row grand\">\r\n <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
5734
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ItemLineEditorComponent, isStandalone: true, selector: "app-item-line-editor", inputs: { noDataFoundIcon: "noDataFoundIcon", noDataFoundTitle: "noDataFoundTitle", noDataFoundSubtitle: "noDataFoundSubtitle", pageInfo: "pageInfo", columnHeaderWidths: "columnHeaderWidths", title: "title", subtitle: "subtitle", allowAdd: "allowAdd", allowDelete: "allowDelete", editable: "editable", currency: "currency", fields: "fields", items: "items" }, outputs: { itemsChange: "itemsChange", itemSaved: "itemSaved", itemDeleted: "itemDeleted", totalsChange: "totalsChange", editStateChange: "editStateChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"item-line-editor\">\r\n\r\n <h3 class=\"title\">{{ title | translate }}</h3>\r\n <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n <div class=\"col\">\r\n {{ labelOf(f) | translate }}\r\n <span *ngIf=\"f.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n @if (!noDataFound) {\r\n <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n <div class=\"table-row\">\r\n\r\n <div class=\"row-inputs\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editing[i]\"\r\n [emitOnValueChanges]=\"true\"\r\n [item]=\"it\"\r\n [currency]=\"currency\"\r\n (formUpdated)=\"onFormUpdated($event, i)\">\r\n </app-base-form-canvas>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row-actions\">\r\n\r\n <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n [disabled]=\"!canSave(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>check</mat-icon>\r\n <span>{{ 'item-line.save' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n (click)=\"editRow(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>edit</mat-icon>\r\n <span>{{ 'item-line.edit' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n (click)=\"deleteItem(i)\" type=\"button\">\r\n <div class=\"button-text\">\r\n <mat-icon>delete</mat-icon>\r\n <span>{{ 'item-line.delete' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (noDataFound) {\r\n <div class=\"dataNotFound flex-column\">\r\n <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n </div>\r\n\r\n }\r\n <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n [disabled]=\"!canAddNew\">\r\n <div class=\"button-text\">\r\n <mat-icon>add</mat-icon>\r\n <span> {{ 'item-line.addNewItem' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n </div>\r\n\r\n @if (!noDataFound) {\r\n <div class=\"totals-box\">\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"divider\"></div>\r\n\r\n <div class=\"total-row grand\">\r\n <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.required-asterisk{color:red}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BaseFormCanvasComponent, selector: "app-base-form-canvas", inputs: ["pageInfo", "currency", "fields", "errors", "workflowEditableFields", "isWorkflowEditableManaged", "supportingAttributes", "editable", "emitOnValueChanges", "item", "equationSuggestedFields", "currentEquationValue"], outputs: ["attachmentEmitter", "actionEmitter", "formUpdated", "hyperTextEvent", "currentEquationValueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
5716
5735
|
}
|
|
5717
5736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ItemLineEditorComponent, decorators: [{
|
|
5718
5737
|
type: Component,
|
|
@@ -5723,7 +5742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5723
5742
|
MatIconModule,
|
|
5724
5743
|
BaseFormCanvasComponent,
|
|
5725
5744
|
TranslateModule
|
|
5726
|
-
], template: "<div class=\"item-line-editor\">\r\n\r\n <h3 class=\"title\">{{ title | translate }}</h3>\r\n <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n <div class=\"col\">\r\n {{ labelOf(f) | translate }}\r\n </div>\r\n </ng-container>\r\n </div>\r\n @if (!noDataFound) {\r\n <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n <div class=\"table-row\">\r\n\r\n <div class=\"row-inputs\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editing[i]\"\r\n [emitOnValueChanges]=\"true\"\r\n [item]=\"it\"\r\n [currency]=\"currency\"\r\n (formUpdated)=\"onFormUpdated($event, i)\">\r\n </app-base-form-canvas>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row-actions\">\r\n\r\n <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n [disabled]=\"!canSave(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>check</mat-icon>\r\n <span>{{ 'item-line.save' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n (click)=\"editRow(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>edit</mat-icon>\r\n <span>{{ 'item-line.edit' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n (click)=\"deleteItem(i)\" type=\"button\">\r\n <div class=\"button-text\">\r\n <mat-icon>delete</mat-icon>\r\n <span>{{ 'item-line.delete' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (noDataFound) {\r\n <div class=\"dataNotFound flex-column\">\r\n <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n </div>\r\n\r\n }\r\n <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n [disabled]=\"!canAddNew\">\r\n <div class=\"button-text\">\r\n <mat-icon>add</mat-icon>\r\n <span> {{ 'item-line.addNewItem' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n </div>\r\n\r\n @if (!noDataFound) {\r\n <div class=\"totals-box\">\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"divider\"></div>\r\n\r\n <div class=\"total-row grand\">\r\n <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"] }]
|
|
5745
|
+
], template: "<div class=\"item-line-editor\">\r\n\r\n <h3 class=\"title\">{{ title | translate }}</h3>\r\n <p class=\"subtitle\">{{ subtitle | translate }}</p>\r\n\r\n <div class=\"table-header\" [ngStyle]=\"{ 'grid-template-columns': gridTemplate }\">\r\n <ng-container *ngFor=\"let f of headerFields; let idx = index\">\r\n <div class=\"col\">\r\n {{ labelOf(f) | translate }}\r\n <span *ngIf=\"f.required\" class=\"required-asterisk\"> * </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n @if (!noDataFound) {\r\n <div class=\"table-body\" *ngFor=\"let it of items; let i = index; trackBy: trackByIndex\">\r\n\r\n <div class=\"table-row\">\r\n\r\n <div class=\"row-inputs\">\r\n <app-base-form-canvas\r\n [pageInfo]=\"pageInfo\"\r\n [fields]=\"fields\"\r\n [editable]=\"editing[i]\"\r\n [emitOnValueChanges]=\"true\"\r\n [item]=\"it\"\r\n [currency]=\"currency\"\r\n (formUpdated)=\"onFormUpdated($event, i)\">\r\n </app-base-form-canvas>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row-actions\">\r\n\r\n <button *ngIf=\"editing[i]\" mat-stroked-button class=\"btn-none-background-primary save-btn\" (click)=\"saveRow(i)\"\r\n [disabled]=\"!canSave(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>check</mat-icon>\r\n <span>{{ 'item-line.save' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"!editing[i] && editable\" mat-stroked-button class=\"btn-none-background-primary edit-btn\"\r\n (click)=\"editRow(i)\">\r\n <div class=\"button-text\">\r\n <mat-icon>edit</mat-icon>\r\n <span>{{ 'item-line.edit' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n <button *ngIf=\"allowDelete && editable\" mat-stroked-button class=\"btn-none-background-primary delete-btn\"\r\n (click)=\"deleteItem(i)\" type=\"button\">\r\n <div class=\"button-text\">\r\n <mat-icon>delete</mat-icon>\r\n <span>{{ 'item-line.delete' | translate }}</span>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (noDataFound) {\r\n <div class=\"dataNotFound flex-column\">\r\n <mat-icon class=\"dataNotFound__icon\">{{ noDataFoundIcon }}</mat-icon>\r\n <span class=\"dataNotFound__title\">{{ noDataFoundTitle | translate }}</span>\r\n <span class=\"dataNotFound__subtitle\">{{ noDataFoundSubtitle | translate }}</span>\r\n </div>\r\n\r\n }\r\n <div class=\"add-item\" *ngIf=\"allowAdd && editable\">\r\n <div class=\"divider\" style=\"border-top: 1px solid var(--primary-color-3nd)\"></div>\r\n <button mat-stroked-button color=\"primary\" class=\"btn-none-background-primary\" (click)=\"addNewItem()\"\r\n [disabled]=\"!canAddNew\">\r\n <div class=\"button-text\">\r\n <mat-icon>add</mat-icon>\r\n <span> {{ 'item-line.addNewItem' | translate }}</span>\r\n </div>\r\n </button>\r\n\r\n </div>\r\n\r\n @if (!noDataFound) {\r\n <div class=\"totals-box\">\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.discount' | translate }}</span>\r\n <span class=\"value red\">{{ discountTotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"total-row\">\r\n <span class=\"label\">{{ 'item-line.amount' | translate }}</span>\r\n <span class=\"value\">{{ subtotal | currency:currency }}</span>\r\n </div>\r\n\r\n <div class=\"divider\"></div>\r\n\r\n <div class=\"total-row grand\">\r\n <span class=\"label\">{{ 'item-line.grandTotal' | translate }}</span>\r\n <span class=\"value strong green\">{{ grandTotal | currency:currency }}</span>\r\n </div>\r\n </div>\r\n }\r\n\r\n</div>\r\n", styles: [".item-line-editor{background:#fff;border-radius:8px;padding:20px}.title{font-size:20px;margin-bottom:4px;font-weight:600}.subtitle{color:#777;font-size:13px;margin-bottom:16px}.table-header{display:grid;grid-template-columns:20% 25% 15% 10% 15% 15%;font-weight:600;font-size:13px;padding-bottom:8px;border-bottom:2px solid var(--primary-color-3nd);margin-bottom:12px}.col{padding-left:4px;display:flex;align-items:center;gap:2px}.required-asterisk{color:red}.table-body .table-row{display:grid;padding:10px 0;border-bottom:1px solid #e6e6e6}.row-inputs{padding-right:10px}.row-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;margin-top:24px}.line-total{font-weight:600;font-size:14px}.save-btn,.edit-btn,.delete-btn{width:114px!important;height:32px!important;border-radius:9999px!important;border:1px solid var(--primary-color-3nd);background:#fff}.delete-btn{color:#ce3b3a!important;border:1px solid #ce3b3a!important}.add-item{margin-top:16px}.totals-box{margin-top:20px;width:400px}.total-row{display:flex;justify-content:space-between;font-size:15px;margin:6px 0}.grand{font-family:lusail-bold,sans-serif!important}.total-row .label{font-weight:500;color:#333}.total-row .value{font-weight:600}.divider{border-top:1px solid #e0e0e0;margin:10px 0}.red{color:#d9534f}.green{color:#0c7d5e;font-weight:700}.grand .value,.button-text span{font-size:16px}.button-text mat-icon{font-size:16px!important}.dataNotFound{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}.dataNotFound__icon{color:var(--primary-color-3nd);font-size:24px;height:24px;width:24px;margin-bottom:8px}.dataNotFound__title{color:#6a6a6a;font-size:18px;font-weight:700;margin-bottom:4px}.dataNotFound__subtitle{color:#6a6a6a;font-size:16px;font-weight:400}\n"] }]
|
|
5727
5746
|
}], propDecorators: { noDataFoundIcon: [{
|
|
5728
5747
|
type: Input
|
|
5729
5748
|
}], noDataFoundTitle: [{
|