@eqproject/eqp-dynamic-module 0.0.1 → 0.0.4

package/fesm5/eqproject-eqp-dynamic-module.js

@@ -1,6 +1,6 @@
-import { __extends, __decorate } from 'tslib';
+import { __extends, __decorate, __awaiter, __generator } from 'tslib';
 import { CommonModule } from '@angular/common';
-import { ɵɵdefineInjectable, ɵɵinject, Injectable, Input, Component, NgModule, EventEmitter, ViewChild, Output, ChangeDetectorRef, ViewChildren } from '@angular/core';
+import { ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, Input, Output, Component, NgModule, ViewChild, ChangeDetectorRef, ViewChildren } from '@angular/core';
 import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -37,12 +37,11 @@ import { TypeColumn, CellAlignmentEnum, NumberColumnPipe, EqpTableModule } from
 import { EqpAttachmentsModule } from '@eqproject/eqp-attachments';
 import { EnumHelper, EqpSelectModule } from '@eqproject/eqp-select';
 import { PickerModeEnum, EqpDatetimepickerModule } from '@eqproject/eqp-datetimepicker';
+import { EqpImgDrawingModule } from '@eqproject/eqp-img-drawing';
 import { EqpFiltersModule } from '@eqproject/eqp-filters';
 import { EqpNumericModule } from '@eqproject/eqp-numeric';
 import Swal from 'sweetalert2';
 import { BrowserModule } from '@angular/platform-browser';
