@unifylib/ui-lib 1.2.18 → 1.2.20
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/base-form-canvas/base-form-canvas.component.mjs +7 -3
- package/esm2022/lib/components/multi-auto-complete/multi-auto-complete.component.mjs +3 -3
- package/fesm2022/iq-ui-lib.mjs +8 -4
- package/fesm2022/iq-ui-lib.mjs.map +1 -1
- package/lib/components/base-form-canvas/base-form-canvas.component.d.ts +1 -0
- package/package.json +1 -1
package/fesm2022/iq-ui-lib.mjs
CHANGED
|
@@ -1586,7 +1586,7 @@ class MultiAutoCompleteComponent {
|
|
|
1586
1586
|
return this.field.property;
|
|
1587
1587
|
}
|
|
1588
1588
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiAutoCompleteComponent, deps: [{ token: BackendService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1589
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiAutoCompleteComponent, isStandalone: true, selector: "app-multi-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", pathParam: "pathParam", readonly: "readonly", labelsSection: "labelsSection" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true }, { propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-multi-auto\">\n <div class=\"mat-field-wrapper\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{ field.property }}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\">\n {{ 'optional' | translate }}\n </span>\n </div>\n\n <div class=\"multi-select-control\">\n <mat-form-field class=\"full-width multi-autocomplete-field\" appearance=\"outline\">\n <mat-chip-listbox #chipList class=\"chip-listbox\" [selectable]=\"true\">\n <mat-chip\n *ngFor=\"let item of selectedItems\"\n class=\"multi-select-chip\"\n [removable]=\"true\"\n (removed)=\"remove(item)\">\n {{ itemNameByLag(item) }}\n <mat-icon *ngIf=\"!field.readonly\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n <input\n class=\"chip-input app-input\"\n type=\"text\"\n [id]=\"getId()\"\n #itemInput\n [formControl]=\"multiControl\"\n [matAutocomplete]=\"auto\"\n matInput\n [placeholder]=\"showInputPlaceholder ? (getPlaceholderKey() | translate) : ''\"\n [readonly]=\"readonly\"\n [required]=\"isRequired\"\n (click)=\"onInputClick(autocompleteTrigger); $event.stopPropagation()\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [disabled]=\"field.readonly\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n </mat-chip-listbox>\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"selected($event.option.value)\">\n <ng-container *ngIf=\"!field.readonly\">\n <mat-option\n *ngFor=\"let item of lookupItems$ | async\"\n [value]=\"item\">\n {{ itemNameByLag(item) }}\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n\n <button\n type=\"button\"\n class=\"multi-select-arrow-trigger\"\n [disabled]=\"field.readonly || readonly\"\n [attr.aria-label]=\"'BASE_TABLE.openLookupOptions' | translate\"\n [attr.id]=\"'multi-select-trigger-' + field.property\"\n (click)=\"onTriggerClick($event, autocompleteTrigger)\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M7 10l5 5 5-5z\"></path>\n </svg>\n </button>\n </div>\n </div>\n</ng-container>\n", styles: [".main-multi-auto,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px
|
|
1589
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiAutoCompleteComponent, isStandalone: true, selector: "app-multi-auto-complete", inputs: { field: "field", form: "form", defaultValue: "defaultValue", pathParam: "pathParam", readonly: "readonly", labelsSection: "labelsSection" }, outputs: { selectedValue: "selectedValue" }, viewQueries: [{ propertyName: "itemInput", first: true, predicate: ["itemInput"], descendants: true }, { propertyName: "matACTrigger", first: true, predicate: ["autocompleteTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"field\" class=\"main-multi-auto\">\n <div class=\"mat-field-wrapper\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{ field.property }}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\">\n {{ 'optional' | translate }}\n </span>\n </div>\n\n <div class=\"multi-select-control\">\n <mat-form-field class=\"full-width multi-autocomplete-field\" appearance=\"outline\">\n <mat-chip-listbox #chipList class=\"chip-listbox\" [selectable]=\"true\">\n <mat-chip\n *ngFor=\"let item of selectedItems\"\n class=\"multi-select-chip\"\n [removable]=\"true\"\n (removed)=\"remove(item)\">\n {{ itemNameByLag(item) }}\n <mat-icon *ngIf=\"!field.readonly\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n <input\n class=\"chip-input app-input\"\n type=\"text\"\n [id]=\"getId()\"\n #itemInput\n [formControl]=\"multiControl\"\n [matAutocomplete]=\"auto\"\n matInput\n [placeholder]=\"showInputPlaceholder ? (getPlaceholderKey() | translate) : ''\"\n [readonly]=\"readonly\"\n [required]=\"isRequired\"\n (click)=\"onInputClick(autocompleteTrigger); $event.stopPropagation()\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [disabled]=\"field.readonly\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n </mat-chip-listbox>\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"selected($event.option.value)\">\n <ng-container *ngIf=\"!field.readonly\">\n <mat-option\n *ngFor=\"let item of lookupItems$ | async\"\n [value]=\"item\">\n {{ itemNameByLag(item) }}\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n\n <button\n type=\"button\"\n class=\"multi-select-arrow-trigger\"\n [disabled]=\"field.readonly || readonly\"\n [attr.aria-label]=\"'BASE_TABLE.openLookupOptions' | translate\"\n [attr.id]=\"'multi-select-trigger-' + field.property\"\n (click)=\"onTriggerClick($event, autocompleteTrigger)\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M7 10l5 5 5-5z\"></path>\n </svg>\n </button>\n </div>\n </div>\n</ng-container>\n", styles: [".main-multi-auto,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.multi-select-control{position:relative;width:100%}.multi-select-arrow-trigger{position:absolute;top:0;right:4px;z-index:5;display:flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:#0000008a}.multi-select-arrow-trigger:disabled{cursor:default;opacity:.38}.multi-select-arrow-trigger svg{width:24px;height:24px;fill:currentColor;pointer-events:none}:host ::ng-deep .multi-autocomplete-field{width:100%}:host ::ng-deep .multi-autocomplete-field .mat-mdc-form-field-error-wrapper,:host ::ng-deep .multi-autocomplete-field mat-error{display:none!important}:host ::ng-deep .multi-autocomplete-field .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .multi-autocomplete-field .mat-mdc-form-field-flex{align-items:center;padding-right:36px}:host ::ng-deep .multi-autocomplete-field .mat-mdc-form-field-infix{min-height:44px!important;padding:12px 0 12px 12px!important;display:flex;align-items:center;flex:1 1 auto;min-width:0;width:100%}:host ::ng-deep .multi-autocomplete-field .chip-listbox{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;align-content:center;gap:4px;min-height:20px;min-width:0;width:100%;margin:0;padding:0;border:none;background:transparent}:host ::ng-deep .multi-autocomplete-field .multi-select-chip.mat-mdc-chip{height:24px;min-height:24px;margin:0;font-size:14px;font-weight:500;line-height:20px}:host ::ng-deep .multi-autocomplete-field .multi-select-chip .mat-mdc-chip-action-label{line-height:20px}:host ::ng-deep .multi-autocomplete-field .multi-select-chip .mat-icon{width:18px;height:18px;font-size:18px}:host ::ng-deep .multi-autocomplete-field .chip-input{flex:1 1 60px;min-width:60px;width:auto;height:20px!important;min-height:20px!important;line-height:20px!important;margin:0;padding:0;border:none;outline:none;background:transparent;font-size:14px;font-weight:500}:host ::ng-deep .multi-autocomplete-field .chip-listbox:has(.multi-select-chip) .chip-input{min-width:0;flex:0 1 40px}@media (max-width: 600px){.main-multi-auto,.mat-field-wrapper,.multi-autocomplete-field{width:100%}}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption$1, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
1590
1590
|
}
|
|
1591
1591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiAutoCompleteComponent, decorators: [{
|
|
1592
1592
|
type: Component,
|
|
@@ -1606,7 +1606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1606
1606
|
NgIf,
|
|
1607
1607
|
MatChipListbox,
|
|
1608
1608
|
TranslateModule,
|
|
1609
|
-
], template: "<ng-container *ngIf=\"field\" class=\"main-multi-auto\">\n <div class=\"mat-field-wrapper\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{ field.property }}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\">\n {{ 'optional' | translate }}\n </span>\n </div>\n\n <div class=\"multi-select-control\">\n <mat-form-field class=\"full-width multi-autocomplete-field\" appearance=\"outline\">\n <mat-chip-listbox #chipList class=\"chip-listbox\" [selectable]=\"true\">\n <mat-chip\n *ngFor=\"let item of selectedItems\"\n class=\"multi-select-chip\"\n [removable]=\"true\"\n (removed)=\"remove(item)\">\n {{ itemNameByLag(item) }}\n <mat-icon *ngIf=\"!field.readonly\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n <input\n class=\"chip-input app-input\"\n type=\"text\"\n [id]=\"getId()\"\n #itemInput\n [formControl]=\"multiControl\"\n [matAutocomplete]=\"auto\"\n matInput\n [placeholder]=\"showInputPlaceholder ? (getPlaceholderKey() | translate) : ''\"\n [readonly]=\"readonly\"\n [required]=\"isRequired\"\n (click)=\"onInputClick(autocompleteTrigger); $event.stopPropagation()\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [disabled]=\"field.readonly\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n </mat-chip-listbox>\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"selected($event.option.value)\">\n <ng-container *ngIf=\"!field.readonly\">\n <mat-option\n *ngFor=\"let item of lookupItems$ | async\"\n [value]=\"item\">\n {{ itemNameByLag(item) }}\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n\n <button\n type=\"button\"\n class=\"multi-select-arrow-trigger\"\n [disabled]=\"field.readonly || readonly\"\n [attr.aria-label]=\"'BASE_TABLE.openLookupOptions' | translate\"\n [attr.id]=\"'multi-select-trigger-' + field.property\"\n (click)=\"onTriggerClick($event, autocompleteTrigger)\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M7 10l5 5 5-5z\"></path>\n </svg>\n </button>\n </div>\n </div>\n</ng-container>\n", styles: [".main-multi-auto,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px
|
|
1609
|
+
], template: "<ng-container *ngIf=\"field\" class=\"main-multi-auto\">\n <div class=\"mat-field-wrapper\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{ field.property }}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\">\n {{ 'optional' | translate }}\n </span>\n </div>\n\n <div class=\"multi-select-control\">\n <mat-form-field class=\"full-width multi-autocomplete-field\" appearance=\"outline\">\n <mat-chip-listbox #chipList class=\"chip-listbox\" [selectable]=\"true\">\n <mat-chip\n *ngFor=\"let item of selectedItems\"\n class=\"multi-select-chip\"\n [removable]=\"true\"\n (removed)=\"remove(item)\">\n {{ itemNameByLag(item) }}\n <mat-icon *ngIf=\"!field.readonly\" matChipRemove>cancel</mat-icon>\n </mat-chip>\n <input\n class=\"chip-input app-input\"\n type=\"text\"\n [id]=\"getId()\"\n #itemInput\n [formControl]=\"multiControl\"\n [matAutocomplete]=\"auto\"\n matInput\n [placeholder]=\"showInputPlaceholder ? (getPlaceholderKey() | translate) : ''\"\n [readonly]=\"readonly\"\n [required]=\"isRequired\"\n (click)=\"onInputClick(autocompleteTrigger); $event.stopPropagation()\"\n (keydown)=\"onKeydown($event, autocompleteTrigger)\"\n [disabled]=\"field.readonly\"\n #autocompleteTrigger=\"matAutocompleteTrigger\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n </mat-chip-listbox>\n\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n autoActiveFirstOption\n [displayWith]=\"displayFn\"\n (optionSelected)=\"selected($event.option.value)\">\n <ng-container *ngIf=\"!field.readonly\">\n <mat-option\n *ngFor=\"let item of lookupItems$ | async\"\n [value]=\"item\">\n {{ itemNameByLag(item) }}\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </mat-form-field>\n\n <button\n type=\"button\"\n class=\"multi-select-arrow-trigger\"\n [disabled]=\"field.readonly || readonly\"\n [attr.aria-label]=\"'BASE_TABLE.openLookupOptions' | translate\"\n [attr.id]=\"'multi-select-trigger-' + field.property\"\n (click)=\"onTriggerClick($event, autocompleteTrigger)\">\n <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" focusable=\"false\" aria-hidden=\"true\">\n <path d=\"M7 10l5 5 5-5z\"></path>\n </svg>\n </button>\n </div>\n </div>\n</ng-container>\n", styles: [".main-multi-auto,.mat-field-wrapper{display:flex;flex-direction:column;width:100%}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.custom-label{font-weight:500}.required-asterisk{color:red}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.multi-select-control{position:relative;width:100%}.multi-select-arrow-trigger{position:absolute;top:0;right:4px;z-index:5;display:flex;align-items:center;justify-content:center;width:36px;height:44px;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:#0000008a}.multi-select-arrow-trigger:disabled{cursor:default;opacity:.38}.multi-select-arrow-trigger svg{width:24px;height:24px;fill:currentColor;pointer-events:none}:host ::ng-deep .multi-autocomplete-field{width:100%}:host ::ng-deep .multi-autocomplete-field .mat-mdc-form-field-error-wrapper,:host ::ng-deep .multi-autocomplete-field mat-error{display:none!important}:host ::ng-deep .multi-autocomplete-field .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .multi-autocomplete-field .mat-mdc-form-field-flex{align-items:center;padding-right:36px}:host ::ng-deep .multi-autocomplete-field .mat-mdc-form-field-infix{min-height:44px!important;padding:12px 0 12px 12px!important;display:flex;align-items:center;flex:1 1 auto;min-width:0;width:100%}:host ::ng-deep .multi-autocomplete-field .chip-listbox{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;align-content:center;gap:4px;min-height:20px;min-width:0;width:100%;margin:0;padding:0;border:none;background:transparent}:host ::ng-deep .multi-autocomplete-field .multi-select-chip.mat-mdc-chip{height:24px;min-height:24px;margin:0;font-size:14px;font-weight:500;line-height:20px}:host ::ng-deep .multi-autocomplete-field .multi-select-chip .mat-mdc-chip-action-label{line-height:20px}:host ::ng-deep .multi-autocomplete-field .multi-select-chip .mat-icon{width:18px;height:18px;font-size:18px}:host ::ng-deep .multi-autocomplete-field .chip-input{flex:1 1 60px;min-width:60px;width:auto;height:20px!important;min-height:20px!important;line-height:20px!important;margin:0;padding:0;border:none;outline:none;background:transparent;font-size:14px;font-weight:500}:host ::ng-deep .multi-autocomplete-field .chip-listbox:has(.multi-select-chip) .chip-input{min-width:0;flex:0 1 40px}@media (max-width: 600px){.main-multi-auto,.mat-field-wrapper,.multi-autocomplete-field{width:100%}}\n"] }]
|
|
1610
1610
|
}], ctorParameters: () => [{ type: BackendService }, { type: i2.TranslateService }], propDecorators: { itemInput: [{
|
|
1611
1611
|
type: ViewChild,
|
|
1612
1612
|
args: ['itemInput']
|
|
@@ -2567,6 +2567,10 @@ class BaseFormCanvasComponent {
|
|
|
2567
2567
|
}
|
|
2568
2568
|
return (CONTROL?.value || CONTROL?.value === 0) && CONTROL?.status === 'INVALID';
|
|
2569
2569
|
}
|
|
2570
|
+
getFieldCurrentLength(prop) {
|
|
2571
|
+
const value = this.formParam?.get([prop])?.value;
|
|
2572
|
+
return value === undefined || value === null ? 0 : String(value).length;
|
|
2573
|
+
}
|
|
2570
2574
|
clearFieldValue(prop) {
|
|
2571
2575
|
this.formParam?.get([prop])?.setValue('');
|
|
2572
2576
|
}
|
|
@@ -2930,7 +2934,7 @@ class BaseFormCanvasComponent {
|
|
|
2930
2934
|
},
|
|
2931
2935
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
2932
2936
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
2933
|
-
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n <mat-select\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%;.readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3$1.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$1.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: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: PhoneNumberOnlyDirective, selector: "[phoneNumberOnly]", inputs: ["phoneNumberOnly"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly", "labelsSection"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes", "ariaDescribedBy"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals", "numbersOnly", "numbersOnlyWithPlus"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
|
|
2937
|
+
], viewQueries: [{ propertyName: "fieldsInput", first: true, predicate: ["EquationValueInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.maxlength]=\"field.maxLength || null\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-hint *ngIf=\"field.maxLength\" align=\"end\">\n {{ getFieldCurrentLength(field.property) }}/{{ field.maxLength }}\n </mat-hint>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"list-field\" style=\"width: 100%\">\n <mat-select\n panelClass=\"base-form-list-panel\"\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%;.readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}:host ::ng-deep .list-field .mat-mdc-text-field-wrapper{border-radius:8px;transition:border-color .16s ease}:host ::ng-deep .list-field .mdc-notched-outline__leading,:host ::ng-deep .list-field .mdc-notched-outline__notch,:host ::ng-deep .list-field .mdc-notched-outline__trailing{border-width:2px!important;border-color:#0d426147!important}:host ::ng-deep .list-field:hover .mdc-notched-outline__leading,:host ::ng-deep .list-field:hover .mdc-notched-outline__notch,:host ::ng-deep .list-field:hover .mdc-notched-outline__trailing,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__leading,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__notch,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__trailing{border-color:#0d42616b!important}::ng-deep .base-form-list-panel{padding:0!important;border:2px solid rgba(13,66,97,.18);border-radius:8px!important;overflow:hidden}::ng-deep .base-form-list-panel .mat-mdc-option{box-sizing:border-box;min-height:40px;margin:0;border:0;border-bottom:2px solid rgba(13,66,97,.14);border-radius:0;background-color:#fff;box-shadow:none;transition:background-color .16s ease,border-color .16s ease}::ng-deep .base-form-list-panel .mat-mdc-option:last-child{border-bottom:0}::ng-deep .base-form-list-panel .mat-mdc-option:hover,::ng-deep .base-form-list-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .base-form-list-panel .mat-mdc-option.mdc-list-item--selected{background-color:#0d42610f;border-color:#0d426138}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i3$1.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$1.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: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption$2, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: PhoneNumberOnlyDirective, selector: "[phoneNumberOnly]", inputs: ["phoneNumberOnly"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: NgxJsonViewerModule }, { kind: "component", type: i10.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: NgxMatIntlTelInputComponent, selector: "ngx-mat-intl-tel-input", inputs: ["preferredCountries", "enablePlaceholder", "inputPlaceholder", "cssClass", "name", "onlyCountries", "errorStateMatcher", "enableSearch", "searchPlaceholder", "describedBy", "format", "placeholder", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "component", type: MultiAutoCompleteComponent, selector: "app-multi-auto-complete", inputs: ["field", "form", "defaultValue", "pathParam", "readonly", "labelsSection"], outputs: ["selectedValue"] }, { kind: "component", type: AutoCompleteComponent, selector: "app-auto-complete", inputs: ["field", "form", "defaultValue", "readonly", "supportingAttributes"], outputs: ["selectedValue"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: AttachmentUploaderComponent, selector: "app-attachment-uploader", inputs: ["acceptedTypes", "ariaDescribedBy"], outputs: ["fileSelected"] }, { kind: "directive", type: DecimalOnlyDirective, selector: "[numbersOnly]", inputs: ["maxDecimals", "numbersOnly", "numbersOnlyWithPlus"] }, { kind: "directive", type: MaxDigitsDirective, selector: "[maxDigits]", inputs: ["maxDigits"] }] }); }
|
|
2934
2938
|
}
|
|
2935
2939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseFormCanvasComponent, decorators: [{
|
|
2936
2940
|
type: Component,
|
|
@@ -2999,7 +3003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2999
3003
|
},
|
|
3000
3004
|
{ provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format },
|
|
3001
3005
|
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
|
|
3002
|
-
], template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n <mat-select\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%;.readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"] }]
|
|
3006
|
+
], template: "<div class=\"main-form-canvas\">\n <div class=\"form-wrapper\">\n <ng-container *ngIf=\"defaults\">\n <ng-container *ngIf=\"editable; else readonlyView\" class=\"form-container\">\n <form [formGroup]=\"formParam\" class=\"form-content\">\n <div class=\"form-row\">\n <div class=\"form-column\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n <ng-container [ngSwitch]=\"field.type\">\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n\n <mat-form-field appearance=\"outline\">\n <input matInput\n [matDatepicker]=\"picker\"\n [min]=\"minDate\"\n (dateChange)=\"formParam.get(field.property).setValue($event.value)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n formControlName=\"{{field.property}}\"\n [required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n\n <mat-datepicker-toggle *ngIf=\"!field.readonly\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\n <mat-datepicker #picker\n [startView]=\"getView(field)\"\n (yearSelected)=\"setMonthAndYear($event, picker, field)\"\n panelClass=\"example-month-picker\">\n </mat-datepicker>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container class=\"custom-ngx-mat-intl-tel-input\" *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <div class=\"phone-input-wrapper\">\n <ngx-mat-intl-tel-input\n formControlName=\"{{ field.property }}\"\n [inputPlaceholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [preferredCountries]=\"['qa']\"\n [enablePlaceholder]=\"true\"\n [enableSearch]=\"true\"\n [onlyCountries]=\"getCountryCodeList()\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n </ngx-mat-intl-tel-input>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'password'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n [type]=\"hide && !field.disabled ? 'password' : 'text'\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <!-- <mat-icon matSuffix-->\n <!-- (click)=\"hide = !hide\">-->\n <!-- {{ hide ? 'visibility_off' : 'visibility' }}-->\n <!-- </mat-icon>-->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <mat-icon *ngIf=\"field.showSearchIcon\" matPrefix>search</mat-icon>\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n (keyup)=\"fixArabicNumbers($event.target)\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [phoneNumberOnly]=\"field.phoneNumberOnly\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <span\n *ngIf=\"field.showSearchIcon && !field.readonly && (formParam?.get([field.property])?.value ?? '') !== ''\"\n matSuffix\n class=\"clear-icon-suffix\">\n <button\n mat-icon-button\n type=\"button\"\n class=\"clear-icon-button\"\n [attr.aria-label]=\"'BASE_TABLE.clearField' | translate\"\n (click)=\"clearFieldValue(field.property)\">\n <mat-icon aria-hidden=\"true\">close</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"multi-state-filter\" [formGroup]=\"formParam\">\n <button\n type=\"button\"\n class=\"multi-state-filter__trigger\"\n [matMenuTriggerFor]=\"statusMultiMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"false\"\n [attr.aria-label]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : (field.label | translate)\">\n <span\n class=\"multi-state-filter__trigger-text\"\n [class.multi-state-filter__trigger-text--placeholder]=\"isMultiStateEmpty(field.property)\">\n {{\n getMultiStateFilterTriggerLabel(field)\n || (field.placeholder\n ? (labelKeyPlaceHolder(field) | translate)\n : ('FILTER-BUILDER.selectStatus' | translate))\n }}\n </span>\n <mat-icon class=\"multi-state-filter__chevron\" aria-hidden=\"true\">keyboard_arrow_down</mat-icon>\n </button>\n <mat-menu #statusMultiMenu=\"matMenu\" class=\"multi-state-filter__menu-panel\" [hasBackdrop]=\"true\">\n <div\n class=\"multi-state-filter__menu-inner\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"onMultiStateMenuInnerKeydown($event, field)\">\n <div\n *ngFor=\"let code of field.listOptions || []\"\n mat-menu-item\n class=\"multi-state-filter__row\"\n [attr.data-multi-state-code]=\"code\"\n (click)=\"onMultiStateRowClick($event, field.property, code)\">\n <mat-checkbox\n tabindex=\"-1\"\n (click)=\"$event.stopPropagation()\"\n [checked]=\"isMultiStateSelected(field.property, code)\"\n (change)=\"toggleMultiStateFilter(field.property, code, $event.checked)\">\n </mat-checkbox>\n <span\n class=\"multi-state-filter__pill stateType\"\n [ngClass]=\"code\">\n {{ statusOptionLabelKey(field, code) | translate }}\n </span>\n </div>\n </div>\n </mat-menu>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n\n <mat-chip-grid [attr.aria-labelledby]=\"'label-' + field.property\"\n formControlName=\"{{ field.property }}\">\n <mat-chip-row\n *ngFor=\"let mail of splittedChips(formParam, field.property); let idx = index\"\n [removable]=\"removable\"\n (removed)=\"removeChipsItem(formParam, field.property, idx)\">\n {{ mail }}\n <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n </mat-chip-row>\n\n <input [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [matChipInputFor]=\"null\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"addOnBlur\"\n (matChipInputTokenEnd)=\"addEmailToChips($event, formParam, field.property)\">\n </mat-chip-grid>\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container\n *ngIf=\"referenceAttributeTrue(field.property, 'autoGenerated'); else noSequence\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"true\"\n [disabled]=\"true\"\n [attr.aria-labelledby]=\"'label-' + field.property\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n\n <ng-template #noSequence>\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required\" class=\"required-asterisk\"> * </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n [readonly]=\"false\"\n [disabled]=\"false\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [required]=\"field.required\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-template>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <textarea cdkFocusInitial\n formControlName=\"{{ field.property }}\"\n matInput\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"3\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [maxDigits]=\"field.maxLength\"\n [attr.maxlength]=\"field.maxLength || null\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"></textarea>\n <mat-hint *ngIf=\"field.maxLength\" align=\"end\">\n {{ getFieldCurrentLength(field.property) }}/{{ field.maxLength }}\n </mat-hint>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n matInput\n type=\"number\"\n [attr.min]=\"field.allowNegative ? null : 0\"\n (keydown)=\"blockNegativeNumberKeydown($event, field)\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [maxDigits]=\"field.maxLength\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [pattern]=\"field.pattern\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'bigdecimal'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n formControlName=\"{{ field.property }}\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [numbersOnly]=\"true\" [maxDecimals]=\"field.maxDecimals\"\n [maxDigits]=\"field.maxLength\"\n [pattern]=\"field.pattern\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.readonly ? false : field.required\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\">\n <mat-error id=\"error-{{ field.property }}\" *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input\n #timeInput\n matInput\n class=\"app-input\"\n formControlName=\"{{ field.property }}\"\n type=\"time\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [required]=\"field.required\">\n <span *ngIf=\"!field.readonly\" matSuffix class=\"mat-datepicker-toggle time-picker-toggle\">\n <button\n type=\"button\"\n mat-icon-button\n class=\"time-picker-toggle-button\"\n [attr.aria-label]=\"field.label! | translate\"\n (click)=\"openTimePicker(timeInput); $event.stopPropagation()\">\n <mat-icon>schedule</mat-icon>\n </button>\n </span>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-checkbox\n appearance=\"outline\"\n style=\"padding-bottom: 14px; padding-top: 14px;\"\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n {{ field.label! | translate }}\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-checkbox>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-slide-toggle\n [disabled]=\"field.readonly\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n formControlName=\"{{ field.property }}\">\n </mat-slide-toggle>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'color-picker'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div fxLayout=\"row\" fxLayoutAlign=\"center\">\n <h4 style=\"margin-right: 10px\">{{ field.label! | translate }}</h4>\n <input\n ejs-colorpicker\n type=\"color\"\n id=\"colorpicker\"\n formControlName=\"{{ field.property }}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n />\n </div>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <mat-radio-group\n formControlName=\"{{field.property}}\"\n class=\"app-radio\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <div class=\"field-row\">\n <div class=\"field-label\">\n <span class=\"custom-label\">{{ field.label! | translate }}</span>\n </div>\n <div class=\"field-input\">\n <div class=\"radio-group-custom\">\n <mat-radio-button\n *ngFor=\"let option of field.listOptions\"\n [value]=\"option\"\n [attr.aria-labelledby]=\"option\">\n {{ option | translate }}\n </mat-radio-button>\n </div>\n </div>\n </div>\n\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-radio-group>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"list-field\" style=\"width: 100%\">\n <mat-select\n panelClass=\"base-form-list-panel\"\n formControlName=\"{{field.property}}\"\n [attr.aria-label]=\"field.label! | translate\"\n [attr.aria-required]=\"field.required\"\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\"\n [disabled]=\"field.readonly\"\n [multiple]=\"field.multi || false\"\n [required]=\"field.readonly ? false : field.required\"\n [(value)]=\"field.defaultListOption\">\n <ng-container *ngIf=\"field.translate; else lookup_no_translation\">\n <mat-option\n *ngFor=\"let item of field.listOptions; let i = index\"\n [value]=\"item\">\n {{ friendlyName(field.label, field.property, item) | translate }}\n </mat-option>\n </ng-container>\n <ng-template #lookup_no_translation>\n <mat-option\n *ngFor=\"let item of field.listOptions\"\n [value]=\"item\">\n {{ getOptionValue(item) }}\n </mat-option>\n </ng-template>\n </mat-select>\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'attachment'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n </ng-container>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [supportingAttributes]=\"supportingAttributes\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchLookupValue($event, field.property)\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </app-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <!-- Uncomment and use the currency control when ready -->\n <!-- <app-currency\n [form]=\"formParam\"\n [field]=\"field\"\n [defaultValue]=\"this.formParam.get(field.property)?.value\"\n (selectedValue)=\"patchCurrencyValue($event, field.property)\">\n </app-currency> -->\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <app-multi-auto-complete\n [form]=\"formParam\"\n [field]=\"field\"\n [labelsSection]=\"pageInfo.labelsSection\"\n [defaultValue]=\"getMultiValue(field)\"\n (selectedValue)=\"patchMultiSelectValue($event, field.property)\">\n </app-multi-auto-complete>\n\n </ng-container>\n </ng-container>\n </ng-container>\n\n\n <ng-container *ngSwitchCase=\"'rich-text'\" [formGroup]=\"formParam\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <!-- Uncomment and use the rich text editor when ready -->\n <!-- <ckeditor\n [editor]=\"Editor\"\n [disabled]=\"field.readonly\"\n formControlName=\"{{field.property}}\">\n </ckeditor> -->\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'divider'\">\n <mat-divider></mat-divider>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'hyper-text'\">\n <div>\n <mat-label\n (click)=\"getHyperTextEvent()\"\n class=\"hyper-link\">\n {{ field.label! | translate }}\n </mat-label>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'equation-builder'\">\n <ng-container *ngIf=\"showField(defaults, field)\">\n <ng-container *ngIf=\"!workflowEditableField(field)\">\n <ng-container\n [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\">\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"workflowEditableField(field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n <span *ngIf=\"!field.required && !field.hideLabel && !field.readonly\" class=\"optional-text\"> {{ 'optional' | translate }} </span>\n </div>\n <mat-form-field appearance=\"outline\">\n <input class=\"app-input\" dir=\"ltr\"\n formControlName=\"{{ field.property }}\"\n matInput\n [placeholder]=\"field.placeholder ? (labelKeyPlaceHolder(field) | translate) : ''\"\n [readonly]=\"field.readonly\"\n [attr.tabindex]=\"field.readonly ? -1 : null\"\n [required]=\"field.required\"\n [attr.aria-required]=\"field.required\"\n [attr.aria-invalid]=\"showError(field.property)\"\n [attr.aria-labelledby]=\"'label-' + field.property\"\n [attr.aria-describedby]=\"showError(field.property) ? 'error-' + field.property : null\">\n <mat-error\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </mat-form-field>\n\n\n </ng-container>\n </ng-container>\n </ng-container>\n <!-- <ng-container *ngSwitchCase=\"'equation-builder'\" [formGroup]=\"formParam\">-->\n <!-- <ng-container *ngIf=\"showField(defaults, field)\">-->\n <!-- <ng-container *ngIf=\"!workflowEditableField(field)\">-->\n <!-- <ng-container-->\n <!-- [ngTemplateOutlet]=\"dateReadonly\"-->\n <!-- [ngTemplateOutletContext]=\"{ field: field }\">-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- <ng-container *ngIf=\"workflowEditableField(field)\">-->\n <!-- <div style=\"display: flex; width: 350%\">-->\n <!-- <mat-label>{{ field.label! | translate }}</mat-label>-->\n <!-- <mat-form-field style=\"width: 400%\" appearance=\"outline\">-->\n <!-- <mat-chip-grid #chipGrid>-->\n <!-- <ng-container *ngFor=\"let equationValue of equationValues(); let i = index\">-->\n <!-- <mat-chip-row (removed)=\"remove(equationValue, i)\">-->\n <!-- {{ equationValue }}-->\n <!-- <button-->\n <!-- matChipRemove-->\n <!-- [attr.aria-label]=\"'remove ' + equationValue\">-->\n <!-- <mat-icon>cancel</mat-icon>-->\n <!-- </button>-->\n <!-- </mat-chip-row>-->\n <!-- </ng-container>-->\n <!-- </mat-chip-grid>-->\n <!-- <input-->\n <!-- [(ngModel)]=\"currentEquationValue\"-->\n <!-- [matChipInputFor]=\"chipGrid\"-->\n <!-- [matAutocomplete]=\"auto\"-->\n <!-- [ngModelOptions]=\"{ standalone: true }\"-->\n <!-- [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"-->\n <!-- (matChipInputTokenEnd)=\"add($event)\"-->\n <!-- aria-label=\"Add equation value\" />-->\n <!-- <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">-->\n <!-- <ng-container *ngFor=\"let filteredField of (equationFilteredFields() | async)\">-->\n <!-- <mat-option [value]=\"filteredField\">{{ filteredField }}</mat-option>-->\n <!-- </ng-container>-->\n <!-- </mat-autocomplete>-->\n <!-- </mat-form-field>-->\n <!-- </div>-->\n <!-- <mat-error class=\"iq-error\" *ngIf=\"showError(field.property)\" aria-live=\"assertive\">-->\n <!-- {{ getErrors(field.property) | translate }}-->\n <!-- </mat-error>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n <!-- </ng-container>-->\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </form>\n </ng-container>\n </ng-container>\n </div>\n\n</div>\n<ng-template #dateReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else dateReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #dateReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) | date: getReadonlyDateFormat(field) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #timeReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ formatTimeToDate(defaults[field.property]) | date: 'shortTime' }}</span>\n </div>\n</ng-template>\n\n<ng-template #phoneNumberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #textReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\" *ngIf=\"!field.advancedFilter\"></label>\n <ng-container *ngIf=\"isReadonlyTextValueEmpty(defaults, field) && field.emptyReadonlyPlaceholderKey; else textReadonlyHasValue\">\n <span class=\"readonly-value readonly-value--empty\">{{ field.emptyReadonlyPlaceholderKey | translate }}</span>\n </ng-container>\n <ng-template #textReadonlyHasValue>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #textareaReadonly let-field=\"field\">\n <ng-container *ngIf=\"field.textFormat === 'json'; else normalText\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <div class=\"readonly-value json-viewer\">\n <ngx-json-viewer [json]=\"extractJsonFieldName(defaults, field.property)\" [expanded]=\"true\"></ngx-json-viewer>\n </div>\n </div>\n </ng-container>\n <ng-template #normalText>\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n </ng-template>\n</ng-template>\n\n<ng-template #numberReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #currencyReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #radioButtonReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ translateLable(defaults[field.property]) }}</span>\n </div>\n</ng-template>\n\n<ng-template #richTextReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </div>\n</ng-template>\n\n<ng-template #checkboxReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #toggleReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n <mat-icon color=\"warn\" *ngIf=\"extractFieldName(defaults, field.property); else showNo\">done</mat-icon>\n <ng-template #showNo>\n <mat-icon color=\"warn\">close</mat-icon>\n </ng-template>\n </span>\n </div>\n</ng-template>\n\n<ng-template #listReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\" *ngIf=\"field.translate; else noTranslate\">\n {{ listShowValue(defaults, field) | translate }}\n </span>\n <ng-template #noTranslate>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </ng-template>\n </div>\n</ng-template>\n\n<ng-template #sequenceReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">{{ extractFieldName(defaults, field.property) }}</span>\n </div>\n</ng-template>\n\n<ng-template #lookupReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property)?.[translateService.getDefaultLang() === 'en' ? 'englishName' : 'arabicName'] }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #amountReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <span class=\"readonly-value\">\n {{ extractFieldName(defaults, field.property) | currency: currency }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #multiSelectReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></label>\n <mat-chip-grid class=\"readonly-value chipList\">\n <mat-chip *ngFor=\"let filedProp of showMultiSelectValuesAsReadonly(field)\">\n {{ filedProp }}\n </mat-chip>\n </mat-chip-grid>\n </div>\n</ng-template>\n\n<ng-template #chipListReadonly let-field=\"field\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" [innerHTML]=\"field.label | translate\"></label>\n <mat-chip-listbox class=\"readonly-value chipList\">\n <mat-chip-option *ngFor=\"let loc of splitReadonly(extractFieldName(defaults, field.property))\"\n [selectable]=\"true\"\n color=\"warn\"\n [removable]=\"false\">\n {{ loc }}\n </mat-chip-option>\n </mat-chip-listbox>\n </div>\n</ng-template>\n\n\n<ng-template #readonlyView>\n <div class=\"row-wrapper\">\n <div class=\"column-wrapper\">\n <ng-container *ngFor=\"let row of screenFields | keyvalue\">\n <div class=\"row-container\">\n <ng-container *ngFor=\"let field of row.value\">\n <div class=\"field-column readonly-item\" [style.flex]=\"field.fieldSize ? ('0 0 ' + field.fieldSize + '%') : '1 1 0'\">\n\n <ng-container [ngSwitch]=\"field.type\">\n\n <ng-container *ngSwitchCase=\"'attachment'\">\n <ng-container *ngIf=\"isAttachmentFieldEditable && showField(defaults, field)\">\n <div class=\"label-and-asterisk-container\">\n <span *ngIf=\"!field.hideLabel\" class=\"custom-label\" id=\"label-{{field.property}}\">\n {{ field.label! | translate }}\n </span>\n <span *ngIf=\"field.required && !field.hideLabel\" class=\"required-asterisk\"> * </span>\n </div>\n <app-attachment-uploader\n [acceptedTypes]=\"getAcceptedFileTypes(field)\"\n [ariaDescribedBy]=\"showError(field.property) ? 'error-' + field.property : null\"\n (fileSelected)=\"onAttachmentFileSelected($event, field)\"\n style=\"margin-top: 5px\">\n </app-attachment-uploader>\n <mat-error class=\"iq-error\"\n id=\"error-{{ field.property }}\"\n *ngIf=\"showError(field.property)\"\n aria-live=\"assertive\">\n {{ getErrors(field.property) | translate }}\n </mat-error>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'date'\">\n <ng-container [ngTemplateOutlet]=\"dateReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'time'\">\n <ng-container [ngTemplateOutlet]=\"timeReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'phone-number'\">\n <ng-container [ngTemplateOutlet]=\"phoneNumberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'text'\">\n <ng-container [ngTemplateOutlet]=\"textReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'textarea'\">\n <ng-container [ngTemplateOutlet]=\"textareaReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'number'\">\n <ng-container [ngTemplateOutlet]=\"numberReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'currency'\">\n <ng-container [ngTemplateOutlet]=\"currencyReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'radio-button'\">\n <ng-container [ngTemplateOutlet]=\"radioButtonReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'checkbox'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'toggle'\">\n <ng-container [ngTemplateOutlet]=\"toggleReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'status'\">\n <ng-container [ngTemplateOutlet]=\"checkboxReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'lookup'\">\n <ng-container [ngTemplateOutlet]=\"lookupReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'amount'\">\n <ng-container [ngTemplateOutlet]=\"amountReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-select'\">\n <ng-container [ngTemplateOutlet]=\"multiSelectReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'chip-list'\">\n <ng-container [ngTemplateOutlet]=\"chipListReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'sequence'\">\n <ng-container [ngTemplateOutlet]=\"sequenceReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'list'\">\n <ng-container [ngTemplateOutlet]=\"listReadonly\"\n [ngTemplateOutletContext]=\"{ field: field }\"></ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'multi-state-checkbox'\">\n <div class=\"readonly-item\">\n <label class=\"readonly-label\" *ngIf=\"!field.hideLabel\" [innerHtml]=\"field.label | translate\"></label>\n <span class=\"readonly-value\">{{ getMultiStateReadonlySummary(field, defaults) }}</span>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'iban-text'\">\n <p class=\"label\">\n <span [innerHtml]=\"!field.hideLabel ? (field.label | translate) : ''\"></span>\n <span> : </span>\n <span class=\"value\" [innerHtml]=\"extractFieldName(defaults, field.property)\"></span>\n </p>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'section-title'\">\n <div class=\"hrdivider-mid\">\n <span>{{ field.label | translate }}</span>\n </div>\n </ng-container>\n\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-template>\n\n\n", styles: [".main-form-canvas{display:flex;flex-direction:row;gap:10px;align-items:flex-start;justify-content:flex-start;width:100%;flex-wrap:wrap}.form-wrapper{display:flex;flex-direction:column;flex:1}.form-container{display:flex;flex-direction:column;width:100%}.row-container{display:flex;flex-direction:row;gap:20px;flex-wrap:wrap;width:100%}.field-column{display:flex;flex-direction:column;flex:1}.label-and-asterisk-container{display:flex;align-items:center;gap:4px}.optional-text{color:#9b9b9b;font-size:11px;font-weight:400;line-height:1.4}.full-width{width:100%}.readonly-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:14px;padding:4px 0;width:100%;.readonly-label{font-weight:500;color:#9b9b9b;font-size:14px}.readonly-value{font-weight:500;color:#222;word-break:break-word;font-size:14px}.readonly-value--empty{font-style:italic;font-weight:500;color:#6b7280}.json-viewer{width:100%}.chipList{display:flex;flex-wrap:wrap;gap:4px}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}.clear-icon-button{width:40px!important;height:40px!important;min-width:40px!important;padding:8px!important;margin:0!important;margin-inline-start:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important}.clear-icon-button mat-icon{width:24px!important;height:24px!important;font-size:24px!important;line-height:24px!important;margin-top:0!important}.clear-icon-suffix{display:flex!important;align-items:center!important;align-content:center!important;height:100%!important}@media (max-width: 600px){.main-form-canvas{flex-direction:column}.row-container{flex-direction:column;gap:10px}.field-column{width:100%;flex:1 1 100%!important}.column-wrapper{align-items:center}.field-row{flex-direction:column}.field-label,.field-input{flex:1 1 100%}.radio-group-custom{flex-direction:column;gap:5px}}.custom-ngx-mat-intl-tel-input[readonly] input,.custom-ngx-mat-intl-tel-input.ngx-mat-intl-tel-input input[disabled]{pointer-events:none!important;background-color:#f5f5f5!important;color:#444!important}.custom-ngx-mat-intl-tel-input .iti__flag-container,.custom-ngx-mat-intl-tel-input .iti__selected-flag{pointer-events:none!important;opacity:.6}.custom-ngx-mat-intl-tel-input{pointer-events:none!important}::ng-deep .mat-datepicker-content-container mat-calendar.example-month-picker~.mat-datepicker-close-button{display:none!important}.time-picker-toggle .time-picker-toggle-button{--mdc-icon-button-state-layer-size: 40px;width:40px;height:40px;padding:0}.time-picker-toggle .mat-icon{width:20px;height:20px;font-size:20px}@media (max-width: 960px){.row-wrapper,.row-container{flex-direction:column}.row-container{gap:15px}.field-column{flex:1 1 100%!important}}.multi-state-filter{display:flex;flex-direction:column;align-items:flex-start}.multi-state-filter__trigger{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:45px;padding:0 16px;margin:0;border:1px solid #b7b7b7;border-radius:8px;background:#fff;cursor:pointer;font-family:inherit;font-size:16px;font-weight:300;line-height:1.2;color:#000;box-sizing:border-box;width:100%}.multi-state-filter__trigger:focus-visible{outline:2px solid #0d4261;outline-offset:2px}.multi-state-filter__trigger-text{flex:1 1 auto;text-align:left;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.multi-state-filter__trigger-text--placeholder{color:#888}:host ::ng-deep .mat-mdc-select-placeholder{color:#888!important}:host ::ng-deep .list-field .mat-mdc-text-field-wrapper{border-radius:8px;transition:border-color .16s ease}:host ::ng-deep .list-field .mdc-notched-outline__leading,:host ::ng-deep .list-field .mdc-notched-outline__notch,:host ::ng-deep .list-field .mdc-notched-outline__trailing{border-width:2px!important;border-color:#0d426147!important}:host ::ng-deep .list-field:hover .mdc-notched-outline__leading,:host ::ng-deep .list-field:hover .mdc-notched-outline__notch,:host ::ng-deep .list-field:hover .mdc-notched-outline__trailing,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__leading,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__notch,:host ::ng-deep .list-field.mat-focused .mdc-notched-outline__trailing{border-color:#0d42616b!important}::ng-deep .base-form-list-panel{padding:0!important;border:2px solid rgba(13,66,97,.18);border-radius:8px!important;overflow:hidden}::ng-deep .base-form-list-panel .mat-mdc-option{box-sizing:border-box;min-height:40px;margin:0;border:0;border-bottom:2px solid rgba(13,66,97,.14);border-radius:0;background-color:#fff;box-shadow:none;transition:background-color .16s ease,border-color .16s ease}::ng-deep .base-form-list-panel .mat-mdc-option:last-child{border-bottom:0}::ng-deep .base-form-list-panel .mat-mdc-option:hover,::ng-deep .base-form-list-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .base-form-list-panel .mat-mdc-option.mdc-list-item--selected{background-color:#0d42610f;border-color:#0d426138}.multi-state-filter__chevron{flex-shrink:0;width:24px;height:24px;font-size:24px;color:#0d4261}::ng-deep .multi-state-filter__menu-panel{max-width:320px;min-width:250px}.multi-state-filter__menu-inner{padding:4px 0}.multi-state-filter__row{display:flex;align-items:center;gap:8px;min-height:28px;max-height:34px;padding:4px 8px;box-sizing:border-box}.multi-state-filter__pill{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 16px;font-size:14px;font-weight:400;line-height:1.2;white-space:nowrap}\n"] }]
|
|
3003
3007
|
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: i3$3.ActivatedRoute }, { type: BackendService }, { type: i3.FormBuilder }, { type: i2$1.LiveAnnouncer }], propDecorators: { pageInfo: [{
|
|
3004
3008
|
type: Input
|
|
3005
3009
|
}], currency: [{
|