@eqproject/eqp-dynamic-module 0.0.1 → 0.0.4

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

@@ -1,6 +1,6 @@
-import { __decorate } from 'tslib';
+import { __decorate, __awaiter } 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';
 
 class Context {
     constructor() {
@@ -354,7 +353,11 @@ let EqpDynamicModuleComponent = class EqpDynamicModuleComponent {
         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;
     }
     ngOnInit() {
@@ -373,16 +376,21 @@ let EqpDynamicModuleComponent = class EqpDynamicModuleComponent {
     }
     onSaveForm(event) {
         //TODO: Salvare il record!
-        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);
-            }
-        }
+        // 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);
+    }
+    onDuplicateRecord(record) {
+        this.duplicateRecord.emit(record);
+    }
+    onDeleteRecord(record) {
+        this.deleteRecord.emit(record);
     }
 };
 __decorate([
@@ -397,13 +405,25 @@ __decorate([
 __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);
@@ -1269,11 +1289,10 @@ let AddFormFieldComponent = class AddFormFieldComponent {
                 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']:
@@ -1290,10 +1309,50 @@ let AddFormFieldComponent = class AddFormFieldComponent {
         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.
+     */
+    onImageIsContextualAttachmentChange() {
+        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).
+     */
+    catchContextualAttachmentChange(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
@@ -1622,7 +1681,7 @@ __decorate([
 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);
@@ -2010,31 +2069,13 @@ ListValueFieldTemplateComponent = __decorate([
 ], ListValueFieldTemplateComponent);
 
 let AttachmentFieldTemplateComponent = class AttachmentFieldTemplateComponent {
-    //#endregion
     constructor(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!";
     }
     ngOnInit() {
         // Nel caso in cui sono in modifica di un Record aggiorno il valore
@@ -2085,6 +2126,10 @@ let AttachmentFieldTemplateComponent = class AttachmentFieldTemplateComponent {
         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();
     }
     /**
@@ -2170,6 +2215,9 @@ __decorate([
 __decorate([
     Output()
 ], AttachmentFieldTemplateComponent.prototype, "recordChange", void 0);
+__decorate([
+    Output()
+], AttachmentFieldTemplateComponent.prototype, "onAttachmentsChange", void 0);
 __decorate([
     ViewChild("eqpAttachments", { static: true })
 ], AttachmentFieldTemplateComponent.prototype, "eqpAttachments", void 0);
@@ -2179,14 +2227,36 @@ __decorate([
 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);
 
+/**
+ * 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.
+ */
+const toBase64 = file => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.toString());
+    reader.onerror = error => reject(error);
+});
+const ɵ0 = toBase64;
 let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
-    constructor() {
+    //#endregion
+    constructor(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'
+        };
     }
     ngOnInit() {
         this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
@@ -2199,6 +2269,19 @@ let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
         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();
+        }
     }
     ngOnChanges(changes) {
         // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
@@ -2207,15 +2290,117 @@ let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
             this.updateField();
         }
     }
+    updateMetadataValidity() {
+        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.
      */
     updateField() {
         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);
+        }
+    }
+    resetPreLoadedImage() {
+        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.
+     */
+    onAttachmentsChange() {
+        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.
+     */
+    saveDrowning(drawnPicture) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let base64File = yield toBase64(drawnPicture);
+            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();
+            }
+        });
+    }
+    /**
+     * Metodo per chiudere il dialog in cui disegnare sull'immagine cariata e svuotare le dimensioni.
+     */
+    closeImageDrowingDialog() {
+        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.
+     */
+    getImageDimensions() {
+        var blob = this.getBlobFromBase64();
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const image = new Image();
+            image.src = e.target.result;
+            image.onload = 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.
+     */
+    getBlobFromBase64() {
+        const byteCharacters = atob(this.record[this.field.Name][0].FileDataBase64);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const 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.
+     */
+    onRecordValueChange() {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
         }
     }
 };
+ImageFieldTemplateComponent.ctorParameters = () => [
+    { type: MatDialog },
+    { type: UtilityHelperService }
+];
 __decorate([
     Input()
 ], ImageFieldTemplateComponent.prototype, "record", void 0);
@@ -2225,22 +2410,35 @@ __decorate([
 __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);
 
 let ListFormRecordComponent = class ListFormRecordComponent {
     constructor() {
+        this.showTitle = true;
         this.columns = new Array();
         this.onAddViewEditRecord = new EventEmitter();
+        this.onDeleteRecord = new EventEmitter();
+        this.onDuplicateRecord = new EventEmitter();
     }
     ngOnInit() {
         this.configureColumns();
     }
+    ngOnChanges(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.
      */
@@ -2274,7 +2472,7 @@ let ListFormRecordComponent = class ListFormRecordComponent {
                     .push({
                     name: action.Name, icon: action.Icon, fn: (element, index, col) => {
                         const rec = element;
-                        const ctx = UtilityHelperService$2.context;
+                        const ctx = UtilityHelperService.context;
                         eval(action.Action);
                         // TODO: salvare le modifiche
                     }
@@ -2296,17 +2494,17 @@ let ListFormRecordComponent = class ListFormRecordComponent {
      * @param record Record da duplicare.
      */
     duplicateRecord(record) {
-        EqpDynamicModuleDialogService$1.Confirm('Duplicare il record selezionato?', () => {
-            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", (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
     }
     /**
@@ -2314,10 +2512,11 @@ let ListFormRecordComponent = class ListFormRecordComponent {
      * @param record Record da eliminare selezionato sulla eqp-table.
      */
     deleteRecord(record) {
-        EqpDynamicModuleDialogService$1.Confirm('Eliminare il record selezionato?', () => {
-            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
     }
     /**
@@ -2348,23 +2547,23 @@ let ListFormRecordComponent = class ListFormRecordComponent {
     createFieldColumn(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;
@@ -2373,8 +2572,8 @@ let ListFormRecordComponent = class ListFormRecordComponent {
                     column.numberPipe = NumberColumnPipe.DECIMAL;
                 }
                 break;
-            case FieldTypeEnum$1['Allegato']:
-            case FieldTypeEnum$1['Immagine']:
+            case FieldTypeEnum['Allegato']:
+            case FieldTypeEnum['Immagine']:
                 column.value = (element) => {
                     if (field.IsMultiAttach || (field.AttachDefinition && field.AttachDefinition.IsMultiAttach)) {
                         return element[field.Name] != null && element[field.Name].length > 0 ? element[field.Name].map(a => a.FileName).join(", ") : null;
@@ -2386,7 +2585,7 @@ let ListFormRecordComponent = class ListFormRecordComponent {
                 column.isSortable = false;
                 column.isSearchable = false;
                 break;
-            case FieldTypeEnum$1['Elenco generico']:
+            case FieldTypeEnum['Elenco generico']:
                 column.value = (element) => {
                     if (field.IsMultiChoiche) {
                         if (!element[field.Name] || element[field.Name].length == 0) {
@@ -2403,7 +2602,7 @@ let ListFormRecordComponent = class ListFormRecordComponent {
                 column.isSortable = false;
                 column.isSearchable = false;
                 break;
-            case FieldTypeEnum$1['Lookup']:
+            case FieldTypeEnum['Lookup']:
                 // TODO
                 break;
         }
@@ -2418,6 +2617,9 @@ let ListFormRecordComponent = class ListFormRecordComponent {
         }
     }
 };
+__decorate([
+    Input()
+], ListFormRecordComponent.prototype, "showTitle", void 0);
 __decorate([
     Input()
 ], ListFormRecordComponent.prototype, "form", void 0);
@@ -2430,10 +2632,16 @@ __decorate([
 __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);
@@ -2445,6 +2653,7 @@ let AddFormRecordComponent = class AddFormRecordComponent {
     constructor(cdr, utilityService) {
         this.cdr = cdr;
         this.utilityService = utilityService;
+        this.showTitle = true;
         this.showButtons = true;
         this.form = new Form();
         this.fieldGroups = {};
@@ -2532,8 +2741,11 @@ let AddFormRecordComponent = class AddFormRecordComponent {
 };
 AddFormRecordComponent.ctorParameters = () => [
     { type: ChangeDetectorRef },
-    { type: UtilityHelperService$2 }
+    { type: UtilityHelperService }
 ];
+__decorate([
+    Input()
+], AddFormRecordComponent.prototype, "showTitle", void 0);
 __decorate([
     Input()
 ], AddFormRecordComponent.prototype, "showButtons", void 0);
@@ -2555,7 +2767,7 @@ __decorate([
 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);
@@ -2712,7 +2924,8 @@ EqpDynamicModuleModule = __decorate([
             EqpSelectModule,
             EqpDatetimepickerModule,
             EqpFiltersModule,
-            EqpNumericModule
+            EqpNumericModule,
+            EqpImgDrawingModule
         ],
         exports: [
             EqpDynamicModuleComponent,
@@ -2728,6 +2941,10 @@ class Entity extends BaseObj {
 }
 
 class ImageField extends BaseField {
+    /**Proprietà per recuperare l'allegato caricato come array per eqp-attachments (se ImageIsContextualAttachment == true) */
+    get _contextualAttachments() {
+        return this.ContextualAttachment ? [this.ContextualAttachment] : [];
+    }
 }
 
 /**Questo tipo di campo rappresenta una lookup ad altri valori */
@@ -2753,5 +2970,5 @@ class TextField extends BaseField {
  * 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