-import { UtilityHelperService as UtilityHelperService$1 } from 'projects/eqp-dynamic-module/src/lib/services/utilityHelper.services';
-import { UtilityHelperService as UtilityHelperService$2, EqpDynamicModuleDialogService as EqpDynamicModuleDialogService$1, FieldTypeEnum as FieldTypeEnum$1, DateTimeTypeEnum as DateTimeTypeEnum$1 } from 'projects/eqp-dynamic-module/src/public-api';
 
 var Context = /** @class */ (function () {
     function Context() {
@@ -385,7 +384,11 @@ var EqpDynamicModuleComponent = /** @class */ (function () {
         this.context = new Context();
         this.form = new Form();
         this.showButtons = true;
+        this.showTitle = true;
         this.viewMode = FormTypeEnum.LIST;
+        this.saveRecord = new EventEmitter();
+        this.deleteRecord = new EventEmitter();
+        this.duplicateRecord = new EventEmitter();
         this.FormTypeEnum = FormTypeEnum;
     }
     EqpDynamicModuleComponent.prototype.ngOnInit = function () {
@@ -404,16 +407,21 @@ var EqpDynamicModuleComponent = /** @class */ (function () {
     };
     EqpDynamicModuleComponent.prototype.onSaveForm = function (event) {
         //TODO: Salvare il record!
-        if (event != null) {
-            if (event.ID && this.values.find(function (v) { return v.ID == event.ID; })) {
-                this.values[this.values.findIndex(function (v) { return v.ID == event.ID; })] = event;
-            }
-            else {
-                this.values.push(event);
-            }
-        }
+        // if (event != null) {
+        //   if (event.ID && this.values.find(v => v.ID == event.ID)) {
+        //     this.values[this.values.findIndex(v => v.ID == event.ID)] = event;
+        //   } else {
+        //     this.values.push(event);
+        //   }
+        // }
+        this.saveRecord.emit(event);
         this.viewMode = FormTypeEnum.LIST;
-        console.log(event);
+    };
+    EqpDynamicModuleComponent.prototype.onDuplicateRecord = function (record) {
+        this.duplicateRecord.emit(record);
+    };
+    EqpDynamicModuleComponent.prototype.onDeleteRecord = function (record) {
+        this.deleteRecord.emit(record);
     };
     __decorate([
         Input()
@@ -427,13 +435,25 @@ var EqpDynamicModuleComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], EqpDynamicModuleComponent.prototype, "showButtons", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "showTitle", void 0);
     __decorate([
         Input()
     ], EqpDynamicModuleComponent.prototype, "viewMode", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "saveRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "deleteRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "duplicateRecord", void 0);
     EqpDynamicModuleComponent = __decorate([
         Component({
             selector: 'eqp-dynamic-module',
-            template: "<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveForm($event)\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST\" [form]=\"form\" [values]=\"values\"\r\n    (onAddViewEditRecord)=\"onAddViewEditRecord($event)\">\r\n</list-form-record>",
+            template: "<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveForm($event)\" [showTitle]=\"showTitle\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST\" [form]=\"form\" [values]=\"values\"\r\n    (onAddViewEditRecord)=\"onAddViewEditRecord($event)\" [showTitle]=\"showTitle\"\r\n    (onDeleteRecord)=\"onDeleteRecord($event)\" (onDuplicateRecord)=\"onDuplicateRecord($event)\">\r\n</list-form-record>",
             styles: ["::ng-deep mat-form-field{width:100%}"]
         })
     ], EqpDynamicModuleComponent);
@@ -1347,11 +1367,10 @@ var AddFormFieldComponent = /** @class */ (function () {
                 break;
             case FieldTypeEnum.Immagine:
                 this.field.AttachDefinition = new AttachmentField();
-                this.fieldFormGroup.addControl('IsMultiAttach', new FormControl(this.field.AttachDefinition.IsMultiAttach));
-                // this.fieldFormGroup.addControl('ImgName', new FormControl((this.field as ImageField).ImgName, Validators.required));
-                this.fieldFormGroup.addControl('IsMultiPoint', new FormControl(this.field.IsMultiPoint));
-                this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AttachDefinition.AllowedExtensions));
+                this.fieldFormGroup.addControl('EnableDrawing', new FormControl(this.field.EnableDrawing));
                 this.fieldFormGroup.addControl('ImageIsContextualAttachment', new FormControl(this.field.ImageIsContextualAttachment));
+                // Imposto i FormControl variabili.
+                this.onImageIsContextualAttachmentChange();
                 this.fieldTypeFormTemplate = this.imageFieldFormTemplate;
                 break;
             case FieldTypeEnum['Elenco generico']:
@@ -1368,10 +1387,50 @@ var AddFormFieldComponent = /** @class */ (function () {
         if ([FieldTypeEnum.Allegato, FieldTypeEnum.Immagine, FieldTypeEnum['Form di dettaglio']].includes(this.field.FieldType)) {
             this.field.Formula = null;
             this.fieldFormGroup.controls["Formula"].disable();
+            this.fieldFormGroup.controls["InListView"].disable();
         }
         else {
             this.fieldFormGroup.controls["Formula"].enable();
+            this.fieldFormGroup.controls["InListView"].enable();
+        }
+    };
+    /**
+     * Metodo invocato al cambio del valore della proprietà ImageIsContextualAttachment nel caso
+     * di campi di tipo Immagine. Se TRUE allora rimuove i FormControl per le proprietà IsMultiAttach
+     * e AllowedExtensions e aggiunge i FormControl per le proprietà ImgName e ContextualAttachment,
+     * altrimenti il contrario.
+     */
+    AddFormFieldComponent.prototype.onImageIsContextualAttachmentChange = function () {
+        this.field.ImgName = null;
+        this.field.AttachDefinition.AllowedExtensions = [];
+        this.field.AttachDefinition.IsMultiAttach = false;
+        this.field.ContextualAttachment = null;
+        if (this.field.ImageIsContextualAttachment) {
+            this.fieldFormGroup.removeControl("IsMultiAttach");
+            this.fieldFormGroup.removeControl("AllowedExtensions");
+            this.fieldFormGroup.addControl('ImgName', new FormControl(this.field.ImgName, Validators.required));
+            this.fieldFormGroup.addControl('ContextualAttachment', new FormControl(this.field.ContextualAttachment, Validators.required));
+        }
+        else {
+            this.fieldFormGroup.removeControl("ImgName");
+            this.fieldFormGroup.removeControl("ContextualAttachment");
+            this.fieldFormGroup.addControl('IsMultiAttach', new FormControl(this.field.AttachDefinition.IsMultiAttach));
+            this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AttachDefinition.AllowedExtensions));
+        }
+    };
+    /**
+     * Metodo per intercettare l'aggiunta di un allegato nei campi di tipo Immagine per aggiornare
+     * il valore della proprietà ContextualAttachment e la validazione del relativo FormControl.
+     * @param event Array contenente l'elenco aggiornato degli allegati caricati (nel nostro caso ne contiene al più 1).
+     */
+    AddFormFieldComponent.prototype.catchContextualAttachmentChange = function (event) {
+        if (event && event.length > 0) {
+            this.field.ContextualAttachment = event[0];
+        }
+        else {
+            this.field.ContextualAttachment = null;
         }
+        this.fieldFormGroup.controls['ContextualAttachment'].setValue(this.field.ContextualAttachment);
     };
     /**
      * Metodo invocato alla selezione di una classe nella select per le colonne di bootstrap
@@ -1707,7 +1766,7 @@ var AddFormFieldComponent = /** @class */ (function () {
     AddFormFieldComponent = __decorate([
         Component({
             selector: 'eqp-dynamic-module-add-form-field',
-            template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <!-- <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\">\n        </mat-form-field>\n    </div> -->\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiPoint\" formControlName=\"IsMultiPoint\" color=\"primary\">\n            Immagine multi-point\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\">\n            Carica immagine come allegato\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
+            template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\"\n                    [disabled]=\"fieldFormGroup.controls['InListView'].disabled\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\" (ngModelChange)=\"onImageIsContextualAttachmentChange()\">\n            Immagine pre-caricata nel campo\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.EnableDrawing\" formControlName=\"EnableDrawing\" color=\"primary\">\n            Abilita il disegno\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\"\n        *ngIf=\"!field.ImageIsContextualAttachment\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"!field.ImageIsContextualAttachment\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\" *ngIf=\"field.ImageIsContextualAttachment\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\" required>\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-8 mt-2\" [formGroup]=\"fieldFormGroup\" *ngIf=\"field.ImageIsContextualAttachment\">\n        <eqp-attachments [attachmentsList]=\"field._contextualAttachments\" [showMatCard]=\"false\" [allowOnlyImages]=\"true\"\n            [isDisabled]=\"false\" [showInlinePreview]=\"true\" [multipleAttachment]=\"false\" [showHeader]=\"false\"\n            (localEditedAttachments)=\"catchContextualAttachmentChange($event)\" #contextualAttachmentEqpAttachments>\n        </eqp-attachments>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
             styles: [".extension-container{display:inline-block;font-size:15px;border:1px solid var(--primary);border-radius:15px;margin-right:10px}.extension-container mat-icon{vertical-align:middle;font-size:15px;height:15px;width:15px;color:var(--danger);margin-right:10px;cursor:pointer}.extension-container span{margin-left:10px}.key-value-list-section-title{background:linear-gradient(to right,var(--gray) 0,#fff 100%) left bottom #fff no-repeat;background-size:100% 1px}.value-pairs-list{list-style:none;padding:0}.value-pairs-list mat-icon{vertical-align:middle;font-size:15px;height:15px;width:15px;color:var(--danger);margin-right:10px;cursor:pointer}"]
         })
     ], AddFormFieldComponent);
@@ -2105,31 +2164,13 @@ var ListValueFieldTemplateComponent = /** @class */ (function () {
 }());
 
 var AttachmentFieldTemplateComponent = /** @class */ (function () {
-    //#endregion
     function AttachmentFieldTemplateComponent(utilityService, cdr) {
         this.utilityService = utilityService;
         this.cdr = cdr;
         this.onlyImages = false;
         this.recordChange = new EventEmitter();
+        this.onAttachmentsChange = new EventEmitter();
         this.metadataFormGroups = new Array();
-        //#region Etichette per eqp-attachments
-        this.previewLabel = "Anteprima";
-        this.emptyTableMessage = "No record found";
-        this.downloadTooltipPosition = "below";
-        this.openLinkLabel = "Apri link";
-        this.addButtonLabel = "Aggiungi";
-        this.downloadLabel = "Download";
-        this.deleteLabel = "Elimina";
-        this.fileNameLabel = "Nome file";
-        this.uploadFileLabel = "Carica file";
-        this.confirmLabel = "Conferma";
-        this.abortLabel = "Annulla";
-        this.saveLabel = "Salva";
-        this.exitLabel = "Esci";
-        this.eqpTableSearchText = "Cerca...";
-        this.deleteDialogTitle = "Attenzione:";
-        this.deleteDialogMessage = "Sicuro di voler eliminare questo allegato?";
-        this.noImageSelectedErrorMessage = "Nessuna immagine selezionata!";
     }
     AttachmentFieldTemplateComponent.prototype.ngOnInit = function () {
         // Nel caso in cui sono in modifica di un Record aggiorno il valore
@@ -2180,6 +2221,10 @@ var AttachmentFieldTemplateComponent = /** @class */ (function () {
         this.createMetadataFormGroups();
         this.setFormControlValue();
         this.onRecordValueChange();
+        // Scateno un evento di output necessario al componente ImageFieldTemplate al
+        // variare degli allegati caricati. Viene usato per aprire il dialog per disegnare
+        // sull'immagine caricata in base alla configurazione del Field.
+        this.onAttachmentsChange.emit();
         this.cdr.detectChanges();
     };
     /**
@@ -2266,6 +2311,9 @@ var AttachmentFieldTemplateComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], AttachmentFieldTemplateComponent.prototype, "recordChange", void 0);
+    __decorate([
+        Output()
+    ], AttachmentFieldTemplateComponent.prototype, "onAttachmentsChange", void 0);
     __decorate([
         ViewChild("eqpAttachments", { static: true })
     ], AttachmentFieldTemplateComponent.prototype, "eqpAttachments", void 0);
@@ -2275,16 +2323,38 @@ var AttachmentFieldTemplateComponent = /** @class */ (function () {
     AttachmentFieldTemplateComponent = __decorate([
         Component({
             selector: 'attachment-field-template',
-            template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\" [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" [previewLabel]=\"previewLabel\"\n    [emptyTableMessage]=\"emptyTableMessage\" [downloadTooltipPosition]=\"downloadTooltipPosition\"\n    [openLinkLabel]=\"openLinkLabel\" [addButtonLabel]=\"addButtonLabel\" [downloadLabel]=\"downloadLabel\"\n    [deleteLabel]=\"deleteLabel\" [fileNameLabel]=\"fileNameLabel\" [uploadFileLabel]=\"uploadFileLabel\"\n    [confirmLabel]=\"confirmLabel\" [abortLabel]=\"abortLabel\" [saveLabel]=\"saveLabel\" [exitLabel]=\"exitLabel\"\n    [eqpTableSearchText]=\"eqpTableSearchText\" [deleteDialogTitle]=\"deleteDialogTitle\"\n    [deleteDialogMessage]=\"deleteDialogMessage\" [noImageSelectedErrorMessage]=\"noImageSelectedErrorMessage\"\n    (localEditedAttachments)=\"catchAttachmentList($event)\" #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
+            template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\"\n        [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" (localEditedAttachments)=\"catchAttachmentList($event)\"\n    #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
             styles: [""]
         })
     ], AttachmentFieldTemplateComponent);
     return AttachmentFieldTemplateComponent;
 }());
 
+/**
+ * Metodo per recuperare, a partire da un Blob, la stringa contenente il base64 del file.
+ * Usato per prendere il base64 dell'immagine dopo che l'utente ci ha disegnato sopra.
+ * @param file Blob che rappresenta l'immagine.
+ */
+var toBase64 = function (file) { return new Promise(function (resolve, reject) {
+    var reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function () { return resolve(reader.result.toString()); };
+    reader.onerror = function (error) { return reject(error); };
+}); };
+var ɵ0 = toBase64;
 var ImageFieldTemplateComponent = /** @class */ (function () {
-    function ImageFieldTemplateComponent() {
+    //#endregion
+    function ImageFieldTemplateComponent(dialog, utilityService) {
+        this.dialog = dialog;
+        this.utilityService = utilityService;
         this.recordChange = new EventEmitter();
+        //#region Proprietà per configurare il componente ngx-image-drawing e aprire il relativo dialog.
+        this.width = null;
+        this.height = null;
+        this.i18n = {
+            saveBtn: 'Salva modifiche',
+            cancelBtn: 'Ricarica originale'
+        };
     }
     ImageFieldTemplateComponent.prototype.ngOnInit = function () {
         this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
@@ -2297,6 +2367,19 @@ var ImageFieldTemplateComponent = /** @class */ (function () {
         this.field.AttachDefinition.Required = this.field.Required;
         this.field.AttachDefinition.Formula = this.field.Formula;
         this.field.AttachDefinition.FieldValue = this.field.FieldValue;
+        // Se il campo prevede un'immagine pre-caricata (ImageIsContextualAttachment == true) sulla quale 
+        // l'utente può disegnare (EnableDrawing == true) e non sono in modifica di un record (ovvero nel record
+        // non ho un'immagine già salvata) allora imposta l'immagine pre caricata come valore iniziale
+        // nel record corrente e ne recupera le dimensioni per visualizzare correttamente l'area in cui  
+        // l'utente può disegnare. Se non effettua modifiche o non salva i disegni fatti viene salvata
+        // l'immagine originale.
+        if (this.field.ImageIsContextualAttachment && this.field.ContextualAttachment) {
+            if (!this.record[this.field.Name] || !Array.isArray(this.record[this.field.Name]) || !(this.record[this.field.Name].length > 0)) {
+                this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+            }
+            this.preLoadedImageMetadataFormGroup = this.utilityService.CreateFormFormGroup(this.field.AttachDefinition.MetadataFields, this.record[this.field.Name][0]);
+            this.getImageDimensions();
+        }
     };
     ImageFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
         // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
@@ -2305,14 +2388,125 @@ var ImageFieldTemplateComponent = /** @class */ (function () {
             this.updateField();
         }
     };
+    ImageFieldTemplateComponent.prototype.updateMetadataValidity = function () {
+        if (this.preLoadedImageMetadataFormGroup.invalid) {
+            this.field.FormFormGroup.controls[this.field.Name].setErrors({ 'incorrect': true });
+        }
+        else {
+            this.field.FormFormGroup.controls[this.field.Name].setErrors(null);
+        }
+        this.onRecordValueChange();
+    };
     /**
      * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
      */
     ImageFieldTemplateComponent.prototype.updateField = function () {
         if (this.field.Formula) {
-            this.record[this.field.Name] = UtilityHelperService$1.EvaluateFieldFormula(this.field.Formula, this.record, null);
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    ImageFieldTemplateComponent.prototype.resetPreLoadedImage = function () {
+        this.width = null;
+        this.height = null;
+        this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+        this.getImageDimensions();
+    };
+    /**
+     * Metodo invocato quando vengono aggiunti o eliminati gli allegati nel componente AttachmentFieldTemplate.
+     * Se l'ImageField è abilitato al disegno (EnableDrawing == true), non permette allegati multipli (IsMulitAttach == false)
+     * e nel Record corrente è presente l'immagine caricata dall'utente allora recupera le dimensioni dell'immagine e
+     * apre il dialog con il componente image-drawing per permettere il disegno sull'immagine appena caricata.
+     */
+    ImageFieldTemplateComponent.prototype.onAttachmentsChange = function () {
+        if (!this.field.AttachDefinition.IsMultiAttach && this.field.EnableDrawing && this.record[this.field.Name] && this.record[this.field.Name][0]) {
+            this.getImageDimensions();
+            this.dialogImageDrowingRef = this.dialog.open(this.dialogImageDrowing, {
+                disableClose: true,
+                hasBackdrop: true,
+                width: '75%'
+            });
         }
     };
+    /**
+     * Metodo invocato al salvataggio dell'immagine dal componente image-drawing.
+     * Trasforma il Blob ricevuto in un base64, aggiorna il FileContetType e il FileDataBase64
+     * dell'allegato caricato e chiude il dialog in cui disegnare.
+     * @param drawnPicture Blob dell'immagine disegnata.
+     */
+    ImageFieldTemplateComponent.prototype.saveDrowning = function (drawnPicture) {
+        return __awaiter(this, void 0, void 0, function () {
+            var base64File;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, toBase64(drawnPicture)];
+                    case 1:
+                        base64File = _a.sent();
+                        if (base64File) {
+                            this.record[this.field.Name][0].FileContentType = base64File.split(",")[0].split(":")[1].split(";")[0];
+                            this.record[this.field.Name][0].FileDataBase64 = base64File.split(",")[1];
+                        }
+                        if (this.dialogImageDrowingRef) {
+                            this.closeImageDrowingDialog();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Metodo per chiudere il dialog in cui disegnare sull'immagine cariata e svuotare le dimensioni.
+     */
+    ImageFieldTemplateComponent.prototype.closeImageDrowingDialog = function () {
+        this.dialogImageDrowingRef.close();
+        this.width = null;
+        this.height = null;
+    };
+    /**
+     * Metodo per recuperare le dimensioni dell'immagine caricata per mostrare correttamente
+     * il componente image-drawing. Se non viene eseguito questo passaggio l'area in cui disegnare
+     * è più grande dell'immagine stessa e al salvataggio i tratti disegnati vengono spostati.
+     */
+    ImageFieldTemplateComponent.prototype.getImageDimensions = function () {
+        var _this = this;
+        var blob = this.getBlobFromBase64();
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            var image = new Image();
+            image.src = e.target.result;
+            image.onload = function (rs) {
+                _this.height = rs.currentTarget['height'];
+                _this.width = rs.currentTarget['width'];
+            };
+        };
+        reader.readAsDataURL(blob);
+    };
+    /**
+     * Metodo per convertire il base64 di un'immagine in un Blob.
+     * Necessario per il recupero delle dimensioni dell'immagine caricata a partire dal suo base64.
+     * Viene eseguito solo nel caso in cui l'ImageField non ammette allegati multipli.
+     * @returns Restituisce il Blob dell'immagine caricata.
+     */
+    ImageFieldTemplateComponent.prototype.getBlobFromBase64 = function () {
+        var byteCharacters = atob(this.record[this.field.Name][0].FileDataBase64);
+        var byteNumbers = new Array(byteCharacters.length);
+        for (var i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        var byteArray = new Uint8Array(byteNumbers);
+        return new Blob([byteArray], { type: this.record[this.field.Name][0].FileContentType });
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    ImageFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    ImageFieldTemplateComponent.ctorParameters = function () { return [
+        { type: MatDialog },
+        { type: UtilityHelperService }
+    ]; };
     __decorate([
         Input()
     ], ImageFieldTemplateComponent.prototype, "record", void 0);
@@ -2322,11 +2516,14 @@ var ImageFieldTemplateComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], ImageFieldTemplateComponent.prototype, "recordChange", void 0);
+    __decorate([
+        ViewChild("dialogImageDrowing", { static: true })
+    ], ImageFieldTemplateComponent.prototype, "dialogImageDrowing", void 0);
     ImageFieldTemplateComponent = __decorate([
         Component({
             selector: 'image-field-template',
-            template: "<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\"\n     [onlyImages]=\"true\">\n</attachment-field-template>",
-            styles: [""]
+            template: "<!-- VISUALIZZAZIONE ALLEGATO PRE CARICATO CON POSSIBILITA' DI DISEGNO -->\n<div class=\"row\" *ngIf=\"field.ImageIsContextualAttachment && field.ContextualAttachment\">\n     <div class=\"col-sm-12 col-md-6 col-lg-4\">\n          <p class=\"mb-2\">\n               {{ field.Label + (field.Required ? \" *\" : \"\")}}\n               <br>\n               Nome immagine: {{ field.ImgName}}\n          </p>\n          <eqp-img-drawing\n               *ngIf=\"field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null\"\n               [src]=\"'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64\"\n               [showCancelButton]=\"false\" [enableLoadAnotherImage]=\"false\" [enableRemoveImage]=\"false\" [width]=\"width\"\n               [height]=\"height\" [i18n]=\"i18n\" [showCancelButton]=\"true\" (save)=\"saveDrowning($event)\"\n               (cancel)=\"resetPreLoadedImage()\">\n          </eqp-img-drawing>\n\n          <img *ngIf=\"!field.EnableDrawing\"\n               [src]=\"'data:'+ record[field.Name][0].FileContentType+ ';base64,'+ record[field.Name][0].FileDataBase64\">\n     </div>\n\n     <div class=\"col-sm-12 col-md-6 col-lg-8\">\n          <div class=\"row\"\n               *ngIf=\"field.AttachDefinition && field.AttachDefinition.MetadataFields && preLoadedImageMetadataFormGroup\">\n               <div class=\"mt-2\" *ngFor=\"let metadata of field.AttachDefinition.MetadataFields\"\n                    [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n                    <dynamic-module-field #fieldTemplate [field]=\"metadata\" [form]=\"preLoadedImageMetadataFormGroup\"\n                         [record]=\"record[field.Name][0]\" (recordChange)=\"updateMetadataValidity()\">\n                    </dynamic-module-field>\n               </div>\n          </div>\n     </div>\n</div>\n\n<!-- COMPONENTE IN CUI CARICARE NUOVI ALLEGATI -->\n<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\" [onlyImages]=\"true\"\n     (onAttachmentsChange)=\"onAttachmentsChange()\" *ngIf=\"!field.ImageIsContextualAttachment\">\n</attachment-field-template>\n\n<!-- DIALOG PER DISEGNARE SUL NUOVO ALLEGATO CARICATO -->\n<ng-template #dialogImageDrowing>\n     <div *ngIf=\"field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null\"\n          class=\"row\">\n          <div class=\"col-sm-12 col-md-12\">\n               <eqp-img-drawing [showCancelButton]=\"false\" [enableLoadAnotherImage]=\"false\" [enableRemoveImage]=\"false\"\n                    [src]=\"'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64\"\n                    [i18n]=\"i18n\" [showCancelButton]=\"false\" (save)=\"saveDrowning($event)\">\n               </eqp-img-drawing>\n          </div>\n     </div>\n     <div class=\"row mt-2 mb-1\">\n          <div class=\"col-sm-12 text-right\">\n               <button class=\"btn mat-raised-button\" (click)=\"closeImageDrowingDialog()\" type=\"button\">\n                    Annulla disegno\n               </button>\n          </div>\n     </div>\n</ng-template>",
+            styles: ["::ng-deep image-drawing>button{background-color:var(--primary)!important;color:#fff!important}"]
         })
     ], ImageFieldTemplateComponent);
     return ImageFieldTemplateComponent;
@@ -2334,12 +2531,22 @@ var ImageFieldTemplateComponent = /** @class */ (function () {
 
 var ListFormRecordComponent = /** @class */ (function () {
     function ListFormRecordComponent() {
+        this.showTitle = true;
         this.columns = new Array();
         this.onAddViewEditRecord = new EventEmitter();
+        this.onDeleteRecord = new EventEmitter();
+        this.onDuplicateRecord = new EventEmitter();
     }
     ListFormRecordComponent.prototype.ngOnInit = function () {
         this.configureColumns();
     };
+    ListFormRecordComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['values'] != undefined && changes['values'].firstChange == false) {
+            this.values = changes['values'].currentValue;
+            this.reloadTables();
+        }
+    };
     /**
      * Metodo per configurare le colonne della eqp-table.
      */
@@ -2375,7 +2582,7 @@ var ListFormRecordComponent = /** @class */ (function () {
                     .push({
                     name: action.Name, icon: action.Icon, fn: function (element, index, col) {
                         var rec = element;
-                        var ctx = UtilityHelperService$2.context;
+                        var ctx = UtilityHelperService.context;
                         eval(action.Action);
                         // TODO: salvare le modifiche
                     }
@@ -2397,18 +2604,17 @@ var ListFormRecordComponent = /** @class */ (function () {
      * @param record Record da duplicare.
      */
     ListFormRecordComponent.prototype.duplicateRecord = function (record) {
-        var _this = this;
-        EqpDynamicModuleDialogService$1.Confirm('Duplicare il record selezionato?', function () {
-            var copiedRecord = JSON.parse(JSON.stringify(record));
-            if (!isNaN(parseInt(copiedRecord.ID))) {
-                copiedRecord.ID = (parseInt(copiedRecord.ID) + 1).toString();
-            }
-            else {
-                copiedRecord.ID = "xxxxxxxxx".replace("x", function (c) { return (Math.random() + 16 | 0).toString(16); });
-            }
-            _this.values.push(copiedRecord);
-            _this.reloadTables();
-        }, false, 'Richiesta conferma');
+        // EqpDynamicModuleDialogService.Confirm('Duplicare il record selezionato?', () => {
+        //   var copiedRecord: Record = JSON.parse(JSON.stringify(record));
+        //   if (!isNaN(parseInt(copiedRecord.ID))) {
+        //     copiedRecord.ID = (parseInt(copiedRecord.ID) + 1).toString();
+        //   } else {
+        //     copiedRecord.ID = "xxxxxxxxx".replace("x", (c) => { return (Math.random() + 16 | 0).toString(16); });
+        //   }
+        //   this.values.push(copiedRecord);
+        //   this.reloadTables();
+        // }, false, 'Richiesta conferma');
+        this.onDuplicateRecord.emit(record);
         //TODO
     };
     /**
@@ -2416,11 +2622,11 @@ var ListFormRecordComponent = /** @class */ (function () {
      * @param record Record da eliminare selezionato sulla eqp-table.
      */
     ListFormRecordComponent.prototype.deleteRecord = function (record) {
-        var _this = this;
-        EqpDynamicModuleDialogService$1.Confirm('Eliminare il record selezionato?', function () {
-            _this.values.splice(_this.values.indexOf(record), 1);
-            _this.reloadTables();
-        }, false, 'Richiesta conferma');
+        // EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', () => {
+        //   this.values.splice(this.values.indexOf(record), 1);
+        //   this.reloadTables();
+        // }, false, 'Richiesta conferma');
+        this.onDeleteRecord.emit(record);
         // TODO
     };
     /**
@@ -2452,23 +2658,23 @@ var ListFormRecordComponent = /** @class */ (function () {
     ListFormRecordComponent.prototype.createFieldColumn = function (field) {
         var column = { key: field.Name, display: field.Label };
         switch (field.FieldType) {
-            case FieldTypeEnum$1['Booleano']:
+            case FieldTypeEnum['Booleano']:
                 column.type = TypeColumn.Boolean;
                 column.booleanValues = { false: '<i class="fa fa-times error-color"></i>', true: '<i class="fa fa-check success-color"></i>' };
                 column.styles = { flex: "0 0 7%", cellAlignment: CellAlignmentEnum.CENTER };
                 break;
-            case FieldTypeEnum$1['Data e/o ora']:
-                if (field.IsOnlyDate != DateTimeTypeEnum$1['Solo orario']) {
+            case FieldTypeEnum['Data e/o ora']:
+                if (field.IsOnlyDate != DateTimeTypeEnum['Solo orario']) {
                     column.type = TypeColumn.Date;
-                    if (field.IsOnlyDate == DateTimeTypeEnum$1['Data e ora']) {
+                    if (field.IsOnlyDate == DateTimeTypeEnum['Data e ora']) {
                         column.format = "dd/MM/yyyy HH:mm";
                     }
-                    else if (field.IsOnlyDate == DateTimeTypeEnum$1['Solo data']) {
+                    else if (field.IsOnlyDate == DateTimeTypeEnum['Solo data']) {
                         column.format = "dd/MM/yyyy";
                     }
                 }
                 break;
-            case FieldTypeEnum$1['Campo numerico']:
+            case FieldTypeEnum['Campo numerico']:
                 if (field.CurrencySymbol) {
                     column.numberPipe = NumberColumnPipe.CURRENCY;
                     column.currencyPipeCode = field.CurrencySymbol;
@@ -2477,8 +2683,8 @@ var ListFormRecordComponent = /** @class */ (function () {
                     column.numberPipe = NumberColumnPipe.DECIMAL;
                 }
                 break;
-            case FieldTypeEnum$1['Allegato']:
-            case FieldTypeEnum$1['Immagine']:
+            case FieldTypeEnum['Allegato']:
+            case FieldTypeEnum['Immagine']:
                 column.value = function (element) {
                     if (field.IsMultiAttach || (field.AttachDefinition && field.AttachDefinition.IsMultiAttach)) {
                         return element[field.Name] != null && element[field.Name].length > 0 ? element[field.Name].map(function (a) { return a.FileName; }).join(", ") : null;
@@ -2490,7 +2696,7 @@ var ListFormRecordComponent = /** @class */ (function () {
                 column.isSortable = false;
                 column.isSearchable = false;
                 break;
-            case FieldTypeEnum$1['Elenco generico']:
+            case FieldTypeEnum['Elenco generico']:
                 column.value = function (element) {
                     if (field.IsMultiChoiche) {
                         if (!element[field.Name] || element[field.Name].length == 0) {
@@ -2507,7 +2713,7 @@ var ListFormRecordComponent = /** @class */ (function () {
                 column.isSortable = false;
                 column.isSearchable = false;
                 break;
-            case FieldTypeEnum$1['Lookup']:
+            case FieldTypeEnum['Lookup']:
                 // TODO
                 break;
         }
@@ -2521,6 +2727,9 @@ var ListFormRecordComponent = /** @class */ (function () {
             this.tableRecords.reloadDatatable();
         }
     };
+    __decorate([
+        Input()
+    ], ListFormRecordComponent.prototype, "showTitle", void 0);
     __decorate([
         Input()
     ], ListFormRecordComponent.prototype, "form", void 0);
@@ -2533,10 +2742,16 @@ var ListFormRecordComponent = /** @class */ (function () {
     __decorate([
         Output()
     ], ListFormRecordComponent.prototype, "onAddViewEditRecord", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onDeleteRecord", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onDuplicateRecord", void 0);
     ListFormRecordComponent = __decorate([
         Component({
             selector: 'list-form-record',
-            template: "<div class=\"row eqp-dynamic-module-title\">\r\n    <div class=\"col-md-6\">\r\n        <h4><b>Elenco {{form.Name}}</b></h4>\r\n    </div>\r\n    <div class=\"col-md-6 text-right\">\r\n        <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"onAddViewEditRecord.emit(null)\">\r\n            <mat-icon>add</mat-icon>\r\n            <span style=\"margin-left: 10px;\">Aggiungi</span>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n\r\n<eqp-table #tableRecords [data]=\"values\" [columns]=\"columns\"></eqp-table>",
+            template: "<div class=\"row eqp-dynamic-module-title\">\r\n    <div class=\"col-md-6\">\r\n        <h4 *ngIf=\"showTitle\"><b>Elenco {{form.Name}}</b></h4>\r\n    </div>\r\n    <div class=\"col-md-6 text-right\">\r\n        <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"onAddViewEditRecord.emit(null)\">\r\n            <mat-icon>add</mat-icon>\r\n            <span style=\"margin-left: 10px;\">Aggiungi</span>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n\r\n<eqp-table #tableRecords [data]=\"values\" [columns]=\"columns\"></eqp-table>",
             styles: ["::ng-deep .error-color{color:var(--danger)}::ng-deep .success-color{color:var(--success)}"]
         })
     ], ListFormRecordComponent);
@@ -2553,6 +2768,7 @@ var AddFormRecordComponent = /** @class */ (function () {
     function AddFormRecordComponent(cdr, utilityService) {
         this.cdr = cdr;
         this.utilityService = utilityService;
+        this.showTitle = true;
         this.showButtons = true;
         this.form = new Form();
         this.fieldGroups = {};
@@ -2641,8 +2857,11 @@ var AddFormRecordComponent = /** @class */ (function () {
     };
     AddFormRecordComponent.ctorParameters = function () { return [
         { type: ChangeDetectorRef },
-        { type: UtilityHelperService$2 }
+        { type: UtilityHelperService }
     ]; };
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "showTitle", void 0);
     __decorate([
         Input()
     ], AddFormRecordComponent.prototype, "showButtons", void 0);
@@ -2664,7 +2883,7 @@ var AddFormRecordComponent = /** @class */ (function () {
     AddFormRecordComponent = __decorate([
         Component({
             selector: 'add-form-record',
-            template: "<div class=\"row eqp-dynamic-module-title\">\n    <div class=\"col-md-12 text-center\">\n        <h4><b>{{form.Name}}</b></h4>\n    </div>\n</div>\n\n<form [formGroup]=\"formForm\">\n\n    <!-- VISUALIZZAZIONE SEMPLICE -->\n    <ng-container *ngIf=\"form.FormScalarType == FormScalarTypeEnum.Semplice\" [ngTemplateOutlet]=\"fieldTemplates\"\n        [ngTemplateOutletContext]=\"{ fields: form.Fields }\">\n    </ng-container>\n\n    <!-- VISUALIZZAZIONE A STEPPER -->\n    <mat-horizontal-stepper linear *ngIf=\"form.FormScalarType == FormScalarTypeEnum['A step']\">\n        <mat-step *ngFor=\"let group of form.FormFieldsGroups\">\n            <ng-template matStepLabel>\n                {{group.Name}}\n            </ng-template>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-step>\n    </mat-horizontal-stepper>\n\n    <!-- VISUALIZZAZIONE A TAB -->\n    <mat-tab-group *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In tab']\">\n        <mat-tab *ngFor=\"let group of form.FormFieldsGroups\" [label]=\"group.Name\">\n            <div class=\"mt-3\">\n                <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                    [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n    <!-- VISUALIZZAZIONE AD ACCORDION -->\n    <mat-accordion multi *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In accordion']\">\n        <mat-expansion-panel *ngFor=\"let group of form.FormFieldsGroups\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    {{group.Name}}\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-expansion-panel>\n    </mat-accordion>\n</form>\n\n<div class=\"row mt-2\" *ngIf=\"showButtons\">\n    <div class=\"col-sm-12 text-right\">\n        <button class=\"mr-2\" mat-raised-button (click)=\"saveOrExitForm(true)\" type=\"button\">\n            Annulla\n        </button>\n        <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveOrExitForm(false)\"\n            [disabled]=\"formForm.invalid || formForm.disabled\" type=\"button\">\n            Salva\n        </button>\n    </div>\n</div>\n\n<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->\n<ng-template #fieldTemplates let-fields='fields'>\n    <div class=\"row\">\n        <div class=\"mt-2\" *ngFor=\"let field of fields\" [ngClass]=\"utilityService.getFieldSyleClass(field)\">\n            <dynamic-module-field #fieldTemplate [field]=\"field\" [form]=\"form\" [record]=\"record\" (recordChange)=\"onRecordChange()\"></dynamic-module-field>\n        </div>\n    </div>\n</ng-template>",
+            template: "<div class=\"row eqp-dynamic-module-title\" *ngIf=\"showTitle\">\n    <div class=\"col-md-12\">\n        <h4><b>{{form.Name}}</b></h4>\n    </div>\n</div>\n\n<form [formGroup]=\"formForm\">\n\n    <!-- VISUALIZZAZIONE SEMPLICE -->\n    <ng-container *ngIf=\"form.FormScalarType == FormScalarTypeEnum.Semplice\" [ngTemplateOutlet]=\"fieldTemplates\"\n        [ngTemplateOutletContext]=\"{ fields: form.Fields }\">\n    </ng-container>\n\n    <!-- VISUALIZZAZIONE A STEPPER -->\n    <mat-horizontal-stepper linear *ngIf=\"form.FormScalarType == FormScalarTypeEnum['A step']\">\n        <mat-step *ngFor=\"let group of form.FormFieldsGroups\">\n            <ng-template matStepLabel>\n                {{group.Name}}\n            </ng-template>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-step>\n    </mat-horizontal-stepper>\n\n    <!-- VISUALIZZAZIONE A TAB -->\n    <mat-tab-group *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In tab']\">\n        <mat-tab *ngFor=\"let group of form.FormFieldsGroups\" [label]=\"group.Name\">\n            <div class=\"mt-3\">\n                <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                    [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n    <!-- VISUALIZZAZIONE AD ACCORDION -->\n    <mat-accordion multi *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In accordion']\">\n        <mat-expansion-panel *ngFor=\"let group of form.FormFieldsGroups\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    {{group.Name}}\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-expansion-panel>\n    </mat-accordion>\n</form>\n\n<div class=\"row mt-2\" *ngIf=\"showButtons\">\n    <div class=\"col-sm-12 text-right\">\n        <button class=\"mr-2\" mat-raised-button (click)=\"saveOrExitForm(true)\" type=\"button\">\n            Annulla\n        </button>\n        <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveOrExitForm(false)\"\n            [disabled]=\"formForm.invalid || formForm.disabled\" type=\"button\">\n            Salva\n        </button>\n    </div>\n</div>\n\n<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->\n<ng-template #fieldTemplates let-fields='fields'>\n    <div class=\"row\">\n        <div class=\"mt-2\" *ngFor=\"let field of fields\" [ngClass]=\"utilityService.getFieldSyleClass(field)\">\n            <dynamic-module-field #fieldTemplate [field]=\"field\" [form]=\"form\" [record]=\"record\"\n                (recordChange)=\"onRecordChange()\"></dynamic-module-field>\n        </div>\n    </div>\n</ng-template>",
             styles: [""]
         })
     ], AddFormRecordComponent);
@@ -2825,7 +3044,8 @@ var EqpDynamicModuleModule = /** @class */ (function () {
                 EqpSelectModule,
                 EqpDatetimepickerModule,
                 EqpFiltersModule,
-                EqpNumericModule
+                EqpNumericModule,
+                EqpImgDrawingModule
             ],
             exports: [
                 EqpDynamicModuleComponent,
@@ -2852,6 +3072,14 @@ var ImageField = /** @class */ (function (_super) {
     function ImageField() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    Object.defineProperty(ImageField.prototype, "_contextualAttachments", {
+        /**Proprietà per recuperare l'allegato caricato come array per eqp-attachments (se ImageIsContextualAttachment == true) */
+        get: function () {
+            return this.ContextualAttachment ? [this.ContextualAttachment] : [];
+        },
+        enumerable: true,
+        configurable: true
+    });
     return ImageField;
 }(BaseField));
 
@@ -2898,5 +3126,5 @@ var TextField = /** @class */ (function (_super) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionOnRecord, AddFormFieldComponent, AddFormRecordComponent, ArrayValidators, AttachmentField, AttachmentFieldTemplateComponent, AvailableFileExtensions, AvailableImageExtensions, BaseField, BaseObj, BoolPresentantioEnum, BooleanField, BooleanFieldTemplateComponent, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynamicModuleFieldComponent, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, Record, TextField, TextFieldTemplateComponent, TextareaField, TextareaFieldTemplateComponent, UtilityHelperService, MaterialModule as ɵa };
+export { ActionOnRecord, AddFormFieldComponent, AddFormRecordComponent, ArrayValidators, AttachmentField, AttachmentFieldTemplateComponent, AvailableFileExtensions, AvailableImageExtensions, BaseField, BaseObj, BoolPresentantioEnum, BooleanField, BooleanFieldTemplateComponent, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynamicModuleFieldComponent, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, Record, TextField, TextFieldTemplateComponent, TextareaField, TextareaFieldTemplateComponent, UtilityHelperService, ɵ0, MaterialModule as ɵa };
 //# sourceMappingURL=eqproject-eqp-dynamic-module.js.map