@eqproject/eqp-dynamic-module 0.0.4 → 0.0.6

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

@@ -1,7 +1,10 @@
 import { __decorate, __awaiter } from 'tslib';
 import { CommonModule } from '@angular/common';
-import { ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, Input, Output, Component, NgModule, ViewChild, ChangeDetectorRef, ViewChildren } from '@angular/core';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, Component, NgModule, ViewChild, ChangeDetectorRef, ViewChildren } from '@angular/core';
 import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import Swal from 'sweetalert2';
+import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -34,14 +37,12 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatNativeDateModule } from '@angular/material/core';
 import { TypeColumn, CellAlignmentEnum, NumberColumnPipe, EqpTableModule } from '@eqproject/eqp-table';
-import { EqpAttachmentsModule } from '@eqproject/eqp-attachments';
+import { AttachmentType, 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 { EqpNumericInputMode, EqpNumericModule } from '@eqproject/eqp-numeric';
 
 class Context {
     constructor() {
@@ -51,6 +52,29 @@ class Context {
 class ContextUser {
 }
 
+class EndPointConfiguration {
+}
+class EndPointData {
+}
+class EndPointDataParams {
+    constructor() {
+        this.ParamValue = null;
+    }
+}
+var ParamTypeEnum;
+(function (ParamTypeEnum) {
+    ParamTypeEnum[ParamTypeEnum["Query param"] = 1] = "Query param";
+    ParamTypeEnum[ParamTypeEnum["In route"] = 2] = "In route";
+    ParamTypeEnum[ParamTypeEnum["In Body"] = 3] = "In Body";
+})(ParamTypeEnum || (ParamTypeEnum = {}));
+var RequestMethodEnum;
+(function (RequestMethodEnum) {
+    RequestMethodEnum["GET"] = "GET";
+    RequestMethodEnum["POST"] = "POST";
+    RequestMethodEnum["PUT"] = "PUT";
+    RequestMethodEnum["DELETE"] = "DELETE";
+})(RequestMethodEnum || (RequestMethodEnum = {}));
+
 /**
  * Classe base che implementa la valorizzazione dell'ID (se null) con una nuova GUID
  * in creazione dell'oggetto.
@@ -83,6 +107,122 @@ var FormScalarTypeEnum;
     FormScalarTypeEnum[FormScalarTypeEnum["In accordion"] = 4] = "In accordion"; //GROUPED_BY_ACCORDION
 })(FormScalarTypeEnum || (FormScalarTypeEnum = {}));
 
+class Record {
+}
+class DynRecord {
+    constructor() {
+        this.Values = {};
+    }
+}
+
+let EqpDynamicModuleDialogService = class EqpDynamicModuleDialogService {
+    constructor() {
+    }
+    /**
+     * Mostra uno sweet alert di tipo SUCCESS con il messaggio passato come parametro.
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Operazione completata')
+     */
+    static Success(message, title = null) {
+        let currentTitle = title != null ? title : 'Operazione completata con successo.';
+        Swal.fire(currentTitle, message, 'success');
+    }
+    /**
+     * Mostra uno sweet alert di tipo ERROR con il messaggio passato come parametro.
+     * @param message Messaggio d'errore da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Errore')
+     */
+    static Error(message, title = null) {
+        let currentTitle = title != null ? title : 'Errore';
+        if (Array.isArray(message)) {
+            currentTitle = title != null ? title : 'Errore';
+            let htmlErrors = message.join("<br>");
+            Swal.fire({
+                title: currentTitle,
+                html: htmlErrors,
+                icon: 'error'
+            });
+        }
+        else {
+            Swal.fire(currentTitle, message, 'error');
+        }
+    }
+    /**
+     * Mostra uno sweetalert di tipo CONFIRM con il messaggio passato come parametro e se viene premuto
+     * CONFERMA lancia la funzione di callback passata come parametro
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Info')
+     */
+    static Confirm(message, confirmCallback, isWarning = false, title = null, customWidth = null) {
+        let currentTitle = title != null ? title : 'Sei sicuro di voler procedere?';
+        if (Array.isArray(message)) {
+            let htmlErrors = message.join("<br>");
+            Swal.fire({
+                title: currentTitle,
+                html: htmlErrors,
+                width: customWidth ? customWidth : '32rem',
+                icon: !isWarning ? 'question' : 'warning',
+                showCancelButton: true,
+                allowOutsideClick: false,
+                allowEscapeKey: false
+            }).then((result) => {
+                if (result.value && confirmCallback) {
+                    confirmCallback();
+                }
+            });
+        }
+        else {
+            Swal.fire({
+                title: currentTitle,
+                text: message,
+                width: customWidth ? customWidth : '32rem',
+                icon: !isWarning ? 'question' : 'warning',
+                showCancelButton: true,
+                allowOutsideClick: false,
+                allowEscapeKey: false
+            }).then((result) => {
+                if (result.value && confirmCallback) {
+                    confirmCallback();
+                }
+            });
+        }
+    }
+    /**
+     * Mostra uno sweetalert di tipo INFO con il messaggio passato come parametro
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Info')
+     */
+    static Info(message, title = null, isToast = null) {
+        let currentTitle = title != null ? title : "Informazione:";
+        Swal.fire(currentTitle, message, 'info');
+    }
+    /**
+     * Mostra uno sweetalert di tipo WARNING con il messaggio passato come parametro
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Attenzione!')
+     */
+    static Warning(message, title = null, isToast = null) {
+        let currentTitle = title != null ? title : "Attenzione!";
+        if (Array.isArray(message)) {
+            let htmlWarnings = message.join("<br>");
+            Swal.fire({
+                title: currentTitle,
+                html: htmlWarnings,
+                icon: 'warning'
+            });
+        }
+        else {
+            Swal.fire(currentTitle, message, 'warning');
+        }
+    }
+};
+EqpDynamicModuleDialogService.ɵprov = ɵɵdefineInjectable({ factory: function EqpDynamicModuleDialogService_Factory() { return new EqpDynamicModuleDialogService(); }, token: EqpDynamicModuleDialogService, providedIn: "root" });
+EqpDynamicModuleDialogService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], EqpDynamicModuleDialogService);
+
 /**
  * Contiene le informazioni di base del campo, indipendentemente dal tipo.
  * Questa classe è volutamente astratta perché il tipo di campo è dettato dal tipo
@@ -118,6 +258,19 @@ var ColSpanSizesEnum;
     ColSpanSizesEnum[ColSpanSizesEnum["col-lg-12"] = 12] = "col-lg-12";
 })(ColSpanSizesEnum || (ColSpanSizesEnum = {}));
 
+/**Campo di testo */
+class TextField extends BaseField {
+}
+var TextMaskEnum;
+(function (TextMaskEnum) {
+    TextMaskEnum[TextMaskEnum["Password"] = 1] = "Password";
+    TextMaskEnum[TextMaskEnum["Email"] = 2] = "Email";
+    TextMaskEnum[TextMaskEnum["Telefono"] = 3] = "Telefono";
+    TextMaskEnum[TextMaskEnum["Url"] = 4] = "Url";
+})(TextMaskEnum || (TextMaskEnum = {}));
+const UrlRegex = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
+const TelRegex = '([+]?[0-9]{10,14})';
+
 class ArrayValidators {
     static minLenght(minLenght) {
         var validationFunction = (control) => {
@@ -137,18 +290,70 @@ class ArrayValidators {
     }
 }
 
+let SpinnerService = class SpinnerService {
+    constructor() {
+        this.isLoading = new Subject();
+        this.requestsCount = 0;
+    }
+    /**
+     * Mostra lo spinner
+     */
+    show() {
+        setTimeout(() => {
+            this.isLoading.next(true);
+        }, 100);
+    }
+    /**
+     * Nasconde lo spinner
+     */
+    hide() {
+        setTimeout(() => {
+            this.isLoading.next(false);
+        }, 100);
+    }
+    addRequestCounter() {
+        this.requestsCount++;
+        this.show();
+    }
+    removeRequestCounter() {
+        this.requestsCount--;
+        if (this.requestsCount == 0)
+            this.hide();
+    }
+};
+SpinnerService.ɵprov = ɵɵdefineInjectable({ factory: function SpinnerService_Factory() { return new SpinnerService(); }, token: SpinnerService, providedIn: "root" });
+SpinnerService = __decorate([
+    Injectable({
+        providedIn: 'root'
+    })
+], SpinnerService);
+
 var UtilityHelperService_1;
 let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
-    constructor(formBuilder) {
+    constructor(formBuilder, http, spinnerService) {
         this.formBuilder = formBuilder;
+        this.http = http;
+        this.spinnerService = spinnerService;
     }
     static EvaluateFieldFormula(formula, rec, ctx) {
-        const evaluatedValue = eval(formula.replace('"', '\"'));
+        const evaluatedValue = eval(formula);
         return (evaluatedValue ? evaluatedValue : null);
     }
     static SetContext(ctx) {
         this.context = ctx;
     }
+    static GetFieldType(field) {
+        switch (field.FieldType) {
+            case FieldTypeEnum["Campo di testo"]: {
+                const t = Object.assign(new TextField, field);
+                return t;
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
     /**
      * Metodo per impostare i valori da suggerire nell'autocomplete per i campi in cui l'utente deve scrivere comandi javascript.
      * In base all'ultimo carattere digitato viene impostato un elenco di oggetti o proprietà che l'utente ha a disposizione in quel momento.
@@ -160,7 +365,7 @@ let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
      *  3) la stringa digitata dall'utente non coincide con nessun altro caso sopra (finisce con un carattere qualunque)
      */
     static GetAutocompleteOptions(fields, typedFormula) {
-        var autocompleteOptions = [];
+        let autocompleteOptions = [];
         // Recupero i nomi di tutti i campi creati fino ad ora nella form.
         const availableRecProperties = fields.map(f => f.Label.split(' ').join('_'));
         // Nel casi in cui l'utente non ha inserito nulla oppure la stringa finisce con uno spazio vuoto o un simbolo diverso da "."
@@ -196,17 +401,17 @@ let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
         // funzione javascript. Controllo la parola che l'utente sta digitando e se fa parte di uno degli oggetti a disposizione
         // o una proprietà di essi allora suggerisco i possibili match.
         else {
-            var availableOptions = [];
+            const availableOptions = [];
             // Prendo tutti i blocchi di caratteri digitati dall'utente
             const allFormulaWords = typedFormula.split(" ");
             // Prendo l'ultimo blocco di caratteri digitato dall'utente
-            var lastTypedString = allFormulaWords[allFormulaWords.length - 1];
+            const lastTypedString = allFormulaWords[allFormulaWords.length - 1];
             // Se la l'ultima stringa digitata non contiene caratteri speciali allora splitto la stringa
             // sui "." e imposto i suggerimenti in base al path della prorpietà che si sta digitando.
             if (!new RegExp("[^0-9a-zA-Z_.]").test(lastTypedString)) {
-                var propertyPath = lastTypedString.split(".");
-                var lastTypedWork = propertyPath[propertyPath.length - 1];
-                var propertiesToCheck = [];
+                const propertyPath = lastTypedString.split(".");
+                const lastTypedWork = propertyPath[propertyPath.length - 1];
+                let propertiesToCheck = [];
                 if (propertyPath.length == 1) {
                     propertiesToCheck = ["rec", "ctx"];
                 }
@@ -219,7 +424,7 @@ let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
                 else if (propertyPath.length > 1 && propertyPath[propertyPath.length - 2] === "rec") {
                     propertiesToCheck = availableRecProperties;
                 }
-                // Eseguo il controllo sulle proprietà recuperate, aggiungo ai suggerimenti tutti i nomi che iniziano con 
+                // Eseguo il controllo sulle proprietà recuperate, aggiungo ai suggerimenti tutti i nomi che iniziano con
                 // quello che sta digitando l'utente.
                 propertiesToCheck.forEach(prop => {
                     if (prop.startsWith(lastTypedWork)) {
@@ -285,7 +490,7 @@ let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
      * @returns Restituisce un FormGroup rappresentate la Form a cui appartengono i BaseField ricevuti in input.
      */
     CreateFormFormGroup(formFields, record, onlyView = false, includeCurrentFormInField = true) {
-        var formForm = this.formBuilder.group([]);
+        const formForm = this.formBuilder.group([]);
         formFields.forEach(field => {
             formForm.addControl(field.Name, this.createFieldFormControl(field, record));
             if (includeCurrentFormInField) {
@@ -314,6 +519,17 @@ let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
                 if (field.MinLenght) {
                     validators.push(Validators.minLength(field.MinLenght));
                 }
+                switch (field.TextMask) {
+                    case TextMaskEnum.Url:
+                        validators.push(Validators.pattern(UrlRegex));
+                        break;
+                    case TextMaskEnum.Email:
+                        validators.push(Validators.email);
+                        break;
+                    case TextMaskEnum.Telefono:
+                        validators.push(Validators.pattern(TelRegex));
+                        break;
+                }
                 break;
             case FieldTypeEnum["Area di testo"]:
                 if (field.MaxLenght) {
@@ -336,12 +552,147 @@ let UtilityHelperService = UtilityHelperService_1 = class UtilityHelperService {
         }
         return new FormControl(record[field.Name], validators);
     }
+    /**
+     * Metodo per configurare gli endpoint da usare di default a partire dall'url base del server
+     * a cui si deve connettere e al token da passare per autenticarsi.
+     * @param baseServerUrl Stringa dell'url base del server (es: "http://localhost:5000").
+     * @param userToken Token dell'utente loggato da usare per autenticarsi se necessario.
+     * @returns Resituisce la configurazione completa degli endPoint da usare di default.
+     */
+    ConfigureDefaultEndPoints(baseServerUrl, userToken) {
+        let endPointConfiguration = new EndPointConfiguration();
+        endPointConfiguration = new EndPointConfiguration();
+        endPointConfiguration.Records = {
+            GetByFormIDEndPoint: {
+                Url: baseServerUrl + "/api/v1/getall",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            GetByIDEndPoint: {
+                Url: baseServerUrl + "/api/v1/getByID",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            SaveEndPoint: {
+                Url: baseServerUrl + "/api/v1/save",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            },
+            DuplicateEndPoint: {
+                Url: baseServerUrl + "/api/v1/duplicate",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            },
+            DeleteEndPoint: {
+                Url: baseServerUrl + "/api/v1/delete",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.DELETE,
+            }
+        };
+        endPointConfiguration.Forms = {
+            GetByIDEndPoint: {
+                Url: baseServerUrl + "/api/conf/form",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            SaveEndPoint: {
+                Url: baseServerUrl + "/api/conf/form",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            }
+        };
+        return endPointConfiguration;
+    }
+    /**
+     * Metodo che data la configurazione di un endpoint costruisce l'url da chiamare, gli eventuali parametri
+     * da passare (nel body o nella rotta) ed effettua la chiamata. Al termine della chiamata esegue le eventuali
+     * funzioni di callback (sia in caso di successo che in caso di errore) passate in input.
+     * @param endPointData Cofigurazione dell'endpoint da chiamare.
+     * @param dynamicModuleParams Array dei parametri aggiunti dal modulo dinamico a quelli già configurati
+     * (ad esempio il record o la form da salvare oppure l'ID per recuperare una particolare entità).
+     * @param callback Metodo da eseguire in caso di successo dopo la chiamata http.
+     * NOTA: in input viene passata la risposta della chiamata stessa.
+     * @param errorCallBack Metodo da eseguire in caso di errore dopo la chiamata http.
+     * NOTA: in input viene passato l'errore generato della chiamata stessa.
+     */
+    RunEndPointCall(endPointData, dynamicModuleParams = null, callback = null, errorCallBack = null) {
+        this.spinnerService.addRequestCounter();
+        let url = `${endPointData.Url}`;
+        let queryParams = null;
+        const bodyParams = {
+            AdditionalParams: {}
+        };
+        // Se nella configurazione sono stati definiti parametri da aggiungere alla chiamata questi vengono ciclati
+        // e aggiunti nel punto in cui devono essere usati.
+        if (endPointData.Params) {
+            endPointData.Params.forEach(p => {
+                switch (p.ParamType) {
+                    case ParamTypeEnum['Query param']: {
+                        const stringParam = p.ParamName + "=" + p.ParamValue;
+                        queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                        break;
+                    }
+                    case ParamTypeEnum['In route']: {
+                        url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                        break;
+                    }
+                    case ParamTypeEnum['In Body']: {
+                        bodyParams.AdditionalParams[p.ParamName] = p.ParamValue;
+                        break;
+                    }
+                }
+            });
+        }
+        // Se sono stati passati parametri da aggiungere alla chiamata definiti all'interno del modulo dinamico
+        // vengono ciclati e aggiunti nel punto in cui devono essere usati dopo quelli definiti nella configurazione.
+        if (dynamicModuleParams) {
+            dynamicModuleParams.forEach(p => {
+                switch (p.ParamType) {
+                    case ParamTypeEnum['Query param']: {
+                        const stringParam = p.ParamName + "=" + p.ParamValue;
+                        queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                        break;
+                    }
+                    case ParamTypeEnum['In route']: {
+                        url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                        break;
+                    }
+                    case ParamTypeEnum['In Body']: {
+                        bodyParams[p.ParamName] = p.ParamValue;
+                        break;
+                    }
+                }
+            });
+        }
+        if (queryParams != null) {
+            url = (url.endsWith("/") ? url.substring(0, url.length - 1) : url) + "?" + queryParams;
+        }
+        this.http.request(endPointData.RequestMethod, url, {
+            headers: endPointData.Token ? { Authorization: endPointData.Token } : null,
+            body: ![RequestMethodEnum.DELETE, RequestMethodEnum.GET].includes(endPointData.RequestMethod) ? bodyParams : null
+        })
+            .subscribe((res) => {
+            this.spinnerService.removeRequestCounter();
+            if (callback) {
+                callback(res);
+            }
+        }, (error) => {
+            this.spinnerService.removeRequestCounter();
+            if (errorCallBack) {
+                errorCallBack(error);
+            }
+            EqpDynamicModuleDialogService.Error(error.message);
+            throw new Error(error.message);
+        });
+    }
 };
 UtilityHelperService.context = new Context();
 UtilityHelperService.ctorParameters = () => [
-    { type: FormBuilder }
+    { type: FormBuilder },
+    { type: HttpClient },
+    { type: SpinnerService }
 ];
-UtilityHelperService.ɵprov = ɵɵdefineInjectable({ factory: function UtilityHelperService_Factory() { return new UtilityHelperService(ɵɵinject(FormBuilder)); }, token: UtilityHelperService, providedIn: "root" });
+UtilityHelperService.ɵprov = ɵɵdefineInjectable({ factory: function UtilityHelperService_Factory() { return new UtilityHelperService(ɵɵinject(FormBuilder), ɵɵinject(HttpClient), ɵɵinject(SpinnerService)); }, token: UtilityHelperService, providedIn: "root" });
 UtilityHelperService = UtilityHelperService_1 = __decorate([
     Injectable({
         providedIn: 'root'
@@ -349,56 +700,214 @@ UtilityHelperService = UtilityHelperService_1 = __decorate([
 ], UtilityHelperService);
 
 let EqpDynamicModuleComponent = class EqpDynamicModuleComponent {
-    constructor() {
+    constructor(utilityHelperService) {
+        this.utilityHelperService = utilityHelperService;
         this.context = new Context();
-        this.form = new Form();
         this.showButtons = true;
         this.showTitle = true;
-        this.viewMode = FormTypeEnum.LIST;
+        /**
+         * Url del server da chiamare per recuperare, salvare o eliminare i record.
+         * Usato per creare la configurazione di default degli endpoint da chiamare.
+         */
+        this.baseServerUrl = null;
+        /**
+         * Token da usare negli endpoint da chiamare per recuperare o salvare i record.
+         * Usato solo se viene popolata la proprietà "baseServerUrl".
+         */
+        this.userToken = null;
+        /**
+         * Configurazione degli endpoint da chiamare per recuperare o salvare i dati.
+         * Può essere definita dall'utente oppure lasciata null, viene popolata con dei
+         * valori di default se viene valorizzata la proprietà "baseServerUrl" altrimenti
+         * viene lasciata null e non viene eseguita nessuna chiamata al server.
+         */
+        this.endPointConfiguration = null;
+        /**
+         * Eventi emessi quando si salva, elimina o duplica un record
+         * se non è stato specificato un endpoint da chiamare.
+         */
         this.saveRecord = new EventEmitter();
         this.deleteRecord = new EventEmitter();
         this.duplicateRecord = new EventEmitter();
+        /**
+         * Eventi emessi DOPO aver eseguito una chiamata al server per il salvataggio,
+         * l'eliminazione o la duplicazione di un record all'endpoint specificato.
+         */
+        this.afterSaveRecord = new EventEmitter();
+        this.afterDeleteRecord = new EventEmitter();
+        this.afterDuplicateRecord = new EventEmitter();
+        this.form = new Form();
+        this.viewMode = FormTypeEnum.LIST;
         this.FormTypeEnum = FormTypeEnum;
     }
     ngOnInit() {
         UtilityHelperService.SetContext(this.context);
+        this.configureDefaultEndPoints();
+        this.getFormByID();
+    }
+    getFormByID() {
+        const dynamicModuleParams = new Array();
+        dynamicModuleParams.push({
+            ParamName: "id",
+            ParamValue: this.formID,
+            ParamType: ParamTypeEnum['Query param']
+        });
+        this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.GetByIDEndPoint, dynamicModuleParams, (res) => {
+            this.form = res;
+            this.getRecordsByFormID();
+        }, (err) => {
+            console.log(err);
+        });
     }
+    /**
+     * Metodo per configurare gli endpoint da usare di default a partire dall'url base del server
+     * a cui si deve connettere e al token da passare per autenticarsi.
+     * Se la proprietà "baseServerUrl" è null e non sono stati configurati i vari endpoint allora
+     * non viene eseguita nessuna chiamata http per recuperare/salvare i dati.
+     */
+    configureDefaultEndPoints() {
+        if (!this.endPointConfiguration && this.baseServerUrl) {
+            this.endPointConfiguration = this.utilityHelperService.ConfigureDefaultEndPoints(this.baseServerUrl, this.userToken);
+        }
+    }
+    /**
+     * Metodo per recuperare tutti i record salvati per una particolare Form.
+     * La chiamata viene effettuata solo se è stato configurato l'endPoint da usare.
+     * La risposta della chiamata deve essere un array di oggetti di tipo "DynRecord"
+     * a partire dai quali vengono ricreati i Record usati nel client.
+     */
+    getRecordsByFormID() {
+        if (this.endPointConfiguration && this.endPointConfiguration.Records && this.endPointConfiguration.Records.GetByFormIDEndPoint) {
+            var dynamicModuleParams = [
+                { ParamName: 'EntID', ParamValue: this.form.ID, ParamType: ParamTypeEnum['Query param'] }
+            ];
+            this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByFormIDEndPoint, dynamicModuleParams, (res) => {
+                this.values = new Array();
+                res.forEach(r => {
+                    var tmpRec = new Record();
+                    tmpRec = JSON.parse(r.SerializedValues);
+                    tmpRec.ID = r.ID;
+                    tmpRec.EntID = r.EntID;
+                    this.values.push(tmpRec);
+                });
+            });
+        }
+    }
+    /**
+     * Metodo invocato quando si vuole aggiungere, visualizzare o modificare un record.
+     * Se l'evento è null vuol dire che stiamo aggiungendo un nuovo record altrimenti siamo in modifica
+     * o visualizzazione. In questi ultimi due casi, se è stato configurato un endpoint per il recupero
+     * del record completo allora viene effettuata una chiamata al server, altrimenti viene usato l'oggetto selezionato.
+     * @param event Oggetto con due proprietà:
+     * "record" = oggetto da modificare/visualizzare,
+     * "onlyView" = booleano (se TRUE siamo in visualizzazione altrimenti in modifica)
+     */
     onAddViewEditRecord(event) {
         if (event != null) {
-            this.selectedRecord = JSON.parse(JSON.stringify(event.record));
             this.onlyView = event.onlyView;
+            if (this.endPointConfiguration && this.endPointConfiguration.Records && this.endPointConfiguration.Records.GetByIDEndPoint) {
+                var dynamicModuleParams = [
+                    { ParamName: "id", ParamValue: event.record.ID, ParamType: ParamTypeEnum['Query param'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByIDEndPoint, dynamicModuleParams, (res) => {
+                    this.selectedRecord = JSON.parse(res.SerializedValues);
+                    this.selectedRecord.ID = res.ID;
+                    this.selectedRecord.EntID = res.EntID;
+                    this.viewMode = FormTypeEnum.SCALAR;
+                });
+            }
+            else {
+                this.selectedRecord = JSON.parse(JSON.stringify(event.record));
+                this.viewMode = FormTypeEnum.SCALAR;
+            }
         }
         else {
             this.selectedRecord = null;
             this.onlyView = false;
+            this.viewMode = FormTypeEnum.SCALAR;
+        }
+    }
+    /**
+     * Metodo per salvare il record aggiunto o modificato.
+     * Se è stato configurato un endPoint per il salvataggio viene effettuata una chiamata al server passando l'oggeto da salvare
+     * nel body della chiamata, altrimenti scatena l'evento "saveRecord".
+     * @param event Oggetto di tipo Record da salvare.
+     */
+    onSaveRecord(event) {
+        var _a;
+        if (event != null && this.endPointConfiguration != null && this.endPointConfiguration.Records.SaveEndPoint) {
+            var dynRec = new DynRecord();
+            dynRec.ID = (_a = event.ID, (_a !== null && _a !== void 0 ? _a : null));
+            dynRec.EntID = this.form.ID;
+            dynRec.Values = (event !== null && event !== void 0 ? event : null);
+            var dynamicModuleParams = [
+                { ParamName: "Record", ParamValue: dynRec, ParamType: ParamTypeEnum['In Body'] }
+            ];
+            this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.SaveEndPoint, dynamicModuleParams, (res) => {
+                this.getRecordsByFormID();
+                this.afterSaveRecord.emit(event);
+                this.viewMode = FormTypeEnum.LIST;
+            });
+        }
+        else {
+            this.saveRecord.emit(event);
+            this.viewMode = FormTypeEnum.LIST;
         }
-        this.viewMode = FormTypeEnum.SCALAR;
-    }
-    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);
-        //   }
-        // }
-        this.saveRecord.emit(event);
-        this.viewMode = FormTypeEnum.LIST;
     }
+    /**
+     * Metodo per duplicare un record precedentemente salvato.
+     * Se è stato configurato un endPoint per la duplicazione lato server allora effettua una chiamata passando nel body
+     * un oggetto contenente il record da duplicare, altrimenti scatena l'evento di output "duplicateRecord".
+     * @param record Oggetto di tipo Record da duplicare.
+     */
     onDuplicateRecord(record) {
-        this.duplicateRecord.emit(record);
+        if (this.endPointConfiguration && this.endPointConfiguration.Records.DuplicateEndPoint) {
+            EqpDynamicModuleDialogService.Confirm('Duplicare il record selezionato?', () => {
+                var dynamicModuleParams = [
+                    { ParamName: "id", ParamValue: record.ID, ParamType: ParamTypeEnum['Query param'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.DuplicateEndPoint, dynamicModuleParams, (res) => {
+                    this.getRecordsByFormID();
+                    this.afterDuplicateRecord.emit(record);
+                });
+            }, false, 'Richiesta conferma');
+        }
+        else {
+            this.duplicateRecord.emit(record);
+        }
     }
+    /**
+     * Metodo per eliminare un record.
+     * Se è stato configurato un endPoint per l'eliminazione allora effettua una chiamata passando l'ID del record da eliminare
+     * come query param all'interno della rotta, altrimenti scatena l'evento di output "deleteRecord".
+     * @param record Oggetto di tipo Record da duplicare.
+     */
     onDeleteRecord(record) {
-        this.deleteRecord.emit(record);
+        if (this.endPointConfiguration && this.endPointConfiguration.Records.DeleteEndPoint) {
+            EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', () => {
+                var dynamicModuleParams = [
+                    { ParamName: "id", ParamValue: record.ID, ParamType: ParamTypeEnum['Query param'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.DeleteEndPoint, dynamicModuleParams, (res) => {
+                    this.getRecordsByFormID();
+                    this.afterDeleteRecord.emit(record);
+                });
+            }, false, 'Richiesta conferma');
+        }
+        else {
+            this.deleteRecord.emit(record);
+        }
     }
 };
+EqpDynamicModuleComponent.ctorParameters = () => [
+    { type: UtilityHelperService }
+];
 __decorate([
     Input()
 ], EqpDynamicModuleComponent.prototype, "context", void 0);
 __decorate([
     Input()
-], EqpDynamicModuleComponent.prototype, "form", void 0);
+], EqpDynamicModuleComponent.prototype, "formID", void 0);
 __decorate([
     Input()
 ], EqpDynamicModuleComponent.prototype, "values", void 0);
@@ -410,7 +919,13 @@ __decorate([
 ], EqpDynamicModuleComponent.prototype, "showTitle", void 0);
 __decorate([
     Input()
-], EqpDynamicModuleComponent.prototype, "viewMode", void 0);
+], EqpDynamicModuleComponent.prototype, "baseServerUrl", void 0);
+__decorate([
+    Input()
+], EqpDynamicModuleComponent.prototype, "userToken", void 0);
+__decorate([
+    Input()
+], EqpDynamicModuleComponent.prototype, "endPointConfiguration", void 0);
 __decorate([
     Output()
 ], EqpDynamicModuleComponent.prototype, "saveRecord", void 0);
@@ -420,10 +935,19 @@ __decorate([
 __decorate([
     Output()
 ], EqpDynamicModuleComponent.prototype, "duplicateRecord", void 0);
+__decorate([
+    Output()
+], EqpDynamicModuleComponent.prototype, "afterSaveRecord", void 0);
+__decorate([
+    Output()
+], EqpDynamicModuleComponent.prototype, "afterDeleteRecord", void 0);
+__decorate([
+    Output()
+], EqpDynamicModuleComponent.prototype, "afterDuplicateRecord", 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)\" [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>",
+        template: "<eqp-dynamic-module-spinner></eqp-dynamic-module-spinner>\r\n\r\n<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveRecord($event)\" [showTitle]=\"showTitle\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST && values\" [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);
@@ -501,125 +1025,82 @@ MaterialModule = __decorate([
     })
 ], MaterialModule);
 
-let EqpDynamicModuleDialogService = class EqpDynamicModuleDialogService {
-    constructor() {
-    }
-    /**
-     * Mostra uno sweet alert di tipo ERROR con il messaggio passato come parametro.
-     * @param message Messaggio d'errore da mostrare nello sweetalert
-     * @param title Titolo dello sweetalert (di default mostra 'Errore')
-     */
-    static Error(message, title = null) {
-        let currentTitle = title != null ? title : 'Errore';
-        if (Array.isArray(message)) {
-            currentTitle = title != null ? title : 'Errore';
-            let htmlErrors = message.join("<br>");
-            Swal.fire({
-                title: currentTitle,
-                html: htmlErrors,
-                icon: 'error'
-            });
-        }
-        else {
-            Swal.fire(currentTitle, message, 'error');
-        }
-    }
-    /**
-     * Mostra uno sweetalert di tipo CONFIRM con il messaggio passato come parametro e se viene premuto
-     * CONFERMA lancia la funzione di callback passata come parametro
-     * @param message Messaggio da mostrare nello sweetalert
-     * @param title Titolo dello sweetalert (di default mostra 'Info')
-     */
-    static Confirm(message, confirmCallback, isWarning = false, title = null, customWidth = null) {
-        let currentTitle = title != null ? title : 'Sei sicuro di voler procedere?';
-        if (Array.isArray(message)) {
-            let htmlErrors = message.join("<br>");
-            Swal.fire({
-                title: currentTitle,
-                html: htmlErrors,
-                width: customWidth ? customWidth : '32rem',
-                icon: !isWarning ? 'question' : 'warning',
-                showCancelButton: true,
-                allowOutsideClick: false,
-                allowEscapeKey: false
-            }).then((result) => {
-                if (result.value && confirmCallback) {
-                    confirmCallback();
-                }
-            });
-        }
-        else {
-            Swal.fire({
-                title: currentTitle,
-                text: message,
-                width: customWidth ? customWidth : '32rem',
-                icon: !isWarning ? 'question' : 'warning',
-                showCancelButton: true,
-                allowOutsideClick: false,
-                allowEscapeKey: false
-            }).then((result) => {
-                if (result.value && confirmCallback) {
-                    confirmCallback();
-                }
-            });
-        }
-    }
-    /**
-     * Mostra uno sweetalert di tipo INFO con il messaggio passato come parametro
-     * @param message Messaggio da mostrare nello sweetalert
-     * @param title Titolo dello sweetalert (di default mostra 'Info')
-     */
-    static Info(message, title = null, isToast = null) {
-        let currentTitle = title != null ? title : "Informazione:";
-        Swal.fire(currentTitle, message, 'info');
-    }
-    /**
-     * Mostra uno sweetalert di tipo WARNING con il messaggio passato come parametro
-     * @param message Messaggio da mostrare nello sweetalert
-     * @param title Titolo dello sweetalert (di default mostra 'Attenzione!')
-     */
-    static Warning(message, title = null, isToast = null) {
-        let currentTitle = title != null ? title : "Attenzione!";
-        if (Array.isArray(message)) {
-            let htmlWarnings = message.join("<br>");
-            Swal.fire({
-                title: currentTitle,
-                html: htmlWarnings,
-                icon: 'warning'
-            });
-        }
-        else {
-            Swal.fire(currentTitle, message, 'warning');
-        }
-    }
-};
-EqpDynamicModuleDialogService.ɵprov = ɵɵdefineInjectable({ factory: function EqpDynamicModuleDialogService_Factory() { return new EqpDynamicModuleDialogService(); }, token: EqpDynamicModuleDialogService, providedIn: "root" });
-EqpDynamicModuleDialogService = __decorate([
-    Injectable({
-        providedIn: 'root'
-    })
-], EqpDynamicModuleDialogService);
-
 let EqpDynamicModuleConfiguratorComponent = class EqpDynamicModuleConfiguratorComponent {
-    constructor(formBuilder, dialog) {
+    constructor(formBuilder, dialog, utilityHelperService) {
         this.formBuilder = formBuilder;
         this.dialog = dialog;
+        this.utilityHelperService = utilityHelperService;
         this.context = new Context();
         this.form = new Form();
+        this.formID = null;
         this.innerFormManagment = false;
+        /**
+         * Url del server da chiamare per recuerare, salvare o eliminare i record.
+         * Usato per creare la configurazione di default degli endpoint da chiamare.
+         */
+        this.baseServerUrl = null;
+        /**
+         * Token da usare negli endpoint da chiamare per recuperare o salvare i record.
+         * Usato solo se viene popolata la proprietà "baseServerUrl".
+         */
+        this.userToken = null;
+        /**
+         * Configurazione degli endpoint da chiamare per recuperare o salvare i dati.
+         * Può essere definita dall'utente oppure lasciata null, viene popolata con dei
+         * valori di default se viene valorizzata la proprietà "baseServerUrl" altrimenti
+         * viene lasciata null e non viene eseguita nessuna chiamata al server.
+         */
+        this.endPointConfiguration = null;
         this.formCompleted = false;
         //#region Enumeratori usati nell'html
         this.FormTypeEnum = FormTypeEnum;
         this.FormScalarTypeEnum = FormScalarTypeEnum;
         //#endregion
+        /**
+         * Evento emesso quando si salva una form e non è stato specificato un endpoint da chiamare.
+         */
         this.saveFormEvent = new EventEmitter();
+        /**
+         * Evento emesso DOPO aver eseguito una chiamata al server per il salvataggiodi una form all'endpoint specificato.
+         */
+        this.afterSaveFormEvent = new EventEmitter();
     }
     ngOnInit() {
+        this.configureDefaultEndPoints();
+        this.getFormByID();
         if (this.context) {
             UtilityHelperService.SetContext(this.context);
         }
-        this.configureColumns();
-        this.createFormForm();
+    }
+    /**
+     * Metodo per configurare gli endpoint da usare di default a partire dall'url base del server
+     * a cui si deve connettere e al token da passare per autenticarsi.
+     * Se la proprietà baseServerUrl è null e non sono stati configurati i vari endpoint allora
+     * non viene eseguita nessuna chiamata http per recuperare/salvare i dati.
+     */
+    configureDefaultEndPoints() {
+        if (!this.endPointConfiguration && this.baseServerUrl) {
+            this.endPointConfiguration = this.utilityHelperService.ConfigureDefaultEndPoints(this.baseServerUrl, this.userToken);
+            if (this.formID) {
+                this.endPointConfiguration.Forms.GetByIDEndPoint.Params = [{ ParamName: 'id', ParamValue: this.formID, ParamType: ParamTypeEnum['Query param'] }];
+            }
+        }
+    }
+    /**
+     * Metodo per recuperare tutti i record salvati per una particolare Form.
+     * La chiamata viene effettuata solo se è stato configurato l'endPoint da usare.
+     */
+    getFormByID() {
+        if (this.formID && this.endPointConfiguration && this.endPointConfiguration.Forms && this.endPointConfiguration.Forms.GetByIDEndPoint) {
+            this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.GetByIDEndPoint, null, (res) => {
+                this.setFormAndConfigure(res);
+            }, (err) => {
+                this.setFormAndConfigure(new Form());
+            });
+        }
+        else {
+            this.setFormAndConfigure();
+        }
     }
     /**
      * Metodo invocato al cambio del tipo di visualizzazione della form.
@@ -777,7 +1258,7 @@ let EqpDynamicModuleConfiguratorComponent = class EqpDynamicModuleConfiguratorCo
                 EqpDynamicModuleDialogService.Warning('Impossibile inserire due form di dettaglio con lo stesso nome.');
                 throw new Error('Impossibile inserire due form di dettaglio con lo stesso nome.');
             }
-            let innerFormField = new BaseField();
+            const innerFormField = new BaseField();
             innerFormField.Name = event.Name.split(" ").join("_");
             innerFormField.Label = event.Name;
             innerFormField.FieldType = FieldTypeEnum['Form di dettaglio'];
@@ -888,10 +1369,52 @@ let EqpDynamicModuleConfiguratorComponent = class EqpDynamicModuleConfiguratorCo
         }
     }
     /**
-     * Metodo che scatena l'evento di output per salvare la form creata alla fine del wizard
+     * Metodo per salvare la form creata alla fine del wizard.
+     * Se è stato configurato un endPoint per il salvataggio viene effettuata una chiamata al server passando l'oggeto da salvare
+     * nel body della chiamata, altrimenti scatena l'evento "saveFormEvent".
+     * NOTA: Per comunicare correttamente con la parte server del modulo dinamico bisogna modificare l'array dei Fields.
+     * Al posto di passare un array di BaseField bisogna passare un array di oggetti del tipo { FieldType: FieldTypeEnum, Value: BaseField }.
      */
     saveForm() {
-        this.saveFormEvent.emit(this.form);
+        if (this.endPointConfiguration != null && this.endPointConfiguration.Forms.SaveEndPoint) {
+            // Copio la form da salvare per riwrappare i Fields in oggetti del tipo { FieldType: FieldTypeEnum, Value: BaseField }.
+            // Necessario per far funzionare correttamente il FieldConverter del server.
+            const formToSave = JSON.parse(JSON.stringify(this.form));
+            /*formToSave.Fields = [];
+            this.form.Fields.forEach(field => {
+              formToSave.Fields.push({
+                FieldType: field.FieldType,
+                Value: JSON.parse(JSON.stringify(field))
+              });
+            });*/
+            formToSave.Fields = [];
+            this.form.Fields.forEach(field => {
+                let fld = UtilityHelperService.GetFieldType(field);
+                formToSave.Fields.push(fld);
+            });
+            const dynamicModuleParams = [
+                { ParamName: "Form", ParamValue: formToSave, ParamType: ParamTypeEnum['In Body'] }
+            ];
+            this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.SaveEndPoint, dynamicModuleParams, (res) => {
+                EqpDynamicModuleDialogService.Success("Form salvata con successo!");
+                this.afterSaveFormEvent.emit(this.form);
+            });
+        }
+        else {
+            this.saveFormEvent.emit(this.form);
+        }
+    }
+    //#region FUNZIONI PRIVATE
+    /**
+     * Metodo per impostare la form e configurare colonne/FormGourp.
+     * @param form Form da utilizzare.
+     */
+    setFormAndConfigure(form = null) {
+        if (form != null) {
+            this.form = form;
+        }
+        this.configureColumns();
+        this.createFormForm();
     }
     /**
      * Configura le colonne per le tabelle necessarie alla creazione della form:
@@ -1082,7 +1605,8 @@ let EqpDynamicModuleConfiguratorComponent = class EqpDynamicModuleConfiguratorCo
 };
 EqpDynamicModuleConfiguratorComponent.ctorParameters = () => [
     { type: FormBuilder },
-    { type: MatDialog }
+    { type: MatDialog },
+    { type: UtilityHelperService }
 ];
 __decorate([
     Input()
@@ -1090,9 +1614,21 @@ __decorate([
 __decorate([
     Input()
 ], EqpDynamicModuleConfiguratorComponent.prototype, "form", void 0);
+__decorate([
+    Input()
+], EqpDynamicModuleConfiguratorComponent.prototype, "formID", void 0);
 __decorate([
     Input()
 ], EqpDynamicModuleConfiguratorComponent.prototype, "innerFormManagment", void 0);
+__decorate([
+    Input()
+], EqpDynamicModuleConfiguratorComponent.prototype, "baseServerUrl", void 0);
+__decorate([
+    Input()
+], EqpDynamicModuleConfiguratorComponent.prototype, "userToken", void 0);
+__decorate([
+    Input()
+], EqpDynamicModuleConfiguratorComponent.prototype, "endPointConfiguration", void 0);
 __decorate([
     ViewChild('fieldsTable', { static: false })
 ], EqpDynamicModuleConfiguratorComponent.prototype, "fieldsTable", void 0);
@@ -1114,10 +1650,13 @@ __decorate([
 __decorate([
     Output()
 ], EqpDynamicModuleConfiguratorComponent.prototype, "saveFormEvent", void 0);
+__decorate([
+    Output()
+], EqpDynamicModuleConfiguratorComponent.prototype, "afterSaveFormEvent", void 0);
 EqpDynamicModuleConfiguratorComponent = __decorate([
     Component({
         selector: 'eqp-dynamic-module-configurator',
-        template: "<mat-horizontal-stepper linear #stepper>\r\n    <!-- DATI GENERALI DELLA FORM -->\r\n    <mat-step [stepControl]=\"formFormGroup\">\r\n        <form [formGroup]=\"formFormGroup\" (keydown.enter)=\"false\">\r\n            <ng-template matStepLabel>\r\n                <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n                Dati generali della form\r\n            </ng-template>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col-md-4\">\r\n                    <mat-form-field>\r\n                        <mat-label>Nome</mat-label>\r\n                        <input matInput formControlName=\"Name\" [(ngModel)]=\"form.Name\" required>\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                    <eqp-select [enumData]=\"FormScalarTypeEnum\" [(ngModelInput)]=\"form.FormScalarType\"\r\n                        [isRequired]=\"true\" [showCancelButton]=\"false\" placeholder=\"Tipo di visualizzazione\"\r\n                        [formGroupInput]=\"formFormGroup\" [formControlNameInput]=\"'FormScalarType'\"\r\n                        (ngModelInputChange)=\"onChangeFormScalarType()\">\r\n                    </eqp-select>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\" *ngIf=\"form.FormScalarType && form.FormScalarType != FormScalarTypeEnum.Semplice\">\r\n                <div class=\"col-md-4 d-flex align-items-center\">\r\n                    <mat-form-field>\r\n                        <mat-label> Nome sezione (invio per confermare) </mat-label>\r\n                        <input matInput [(ngModel)]=\"formFieldGroupName\" [ngModelOptions]=\"{standalone: true}\"\r\n                            (keyup)=\"onFormFieldGroupNameKeyUp($event)\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-md-4 d-flex align-items-center\">\r\n                    <span class=\"mr-3\">Sezioni inserite:</span>\r\n                    <ul class=\"section-list\">\r\n                        <li *ngFor=\"let groupName of form.FormFieldsGroups, let i=index\">\r\n                            <mat-icon class=\"mr-1\" (click)=\"onDeleteFormFieldGroupName(groupName.Name)\">close\r\n                            </mat-icon>\r\n                            <span> {{i+1}}) {{groupName.Name}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-2 d-flex justify-content-end\">\r\n                <button mat-raised-button color=\"primary\" matStepperNext\r\n                    [disabled]=\"formFormGroup.invalid\">Successivo</button>\r\n            </div>\r\n        </form>\r\n    </mat-step>\r\n\r\n    <!-- AGGIUNTA DEI CAMPI DELLA FORM -->\r\n    <mat-step [completed]=\"isFieldStepCompleted()\">\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n            Campi da inserire\r\n        </ng-template>\r\n\r\n        <div class=\"row justify-content-end\">\r\n            <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"openFieldDialog()\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi campo</span>\r\n            </button>\r\n\r\n            <button class=\"btn btn-primary ml-2\" mat-raised-button color=\"primary\" type=\"button\"\r\n                (click)=\"openInnerFormDialog()\" *ngIf=\"!innerFormManagment\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi form di dettaglio</span>\r\n            </button>\r\n        </div>\r\n\r\n        <eqp-table #fieldsTable [createMatCard]=\"false\" [columns]=\"fieldsColumns\" [data]=\"form.Fields\"\r\n            [emptyTableMessage]=\"'Nessun campo inserito'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious>Precedente</button>\r\n            <button mat-raised-button color=\"primary\" matStepperNext [disabled]=\"!isFieldStepCompleted()\"\r\n                (click)=\"setFormStatus(false)\">Successivo</button>\r\n        </div>\r\n    </mat-step>\r\n\r\n    <!-- AGGIUNTA DELLE OPERAZIONI SUI RECORD -->\r\n    <mat-step>\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n            Azioni aggiuntive sui record\r\n        </ng-template>\r\n\r\n        <div class=\"row justify-content-end\">\r\n            <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\r\n                (click)=\"openActionOnRecordDialog()\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi azione</span>\r\n            </button>\r\n        </div>\r\n        <eqp-table #actionsOnRecordTable [createMatCard]=\"false\" [columns]=\"actionsOnRecordColumns\"\r\n            [data]=\"form.ActionsOnRecord\" [emptyTableMessage]=\"'Nessuna action inserita'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious>Precedente</button>\r\n            <button mat-raised-button color=\"primary\" matStepperNext (click)=\"setFormStatus(true)\">\r\n                Successivo\r\n            </button>\r\n        </div>\r\n    </mat-step>\r\n\r\n    <!-- VISUALIZZAZIONE FORM CREATA -->\r\n    <mat-step>\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\"\r\n                (click)=\"setFormStatus(formFormGroup.valid && form.Fields && form.Fields.length > 0)\"></div>\r\n            Riepilogo\r\n        </ng-template>\r\n\r\n        <eqp-dynamic-module [form]=\"previewForm\" *ngIf=\"previewForm && formCompleted\" [showButtons]=\"false\"\r\n            [viewMode]=\"FormTypeEnum.SCALAR\"></eqp-dynamic-module>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious (click)=\"setFormStatus(false)\">Precedente</button>\r\n            <button mat-raised-button color=\"primary\" (click)=\"saveForm()\">Salva form</button>\r\n        </div>\r\n    </mat-step>\r\n</mat-horizontal-stepper>\r\n\r\n<div class=\"row\" *ngIf=\"innerFormManagment\">\r\n    <div class=\"col-md-12 text-right\">\r\n        <button mat-raised-button (click)=\"saveFormEvent.emit(null)\">Esci</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- DIALOG AGGIUNTA/MODIFICA CAMPO -->\r\n<ng-template #dialogField>\r\n    <eqp-dynamic-module-add-form-field [field]=\"selectedField\" [indexField]=\"indexSelectedField\"\r\n        (saveFieldEvent)=\"onSaveField($event)\" [availableFields]=\"form.Fields\"\r\n        [formFieldsGroups]=\"form.FormScalarType != FormScalarTypeEnum.Semplice ? form.FormFieldsGroups : null\">\r\n    </eqp-dynamic-module-add-form-field>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\r\n<ng-template #fieldSectionColumnTemplate let-row=\"row\">\r\n    <eqp-select [arrayData]=\"form.FormFieldsGroups\" [(ngModelInput)]=\"row.FieldGroup\" [arrayKeyProperty]=\"'Name'\"\r\n        [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\" [isRequired]=\"true\" [includeFullObject]=\"false\">\r\n    </eqp-select>\r\n</ng-template>\r\n\r\n<!-- DIALOG PER AGGIUNGERE/MODIFICARE UNA ACTION SUI RECORD DELLA FORM -->\r\n<ng-template #dialogActionOnRecord>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n        <form [formGroup]=\"actionOnRecordFormGroup\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\">{{indexSelectedAction != null && indexSelectedAction >= 0 ?\r\n                    \"Modifica\"\r\n                    : \"Aggiungi\"}} azione sul record</div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Nome </mat-label>\r\n                        <input formControlName=\"Name\" required matInput [(ngModel)]=\"selectedAction.Name\">\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Icona </mat-label>\r\n                        <input formControlName=\"Icon\" required matInput [(ngModel)]=\"selectedAction.Icon\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12 col-md-12 mt-2\">\r\n                    <mat-form-field>\r\n                        <textarea matInput [placeholder]=\"'Azione (Javascript)'\" [rows]=\"3\" formControlName=\"Action\"\r\n                            required [(ngModel)]=\"selectedAction.Action\" [matAutocomplete]=\"actionAutocomplete\"\r\n                            (keyup)=\"setActionAutocompleteOptions($event)\"\r\n                            (focus)=\"setActionAutocompleteOptions(null)\"></textarea>\r\n                        <mat-autocomplete #actionAutocomplete=\"matAutocomplete\">\r\n                            <mat-option *ngFor=\"let option of actionAutocompleteOptions\" [value]=\"option.value\">\r\n                                {{option.label}}\r\n                            </mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <div class=\"row mt-2 mb-1\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveActionOnRecord()\"\r\n                        [disabled]=\"actionOnRecordFormGroup.invalid\" type=\"button\">\r\n                        Salva\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button\" (click)=\"closeDialogActionOnRecord()\" type=\"button\">\r\n                        Esci\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogInnerForm>\r\n    <eqp-dynamic-module-configurator [form]=\"selectedInnerForm\" [innerFormManagment]=\"true\"\r\n        (saveFormEvent)=\"onSaveOrExitInnerForm($event)\"></eqp-dynamic-module-configurator>\r\n</ng-template>",
+        template: "<eqp-dynamic-module-spinner></eqp-dynamic-module-spinner>\r\n\r\n<mat-horizontal-stepper linear #stepper>\r\n    <!-- DATI GENERALI DELLA FORM -->\r\n    <mat-step [stepControl]=\"formFormGroup\">\r\n        <form [formGroup]=\"formFormGroup\" (keydown.enter)=\"false\">\r\n            <ng-template matStepLabel>\r\n                <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n                Dati generali della form\r\n            </ng-template>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col-md-4\">\r\n                    <mat-form-field>\r\n                        <mat-label>Nome</mat-label>\r\n                        <input matInput formControlName=\"Name\" [(ngModel)]=\"form.Name\" required>\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                    <eqp-select [enumData]=\"FormScalarTypeEnum\" [(ngModelInput)]=\"form.FormScalarType\"\r\n                        [isRequired]=\"true\" [showCancelButton]=\"false\" placeholder=\"Tipo di visualizzazione\"\r\n                        [formGroupInput]=\"formFormGroup\" [formControlNameInput]=\"'FormScalarType'\"\r\n                        (ngModelInputChange)=\"onChangeFormScalarType()\">\r\n                    </eqp-select>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\" *ngIf=\"form.FormScalarType && form.FormScalarType != FormScalarTypeEnum.Semplice\">\r\n                <div class=\"col-md-4 d-flex align-items-center\">\r\n                    <mat-form-field>\r\n                        <mat-label> Nome sezione (invio per confermare) </mat-label>\r\n                        <input matInput [(ngModel)]=\"formFieldGroupName\" [ngModelOptions]=\"{standalone: true}\"\r\n                            (keyup)=\"onFormFieldGroupNameKeyUp($event)\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-md-4 d-flex align-items-center\">\r\n                    <span class=\"mr-3\">Sezioni inserite:</span>\r\n                    <ul class=\"section-list\">\r\n                        <li *ngFor=\"let groupName of form.FormFieldsGroups, let i=index\">\r\n                            <mat-icon class=\"mr-1\" (click)=\"onDeleteFormFieldGroupName(groupName.Name)\">close\r\n                            </mat-icon>\r\n                            <span> {{i+1}}) {{groupName.Name}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-2 d-flex justify-content-end\">\r\n                <button mat-raised-button color=\"primary\" matStepperNext\r\n                    [disabled]=\"formFormGroup.invalid\">Successivo</button>\r\n            </div>\r\n        </form>\r\n    </mat-step>\r\n\r\n    <!-- AGGIUNTA DEI CAMPI DELLA FORM -->\r\n    <mat-step [completed]=\"isFieldStepCompleted()\">\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n            Campi da inserire\r\n        </ng-template>\r\n\r\n        <div class=\"row justify-content-end\">\r\n            <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"openFieldDialog()\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi campo</span>\r\n            </button>\r\n\r\n            <button class=\"btn btn-primary ml-2\" mat-raised-button color=\"primary\" type=\"button\"\r\n                (click)=\"openInnerFormDialog()\" *ngIf=\"!innerFormManagment\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi form di dettaglio</span>\r\n            </button>\r\n        </div>\r\n\r\n        <eqp-table #fieldsTable [createMatCard]=\"false\" [columns]=\"fieldsColumns\" [data]=\"form.Fields\"\r\n            [emptyTableMessage]=\"'Nessun campo inserito'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious>Precedente</button>\r\n            <button mat-raised-button color=\"primary\" matStepperNext [disabled]=\"!isFieldStepCompleted()\"\r\n                (click)=\"setFormStatus(false)\">Successivo</button>\r\n        </div>\r\n    </mat-step>\r\n\r\n    <!-- AGGIUNTA DELLE OPERAZIONI SUI RECORD -->\r\n    <mat-step>\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n            Azioni aggiuntive sui record\r\n        </ng-template>\r\n\r\n        <div class=\"row justify-content-end\">\r\n            <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\r\n                (click)=\"openActionOnRecordDialog()\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi azione</span>\r\n            </button>\r\n        </div>\r\n        <eqp-table #actionsOnRecordTable [createMatCard]=\"false\" [columns]=\"actionsOnRecordColumns\"\r\n            [data]=\"form.ActionsOnRecord\" [emptyTableMessage]=\"'Nessuna action inserita'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious>Precedente</button>\r\n            <button mat-raised-button color=\"primary\" matStepperNext (click)=\"setFormStatus(true)\">\r\n                Successivo\r\n            </button>\r\n        </div>\r\n    </mat-step>\r\n\r\n    <!-- VISUALIZZAZIONE FORM CREATA -->\r\n    <mat-step>\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\"\r\n                (click)=\"setFormStatus(formFormGroup.valid && form.Fields && form.Fields.length > 0)\"></div>\r\n            Anteprima\r\n        </ng-template>\r\n\r\n        <add-form-record *ngIf=\"previewForm && formCompleted\" [form]=\"previewForm\" [showButtons]=\"false\">\r\n        </add-form-record>\r\n\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious (click)=\"setFormStatus(false)\">Precedente</button>\r\n            <button mat-raised-button color=\"primary\" (click)=\"saveForm()\">Salva form</button>\r\n        </div>\r\n    </mat-step>\r\n</mat-horizontal-stepper>\r\n\r\n<div class=\"row\" *ngIf=\"innerFormManagment\">\r\n    <div class=\"col-md-12 text-right\">\r\n        <button mat-raised-button (click)=\"saveFormEvent.emit(null)\">Esci</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- DIALOG AGGIUNTA/MODIFICA CAMPO -->\r\n<ng-template #dialogField>\r\n    <eqp-dynamic-module-add-form-field [field]=\"selectedField\" [indexField]=\"indexSelectedField\"\r\n        (saveFieldEvent)=\"onSaveField($event)\" [availableFields]=\"form.Fields\"\r\n        [formFieldsGroups]=\"form.FormScalarType != FormScalarTypeEnum.Semplice ? form.FormFieldsGroups : null\">\r\n    </eqp-dynamic-module-add-form-field>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\r\n<ng-template #fieldSectionColumnTemplate let-row=\"row\">\r\n    <eqp-select [arrayData]=\"form.FormFieldsGroups\" [(ngModelInput)]=\"row.FieldGroup\" [arrayKeyProperty]=\"'Name'\"\r\n        [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\" [isRequired]=\"true\" [includeFullObject]=\"false\">\r\n    </eqp-select>\r\n</ng-template>\r\n\r\n<!-- DIALOG PER AGGIUNGERE/MODIFICARE UNA ACTION SUI RECORD DELLA FORM -->\r\n<ng-template #dialogActionOnRecord>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n        <form [formGroup]=\"actionOnRecordFormGroup\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\">{{indexSelectedAction != null && indexSelectedAction >= 0 ?\r\n                    \"Modifica\"\r\n                    : \"Aggiungi\"}} azione sul record</div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Nome </mat-label>\r\n                        <input formControlName=\"Name\" required matInput [(ngModel)]=\"selectedAction.Name\">\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Icona </mat-label>\r\n                        <input formControlName=\"Icon\" required matInput [(ngModel)]=\"selectedAction.Icon\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12 col-md-12 mt-2\">\r\n                    <mat-form-field>\r\n                        <textarea matInput [placeholder]=\"'Azione (Javascript)'\" [rows]=\"3\" formControlName=\"Action\"\r\n                            required [(ngModel)]=\"selectedAction.Action\" [matAutocomplete]=\"actionAutocomplete\"\r\n                            (keyup)=\"setActionAutocompleteOptions($event)\"\r\n                            (focus)=\"setActionAutocompleteOptions(null)\"></textarea>\r\n                        <mat-autocomplete #actionAutocomplete=\"matAutocomplete\">\r\n                            <mat-option *ngFor=\"let option of actionAutocompleteOptions\" [value]=\"option.value\">\r\n                                {{option.label}}\r\n                            </mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <div class=\"row mt-2 mb-1\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveActionOnRecord()\"\r\n                        [disabled]=\"actionOnRecordFormGroup.invalid\" type=\"button\">\r\n                        Salva\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button\" (click)=\"closeDialogActionOnRecord()\" type=\"button\">\r\n                        Esci\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER CONFIGURARE LE FORM DI DETTAGLIO -->\r\n<ng-template #dialogInnerForm>\r\n    <eqp-dynamic-module-configurator [form]=\"selectedInnerForm\" [innerFormManagment]=\"true\"\r\n        (saveFormEvent)=\"onSaveOrExitInnerForm($event)\"></eqp-dynamic-module-configurator>\r\n</ng-template>",
         styles: ["::ng-deep mat-form-field{width:100%}.stepper-header-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.section-list{list-style:none;padding:0}.section-list mat-icon{vertical-align:middle;font-size:15px;height:15px;width:15px;color:var(--danger);margin-right:10px;cursor:pointer}.danger-color{color:var(--danger)}"]
     })
 ], EqpDynamicModuleConfiguratorComponent);
@@ -1167,6 +1706,8 @@ var DateTimeTypeEnum;
 /**Lista di valori */
 class ListValueField extends BaseField {
 }
+class ButtonImage {
+}
 var ListPresentationEnum;
 (function (ListPresentationEnum) {
     ListPresentationEnum[ListPresentationEnum["Combo box"] = 1] = "Combo box";
@@ -1177,10 +1718,11 @@ var ListPresentationEnum;
 
 let AddFormFieldComponent = class AddFormFieldComponent {
     //#endregion
-    constructor(formBuilder, enumHelper, dialog) {
+    constructor(formBuilder, enumHelper, dialog, cdr) {
         this.formBuilder = formBuilder;
         this.enumHelper = enumHelper;
         this.dialog = dialog;
+        this.cdr = cdr;
         this.fieldTypesToExclude = [FieldTypeEnum['Form di dettaglio']];
         this.keyValueObject = { key: '', value: '' };
         this.availableColSpanSizes = [];
@@ -1193,6 +1735,8 @@ let AddFormFieldComponent = class AddFormFieldComponent {
         this.BoolPresentantioEnum = BoolPresentantioEnum;
         this.DateTimeTypeEnum = DateTimeTypeEnum;
         this.ListPresentationEnum = ListPresentationEnum;
+        this.TextMaskEnum = TextMaskEnum;
+        this.AttachmentType = AttachmentType;
     }
     ngOnInit() {
         if (!this.fieldTypesToExclude.includes(FieldTypeEnum['Form di dettaglio'])) {
@@ -1230,7 +1774,7 @@ let AddFormFieldComponent = class AddFormFieldComponent {
             Required: [this.field.Required],
             FieldType: [this.field.FieldType, Validators.required],
             Formula: [this.field.Formula],
-            ColSizes: [this.field.ColSizes],
+            ColSpanSizes: [this.field.ColSpanSizes],
             InListView: [this.field.InListView],
         });
         if (this.formFieldsGroups) {
@@ -1248,7 +1792,7 @@ let AddFormFieldComponent = class AddFormFieldComponent {
         if (restoreField)
             this.restoreBaseFieldProperties();
         this.createFieldForm();
-        this.onColSizeSelect();
+        this.onColSpanSizeSelect();
         this.fieldTypeFormTemplate = null;
         switch (this.field.FieldType) {
             case FieldTypeEnum['Campo di testo']:
@@ -1272,13 +1816,16 @@ let AddFormFieldComponent = class AddFormFieldComponent {
                 this.fieldFormGroup.addControl('IsOnlyDate', new FormControl(this.field.IsOnlyDate, Validators.required));
                 this.fieldFormGroup.addControl('MinDate', new FormControl(this.field.MinDate));
                 this.fieldFormGroup.addControl('MaxDate', new FormControl(this.field.MaxDate));
+                this.fieldFormGroup.addControl('DateFormat', new FormControl(this.field.DateFormat));
                 this.fieldTypeFormTemplate = this.dateFieldFormTemplate;
                 break;
             case FieldTypeEnum['Campo numerico']:
                 this.fieldFormGroup.addControl('IsInteger', new FormControl(this.field.IsInteger));
                 this.fieldFormGroup.addControl('MinValue', new FormControl(this.field.MinValue));
                 this.fieldFormGroup.addControl('MaxValue', new FormControl(this.field.MaxValue));
-                this.fieldFormGroup.addControl('NumberFormat', new FormControl(this.field.NumberFormat));
+                this.fieldFormGroup.addControl('DecimalSeparator', new FormControl(this.field.DecimalSeparator));
+                this.fieldFormGroup.addControl('DecimalPrecision', new FormControl(this.field.DecimalPrecision));
+                this.fieldFormGroup.addControl('ThousandsSeparator', new FormControl(this.field.ThousandsSeparator));
                 this.fieldFormGroup.addControl('CurrencySymbol', new FormControl(this.field.CurrencySymbol));
                 this.fieldTypeFormTemplate = this.numericFieldFormTemplate;
                 break;
@@ -1362,15 +1909,48 @@ let AddFormFieldComponent = class AddFormFieldComponent {
      * seleziona la classe "col-sm-6", al change del valore questo metodo rimuove dalla select
      * tutti gli altri valori per la grandezza di schermo selezionata.
      */
-    onColSizeSelect() {
+    onColSpanSizeSelect() {
         // Recupero l'array degli oggetti chiave-valore che rappreseta l'enumeratore
         let colSizeClassEnumArray = this.enumHelper.getEnumArray(ColSpanSizesEnum, false, null);
         // Costruisco l'array delle classi selezionate dall'utente in formato stringa
-        let selectedDimensions = this.field.ColSizes ? this.field.ColSizes.map(col => ColSpanSizesEnum[col]) : [];
+        let selectedDimensions = this.field.ColSpanSizes ? this.field.ColSpanSizes.map(col => ColSpanSizesEnum[col]) : [];
         // Filtro i valori ottenuti dall'enumeratore per escludere tutti i valori per le
         // grandezze di schermo già selezionatead esclusione dei valori selezionati.
         this.availableColSpanSizes = colSizeClassEnumArray.filter((value) => !selectedDimensions.find(col => value.value.includes(col.substring(4, 6)) && value.value != col));
     }
+    /**
+     * Metodo invocato al cambio del tipo di visualizzazione scelta per i campi di tipo elenco generico.
+     * Se viene scelta la visualizzazione ad immagini svuota la lista delle coppie chiave-valore inserite
+     * in precedenza, altrimenti svuota la lista delle immagini caricate.
+     */
+    onPresentationModeChange() {
+        if (this.field.PresentationMode === ListPresentationEnum.Immagini) {
+            this.field.ValuePairs = null;
+        }
+        else {
+            this.field.ButtonImageList = null;
+        }
+    }
+    /**
+     * Metodo invocato quando viene caricato il componente eqp-attachments per caricare le immagini da usare
+     * nella visualizzazione ad immagini dei campi di tipo "Elenco generico". Aggiunge due colonne a quelle
+     * configurate nel componente in cui l'utente può indicare chiave e valore della scelta.
+     * @param component Istanza del componente eqp-attachments in cui effettuare la modifica.
+     */
+    configureButtonImagesColumns(component) {
+        component.attachmentsColumns.splice(component.attachmentsColumns.length - 1, 0, { key: "ButtonKey", display: "Label", type: TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn });
+        component.attachmentsColumns.splice(component.attachmentsColumns.length - 1, 0, { key: "ButtonValue", display: "Valore", type: TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn });
+        this.cdr.detectChanges();
+    }
+    /**
+     * Metodo invocato al salvataggio degli allegati quando viene configurato un campo di tipo "Elenco generico"
+     * con il tipo di visualizzazione ad immagini. Intercetta l'elenco aggiornato delle immagini caricate e lo
+     * memorizza nell'oggetto field corrente.
+     * @param attachments Array aggiornato degli allegati caricati.
+     */
+    catchButtonImagesChange(attachments) {
+        this.field.ButtonImageList = attachments;
+    }
     /**
      * Metodo chiamato al keyup degli input testuali che prevedono l'aggiunta del valore inserito in un array.
      * Se l'utente preme il tasto invio, in base al tipo di campo che sta inserendo/modificando, questo metodo
@@ -1515,7 +2095,14 @@ let AddFormFieldComponent = class AddFormFieldComponent {
         }
         switch (this.field.FieldType) {
             case FieldTypeEnum['Elenco generico']:
-                return !this.field.ValuePairs || this.field.ValuePairs.length === 0;
+                if (this.field.PresentationMode != ListPresentationEnum.Immagini) {
+                    return !this.field.ValuePairs || this.field.ValuePairs.length === 0;
+                }
+                else {
+                    return (!this.field.ButtonImageList
+                        || this.field.ButtonImageList.length === 0
+                        || !!this.field.ButtonImageList.find(i => !i.ButtonKey || !i.ButtonValue));
+                }
             case FieldTypeEnum.Lookup:
                 return !this.field.FieldNames || this.field.FieldNames.length === 0;
             default:
@@ -1549,7 +2136,7 @@ let AddFormFieldComponent = class AddFormFieldComponent {
             this.field.Required = tmpBaseField.Required;
             this.field.FieldType = tmpBaseField.FieldType;
             this.field.Formula = tmpBaseField.Formula;
-            this.field.ColSizes = tmpBaseField.ColSizes;
+            this.field.ColSpanSizes = tmpBaseField.ColSpanSizes;
             this.field.FieldGroup = tmpBaseField.FieldGroup;
         }
     }
@@ -1625,7 +2212,8 @@ let AddFormFieldComponent = class AddFormFieldComponent {
 AddFormFieldComponent.ctorParameters = () => [
     { type: FormBuilder },
     { type: EnumHelper },
-    { type: MatDialog }
+    { type: MatDialog },
+    { type: ChangeDetectorRef }
 ];
 __decorate([
     Input()
@@ -1678,10 +2266,13 @@ __decorate([
 __decorate([
     ViewChild('dialogMetadata', { static: true })
 ], AddFormFieldComponent.prototype, "dialogMetadata", void 0);
+__decorate([
+    ViewChild('buttonImagesKeyValueInputColumn', { static: true })
+], AddFormFieldComponent.prototype, "buttonImagesKeyValueInputColumn", void 0);
 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                    [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>",
+        template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n    <form [formGroup]=\"fieldFormGroup\">\r\n        <div class=\"row\">\r\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\r\n                : \"Aggiungi\"}} campo</div>\r\n        </div>\r\n        <div class=\"row\">\r\n            <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\r\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\r\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\r\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\r\n                </eqp-select>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                <mat-form-field>\r\n                    <mat-label> Label </mat-label>\r\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                <mat-form-field>\r\n                    <mat-label> Descrizione </mat-label>\r\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\r\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\r\n                    Obbligatorio\r\n                </mat-slide-toggle>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                <mat-form-field>\r\n                    <mat-label> Formula (Javascript) </mat-label>\r\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\r\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\r\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\r\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\r\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\r\n                            {{option.label}}\r\n                        </mat-option>\r\n                    </mat-autocomplete>\r\n                </mat-form-field>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\r\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\r\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\r\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\r\n                    [includeFullObject]=\"false\">\r\n                </eqp-select>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSpanSizes\"\r\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSpanSizeSelect()\"\r\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\r\n                    [formControlNameInput]=\"'ColSpanSizes'\" [includeFullObject]=\"false\">\r\n                </eqp-select>\r\n            </div>\r\n\r\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\r\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\"\r\n                    [disabled]=\"fieldFormGroup.controls['InListView'].disabled\">\r\n                    Mostrare nella visualizzazione a lista\r\n                </mat-slide-toggle>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\r\n            </ng-container>\r\n        </div>\r\n\r\n\r\n        <div class=\"row mt-2 mb-1\">\r\n            <div class=\"col-sm-12 text-right\">\r\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\r\n                    [disabled]=\"disableSaveField()\" type=\"button\">\r\n                    Salva\r\n                </button>\r\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\r\n                    Esci\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </form>\r\n</div>\r\n\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\r\n<ng-template #textFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4\">\r\n        <eqp-select [enumData]=\"TextMaskEnum\" [(ngModelInput)]=\"field.TextMask\" placeholder=\"Maschera\"\r\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'TextMask'\">\r\n        </eqp-select>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Lunghezza massima </mat-label>\r\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Lunghezza minima </mat-label>\r\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\r\n<ng-template #textareaFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Righe </mat-label>\r\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Lunghezza massima </mat-label>\r\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Lunghezza minima </mat-label>\r\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\r\n<ng-template #booleadFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\r\n            A tre stati\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\">\r\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\r\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\r\n            [formControlNameInput]=\"'PresetationType'\">\r\n        </eqp-select>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\r\n<ng-template #dateFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\">\r\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\r\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\r\n        </eqp-datetimepicker>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\">\r\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\r\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\r\n        </eqp-datetimepicker>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\">\r\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\r\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\r\n            [formControlNameInput]=\"'IsOnlyDate'\">\r\n        </eqp-select>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Formato </mat-label>\r\n            <input formControlName=\"DateFormat\" matInput [(ngModel)]=\"field.DateFormat\"\r\n                [matTooltip]=\"'Indicare il formato senguendo la guida del pacchetto momentjs.'\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\r\n<ng-template #numericFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\r\n            Valore intero\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Separatore decimali </mat-label>\r\n            <input formControlName=\"DecimalSeparator\" matInput [(ngModel)]=\"field.DecimalSeparator\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Precisione decimali </mat-label>\r\n            <input formControlName=\"DecimalPrecision\" type=\"number\" [min]=\"0\" matInput\r\n                [(ngModel)]=\"field.DecimalPrecision\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Separatore migliaia </mat-label>\r\n            <input formControlName=\"ThousandsSeparator\" matInput [(ngModel)]=\"field.ThousandsSeparator\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Simbolo valuta </mat-label>\r\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Valore massimo </mat-label>\r\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field>\r\n            <mat-label> Valore minimo </mat-label>\r\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\r\n<ng-template #attachmentFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\r\n            Allegati multipli\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\">\r\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\r\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\r\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\r\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\r\n        </eqp-select>\r\n    </div>\r\n    <div class=\"col-sm-12 mt-2\">\r\n        <div class=\"row mt-2\">\r\n            <div class=\"col-sm-12 col-md-6\">\r\n                <div class=\"header-title-standard\">\r\n                    Elenco metadata\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-12 col-md-6 text-right\">\r\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\r\n                    (click)=\"openMetadataDialog()\">\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        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\r\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\r\n<ng-template #imageFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\r\n            color=\"primary\" (ngModelChange)=\"onImageIsContextualAttachmentChange()\">\r\n            Immagine pre-caricata nel campo\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.EnableDrawing\" formControlName=\"EnableDrawing\" color=\"primary\">\r\n            Abilita il disegno\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\"\r\n        *ngIf=\"!field.ImageIsContextualAttachment\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\r\n            color=\"primary\">\r\n            Immagini multiple\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"!field.ImageIsContextualAttachment\">\r\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\r\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\r\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\r\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\r\n        </eqp-select>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\" *ngIf=\"field.ImageIsContextualAttachment\">\r\n        <mat-form-field>\r\n            <mat-label> Nome immagine </mat-label>\r\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\" required>\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-8 mt-2\" [formGroup]=\"fieldFormGroup\" *ngIf=\"field.ImageIsContextualAttachment\">\r\n        <eqp-attachments [attachmentsList]=\"field._contextualAttachments\" [showMatCard]=\"false\" [allowOnlyImages]=\"true\"\r\n            [isDisabled]=\"false\" [showInlinePreview]=\"true\" [multipleAttachment]=\"false\" [showHeader]=\"false\"\r\n            (localEditedAttachments)=\"catchContextualAttachmentChange($event)\" #contextualAttachmentEqpAttachments>\r\n        </eqp-attachments>\r\n    </div>\r\n    <div class=\"col-sm-12 mt-2\">\r\n        <div class=\"row mt-2\">\r\n            <div class=\"col-sm-12 col-md-6\">\r\n                <div class=\"header-title-standard\">\r\n                    Elenco metadata\r\n                </div>\r\n            </div>\r\n            <div class=\"col-sm-12 col-md-6 text-right\">\r\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\r\n                    (click)=\"openMetadataDialog()\">\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        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\r\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\r\n            [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\r\n<ng-template #listValueFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\r\n            Scelta multipla\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\">\r\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\r\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\r\n            [formControlNameInput]=\"'PresentationMode'\" (ngModelInputChange)=\"onPresentationModeChange()\">\r\n        </eqp-select>\r\n    </div>\r\n    <div class=\"col-sm-12 mt-2\" *ngIf=\"field.PresentationMode != ListPresentationEnum.Immagini\">\r\n        <div class=\"row\">\r\n            <h4 class=\"key-value-list-section-title\"> </h4>\r\n            <div class=\"col-md-4 d-flex align-items-center\">\r\n                <mat-form-field>\r\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\r\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-md-4 d-flex align-items-center\">\r\n                <mat-form-field>\r\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\r\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-md-4 d-flex align-items-center\">\r\n                <span class=\"mr-3\">Opzioni inserite:</span>\r\n                <ul class=\"value-pairs-list\">\r\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\r\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\r\n                        </mat-icon>\r\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\r\n                    </li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-12 mt-2\" *ngIf=\"field.PresentationMode == ListPresentationEnum.Immagini\">\r\n        <eqp-attachments [attachmentsList]=\"field.ButtonImageList\" [showMatCard]=\"false\" [allowOnlyImages]=\"true\"\r\n            [isDisabled]=\"false\" [showInlinePreview]=\"true\" [multipleAttachment]=\"true\" [showHeader]=\"false\"\r\n            [allowedTypes]=\"[AttachmentType.FILE]\" (localEditedAttachments)=\"catchButtonImagesChange($event)\"\r\n            (onComponentLoaded)=\"configureButtonImagesColumns($event)\">\r\n        </eqp-attachments>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\r\n<ng-template #lookupFieldFormTemplate>\r\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\r\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\r\n            Usa per scegli o scarta\r\n        </mat-slide-toggle>\r\n    </div>\r\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\r\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\r\n            <mat-label> Nome entit\u00E0 </mat-label>\r\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\r\n        </mat-form-field>\r\n    </div>\r\n    <div class=\"col-sm-12 mt-2\">\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4\">\r\n                <mat-form-field\r\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\r\n                    <mat-label>\r\n                        Nomi dei campi (invio per confermare) </mat-label>\r\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\r\n                </mat-form-field>\r\n            </div>\r\n            <div class=\"col-md-8 d-flex align-items-center\">\r\n                <span class=\"mr-3\">Nomi selezionati:</span>\r\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\r\n                    <span>{{extension}}</span>\r\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\r\n                    </mat-icon>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\r\n<ng-template #dialogMetadata>\r\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\r\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\r\n    </eqp-dynamic-module-add-form-field>\r\n</ng-template>\r\n\r\n<ng-template #buttonImagesKeyValueInputColumn let-row=\"row\" let-col=\"col\">\r\n    <mat-form-field>\r\n        <mat-label> {{col.display}} </mat-label>\r\n        <input matInput [(ngModel)]=\"row[col.key]\" required>\r\n    </mat-form-field>\r\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);
@@ -1689,6 +2280,7 @@ AddFormFieldComponent = __decorate([
 let TextFieldTemplateComponent = class TextFieldTemplateComponent {
     constructor() {
         this.recordChange = new EventEmitter();
+        this.InputMaskEnum = TextMaskEnum;
     }
     ngOnInit() {
     }
@@ -1699,6 +2291,20 @@ let TextFieldTemplateComponent = class TextFieldTemplateComponent {
             this.updateField();
         }
     }
+    getInputType() {
+        switch (this.field.TextMask) {
+            case TextMaskEnum.Email:
+                return 'email';
+            case TextMaskEnum.Password:
+                return 'password';
+            case TextMaskEnum.Telefono:
+                return 'tel';
+            case TextMaskEnum.Url:
+                return 'url';
+            default:
+                return 'text';
+        }
+    }
     /**
      * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
      */
@@ -1728,7 +2334,7 @@ __decorate([
 TextFieldTemplateComponent = __decorate([
     Component({
         selector: 'text-field-template',
-        template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\r\n    <mat-label> {{field.Label}} </mat-label>\r\n    <input matInput type=\"text\" [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\"\r\n        [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\r\n</mat-form-field>",
+        template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\r\n    <mat-label> {{field.Label}} </mat-label>\r\n    <input matInput [type]=\"getInputType()\" [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\"\r\n        [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\r\n</mat-form-field>",
         styles: [""]
     })
 ], TextFieldTemplateComponent);
@@ -1779,7 +2385,7 @@ __decorate([
 BooleanFieldTemplateComponent = __decorate([
     Component({
         selector: 'boolean-field-template',
-        template: "<div [formGroup]=\"field.FormFormGroup\">\n\n    <!-- VISUALIZZAZIONE A TOGGLE -->\n    <mat-slide-toggle color=\"primary\" *ngIf=\"field.PresetationType == BoolPresentantioEnum.Toggle\"\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\n    </mat-slide-toggle>\n\n\n    <!-- VISUALIZZAZIONE A RADIOBUTTON -->\n    <mat-label class=\"mr-3\" *ngIf=\"field.PresetationType == BoolPresentantioEnum['Radio button']\">\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\n    </mat-label>\n    <mat-radio-group *ngIf=\"field.PresetationType == BoolPresentantioEnum['Radio button']\"\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        <mat-radio-button class=\"mr-2\" [value]=\"true\" color=\"primary\"> Si </mat-radio-button>\n        <mat-radio-button class=\"mr-2\" [value]=\"false\" color=\"primary\"> No </mat-radio-button>\n        <mat-radio-button class=\"mr-2\" [value]=\"null\" color=\"primary\" *ngIf=\"field.IsTristate\"> ND\n        </mat-radio-button>\n    </mat-radio-group>\n\n    <!-- VISUALIZZAZIONE A CHECKBOX -->\n    <mat-checkbox class=\"mr-2\" *ngIf=\"field.PresetationType == BoolPresentantioEnum.Checkbox\"\n        [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\" [formControlName]=\"field.Name\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\n    </mat-checkbox>\n\n    <!-- TODO: Visualizzazione \"Stringa true o false\" e \"Numerico 0 o 1\" ?? -->\n</div>",
+        template: "<div [formGroup]=\"field.FormFormGroup\">\r\n\r\n    <!-- VISUALIZZAZIONE A TOGGLE -->\r\n    <mat-slide-toggle color=\"primary\" *ngIf=\"field.PresetationType == BoolPresentantioEnum.Toggle\"\r\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\r\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\r\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\r\n    </mat-slide-toggle>\r\n\r\n\r\n    <!-- VISUALIZZAZIONE A RADIOBUTTON -->\r\n    <mat-label class=\"mr-3\" *ngIf=\"field.PresetationType == BoolPresentantioEnum['Radio button']\">\r\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\r\n    </mat-label>\r\n    <mat-radio-group *ngIf=\"field.PresetationType == BoolPresentantioEnum['Radio button']\"\r\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\r\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\r\n        <mat-radio-button class=\"mr-2\" [value]=\"true\" color=\"primary\"> Si </mat-radio-button>\r\n        <mat-radio-button class=\"mr-2\" [value]=\"false\" color=\"primary\"> No </mat-radio-button>\r\n        <mat-radio-button class=\"mr-2\" [value]=\"null\" color=\"primary\" *ngIf=\"field.IsTristate\"> ND\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n\r\n    <!-- VISUALIZZAZIONE A CHECKBOX -->\r\n    <mat-checkbox class=\"mr-2\" *ngIf=\"field.PresetationType == BoolPresentantioEnum.Checkbox\"\r\n        [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\" [formControlName]=\"field.Name\"\r\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\r\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\r\n    </mat-checkbox>\r\n\r\n    <!-- TODO: Visualizzazione \"Stringa true o false\" e \"Numerico 0 o 1\" ?? -->\r\n</div>",
         styles: [""]
     })
 ], BooleanFieldTemplateComponent);
@@ -1844,7 +2450,7 @@ __decorate([
 DateFieldTemplateComponent = __decorate([
     Component({
         selector: 'date-field-template',
-        template: "<eqp-datetimepicker [placeholder]=\"field.Label\" [UTCDate]=\"true\" [pickerMode]=\"pickerMode\"\n    [formGroupInput]=\"field.FormFormGroup\" [formControlNameInput]=\"field.Name\"\n    [minDate]=\"field.MinDate ? field.MinDate : null\" [maxDate]=\"field.MaxDate ? field.MaxDate : null\"\n    [isRequired]=\"field.Required\" [disabled]=\"field.FormFormGroup.disabled\" [(ngModelInput)]=\"record[field.Name]\"\n    (ngModelInputChange)=\"onRecordValueChange()\">\n</eqp-datetimepicker>",
+        template: "<eqp-datetimepicker [placeholder]=\"field.Label\" [UTCDate]=\"true\" [pickerMode]=\"pickerMode\"\r\n    [formGroupInput]=\"field.FormFormGroup\" [formControlNameInput]=\"field.Name\"\r\n    [minDate]=\"field.MinDate ? field.MinDate : null\" [maxDate]=\"field.MaxDate ? field.MaxDate : null\"\r\n    [isRequired]=\"field.Required\" [disabled]=\"field.FormFormGroup.disabled\" [(ngModelInput)]=\"record[field.Name]\"\r\n    (ngModelInputChange)=\"onRecordValueChange()\" [customDateFormat]=\"field.DateFormat ? field.DateFormat : null\">\r\n</eqp-datetimepicker>",
         styles: [""]
     })
 ], DateFieldTemplateComponent);
@@ -1891,7 +2497,7 @@ __decorate([
 TextareaFieldTemplateComponent = __decorate([
     Component({
         selector: 'textarea-field-template',
-        template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\n    <textarea matInput [placeholder]=\"field.Label\" [rows]=\"field.Rows\" [formControlName]=\"field.Name\"\n        [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\"\n        (ngModelChange)=\"onRecordValueChange()\"></textarea>\n</mat-form-field>",
+        template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\r\n    <textarea matInput [placeholder]=\"field.Label\" [rows]=\"field.Rows\" [formControlName]=\"field.Name\"\r\n        [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\"\r\n        (ngModelChange)=\"onRecordValueChange()\"></textarea>\r\n</mat-form-field>",
         styles: [""]
     })
 ], TextareaFieldTemplateComponent);
@@ -1932,10 +2538,17 @@ let NumericFieldTemplateComponent = class NumericFieldTemplateComponent {
      */
     configureEqpNumericOptions() {
         this.eqpNumericOptions.prefix = this.field.CurrencySymbol ? this.field.CurrencySymbol : "";
+        this.eqpNumericOptions.inputMode = this.field.CurrencySymbol ? EqpNumericInputMode.FINANCIAL : EqpNumericInputMode.NATURAL;
         if (this.field.MinValue != null && this.field.MinValue != undefined)
             this.eqpNumericOptions.min = this.field.MinValue;
         if (this.field.MaxValue != null && this.field.MaxValue != undefined)
             this.eqpNumericOptions.max = this.field.MaxValue;
+        if (this.field.DecimalSeparator != null && this.field.DecimalSeparator != undefined)
+            this.eqpNumericOptions.decimal = this.field.DecimalSeparator;
+        if (this.field.ThousandsSeparator != null && this.field.ThousandsSeparator != undefined)
+            this.eqpNumericOptions.thousands = this.field.ThousandsSeparator;
+        if (this.field.DecimalPrecision != null && this.field.DecimalPrecision != undefined)
+            this.eqpNumericOptions.precision = this.field.DecimalPrecision;
     }
 };
 __decorate([
@@ -1950,7 +2563,7 @@ __decorate([
 NumericFieldTemplateComponent = __decorate([
     Component({
         selector: 'numeric-field-template',
-        template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\n    <mat-label> {{field.Label}} </mat-label>\n    <input matInput eqpNumericMask [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\"\n        [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\" [options]=\"eqpNumericOptions\"\n        [step]=\"field.IsInteger ? 1 : null\" (ngModelChange)=\"onRecordValueChange()\" />\n</mat-form-field>",
+        template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\r\n    <mat-label> {{field.Label}} </mat-label>\r\n    <input matInput eqpNumericMask [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\"\r\n        [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\" [options]=\"eqpNumericOptions\"\r\n        [step]=\"field.IsInteger ? 1 : null\" (ngModelChange)=\"onRecordValueChange()\" />\r\n</mat-form-field>",
         styles: [""]
     })
 ], NumericFieldTemplateComponent);
@@ -1986,26 +2599,17 @@ let ListValueFieldTemplateComponent = class ListValueFieldTemplateComponent {
             this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
         }
     }
-    /**
-     * Metodo per recuperare la classe da applicare al button (nella relativa visualizzazione).
-     * Se il pulsante è stato selezionato imposta la classe "selected-button".
-     * @param data Oggetto bindato al pulsante
-     * @returns Restituisce la classe da applicare tramite [ngClass]
-     */
-    getSelectButtonClass(data) {
-        const selectedButtonClass = "selected-button";
-        return data.Selected ? selectedButtonClass : null;
-    }
     /**
      * Metodo invocato quando viene selezionata un'opzione nella visualizzazione a button
      * @param data Rappresenta l'oggetto selezionato
      */
     buttonSelectClick(data) {
+        data.Selected = !data.Selected;
         if (this.field.IsMultiChoiche) {
-            data.Selected = !data.Selected;
             this.updateSelected(false);
         }
         else {
+            this.arrayData.filter(d => d.Key != data.Key && d.Value != data.Value).forEach(d => d.Selected = false);
             this.record[this.field.Name] = data.Value;
         }
         this.onRecordValueChange();
@@ -2033,16 +2637,22 @@ let ListValueFieldTemplateComponent = class ListValueFieldTemplateComponent {
      * Metodo per creare un array di oggetti del tipo { Key: string, Value: any } da usare come sorgente dati per la eqp-select.
      */
     setArrayData() {
-        Object.keys(this.field.ValuePairs).forEach(k => {
-            var isOptionSelected;
-            if (this.field.IsMultiChoiche && this.record[this.field.Name] && this.record[this.field.Name].length > 0) {
-                isOptionSelected = !!this.record[this.field.Name].find(v => v == this.field.ValuePairs[k]);
-            }
-            else {
-                isOptionSelected = this.record[this.field.Name] === this.field.ValuePairs[k];
-            }
-            this.arrayData.push({ Key: k, Value: this.field.ValuePairs[k], Selected: isOptionSelected });
-        });
+        if (this.field.PresentationMode != ListPresentationEnum.Immagini) {
+            Object.keys(this.field.ValuePairs).forEach(k => { this.createArrayDataElement(k, this.field.ValuePairs[k]); });
+        }
+        else {
+            this.field.ButtonImageList.forEach(i => { this.createArrayDataElement(i.ButtonKey, i.ButtonValue, 'data:' + i.FileContentType + ';base64,' + i.FileDataBase64); });
+        }
+    }
+    createArrayDataElement(key, value, imgUrl = null) {
+        var isOptionSelected;
+        if (this.field.IsMultiChoiche && this.record[this.field.Name] && this.record[this.field.Name].length > 0) {
+            isOptionSelected = !!this.record[this.field.Name].find(v => v == value);
+        }
+        else {
+            isOptionSelected = this.record[this.field.Name] === value;
+        }
+        this.arrayData.push({ Key: key, Value: value, Selected: isOptionSelected, ImgUrl: imgUrl });
     }
     /**
      * Metodo per aggiornare il valore e il validator del FormControl associato al campo.
@@ -2063,8 +2673,8 @@ __decorate([
 ListValueFieldTemplateComponent = __decorate([
     Component({
         selector: 'list-value-field-template',
-        template: "<eqp-select *ngIf=\"field.PresentationMode == ListPresentationEnum['Combo box']\" [arrayData]=\"arrayData\"\n    [arrayKeyProperty]=\"'Value'\" [showCancelButton]=\"!field.Required\" [arrayValueProperty]=\"'Key'\"\n    [formGroupInput]=\"field.FormFormGroup\" [formControlNameInput]=\"field.Name\" [placeholder]=\"field.Label\"\n    [includeFullObject]=\"false\" [isRequired]=\"field.Required\" [isDisabled]=\"field.FormFormGroup.disabled\"\n    [(ngModelInput)]=\"record[field.Name]\" [isMultiSelect]=\"field.IsMultiChoiche\"\n    (ngModelInputChange)=\"onRecordValueChange()\">\n</eqp-select>\n\n<div *ngIf=\"field.PresentationMode != ListPresentationEnum['Combo box']\" [formGroup]=\"field.FormFormGroup\">\n\n    <mat-label class=\"mr-3\"> {{field.Label + (field.Required ? \" *\" : \"\")}} </mat-label>\n\n    <!-- VISUALIZZAZIONE A RADIO BUTTON (SENZA SELEZIONE MULTIPLA) -->\n    <mat-radio-group *ngIf=\"field.PresentationMode == ListPresentationEnum['Radio button'] && !field.IsMultiChoiche\"\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        <mat-radio-button class=\"mr-2\" *ngFor=\"let data of arrayData\" [value]=\"data.Value\" color=\"primary\">\n            {{data.Key}}\n        </mat-radio-button>\n    </mat-radio-group>\n\n    <!-- VISUALIZZAZIONE A CHECKBOX (SELEZIONE MULTIPLA) -->\n    <div class=\"d-inline-block\"\n        *ngIf=\"field.PresentationMode == ListPresentationEnum['Radio button'] && field.IsMultiChoiche\">\n        <mat-checkbox class=\"mr-2\" *ngFor=\"let data of arrayData\" [disabled]=\"field.FormFormGroup.disabled\"\n            [formControlName]=\"field.Name\" [(ngModel)]=\"data.Selected\" (ngModelChange)=\"updateSelected()\">\n            {{data.Key}}\n        </mat-checkbox>\n    </div>\n\n    <!-- VISUALIZZAZIONE A PULSANTI (CON TESTO) -->\n    <div class=\"d-inline-block\" *ngIf=\"field.PresentationMode == ListPresentationEnum['Pulsante con testo']\">\n        <button mat-raised-button color=\"primary\" class=\"btn btn-primary mr-2\" *ngFor=\"let data of arrayData\"\n            (click)=\"buttonSelectClick(data)\" [ngClass]=\"getSelectButtonClass(data)\"\n            [disabled]=\"field.FormFormGroup.disabled\">\n            {{data.Key}}\n        </button>\n    </div>\n\n    <!-- TODO: VISUALIZZAZIONE A PULSANTI (CON IMMAGINI) ?? -->\n</div>",
-        styles: [".selected-button{opacity:.7}.selected-button:disabled{background-color:var(--primary)!important;opacity:.3;color:#fff}"]
+        template: "<eqp-select *ngIf=\"field.PresentationMode == ListPresentationEnum['Combo box']\" [arrayData]=\"arrayData\"\r\n    [arrayKeyProperty]=\"'Value'\" [showCancelButton]=\"!field.Required\" [arrayValueProperty]=\"'Key'\"\r\n    [formGroupInput]=\"field.FormFormGroup\" [formControlNameInput]=\"field.Name\" [placeholder]=\"field.Label\"\r\n    [includeFullObject]=\"false\" [isRequired]=\"field.Required\" [isDisabled]=\"field.FormFormGroup.disabled\"\r\n    [(ngModelInput)]=\"record[field.Name]\" [isMultiSelect]=\"field.IsMultiChoiche\"\r\n    (ngModelInputChange)=\"onRecordValueChange()\">\r\n</eqp-select>\r\n\r\n<div *ngIf=\"field.PresentationMode != ListPresentationEnum['Combo box']\" [formGroup]=\"field.FormFormGroup\">\r\n\r\n    <mat-label class=\"mr-3\"> {{field.Label + (field.Required ? \" *\" : \"\")}} </mat-label>\r\n\r\n    <!-- VISUALIZZAZIONE A RADIO BUTTON (SENZA SELEZIONE MULTIPLA) -->\r\n    <mat-radio-group *ngIf=\"field.PresentationMode == ListPresentationEnum['Radio button'] && !field.IsMultiChoiche\"\r\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\r\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\r\n        <mat-radio-button class=\"mr-2\" *ngFor=\"let data of arrayData\" [value]=\"data.Value\" color=\"primary\">\r\n            {{data.Key}}\r\n        </mat-radio-button>\r\n    </mat-radio-group>\r\n\r\n    <!-- VISUALIZZAZIONE A CHECKBOX (SELEZIONE MULTIPLA) -->\r\n    <div class=\"d-inline-block\"\r\n        *ngIf=\"field.PresentationMode == ListPresentationEnum['Radio button'] && field.IsMultiChoiche\">\r\n        <mat-checkbox class=\"mr-2\" *ngFor=\"let data of arrayData\" [disabled]=\"field.FormFormGroup.disabled\"\r\n            [formControlName]=\"field.Name\" [(ngModel)]=\"data.Selected\" (ngModelChange)=\"updateSelected()\">\r\n            {{data.Key}}\r\n        </mat-checkbox>\r\n    </div>\r\n\r\n    <!-- VISUALIZZAZIONE A PULSANTI (CON TESTO O IMMAGINI) -->\r\n    <div class=\"d-inline-block\"\r\n        *ngIf=\"[ListPresentationEnum['Pulsante con testo'], ListPresentationEnum.Immagini].includes(field.PresentationMode)\">\r\n        <button mat-raised-button color=\"primary\" class=\"btn btn-primary m-1 data-button\" *ngFor=\"let data of arrayData\"\r\n            [ngClass]=\"{'selected-button': data.Selected == true, 'p-0': field.PresentationMode == ListPresentationEnum.Immagini}\"\r\n            (click)=\"buttonSelectClick(data)\" [disabled]=\"field.FormFormGroup.disabled\">\r\n\r\n            <!-- TESTO DEL PULSANTE -->\r\n            <span *ngIf=\"field.PresentationMode == ListPresentationEnum['Pulsante con testo']\"> {{data.Key}}</span>\r\n\r\n            <!-- IMMAGINE DEL PULSANTE -->\r\n            <img *ngIf=\"field.PresentationMode == ListPresentationEnum.Immagini\" [src]=\"data.ImgUrl\">\r\n        </button>\r\n    </div>\r\n\r\n</div>",
+        styles: [".selected-button{opacity:.7}.selected-button:disabled{background-color:var(--primary)!important;opacity:.3;color:#fff}.data-button img{max-height:300px;max-width:300px}"]
     })
 ], ListValueFieldTemplateComponent);
 
@@ -2227,7 +2837,7 @@ __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\"\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>",
+        template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\r\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\r\n</p>\r\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\r\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\"\r\n        [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\r\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\r\n            (recordChange)=\"updateMetadataValidity()\">\r\n        </dynamic-module-field>\r\n    </div>\r\n</div>\r\n\r\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\r\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\r\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\r\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" (localEditedAttachments)=\"catchAttachmentList($event)\"\r\n    #eqpAttachments>\r\n</eqp-attachments>\r\n\r\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\r\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\r\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\r\n        (recordChange)=\"updateMetadataValidity()\">\r\n    </dynamic-module-field>\r\n</ng-template>",
         styles: [""]
     })
 ], AttachmentFieldTemplateComponent);
@@ -2416,7 +3026,7 @@ __decorate([
 ImageFieldTemplateComponent = __decorate([
     Component({
         selector: 'image-field-template',
-        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>",
+        template: "<!-- VISUALIZZAZIONE ALLEGATO PRE CARICATO CON POSSIBILITA' DI DISEGNO -->\r\n<div class=\"row\" *ngIf=\"field.ImageIsContextualAttachment && field.ContextualAttachment\">\r\n     <div class=\"col-sm-12 col-md-6 col-lg-4\">\r\n          <p class=\"mb-2\">\r\n               {{ field.Label + (field.Required ? \" *\" : \"\")}}\r\n               <br>\r\n               Nome immagine: {{ field.ImgName}}\r\n          </p>\r\n          <eqp-img-drawing\r\n               *ngIf=\"field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null\"\r\n               [src]=\"'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64\"\r\n               [showCancelButton]=\"false\" [enableLoadAnotherImage]=\"false\" [enableRemoveImage]=\"false\" [width]=\"width\"\r\n               [height]=\"height\" [i18n]=\"i18n\" [showCancelButton]=\"true\" (save)=\"saveDrowning($event)\"\r\n               (cancel)=\"resetPreLoadedImage()\">\r\n          </eqp-img-drawing>\r\n\r\n          <img *ngIf=\"!field.EnableDrawing\"\r\n               [src]=\"'data:'+ record[field.Name][0].FileContentType+ ';base64,'+ record[field.Name][0].FileDataBase64\">\r\n     </div>\r\n\r\n     <div class=\"col-sm-12 col-md-6 col-lg-8\">\r\n          <div class=\"row\"\r\n               *ngIf=\"field.AttachDefinition && field.AttachDefinition.MetadataFields && preLoadedImageMetadataFormGroup\">\r\n               <div class=\"mt-2\" *ngFor=\"let metadata of field.AttachDefinition.MetadataFields\"\r\n                    [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\r\n                    <dynamic-module-field #fieldTemplate [field]=\"metadata\" [form]=\"preLoadedImageMetadataFormGroup\"\r\n                         [record]=\"record[field.Name][0]\" (recordChange)=\"updateMetadataValidity()\">\r\n                    </dynamic-module-field>\r\n               </div>\r\n          </div>\r\n     </div>\r\n</div>\r\n\r\n<!-- COMPONENTE IN CUI CARICARE NUOVI ALLEGATI -->\r\n<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\" [onlyImages]=\"true\"\r\n     (onAttachmentsChange)=\"onAttachmentsChange()\" *ngIf=\"!field.ImageIsContextualAttachment\">\r\n</attachment-field-template>\r\n\r\n<!-- DIALOG PER DISEGNARE SUL NUOVO ALLEGATO CARICATO -->\r\n<ng-template #dialogImageDrowing>\r\n     <div *ngIf=\"field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null\"\r\n          class=\"row\">\r\n          <div class=\"col-sm-12 col-md-12\">\r\n               <eqp-img-drawing [showCancelButton]=\"false\" [enableLoadAnotherImage]=\"false\" [enableRemoveImage]=\"false\"\r\n                    [src]=\"'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64\"\r\n                    [i18n]=\"i18n\" [showCancelButton]=\"false\" (save)=\"saveDrowning($event)\">\r\n               </eqp-img-drawing>\r\n          </div>\r\n     </div>\r\n     <div class=\"row mt-2 mb-1\">\r\n          <div class=\"col-sm-12 text-right\">\r\n               <button class=\"btn mat-raised-button\" (click)=\"closeImageDrowingDialog()\" type=\"button\">\r\n                    Annulla disegno\r\n               </button>\r\n          </div>\r\n     </div>\r\n</ng-template>",
         styles: ["::ng-deep image-drawing>button{background-color:var(--primary)!important;color:#fff!important}"]
     })
 ], ImageFieldTemplateComponent);
@@ -2494,30 +3104,14 @@ let ListFormRecordComponent = class ListFormRecordComponent {
      * @param record Record da duplicare.
      */
     duplicateRecord(record) {
-        // 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
     }
     /**
      * Metodo per eliminare un record dalla lista.
      * @param record Record da eliminare selezionato sulla eqp-table.
      */
     deleteRecord(record) {
-        // EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', () => {
-        //   this.values.splice(this.values.indexOf(record), 1);
-        //   this.reloadTables();
-        // }, false, 'Richiesta conferma');
         this.onDeleteRecord.emit(record);
-        // TODO
     }
     /**
      * Metodo per creare la configurazione delle colonne per la eqp-table.
@@ -2559,7 +3153,7 @@ let ListFormRecordComponent = class ListFormRecordComponent {
                         column.format = "dd/MM/yyyy HH:mm";
                     }
                     else if (field.IsOnlyDate == DateTimeTypeEnum['Solo data']) {
-                        column.format = "dd/MM/yyyy";
+                        column.format = field.DateFormat ? field.DateFormat.replace("DD", "dd") : "dd/MM/yyyy";
                     }
                 }
                 break;
@@ -2646,9 +3240,6 @@ ListFormRecordComponent = __decorate([
     })
 ], ListFormRecordComponent);
 
-class Record {
-}
-
 let AddFormRecordComponent = class AddFormRecordComponent {
     constructor(cdr, utilityService) {
         this.cdr = cdr;
@@ -2767,7 +3358,7 @@ __decorate([
 AddFormRecordComponent = __decorate([
     Component({
         selector: 'add-form-record',
-        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>",
+        template: "<div class=\"row eqp-dynamic-module-title\" *ngIf=\"showTitle\">\r\n    <div class=\"col-md-12\">\r\n        <h4><b>{{form.Name}}</b></h4>\r\n    </div>\r\n</div>\r\n\r\n<form [formGroup]=\"formForm\">\r\n\r\n    <!-- VISUALIZZAZIONE SEMPLICE -->\r\n    <ng-container *ngIf=\"form.FormScalarType == FormScalarTypeEnum.Semplice\" [ngTemplateOutlet]=\"fieldTemplates\"\r\n        [ngTemplateOutletContext]=\"{ fields: form.Fields }\">\r\n    </ng-container>\r\n\r\n    <!-- VISUALIZZAZIONE A STEPPER -->\r\n    <mat-horizontal-stepper linear *ngIf=\"form.FormScalarType == FormScalarTypeEnum['A step']\">\r\n        <mat-step *ngFor=\"let group of form.FormFieldsGroups\">\r\n            <ng-template matStepLabel>\r\n                {{group.Name}}\r\n            </ng-template>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\r\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\r\n            </ng-container>\r\n        </mat-step>\r\n    </mat-horizontal-stepper>\r\n\r\n    <!-- VISUALIZZAZIONE A TAB -->\r\n    <mat-tab-group *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In tab']\">\r\n        <mat-tab *ngFor=\"let group of form.FormFieldsGroups\" [label]=\"group.Name\">\r\n            <div class=\"mt-3\">\r\n                <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\r\n                    [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\r\n                </ng-container>\r\n            </div>\r\n        </mat-tab>\r\n    </mat-tab-group>\r\n\r\n    <!-- VISUALIZZAZIONE AD ACCORDION -->\r\n    <mat-accordion multi *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In accordion']\">\r\n        <mat-expansion-panel *ngFor=\"let group of form.FormFieldsGroups\">\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    {{group.Name}}\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n\r\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\r\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\r\n            </ng-container>\r\n        </mat-expansion-panel>\r\n    </mat-accordion>\r\n</form>\r\n\r\n<div class=\"row mt-2\" *ngIf=\"showButtons\">\r\n    <div class=\"col-sm-12 text-right\">\r\n        <button class=\"mr-2\" mat-raised-button (click)=\"saveOrExitForm(true)\" type=\"button\">\r\n            Annulla\r\n        </button>\r\n        <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveOrExitForm(false)\"\r\n            [disabled]=\"formForm.invalid || formForm.disabled\" type=\"button\">\r\n            Salva\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->\r\n<ng-template #fieldTemplates let-fields='fields'>\r\n    <div class=\"row\">\r\n        <div class=\"mt-2\" *ngFor=\"let field of fields\" [ngClass]=\"utilityService.getFieldSyleClass(field)\">\r\n            <dynamic-module-field #fieldTemplate [field]=\"field\" [form]=\"form\" [record]=\"record\"\r\n                (recordChange)=\"onRecordChange()\"></dynamic-module-field>\r\n        </div>\r\n    </div>\r\n</ng-template>",
         styles: [""]
     })
 ], AddFormRecordComponent);
@@ -2888,11 +3479,30 @@ __decorate([
 DynamicModuleFieldComponent = __decorate([
     Component({
         selector: 'dynamic-module-field',
-        template: "<text-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Campo di testo']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</text-field-template>\n\n<textarea-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Area di testo']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</textarea-field-template>\n\n<boolean-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Booleano']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</boolean-field-template>\n\n<date-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Data e/o ora']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</date-field-template>\n\n<numeric-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Campo numerico']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</numeric-field-template>\n\n<list-value-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Elenco generico']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</list-value-field-template>\n\n<attachment-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Allegato']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</attachment-field-template>\n\n<image-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Immagine']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</image-field-template>\n\n<list-form-record #listInnerFormRecords *ngIf=\"field.FieldType == FieldTypeEnum['Form di dettaglio']\"\n    [form]=\"getInnerFormFromField(field)\" [values]=\"record[field.Name]\"\n    (onAddViewEditRecord)=\"onAddViewEditInnerFormRecord($event, field)\">\n</list-form-record>\n\n<!-- DIALOG PER AGGIUNGERE/MODIFICARE/VISUALIZZARE UN RECORD IN UNA FORM DI DETTAGLIO -->\n<ng-template #dialogInnerFormRecord>\n    <add-form-record [form]=\"selectedInnerForm\" [record]=\"selectedInnerFormRecord\" [onlyView]=\"onlyViewInnerFormRecord\"\n        (saveRecordEvent)=\"onSaveInnerFormRecord($event)\"></add-form-record>\n</ng-template>",
+        template: "<text-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Campo di testo']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</text-field-template>\r\n\r\n<textarea-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Area di testo']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</textarea-field-template>\r\n\r\n<boolean-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Booleano']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</boolean-field-template>\r\n\r\n<date-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Data e/o ora']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</date-field-template>\r\n\r\n<numeric-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Campo numerico']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</numeric-field-template>\r\n\r\n<list-value-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Elenco generico']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</list-value-field-template>\r\n\r\n<attachment-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Allegato']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</attachment-field-template>\r\n\r\n<image-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Immagine']\"\r\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\r\n</image-field-template>\r\n\r\n<list-form-record #listInnerFormRecords *ngIf=\"field.FieldType == FieldTypeEnum['Form di dettaglio']\"\r\n    [form]=\"getInnerFormFromField(field)\" [values]=\"record[field.Name]\"\r\n    (onAddViewEditRecord)=\"onAddViewEditInnerFormRecord($event, field)\">\r\n</list-form-record>\r\n\r\n<!-- DIALOG PER AGGIUNGERE/MODIFICARE/VISUALIZZARE UN RECORD IN UNA FORM DI DETTAGLIO -->\r\n<ng-template #dialogInnerFormRecord>\r\n    <add-form-record [form]=\"selectedInnerForm\" [record]=\"selectedInnerFormRecord\" [onlyView]=\"onlyViewInnerFormRecord\"\r\n        (saveRecordEvent)=\"onSaveInnerFormRecord($event)\"></add-form-record>\r\n</ng-template>",
         styles: [""]
     })
 ], DynamicModuleFieldComponent);
 
+let SpinnerComponent = class SpinnerComponent {
+    constructor(spinnerService) {
+        this.spinnerService = spinnerService;
+        this.isLoading = this.spinnerService.isLoading;
+    }
+    ngOnInit() {
+    }
+};
+SpinnerComponent.ctorParameters = () => [
+    { type: SpinnerService }
+];
+SpinnerComponent = __decorate([
+    Component({
+        selector: 'eqp-dynamic-module-spinner',
+        template: "<div class=\"eqp-splash-screen\" *ngIf=\"isLoading | async\">\r\n    <div id=\"loader\"></div>\r\n</div>",
+        styles: [":host #loader{display:block;position:relative;width:150px;height:150px;border-radius:50%;border:3px solid transparent;border-top-color:var(--primary);-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}:host #loader:before{content:\"\";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:var(--primary);-webkit-animation:3s linear infinite spin;animation:3s linear infinite spin}:host #loader:after{content:\"\";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:var(--primary);-webkit-animation:1.5s linear infinite spin;animation:1.5s linear infinite spin}@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host .eqp-splash-screen{background-color:#343a4040;position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;z-index:9999}:host .eqp-splash-screen img{margin-left:calc(100vw - 100%);width:90px;margin-bottom:30px}:host .eqp-splash-screen span{margin-left:calc(100vw - 100%);margin-bottom:30px}:host .eqp-splash-screen ::ng-deep .mat-progress-spinner circle,:host .eqp-splash-screen ::ng-deep .mat-spinner circle{stroke:#5d78ff}"]
+    })
+], SpinnerComponent);
+
 let EqpDynamicModuleModule = class EqpDynamicModuleModule {
 };
 EqpDynamicModuleModule = __decorate([
@@ -2912,9 +3522,9 @@ EqpDynamicModuleModule = __decorate([
             ListFormRecordComponent,
             AddFormRecordComponent,
             DynamicModuleFieldComponent,
+            SpinnerComponent,
         ],
         imports: [
-            BrowserModule,
             MaterialModule,
             FormsModule,
             CommonModule,
@@ -2958,10 +3568,6 @@ class NumericField extends BaseField {
 class TextareaField extends BaseField {
 }
 
-/**Campo di testo */
-class TextField extends BaseField {
-}
-
 /*
  * Public API Surface of eqp-dynamic-module
  */
@@ -2970,5 +3576,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, ɵ0, MaterialModule as ɵa };
+export { ActionOnRecord, AddFormFieldComponent, AddFormRecordComponent, ArrayValidators, AttachmentField, AttachmentFieldTemplateComponent, AvailableFileExtensions, AvailableImageExtensions, BaseField, BaseObj, BoolPresentantioEnum, BooleanField, BooleanFieldTemplateComponent, ButtonImage, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynRecord, DynamicModuleFieldComponent, EndPointConfiguration, EndPointData, EndPointDataParams, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, ParamTypeEnum, Record, RequestMethodEnum, SpinnerService, TelRegex, TextField, TextFieldTemplateComponent, TextMaskEnum, TextareaField, TextareaFieldTemplateComponent, UrlRegex, UtilityHelperService, ɵ0, SpinnerComponent as ɵa, MaterialModule as ɵb };
 //# sourceMappingURL=eqproject-eqp-dynamic-module.js.map