@eqproject/eqp-dynamic-module 0.0.3 → 0.0.5

package/bundles/eqproject-eqp-dynamic-module.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/dialog'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core'), require('@eqproject/eqp-table'), require('@eqproject/eqp-attachments'), require('@eqproject/eqp-select'), require('@eqproject/eqp-datetimepicker'), require('@eqproject/eqp-filters'), require('@eqproject/eqp-numeric'), require('sweetalert2'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('@eqproject/eqp-dynamic-module', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/dialog', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core', '@eqproject/eqp-table', '@eqproject/eqp-attachments', '@eqproject/eqp-select', '@eqproject/eqp-datetimepicker', '@eqproject/eqp-filters', '@eqproject/eqp-numeric', 'sweetalert2', '@angular/platform-browser'], factory) :
-    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-dynamic-module'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.dialog, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core, global.eqpTable, global.eqpAttachments, global.eqpSelect, global.eqpDatetimepicker, global.eqpFilters, global.eqpNumeric, global.Swal, global.ng.platformBrowser));
-}(this, (function (exports, common, core, forms, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, dialog, tooltip, snackBar, table, sort, paginator, core$1, eqpTable, eqpAttachments, eqpSelect, eqpDatetimepicker, eqpFilters, eqpNumeric, Swal, platformBrowser) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('sweetalert2'), require('@angular/common/http'), require('rxjs'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/dialog'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core'), require('@eqproject/eqp-table'), require('@eqproject/eqp-attachments'), require('@eqproject/eqp-select'), require('@eqproject/eqp-datetimepicker'), require('@eqproject/eqp-img-drawing'), require('@eqproject/eqp-filters'), require('@eqproject/eqp-numeric'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('@eqproject/eqp-dynamic-module', ['exports', '@angular/common', '@angular/core', '@angular/forms', 'sweetalert2', '@angular/common/http', 'rxjs', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/dialog', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core', '@eqproject/eqp-table', '@eqproject/eqp-attachments', '@eqproject/eqp-select', '@eqproject/eqp-datetimepicker', '@eqproject/eqp-img-drawing', '@eqproject/eqp-filters', '@eqproject/eqp-numeric', '@angular/platform-browser'], factory) :
+    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-dynamic-module'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.Swal, global.ng.common.http, global.rxjs, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.dialog, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core, global.eqpTable, global.eqpAttachments, global.eqpSelect, global.eqpDatetimepicker, global.eqpImgDrawing, global.eqpFilters, global.eqpNumeric, global.ng.platformBrowser));
+}(this, (function (exports, common, core, forms, Swal, http, rxjs, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, dialog, tooltip, snackBar, table, sort, paginator, core$1, eqpTable, eqpAttachments, eqpSelect, eqpDatetimepicker, eqpImgDrawing, eqpFilters, eqpNumeric, platformBrowser) { 'use strict';
 
     Swal = Swal && Object.prototype.hasOwnProperty.call(Swal, 'default') ? Swal['default'] : Swal;
 
@@ -237,6 +237,36 @@
         return ContextUser;
     }());
 
+    var EndPointConfiguration = /** @class */ (function () {
+        function EndPointConfiguration() {
+        }
+        return EndPointConfiguration;
+    }());
+    var EndPointData = /** @class */ (function () {
+        function EndPointData() {
+        }
+        return EndPointData;
+    }());
+    var EndPointDataParams = /** @class */ (function () {
+        function EndPointDataParams() {
+            this.ParamValue = null;
+        }
+        return EndPointDataParams;
+    }());
+
+    (function (ParamTypeEnum) {
+        ParamTypeEnum[ParamTypeEnum["Query param"] = 1] = "Query param";
+        ParamTypeEnum[ParamTypeEnum["In route"] = 2] = "In route";
+        ParamTypeEnum[ParamTypeEnum["In Body"] = 3] = "In Body";
+    })(exports.ParamTypeEnum || (exports.ParamTypeEnum = {}));
+
+    (function (RequestMethodEnum) {
+        RequestMethodEnum["GET"] = "GET";
+        RequestMethodEnum["POST"] = "POST";
+        RequestMethodEnum["PUT"] = "PUT";
+        RequestMethodEnum["DELETE"] = "DELETE";
+    })(exports.RequestMethodEnum || (exports.RequestMethodEnum = {}));
+
     /**
      * Classe base che implementa la valorizzazione dell'ID (se null) con una nuova GUID
      * in creazione dell'oggetto.
@@ -283,6 +313,136 @@
         FormScalarTypeEnum[FormScalarTypeEnum["In accordion"] = 4] = "In accordion"; //GROUPED_BY_ACCORDION
     })(exports.FormScalarTypeEnum || (exports.FormScalarTypeEnum = {}));
 
+    var Record = /** @class */ (function () {
+        function Record() {
+        }
+        return Record;
+    }());
+    var DynRecord = /** @class */ (function () {
+        function DynRecord() {
+            this.Values = {};
+        }
+        return DynRecord;
+    }());
+
+    var EqpDynamicModuleDialogService = /** @class */ (function () {
+        function EqpDynamicModuleDialogService() {
+        }
+        /**
+         * 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')
+         */
+        EqpDynamicModuleDialogService.Success = function (message, title) {
+            if (title === void 0) { title = null; }
+            var 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')
+         */
+        EqpDynamicModuleDialogService.Error = function (message, title) {
+            if (title === void 0) { title = null; }
+            var currentTitle = title != null ? title : 'Errore';
+            if (Array.isArray(message)) {
+                currentTitle = title != null ? title : 'Errore';
+                var 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')
+         */
+        EqpDynamicModuleDialogService.Confirm = function (message, confirmCallback, isWarning, title, customWidth) {
+            if (isWarning === void 0) { isWarning = false; }
+            if (title === void 0) { title = null; }
+            if (customWidth === void 0) { customWidth = null; }
+            var currentTitle = title != null ? title : 'Sei sicuro di voler procedere?';
+            if (Array.isArray(message)) {
+                var 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(function (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(function (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')
+         */
+        EqpDynamicModuleDialogService.Info = function (message, title, isToast) {
+            if (title === void 0) { title = null; }
+            if (isToast === void 0) { isToast = null; }
+            var 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!')
+         */
+        EqpDynamicModuleDialogService.Warning = function (message, title, isToast) {
+            if (title === void 0) { title = null; }
+            if (isToast === void 0) { isToast = null; }
+            var currentTitle = title != null ? title : "Attenzione!";
+            if (Array.isArray(message)) {
+                var htmlWarnings = message.join("<br>");
+                Swal.fire({
+                    title: currentTitle,
+                    html: htmlWarnings,
+                    icon: 'warning'
+                });
+            }
+            else {
+                Swal.fire(currentTitle, message, 'warning');
+            }
+        };
+        EqpDynamicModuleDialogService.ɵprov = core.ɵɵdefineInjectable({ factory: function EqpDynamicModuleDialogService_Factory() { return new EqpDynamicModuleDialogService(); }, token: EqpDynamicModuleDialogService, providedIn: "root" });
+        EqpDynamicModuleDialogService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], EqpDynamicModuleDialogService);
+        return EqpDynamicModuleDialogService;
+    }());
+
     /**
      * Contiene le informazioni di base del campo, indipendentemente dal tipo.
      * Questa classe è volutamente astratta perché il tipo di campo è dettato dal tipo
@@ -323,6 +483,24 @@
         ColSpanSizesEnum[ColSpanSizesEnum["col-lg-12"] = 12] = "col-lg-12";
     })(exports.ColSpanSizesEnum || (exports.ColSpanSizesEnum = {}));
 
+    /**Campo di testo */
+    var TextField = /** @class */ (function (_super) {
+        __extends(TextField, _super);
+        function TextField() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return TextField;
+    }(BaseField));
+
+    (function (TextMaskEnum) {
+        TextMaskEnum[TextMaskEnum["Password"] = 1] = "Password";
+        TextMaskEnum[TextMaskEnum["Email"] = 2] = "Email";
+        TextMaskEnum[TextMaskEnum["Telefono"] = 3] = "Telefono";
+        TextMaskEnum[TextMaskEnum["Url"] = 4] = "Url";
+    })(exports.TextMaskEnum || (exports.TextMaskEnum = {}));
+    var UrlRegex = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
+    var TelRegex = '([+]?[0-9]{10,14})';
+
     var ArrayValidators = /** @class */ (function () {
         function ArrayValidators() {
         }
@@ -345,18 +523,73 @@
         return ArrayValidators;
     }());
 
+    var SpinnerService = /** @class */ (function () {
+        function SpinnerService() {
+            this.isLoading = new rxjs.Subject();
+            this.requestsCount = 0;
+        }
+        /**
+         * Mostra lo spinner
+         */
+        SpinnerService.prototype.show = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.isLoading.next(true);
+            }, 100);
+        };
+        /**
+         * Nasconde lo spinner
+         */
+        SpinnerService.prototype.hide = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.isLoading.next(false);
+            }, 100);
+        };
+        SpinnerService.prototype.addRequestCounter = function () {
+            this.requestsCount++;
+            this.show();
+        };
+        SpinnerService.prototype.removeRequestCounter = function () {
+            this.requestsCount--;
+            if (this.requestsCount == 0)
+                this.hide();
+        };
+        SpinnerService.ɵprov = core.ɵɵdefineInjectable({ factory: function SpinnerService_Factory() { return new SpinnerService(); }, token: SpinnerService, providedIn: "root" });
+        SpinnerService = __decorate([
+            core.Injectable({
+                providedIn: 'root'
+            })
+        ], SpinnerService);
+        return SpinnerService;
+    }());
+
     var UtilityHelperService = /** @class */ (function () {
-        function UtilityHelperService(formBuilder) {
+        function UtilityHelperService(formBuilder, http, spinnerService) {
             this.formBuilder = formBuilder;
+            this.http = http;
+            this.spinnerService = spinnerService;
         }
         UtilityHelperService_1 = UtilityHelperService;
         UtilityHelperService.EvaluateFieldFormula = function (formula, rec, ctx) {
-            var evaluatedValue = eval(formula.replace('"', '\"'));
+            var evaluatedValue = eval(formula);
             return (evaluatedValue ? evaluatedValue : null);
         };
         UtilityHelperService.SetContext = function (ctx) {
             this.context = ctx;
         };
+        UtilityHelperService.GetFieldType = function (field) {
+            switch (field.FieldType) {
+                case exports.FieldTypeEnum["Campo di testo"]: {
+                    var 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.
@@ -404,7 +637,7 @@
             // 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 = [];
+                var availableOptions_1 = [];
                 // Prendo tutti i blocchi di caratteri digitati dall'utente
                 var allFormulaWords = typedFormula.split(" ");
                 // Prendo l'ultimo blocco di caratteri digitato dall'utente
@@ -413,7 +646,7 @@
                 // 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 lastTypedWork_1 = propertyPath[propertyPath.length - 1];
                     var propertiesToCheck = [];
                     if (propertyPath.length == 1) {
                         propertiesToCheck = ["rec", "ctx"];
@@ -427,15 +660,15 @@
                     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(function (prop) {
-                        if (prop.startsWith(lastTypedWork)) {
-                            availableOptions.push({ label: prop, value: typedFormula + prop.substring(lastTypedWork.length, prop.length) });
+                        if (prop.startsWith(lastTypedWork_1)) {
+                            availableOptions_1.push({ label: prop, value: typedFormula + prop.substring(lastTypedWork_1.length, prop.length) });
                         }
                     });
                 }
-                autocompleteOptions = availableOptions;
+                autocompleteOptions = availableOptions_1;
             }
             return autocompleteOptions;
         };
@@ -525,6 +758,17 @@
                     if (field.MinLenght) {
                         validators.push(forms.Validators.minLength(field.MinLenght));
                     }
+                    switch (field.TextMask) {
+                        case exports.TextMaskEnum.Url:
+                            validators.push(forms.Validators.pattern(UrlRegex));
+                            break;
+                        case exports.TextMaskEnum.Email:
+                            validators.push(forms.Validators.email);
+                            break;
+                        case exports.TextMaskEnum.Telefono:
+                            validators.push(forms.Validators.pattern(TelRegex));
+                            break;
+                    }
                     break;
                 case exports.FieldTypeEnum["Area di testo"]:
                     if (field.MaxLenght) {
@@ -547,12 +791,151 @@
             }
             return new forms.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.
+         */
+        UtilityHelperService.prototype.ConfigureDefaultEndPoints = function (baseServerUrl, userToken) {
+            var endPointConfiguration = new EndPointConfiguration();
+            endPointConfiguration = new EndPointConfiguration();
+            endPointConfiguration.Records = {
+                GetByFormIDEndPoint: {
+                    Url: baseServerUrl + "/api/v1/getall",
+                    Token: userToken,
+                    RequestMethod: exports.RequestMethodEnum.GET,
+                },
+                GetByIDEndPoint: {
+                    Url: baseServerUrl + "/api/v1/getByID",
+                    Token: userToken,
+                    RequestMethod: exports.RequestMethodEnum.GET,
+                },
+                SaveEndPoint: {
+                    Url: baseServerUrl + "/api/v1/save",
+                    Token: userToken,
+                    RequestMethod: exports.RequestMethodEnum.POST,
+                },
+                DuplicateEndPoint: {
+                    Url: baseServerUrl + "/api/v1/duplicate",
+                    Token: userToken,
+                    RequestMethod: exports.RequestMethodEnum.POST,
+                },
+                DeleteEndPoint: {
+                    Url: baseServerUrl + "/api/v1/delete",
+                    Token: userToken,
+                    RequestMethod: exports.RequestMethodEnum.DELETE,
+                }
+            };
+            endPointConfiguration.Forms = {
+                GetByIDEndPoint: {
+                    Url: baseServerUrl + "/api/conf/form",
+                    Token: userToken,
+                    RequestMethod: exports.RequestMethodEnum.GET,
+                },
+                SaveEndPoint: {
+                    Url: baseServerUrl + "/api/conf/form",
+                    Token: userToken,
+                    RequestMethod: exports.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.
+         */
+        UtilityHelperService.prototype.RunEndPointCall = function (endPointData, dynamicModuleParams, callback, errorCallBack) {
+            var _this = this;
+            if (dynamicModuleParams === void 0) { dynamicModuleParams = null; }
+            if (callback === void 0) { callback = null; }
+            if (errorCallBack === void 0) { errorCallBack = null; }
+            this.spinnerService.addRequestCounter();
+            var url = "" + endPointData.Url;
+            var queryParams = null;
+            var 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(function (p) {
+                    switch (p.ParamType) {
+                        case exports.ParamTypeEnum['Query param']: {
+                            var stringParam = p.ParamName + "=" + p.ParamValue;
+                            queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                            break;
+                        }
+                        case exports.ParamTypeEnum['In route']: {
+                            url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                            break;
+                        }
+                        case exports.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(function (p) {
+                    switch (p.ParamType) {
+                        case exports.ParamTypeEnum['Query param']: {
+                            var stringParam = p.ParamName + "=" + p.ParamValue;
+                            queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                            break;
+                        }
+                        case exports.ParamTypeEnum['In route']: {
+                            url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                            break;
+                        }
+                        case exports.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: ![exports.RequestMethodEnum.DELETE, exports.RequestMethodEnum.GET].includes(endPointData.RequestMethod) ? bodyParams : null
+            })
+                .subscribe(function (res) {
+                _this.spinnerService.removeRequestCounter();
+                if (callback) {
+                    callback(res);
+                }
+            }, function (error) {
+                _this.spinnerService.removeRequestCounter();
+                if (errorCallBack) {
+                    errorCallBack(error);
+                }
+                EqpDynamicModuleDialogService.Error(error.message);
+                throw new Error(error.message);
+            });
+        };
         var UtilityHelperService_1;
         UtilityHelperService.context = new Context();
         UtilityHelperService.ctorParameters = function () { return [
-            { type: forms.FormBuilder }
+            { type: forms.FormBuilder },
+            { type: http.HttpClient },
+            { type: SpinnerService }
         ]; };
-        UtilityHelperService.ɵprov = core.ɵɵdefineInjectable({ factory: function UtilityHelperService_Factory() { return new UtilityHelperService(core.ɵɵinject(forms.FormBuilder)); }, token: UtilityHelperService, providedIn: "root" });
+        UtilityHelperService.ɵprov = core.ɵɵdefineInjectable({ factory: function UtilityHelperService_Factory() { return new UtilityHelperService(core.ɵɵinject(forms.FormBuilder), core.ɵɵinject(http.HttpClient), core.ɵɵinject(SpinnerService)); }, token: UtilityHelperService, providedIn: "root" });
         UtilityHelperService = UtilityHelperService_1 = __decorate([
             core.Injectable({
                 providedIn: 'root'
@@ -562,55 +945,219 @@
     }());
 
     var EqpDynamicModuleComponent = /** @class */ (function () {
-        function EqpDynamicModuleComponent() {
+        function EqpDynamicModuleComponent(utilityHelperService) {
+            this.utilityHelperService = utilityHelperService;
             this.context = new Context();
-            this.form = new Form();
             this.showButtons = true;
             this.showTitle = true;
-            this.viewMode = exports.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 core.EventEmitter();
             this.deleteRecord = new core.EventEmitter();
             this.duplicateRecord = new core.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 core.EventEmitter();
+            this.afterDeleteRecord = new core.EventEmitter();
+            this.afterDuplicateRecord = new core.EventEmitter();
+            this.form = new Form();
+            this.viewMode = exports.FormTypeEnum.LIST;
             this.FormTypeEnum = exports.FormTypeEnum;
         }
         EqpDynamicModuleComponent.prototype.ngOnInit = function () {
             UtilityHelperService.SetContext(this.context);
+            this.configureDefaultEndPoints();
+            this.getFormByID();
+        };
+        EqpDynamicModuleComponent.prototype.getFormByID = function () {
+            var _this = this;
+            var dynamicModuleParams = new Array();
+            dynamicModuleParams.push({
+                ParamName: "id",
+                ParamValue: this.formID,
+                ParamType: exports.ParamTypeEnum['Query param']
+            });
+            this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.GetByIDEndPoint, dynamicModuleParams, function (res) {
+                _this.form = res;
+                _this.getRecordsByFormID();
+            }, function (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.
+         */
+        EqpDynamicModuleComponent.prototype.configureDefaultEndPoints = function () {
+            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.
+         */
+        EqpDynamicModuleComponent.prototype.getRecordsByFormID = function () {
+            var _this = this;
+            if (this.endPointConfiguration && this.endPointConfiguration.Records && this.endPointConfiguration.Records.GetByFormIDEndPoint) {
+                var dynamicModuleParams = [
+                    { ParamName: 'EntID', ParamValue: this.form.ID, ParamType: exports.ParamTypeEnum['Query param'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByFormIDEndPoint, dynamicModuleParams, function (res) {
+                    _this.values = new Array();
+                    res.forEach(function (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)
+         */
         EqpDynamicModuleComponent.prototype.onAddViewEditRecord = function (event) {
+            var _this = this;
             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: exports.ParamTypeEnum['Query param'] }
+                    ];
+                    this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByIDEndPoint, dynamicModuleParams, function (res) {
+                        _this.selectedRecord = JSON.parse(res.SerializedValues);
+                        _this.selectedRecord.ID = res.ID;
+                        _this.selectedRecord.EntID = res.EntID;
+                        _this.viewMode = exports.FormTypeEnum.SCALAR;
+                    });
+                }
+                else {
+                    this.selectedRecord = JSON.parse(JSON.stringify(event.record));
+                    this.viewMode = exports.FormTypeEnum.SCALAR;
+                }
             }
             else {
                 this.selectedRecord = null;
                 this.onlyView = false;
+                this.viewMode = exports.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.
+         */
+        EqpDynamicModuleComponent.prototype.onSaveRecord = function (event) {
+            var _this = this;
+            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: exports.ParamTypeEnum['In Body'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.SaveEndPoint, dynamicModuleParams, function (res) {
+                    _this.getRecordsByFormID();
+                    _this.afterSaveRecord.emit(event);
+                    _this.viewMode = exports.FormTypeEnum.LIST;
+                });
+            }
+            else {
+                this.saveRecord.emit(event);
+                this.viewMode = exports.FormTypeEnum.LIST;
             }
-            this.viewMode = exports.FormTypeEnum.SCALAR;
-        };
-        EqpDynamicModuleComponent.prototype.onSaveForm = function (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 = exports.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.
+         */
         EqpDynamicModuleComponent.prototype.onDuplicateRecord = function (record) {
-            this.duplicateRecord.emit(record);
+            var _this = this;
+            if (this.endPointConfiguration && this.endPointConfiguration.Records.DuplicateEndPoint) {
+                EqpDynamicModuleDialogService.Confirm('Duplicare il record selezionato?', function () {
+                    var dynamicModuleParams = [
+                        { ParamName: "id", ParamValue: record.ID, ParamType: exports.ParamTypeEnum['Query param'] }
+                    ];
+                    _this.utilityHelperService.RunEndPointCall(_this.endPointConfiguration.Records.DuplicateEndPoint, dynamicModuleParams, function (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.
+         */
         EqpDynamicModuleComponent.prototype.onDeleteRecord = function (record) {
-            this.deleteRecord.emit(record);
+            var _this = this;
+            if (this.endPointConfiguration && this.endPointConfiguration.Records.DeleteEndPoint) {
+                EqpDynamicModuleDialogService.Confirm('Eliminare il record selezionato?', function () {
+                    var dynamicModuleParams = [
+                        { ParamName: "id", ParamValue: record.ID, ParamType: exports.ParamTypeEnum['Query param'] }
+                    ];
+                    _this.utilityHelperService.RunEndPointCall(_this.endPointConfiguration.Records.DeleteEndPoint, dynamicModuleParams, function (res) {
+                        _this.getRecordsByFormID();
+                        _this.afterDeleteRecord.emit(record);
+                    });
+                }, false, 'Richiesta conferma');
+            }
+            else {
+                this.deleteRecord.emit(record);
+            }
         };
+        EqpDynamicModuleComponent.ctorParameters = function () { return [
+            { type: UtilityHelperService }
+        ]; };
         __decorate([
             core.Input()
         ], EqpDynamicModuleComponent.prototype, "context", void 0);
         __decorate([
             core.Input()
-        ], EqpDynamicModuleComponent.prototype, "form", void 0);
+        ], EqpDynamicModuleComponent.prototype, "formID", void 0);
         __decorate([
             core.Input()
         ], EqpDynamicModuleComponent.prototype, "values", void 0);
@@ -622,7 +1169,13 @@
         ], EqpDynamicModuleComponent.prototype, "showTitle", void 0);
         __decorate([
             core.Input()
-        ], EqpDynamicModuleComponent.prototype, "viewMode", void 0);
+        ], EqpDynamicModuleComponent.prototype, "baseServerUrl", void 0);
+        __decorate([
+            core.Input()
+        ], EqpDynamicModuleComponent.prototype, "userToken", void 0);
+        __decorate([
+            core.Input()
+        ], EqpDynamicModuleComponent.prototype, "endPointConfiguration", void 0);
         __decorate([
             core.Output()
         ], EqpDynamicModuleComponent.prototype, "saveRecord", void 0);
@@ -632,220 +1185,178 @@
         __decorate([
             core.Output()
         ], EqpDynamicModuleComponent.prototype, "duplicateRecord", void 0);
-        EqpDynamicModuleComponent = __decorate([
-            core.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>",
-                styles: ["::ng-deep mat-form-field{width:100%}"]
-            })
-        ], EqpDynamicModuleComponent);
-        return EqpDynamicModuleComponent;
-    }());
-
-    var MaterialModule = /** @class */ (function () {
-        function MaterialModule() {
-        }
-        MaterialModule = __decorate([
-            core.NgModule({
-                imports: [
-                    checkbox.MatCheckboxModule,
-                    button.MatButtonModule,
-                    input.MatInputModule,
-                    autocomplete.MatAutocompleteModule,
-                    datepicker.MatDatepickerModule,
-                    formField.MatFormFieldModule,
-                    radio.MatRadioModule,
-                    select.MatSelectModule,
-                    slider.MatSliderModule,
-                    slideToggle.MatSlideToggleModule,
-                    menu.MatMenuModule,
-                    sidenav.MatSidenavModule,
-                    toolbar.MatToolbarModule,
-                    list.MatListModule,
-                    gridList.MatGridListModule,
-                    card.MatCardModule,
-                    stepper.MatStepperModule,
-                    tabs.MatTabsModule,
-                    expansion.MatExpansionModule,
-                    buttonToggle.MatButtonToggleModule,
-                    chips.MatChipsModule,
-                    icon.MatIconModule,
-                    progressSpinner.MatProgressSpinnerModule,
-                    progressBar.MatProgressBarModule,
-                    dialog.MatDialogModule,
-                    tooltip.MatTooltipModule,
-                    snackBar.MatSnackBarModule,
-                    table.MatTableModule,
-                    sort.MatSortModule,
-                    paginator.MatPaginatorModule,
-                    datepicker.MatDatepickerModule,
-                    core$1.MatNativeDateModule
-                ],
-                exports: [
-                    checkbox.MatCheckboxModule,
-                    button.MatButtonModule,
-                    input.MatInputModule,
-                    autocomplete.MatAutocompleteModule,
-                    datepicker.MatDatepickerModule,
-                    formField.MatFormFieldModule,
-                    radio.MatRadioModule,
-                    select.MatSelectModule,
-                    slider.MatSliderModule,
-                    slideToggle.MatSlideToggleModule,
-                    menu.MatMenuModule,
-                    sidenav.MatSidenavModule,
-                    toolbar.MatToolbarModule,
-                    list.MatListModule,
-                    gridList.MatGridListModule,
-                    card.MatCardModule,
-                    stepper.MatStepperModule,
-                    tabs.MatTabsModule,
-                    expansion.MatExpansionModule,
-                    buttonToggle.MatButtonToggleModule,
-                    chips.MatChipsModule,
-                    icon.MatIconModule,
-                    progressSpinner.MatProgressSpinnerModule,
-                    progressBar.MatProgressBarModule,
-                    dialog.MatDialogModule,
-                    tooltip.MatTooltipModule,
-                    snackBar.MatSnackBarModule,
-                    table.MatTableModule,
-                    sort.MatSortModule,
-                    paginator.MatPaginatorModule
-                ],
-            })
-        ], MaterialModule);
-        return MaterialModule;
-    }());
-
-    var EqpDynamicModuleDialogService = /** @class */ (function () {
-        function EqpDynamicModuleDialogService() {
-        }
-        /**
-         * 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')
-         */
-        EqpDynamicModuleDialogService.Error = function (message, title) {
-            if (title === void 0) { title = null; }
-            var currentTitle = title != null ? title : 'Errore';
-            if (Array.isArray(message)) {
-                currentTitle = title != null ? title : 'Errore';
-                var 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')
-         */
-        EqpDynamicModuleDialogService.Confirm = function (message, confirmCallback, isWarning, title, customWidth) {
-            if (isWarning === void 0) { isWarning = false; }
-            if (title === void 0) { title = null; }
-            if (customWidth === void 0) { customWidth = null; }
-            var currentTitle = title != null ? title : 'Sei sicuro di voler procedere?';
-            if (Array.isArray(message)) {
-                var 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(function (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(function (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')
-         */
-        EqpDynamicModuleDialogService.Info = function (message, title, isToast) {
-            if (title === void 0) { title = null; }
-            if (isToast === void 0) { isToast = null; }
-            var 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!')
-         */
-        EqpDynamicModuleDialogService.Warning = function (message, title, isToast) {
-            if (title === void 0) { title = null; }
-            if (isToast === void 0) { isToast = null; }
-            var currentTitle = title != null ? title : "Attenzione!";
-            if (Array.isArray(message)) {
-                var htmlWarnings = message.join("<br>");
-                Swal.fire({
-                    title: currentTitle,
-                    html: htmlWarnings,
-                    icon: 'warning'
-                });
-            }
-            else {
-                Swal.fire(currentTitle, message, 'warning');
-            }
-        };
-        EqpDynamicModuleDialogService.ɵprov = core.ɵɵdefineInjectable({ factory: function EqpDynamicModuleDialogService_Factory() { return new EqpDynamicModuleDialogService(); }, token: EqpDynamicModuleDialogService, providedIn: "root" });
-        EqpDynamicModuleDialogService = __decorate([
-            core.Injectable({
-                providedIn: 'root'
+        __decorate([
+            core.Output()
+        ], EqpDynamicModuleComponent.prototype, "afterSaveRecord", void 0);
+        __decorate([
+            core.Output()
+        ], EqpDynamicModuleComponent.prototype, "afterDeleteRecord", void 0);
+        __decorate([
+            core.Output()
+        ], EqpDynamicModuleComponent.prototype, "afterDuplicateRecord", void 0);
+        EqpDynamicModuleComponent = __decorate([
+            core.Component({
+                selector: 'eqp-dynamic-module',
+                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%}"]
             })
-        ], EqpDynamicModuleDialogService);
-        return EqpDynamicModuleDialogService;
+        ], EqpDynamicModuleComponent);
+        return EqpDynamicModuleComponent;
+    }());
+
+    var MaterialModule = /** @class */ (function () {
+        function MaterialModule() {
+        }
+        MaterialModule = __decorate([
+            core.NgModule({
+                imports: [
+                    checkbox.MatCheckboxModule,
+                    button.MatButtonModule,
+                    input.MatInputModule,
+                    autocomplete.MatAutocompleteModule,
+                    datepicker.MatDatepickerModule,
+                    formField.MatFormFieldModule,
+                    radio.MatRadioModule,
+                    select.MatSelectModule,
+                    slider.MatSliderModule,
+                    slideToggle.MatSlideToggleModule,
+                    menu.MatMenuModule,
+                    sidenav.MatSidenavModule,
+                    toolbar.MatToolbarModule,
+                    list.MatListModule,
+                    gridList.MatGridListModule,
+                    card.MatCardModule,
+                    stepper.MatStepperModule,
+                    tabs.MatTabsModule,
+                    expansion.MatExpansionModule,
+                    buttonToggle.MatButtonToggleModule,
+                    chips.MatChipsModule,
+                    icon.MatIconModule,
+                    progressSpinner.MatProgressSpinnerModule,
+                    progressBar.MatProgressBarModule,
+                    dialog.MatDialogModule,
+                    tooltip.MatTooltipModule,
+                    snackBar.MatSnackBarModule,
+                    table.MatTableModule,
+                    sort.MatSortModule,
+                    paginator.MatPaginatorModule,
+                    datepicker.MatDatepickerModule,
+                    core$1.MatNativeDateModule
+                ],
+                exports: [
+                    checkbox.MatCheckboxModule,
+                    button.MatButtonModule,
+                    input.MatInputModule,
+                    autocomplete.MatAutocompleteModule,
+                    datepicker.MatDatepickerModule,
+                    formField.MatFormFieldModule,
+                    radio.MatRadioModule,
+                    select.MatSelectModule,
+                    slider.MatSliderModule,
+                    slideToggle.MatSlideToggleModule,
+                    menu.MatMenuModule,
+                    sidenav.MatSidenavModule,
+                    toolbar.MatToolbarModule,
+                    list.MatListModule,
+                    gridList.MatGridListModule,
+                    card.MatCardModule,
+                    stepper.MatStepperModule,
+                    tabs.MatTabsModule,
+                    expansion.MatExpansionModule,
+                    buttonToggle.MatButtonToggleModule,
+                    chips.MatChipsModule,
+                    icon.MatIconModule,
+                    progressSpinner.MatProgressSpinnerModule,
+                    progressBar.MatProgressBarModule,
+                    dialog.MatDialogModule,
+                    tooltip.MatTooltipModule,
+                    snackBar.MatSnackBarModule,
+                    table.MatTableModule,
+                    sort.MatSortModule,
+                    paginator.MatPaginatorModule
+                ],
+            })
+        ], MaterialModule);
+        return MaterialModule;
     }());
 
     var EqpDynamicModuleConfiguratorComponent = /** @class */ (function () {
-        function EqpDynamicModuleConfiguratorComponent(formBuilder, dialog) {
+        function EqpDynamicModuleConfiguratorComponent(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 = exports.FormTypeEnum;
             this.FormScalarTypeEnum = exports.FormScalarTypeEnum;
             //#endregion
+            /**
+             * Evento emesso quando si salva una form e non è stato specificato un endpoint da chiamare.
+             */
             this.saveFormEvent = new core.EventEmitter();
+            /**
+             * Evento emesso DOPO aver eseguito una chiamata al server per il salvataggiodi una form all'endpoint specificato.
+             */
+            this.afterSaveFormEvent = new core.EventEmitter();
         }
         EqpDynamicModuleConfiguratorComponent.prototype.ngOnInit = function () {
+            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.
+         */
+        EqpDynamicModuleConfiguratorComponent.prototype.configureDefaultEndPoints = function () {
+            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: exports.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.
+         */
+        EqpDynamicModuleConfiguratorComponent.prototype.getFormByID = function () {
+            var _this = this;
+            if (this.formID && this.endPointConfiguration && this.endPointConfiguration.Forms && this.endPointConfiguration.Forms.GetByIDEndPoint) {
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.GetByIDEndPoint, null, function (res) {
+                    _this.setFormAndConfigure(res);
+                }, function (err) {
+                    _this.setFormAndConfigure(new Form());
+                });
+            }
+            else {
+                this.setFormAndConfigure();
+            }
         };
         /**
          * Metodo invocato al cambio del tipo di visualizzazione della form.
@@ -1121,10 +1632,54 @@
             }
         };
         /**
-         * 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 }.
          */
         EqpDynamicModuleConfiguratorComponent.prototype.saveForm = function () {
-            this.saveFormEvent.emit(this.form);
+            var _this = this;
+            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.
+                var formToSave_1 = 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_1.Fields = [];
+                this.form.Fields.forEach(function (field) {
+                    var fld = UtilityHelperService.GetFieldType(field);
+                    formToSave_1.Fields.push(fld);
+                });
+                var dynamicModuleParams = [
+                    { ParamName: "Form", ParamValue: formToSave_1, ParamType: exports.ParamTypeEnum['In Body'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Forms.SaveEndPoint, dynamicModuleParams, function (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.
+         */
+        EqpDynamicModuleConfiguratorComponent.prototype.setFormAndConfigure = function (form) {
+            if (form === void 0) { form = null; }
+            if (form != null) {
+                this.form = form;
+            }
+            this.configureColumns();
+            this.createFormForm();
         };
         /**
          * Configura le colonne per le tabelle necessarie alla creazione della form:
@@ -1318,7 +1873,8 @@
         };
         EqpDynamicModuleConfiguratorComponent.ctorParameters = function () { return [
             { type: forms.FormBuilder },
-            { type: dialog.MatDialog }
+            { type: dialog.MatDialog },
+            { type: UtilityHelperService }
         ]; };
         __decorate([
             core.Input()
@@ -1326,9 +1882,21 @@
         __decorate([
             core.Input()
         ], EqpDynamicModuleConfiguratorComponent.prototype, "form", void 0);
+        __decorate([
+            core.Input()
+        ], EqpDynamicModuleConfiguratorComponent.prototype, "formID", void 0);
         __decorate([
             core.Input()
         ], EqpDynamicModuleConfiguratorComponent.prototype, "innerFormManagment", void 0);
+        __decorate([
+            core.Input()
+        ], EqpDynamicModuleConfiguratorComponent.prototype, "baseServerUrl", void 0);
+        __decorate([
+            core.Input()
+        ], EqpDynamicModuleConfiguratorComponent.prototype, "userToken", void 0);
+        __decorate([
+            core.Input()
+        ], EqpDynamicModuleConfiguratorComponent.prototype, "endPointConfiguration", void 0);
         __decorate([
             core.ViewChild('fieldsTable', { static: false })
         ], EqpDynamicModuleConfiguratorComponent.prototype, "fieldsTable", void 0);
@@ -1350,10 +1918,13 @@
         __decorate([
             core.Output()
         ], EqpDynamicModuleConfiguratorComponent.prototype, "saveFormEvent", void 0);
+        __decorate([
+            core.Output()
+        ], EqpDynamicModuleConfiguratorComponent.prototype, "afterSaveFormEvent", void 0);
         EqpDynamicModuleConfiguratorComponent = __decorate([
             core.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);
@@ -1425,6 +1996,11 @@
         }
         return ListValueField;
     }(BaseField));
+    var ButtonImage = /** @class */ (function () {
+        function ButtonImage() {
+        }
+        return ButtonImage;
+    }());
 
     (function (ListPresentationEnum) {
         ListPresentationEnum[ListPresentationEnum["Combo box"] = 1] = "Combo box";
@@ -1435,10 +2011,11 @@
 
     var AddFormFieldComponent = /** @class */ (function () {
         //#endregion
-        function AddFormFieldComponent(formBuilder, enumHelper, dialog) {
+        function AddFormFieldComponent(formBuilder, enumHelper, dialog, cdr) {
             this.formBuilder = formBuilder;
             this.enumHelper = enumHelper;
             this.dialog = dialog;
+            this.cdr = cdr;
             this.fieldTypesToExclude = [exports.FieldTypeEnum['Form di dettaglio']];
             this.keyValueObject = { key: '', value: '' };
             this.availableColSpanSizes = [];
@@ -1451,6 +2028,8 @@
             this.BoolPresentantioEnum = exports.BoolPresentantioEnum;
             this.DateTimeTypeEnum = exports.DateTimeTypeEnum;
             this.ListPresentationEnum = exports.ListPresentationEnum;
+            this.TextMaskEnum = exports.TextMaskEnum;
+            this.AttachmentType = eqpAttachments.AttachmentType;
         }
         AddFormFieldComponent.prototype.ngOnInit = function () {
             var _this = this;
@@ -1489,7 +2068,7 @@
                 Required: [this.field.Required],
                 FieldType: [this.field.FieldType, forms.Validators.required],
                 Formula: [this.field.Formula],
-                ColSizes: [this.field.ColSizes],
+                ColSpanSizes: [this.field.ColSpanSizes],
                 InListView: [this.field.InListView],
             });
             if (this.formFieldsGroups) {
@@ -1508,7 +2087,7 @@
             if (restoreField)
                 this.restoreBaseFieldProperties();
             this.createFieldForm();
-            this.onColSizeSelect();
+            this.onColSpanSizeSelect();
             this.fieldTypeFormTemplate = null;
             switch (this.field.FieldType) {
                 case exports.FieldTypeEnum['Campo di testo']:
@@ -1532,13 +2111,16 @@
                     this.fieldFormGroup.addControl('IsOnlyDate', new forms.FormControl(this.field.IsOnlyDate, forms.Validators.required));
                     this.fieldFormGroup.addControl('MinDate', new forms.FormControl(this.field.MinDate));
                     this.fieldFormGroup.addControl('MaxDate', new forms.FormControl(this.field.MaxDate));
+                    this.fieldFormGroup.addControl('DateFormat', new forms.FormControl(this.field.DateFormat));
                     this.fieldTypeFormTemplate = this.dateFieldFormTemplate;
                     break;
                 case exports.FieldTypeEnum['Campo numerico']:
                     this.fieldFormGroup.addControl('IsInteger', new forms.FormControl(this.field.IsInteger));
                     this.fieldFormGroup.addControl('MinValue', new forms.FormControl(this.field.MinValue));
                     this.fieldFormGroup.addControl('MaxValue', new forms.FormControl(this.field.MaxValue));
-                    this.fieldFormGroup.addControl('NumberFormat', new forms.FormControl(this.field.NumberFormat));
+                    this.fieldFormGroup.addControl('DecimalSeparator', new forms.FormControl(this.field.DecimalSeparator));
+                    this.fieldFormGroup.addControl('DecimalPrecision', new forms.FormControl(this.field.DecimalPrecision));
+                    this.fieldFormGroup.addControl('ThousandsSeparator', new forms.FormControl(this.field.ThousandsSeparator));
                     this.fieldFormGroup.addControl('CurrencySymbol', new forms.FormControl(this.field.CurrencySymbol));
                     this.fieldTypeFormTemplate = this.numericFieldFormTemplate;
                     break;
@@ -1549,11 +2131,10 @@
                     break;
                 case exports.FieldTypeEnum.Immagine:
                     this.field.AttachDefinition = new AttachmentField();
-                    this.fieldFormGroup.addControl('IsMultiAttach', new forms.FormControl(this.field.AttachDefinition.IsMultiAttach));
-                    // this.fieldFormGroup.addControl('ImgName', new FormControl((this.field as ImageField).ImgName, Validators.required));
-                    this.fieldFormGroup.addControl('IsMultiPoint', new forms.FormControl(this.field.IsMultiPoint));
-                    this.fieldFormGroup.addControl("AllowedExtensions", new forms.FormControl(this.field.AttachDefinition.AllowedExtensions));
+                    this.fieldFormGroup.addControl('EnableDrawing', new forms.FormControl(this.field.EnableDrawing));
                     this.fieldFormGroup.addControl('ImageIsContextualAttachment', new forms.FormControl(this.field.ImageIsContextualAttachment));
+                    // Imposto i FormControl variabili.
+                    this.onImageIsContextualAttachmentChange();
                     this.fieldTypeFormTemplate = this.imageFieldFormTemplate;
                     break;
                 case exports.FieldTypeEnum['Elenco generico']:
@@ -1570,11 +2151,51 @@
             if ([exports.FieldTypeEnum.Allegato, exports.FieldTypeEnum.Immagine, exports.FieldTypeEnum['Form di dettaglio']].includes(this.field.FieldType)) {
                 this.field.Formula = null;
                 this.fieldFormGroup.controls["Formula"].disable();
+                this.fieldFormGroup.controls["InListView"].disable();
             }
             else {
                 this.fieldFormGroup.controls["Formula"].enable();
+                this.fieldFormGroup.controls["InListView"].enable();
+            }
+        };
+        /**
+         * Metodo invocato al cambio del valore della proprietà ImageIsContextualAttachment nel caso
+         * di campi di tipo Immagine. Se TRUE allora rimuove i FormControl per le proprietà IsMultiAttach
+         * e AllowedExtensions e aggiunge i FormControl per le proprietà ImgName e ContextualAttachment,
+         * altrimenti il contrario.
+         */
+        AddFormFieldComponent.prototype.onImageIsContextualAttachmentChange = function () {
+            this.field.ImgName = null;
+            this.field.AttachDefinition.AllowedExtensions = [];
+            this.field.AttachDefinition.IsMultiAttach = false;
+            this.field.ContextualAttachment = null;
+            if (this.field.ImageIsContextualAttachment) {
+                this.fieldFormGroup.removeControl("IsMultiAttach");
+                this.fieldFormGroup.removeControl("AllowedExtensions");
+                this.fieldFormGroup.addControl('ImgName', new forms.FormControl(this.field.ImgName, forms.Validators.required));
+                this.fieldFormGroup.addControl('ContextualAttachment', new forms.FormControl(this.field.ContextualAttachment, forms.Validators.required));
+            }
+            else {
+                this.fieldFormGroup.removeControl("ImgName");
+                this.fieldFormGroup.removeControl("ContextualAttachment");
+                this.fieldFormGroup.addControl('IsMultiAttach', new forms.FormControl(this.field.AttachDefinition.IsMultiAttach));
+                this.fieldFormGroup.addControl("AllowedExtensions", new forms.FormControl(this.field.AttachDefinition.AllowedExtensions));
             }
         };
+        /**
+         * Metodo per intercettare l'aggiunta di un allegato nei campi di tipo Immagine per aggiornare
+         * il valore della proprietà ContextualAttachment e la validazione del relativo FormControl.
+         * @param event Array contenente l'elenco aggiornato degli allegati caricati (nel nostro caso ne contiene al più 1).
+         */
+        AddFormFieldComponent.prototype.catchContextualAttachmentChange = function (event) {
+            if (event && event.length > 0) {
+                this.field.ContextualAttachment = event[0];
+            }
+            else {
+                this.field.ContextualAttachment = null;
+            }
+            this.fieldFormGroup.controls['ContextualAttachment'].setValue(this.field.ContextualAttachment);
+        };
         /**
          * Metodo invocato alla selezione di una classe nella select per le colonne di bootstrap
          * da usare nella visualizzazione del campo. Questa funzione manipola la sorgente dati per
@@ -1583,17 +2204,50 @@
          * 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.
          */
-        AddFormFieldComponent.prototype.onColSizeSelect = function () {
+        AddFormFieldComponent.prototype.onColSpanSizeSelect = function () {
             // Recupero l'array degli oggetti chiave-valore che rappreseta l'enumeratore
             var colSizeClassEnumArray = this.enumHelper.getEnumArray(exports.ColSpanSizesEnum, false, null);
             // Costruisco l'array delle classi selezionate dall'utente in formato stringa
-            var selectedDimensions = this.field.ColSizes ? this.field.ColSizes.map(function (col) { return exports.ColSpanSizesEnum[col]; }) : [];
+            var selectedDimensions = this.field.ColSpanSizes ? this.field.ColSpanSizes.map(function (col) { return exports.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(function (value) {
                 return !selectedDimensions.find(function (col) { return 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.
+         */
+        AddFormFieldComponent.prototype.onPresentationModeChange = function () {
+            if (this.field.PresentationMode === exports.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.
+         */
+        AddFormFieldComponent.prototype.configureButtonImagesColumns = function (component) {
+            component.attachmentsColumns.splice(component.attachmentsColumns.length - 1, 0, { key: "ButtonKey", display: "Label", type: eqpTable.TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn });
+            component.attachmentsColumns.splice(component.attachmentsColumns.length - 1, 0, { key: "ButtonValue", display: "Valore", type: eqpTable.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.
+         */
+        AddFormFieldComponent.prototype.catchButtonImagesChange = function (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
@@ -1741,7 +2395,14 @@
             }
             switch (this.field.FieldType) {
                 case exports.FieldTypeEnum['Elenco generico']:
-                    return !this.field.ValuePairs || this.field.ValuePairs.length === 0;
+                    if (this.field.PresentationMode != exports.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(function (i) { return !i.ButtonKey || !i.ButtonValue; }));
+                    }
                 case exports.FieldTypeEnum.Lookup:
                     return !this.field.FieldNames || this.field.FieldNames.length === 0;
                 default:
@@ -1775,7 +2436,7 @@
                 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;
             }
         };
@@ -1853,7 +2514,8 @@
         AddFormFieldComponent.ctorParameters = function () { return [
             { type: forms.FormBuilder },
             { type: eqpSelect.EnumHelper },
-            { type: dialog.MatDialog }
+            { type: dialog.MatDialog },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.Input()
@@ -1906,10 +2568,13 @@
         __decorate([
             core.ViewChild('dialogMetadata', { static: true })
         ], AddFormFieldComponent.prototype, "dialogMetadata", void 0);
+        __decorate([
+            core.ViewChild('buttonImagesKeyValueInputColumn', { static: true })
+        ], AddFormFieldComponent.prototype, "buttonImagesKeyValueInputColumn", void 0);
         AddFormFieldComponent = __decorate([
             core.Component({
                 selector: 'eqp-dynamic-module-add-form-field',
-                template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <!-- <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\">\n        </mat-form-field>\n    </div> -->\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiPoint\" formControlName=\"IsMultiPoint\" color=\"primary\">\n            Immagine multi-point\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\">\n            Carica immagine come allegato\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
+                template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\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);
@@ -1919,6 +2584,7 @@
     var TextFieldTemplateComponent = /** @class */ (function () {
         function TextFieldTemplateComponent() {
             this.recordChange = new core.EventEmitter();
+            this.InputMaskEnum = exports.TextMaskEnum;
         }
         TextFieldTemplateComponent.prototype.ngOnInit = function () {
         };
@@ -1929,6 +2595,20 @@
                 this.updateField();
             }
         };
+        TextFieldTemplateComponent.prototype.getInputType = function () {
+            switch (this.field.TextMask) {
+                case exports.TextMaskEnum.Email:
+                    return 'email';
+                case exports.TextMaskEnum.Password:
+                    return 'password';
+                case exports.TextMaskEnum.Telefono:
+                    return 'tel';
+                case exports.TextMaskEnum.Url:
+                    return 'url';
+                default:
+                    return 'text';
+            }
+        };
         /**
          * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
          */
@@ -1957,7 +2637,7 @@
         TextFieldTemplateComponent = __decorate([
             core.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);
@@ -2009,7 +2689,7 @@
         BooleanFieldTemplateComponent = __decorate([
             core.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);
@@ -2075,7 +2755,7 @@
         DateFieldTemplateComponent = __decorate([
             core.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);
@@ -2123,7 +2803,7 @@
         TextareaFieldTemplateComponent = __decorate([
             core.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);
@@ -2166,10 +2846,17 @@
          */
         NumericFieldTemplateComponent.prototype.configureEqpNumericOptions = function () {
             this.eqpNumericOptions.prefix = this.field.CurrencySymbol ? this.field.CurrencySymbol : "";
+            this.eqpNumericOptions.inputMode = this.field.CurrencySymbol ? eqpNumeric.EqpNumericInputMode.FINANCIAL : eqpNumeric.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([
             core.Input()
@@ -2183,7 +2870,7 @@
         NumericFieldTemplateComponent = __decorate([
             core.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);
@@ -2221,26 +2908,17 @@
                 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]
-         */
-        ListValueFieldTemplateComponent.prototype.getSelectButtonClass = function (data) {
-            var 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
          */
         ListValueFieldTemplateComponent.prototype.buttonSelectClick = function (data) {
+            data.Selected = !data.Selected;
             if (this.field.IsMultiChoiche) {
-                data.Selected = !data.Selected;
                 this.updateSelected(false);
             }
             else {
+                this.arrayData.filter(function (d) { return d.Key != data.Key && d.Value != data.Value; }).forEach(function (d) { return d.Selected = false; });
                 this.record[this.field.Name] = data.Value;
             }
             this.onRecordValueChange();
@@ -2270,16 +2948,23 @@
          */
         ListValueFieldTemplateComponent.prototype.setArrayData = function () {
             var _this = this;
-            Object.keys(this.field.ValuePairs).forEach(function (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(function (v) { return 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 != exports.ListPresentationEnum.Immagini) {
+                Object.keys(this.field.ValuePairs).forEach(function (k) { _this.createArrayDataElement(k, _this.field.ValuePairs[k]); });
+            }
+            else {
+                this.field.ButtonImageList.forEach(function (i) { _this.createArrayDataElement(i.ButtonKey, i.ButtonValue, 'data:' + i.FileContentType + ';base64,' + i.FileDataBase64); });
+            }
+        };
+        ListValueFieldTemplateComponent.prototype.createArrayDataElement = function (key, value, imgUrl) {
+            if (imgUrl === void 0) { 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(function (v) { return 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.
@@ -2299,39 +2984,21 @@
         ListValueFieldTemplateComponent = __decorate([
             core.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);
         return ListValueFieldTemplateComponent;
     }());
 
     var AttachmentFieldTemplateComponent = /** @class */ (function () {
-        //#endregion
         function AttachmentFieldTemplateComponent(utilityService, cdr) {
             this.utilityService = utilityService;
             this.cdr = cdr;
             this.onlyImages = false;
             this.recordChange = new core.EventEmitter();
+            this.onAttachmentsChange = new core.EventEmitter();
             this.metadataFormGroups = new Array();
-            //#region Etichette per eqp-attachments
-            this.previewLabel = "Anteprima";
-            this.emptyTableMessage = "No record found";
-            this.downloadTooltipPosition = "below";
-            this.openLinkLabel = "Apri link";
-            this.addButtonLabel = "Aggiungi";
-            this.downloadLabel = "Download";
-            this.deleteLabel = "Elimina";
-            this.fileNameLabel = "Nome file";
-            this.uploadFileLabel = "Carica file";
-            this.confirmLabel = "Conferma";
-            this.abortLabel = "Annulla";
-            this.saveLabel = "Salva";
-            this.exitLabel = "Esci";
-            this.eqpTableSearchText = "Cerca...";
-            this.deleteDialogTitle = "Attenzione:";
-            this.deleteDialogMessage = "Sicuro di voler eliminare questo allegato?";
-            this.noImageSelectedErrorMessage = "Nessuna immagine selezionata!";
         }
         AttachmentFieldTemplateComponent.prototype.ngOnInit = function () {
             // Nel caso in cui sono in modifica di un Record aggiorno il valore
@@ -2382,6 +3049,10 @@
             this.createMetadataFormGroups();
             this.setFormControlValue();
             this.onRecordValueChange();
+            // Scateno un evento di output necessario al componente ImageFieldTemplate al
+            // variare degli allegati caricati. Viene usato per aprire il dialog per disegnare
+            // sull'immagine caricata in base alla configurazione del Field.
+            this.onAttachmentsChange.emit();
             this.cdr.detectChanges();
         };
         /**
@@ -2468,6 +3139,9 @@
         __decorate([
             core.Output()
         ], AttachmentFieldTemplateComponent.prototype, "recordChange", void 0);
+        __decorate([
+            core.Output()
+        ], AttachmentFieldTemplateComponent.prototype, "onAttachmentsChange", void 0);
         __decorate([
             core.ViewChild("eqpAttachments", { static: true })
         ], AttachmentFieldTemplateComponent.prototype, "eqpAttachments", void 0);
@@ -2477,16 +3151,38 @@
         AttachmentFieldTemplateComponent = __decorate([
             core.Component({
                 selector: 'attachment-field-template',
-                template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\" [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" [previewLabel]=\"previewLabel\"\n    [emptyTableMessage]=\"emptyTableMessage\" [downloadTooltipPosition]=\"downloadTooltipPosition\"\n    [openLinkLabel]=\"openLinkLabel\" [addButtonLabel]=\"addButtonLabel\" [downloadLabel]=\"downloadLabel\"\n    [deleteLabel]=\"deleteLabel\" [fileNameLabel]=\"fileNameLabel\" [uploadFileLabel]=\"uploadFileLabel\"\n    [confirmLabel]=\"confirmLabel\" [abortLabel]=\"abortLabel\" [saveLabel]=\"saveLabel\" [exitLabel]=\"exitLabel\"\n    [eqpTableSearchText]=\"eqpTableSearchText\" [deleteDialogTitle]=\"deleteDialogTitle\"\n    [deleteDialogMessage]=\"deleteDialogMessage\" [noImageSelectedErrorMessage]=\"noImageSelectedErrorMessage\"\n    (localEditedAttachments)=\"catchAttachmentList($event)\" #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
+                template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\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);
         return AttachmentFieldTemplateComponent;
     }());
 
+    /**
+     * Metodo per recuperare, a partire da un Blob, la stringa contenente il base64 del file.
+     * Usato per prendere il base64 dell'immagine dopo che l'utente ci ha disegnato sopra.
+     * @param file Blob che rappresenta l'immagine.
+     */
+    var toBase64 = function (file) { return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function () { return resolve(reader.result.toString()); };
+        reader.onerror = function (error) { return reject(error); };
+    }); };
+    var ɵ0 = toBase64;
     var ImageFieldTemplateComponent = /** @class */ (function () {
-        function ImageFieldTemplateComponent() {
+        //#endregion
+        function ImageFieldTemplateComponent(dialog, utilityService) {
+            this.dialog = dialog;
+            this.utilityService = utilityService;
             this.recordChange = new core.EventEmitter();
+            //#region Proprietà per configurare il componente ngx-image-drawing e aprire il relativo dialog.
+            this.width = null;
+            this.height = null;
+            this.i18n = {
+                saveBtn: 'Salva modifiche',
+                cancelBtn: 'Ricarica originale'
+            };
         }
         ImageFieldTemplateComponent.prototype.ngOnInit = function () {
             this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
@@ -2499,6 +3195,19 @@
             this.field.AttachDefinition.Required = this.field.Required;
             this.field.AttachDefinition.Formula = this.field.Formula;
             this.field.AttachDefinition.FieldValue = this.field.FieldValue;
+            // Se il campo prevede un'immagine pre-caricata (ImageIsContextualAttachment == true) sulla quale 
+            // l'utente può disegnare (EnableDrawing == true) e non sono in modifica di un record (ovvero nel record
+            // non ho un'immagine già salvata) allora imposta l'immagine pre caricata come valore iniziale
+            // nel record corrente e ne recupera le dimensioni per visualizzare correttamente l'area in cui  
+            // l'utente può disegnare. Se non effettua modifiche o non salva i disegni fatti viene salvata
+            // l'immagine originale.
+            if (this.field.ImageIsContextualAttachment && this.field.ContextualAttachment) {
+                if (!this.record[this.field.Name] || !Array.isArray(this.record[this.field.Name]) || !(this.record[this.field.Name].length > 0)) {
+                    this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+                }
+                this.preLoadedImageMetadataFormGroup = this.utilityService.CreateFormFormGroup(this.field.AttachDefinition.MetadataFields, this.record[this.field.Name][0]);
+                this.getImageDimensions();
+            }
         };
         ImageFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
             // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
@@ -2507,6 +3216,15 @@
                 this.updateField();
             }
         };
+        ImageFieldTemplateComponent.prototype.updateMetadataValidity = function () {
+            if (this.preLoadedImageMetadataFormGroup.invalid) {
+                this.field.FormFormGroup.controls[this.field.Name].setErrors({ 'incorrect': true });
+            }
+            else {
+                this.field.FormFormGroup.controls[this.field.Name].setErrors(null);
+            }
+            this.onRecordValueChange();
+        };
         /**
          * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
          */
@@ -2515,6 +3233,108 @@
                 this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
             }
         };
+        ImageFieldTemplateComponent.prototype.resetPreLoadedImage = function () {
+            this.width = null;
+            this.height = null;
+            this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+            this.getImageDimensions();
+        };
+        /**
+         * Metodo invocato quando vengono aggiunti o eliminati gli allegati nel componente AttachmentFieldTemplate.
+         * Se l'ImageField è abilitato al disegno (EnableDrawing == true), non permette allegati multipli (IsMulitAttach == false)
+         * e nel Record corrente è presente l'immagine caricata dall'utente allora recupera le dimensioni dell'immagine e
+         * apre il dialog con il componente image-drawing per permettere il disegno sull'immagine appena caricata.
+         */
+        ImageFieldTemplateComponent.prototype.onAttachmentsChange = function () {
+            if (!this.field.AttachDefinition.IsMultiAttach && this.field.EnableDrawing && this.record[this.field.Name] && this.record[this.field.Name][0]) {
+                this.getImageDimensions();
+                this.dialogImageDrowingRef = this.dialog.open(this.dialogImageDrowing, {
+                    disableClose: true,
+                    hasBackdrop: true,
+                    width: '75%'
+                });
+            }
+        };
+        /**
+         * Metodo invocato al salvataggio dell'immagine dal componente image-drawing.
+         * Trasforma il Blob ricevuto in un base64, aggiorna il FileContetType e il FileDataBase64
+         * dell'allegato caricato e chiude il dialog in cui disegnare.
+         * @param drawnPicture Blob dell'immagine disegnata.
+         */
+        ImageFieldTemplateComponent.prototype.saveDrowning = function (drawnPicture) {
+            return __awaiter(this, void 0, void 0, function () {
+                var base64File;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, toBase64(drawnPicture)];
+                        case 1:
+                            base64File = _a.sent();
+                            if (base64File) {
+                                this.record[this.field.Name][0].FileContentType = base64File.split(",")[0].split(":")[1].split(";")[0];
+                                this.record[this.field.Name][0].FileDataBase64 = base64File.split(",")[1];
+                            }
+                            if (this.dialogImageDrowingRef) {
+                                this.closeImageDrowingDialog();
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Metodo per chiudere il dialog in cui disegnare sull'immagine cariata e svuotare le dimensioni.
+         */
+        ImageFieldTemplateComponent.prototype.closeImageDrowingDialog = function () {
+            this.dialogImageDrowingRef.close();
+            this.width = null;
+            this.height = null;
+        };
+        /**
+         * Metodo per recuperare le dimensioni dell'immagine caricata per mostrare correttamente
+         * il componente image-drawing. Se non viene eseguito questo passaggio l'area in cui disegnare
+         * è più grande dell'immagine stessa e al salvataggio i tratti disegnati vengono spostati.
+         */
+        ImageFieldTemplateComponent.prototype.getImageDimensions = function () {
+            var _this = this;
+            var blob = this.getBlobFromBase64();
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                var image = new Image();
+                image.src = e.target.result;
+                image.onload = function (rs) {
+                    _this.height = rs.currentTarget['height'];
+                    _this.width = rs.currentTarget['width'];
+                };
+            };
+            reader.readAsDataURL(blob);
+        };
+        /**
+         * Metodo per convertire il base64 di un'immagine in un Blob.
+         * Necessario per il recupero delle dimensioni dell'immagine caricata a partire dal suo base64.
+         * Viene eseguito solo nel caso in cui l'ImageField non ammette allegati multipli.
+         * @returns Restituisce il Blob dell'immagine caricata.
+         */
+        ImageFieldTemplateComponent.prototype.getBlobFromBase64 = function () {
+            var byteCharacters = atob(this.record[this.field.Name][0].FileDataBase64);
+            var byteNumbers = new Array(byteCharacters.length);
+            for (var i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            var byteArray = new Uint8Array(byteNumbers);
+            return new Blob([byteArray], { type: this.record[this.field.Name][0].FileContentType });
+        };
+        /**
+         * Metodo per emettere l'evento che il valore del record è cambiato.
+         */
+        ImageFieldTemplateComponent.prototype.onRecordValueChange = function () {
+            if (!this.field.Formula) {
+                this.recordChange.emit(this.record);
+            }
+        };
+        ImageFieldTemplateComponent.ctorParameters = function () { return [
+            { type: dialog.MatDialog },
+            { type: UtilityHelperService }
+        ]; };
         __decorate([
             core.Input()
         ], ImageFieldTemplateComponent.prototype, "record", void 0);
@@ -2524,11 +3344,14 @@
         __decorate([
             core.Output()
         ], ImageFieldTemplateComponent.prototype, "recordChange", void 0);
+        __decorate([
+            core.ViewChild("dialogImageDrowing", { static: true })
+        ], ImageFieldTemplateComponent.prototype, "dialogImageDrowing", void 0);
         ImageFieldTemplateComponent = __decorate([
             core.Component({
                 selector: 'image-field-template',
-                template: "<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\"\n     [onlyImages]=\"true\">\n</attachment-field-template>",
-                styles: [""]
+                template: "<!-- VISUALIZZAZIONE ALLEGATO PRE CARICATO CON POSSIBILITA' DI DISEGNO -->\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);
         return ImageFieldTemplateComponent;
@@ -2609,30 +3432,14 @@
          * @param record Record da duplicare.
          */
         ListFormRecordComponent.prototype.duplicateRecord = function (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.
          */
         ListFormRecordComponent.prototype.deleteRecord = function (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.
@@ -2675,7 +3482,7 @@
                             column.format = "dd/MM/yyyy HH:mm";
                         }
                         else if (field.IsOnlyDate == exports.DateTimeTypeEnum['Solo data']) {
-                            column.format = "dd/MM/yyyy";
+                            column.format = field.DateFormat ? field.DateFormat.replace("DD", "dd") : "dd/MM/yyyy";
                         }
                     }
                     break;
@@ -2763,12 +3570,6 @@
         return ListFormRecordComponent;
     }());
 
-    var Record = /** @class */ (function () {
-        function Record() {
-        }
-        return Record;
-    }());
-
     var AddFormRecordComponent = /** @class */ (function () {
         function AddFormRecordComponent(cdr, utilityService) {
             this.cdr = cdr;
@@ -2888,7 +3689,7 @@
         AddFormRecordComponent = __decorate([
             core.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);
@@ -3010,13 +3811,33 @@
         DynamicModuleFieldComponent = __decorate([
             core.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);
         return DynamicModuleFieldComponent;
     }());
 
+    var SpinnerComponent = /** @class */ (function () {
+        function SpinnerComponent(spinnerService) {
+            this.spinnerService = spinnerService;
+            this.isLoading = this.spinnerService.isLoading;
+        }
+        SpinnerComponent.prototype.ngOnInit = function () {
+        };
+        SpinnerComponent.ctorParameters = function () { return [
+            { type: SpinnerService }
+        ]; };
+        SpinnerComponent = __decorate([
+            core.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);
+        return SpinnerComponent;
+    }());
+
     var EqpDynamicModuleModule = /** @class */ (function () {
         function EqpDynamicModuleModule() {
         }
@@ -3037,6 +3858,7 @@
                     ListFormRecordComponent,
                     AddFormRecordComponent,
                     DynamicModuleFieldComponent,
+                    SpinnerComponent,
                 ],
                 imports: [
                     platformBrowser.BrowserModule,
@@ -3049,7 +3871,8 @@
                     eqpSelect.EqpSelectModule,
                     eqpDatetimepicker.EqpDatetimepickerModule,
                     eqpFilters.EqpFiltersModule,
-                    eqpNumeric.EqpNumericModule
+                    eqpNumeric.EqpNumericModule,
+                    eqpImgDrawing.EqpImgDrawingModule
                 ],
                 exports: [
                     EqpDynamicModuleComponent,
@@ -3076,6 +3899,14 @@
         function ImageField() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        Object.defineProperty(ImageField.prototype, "_contextualAttachments", {
+            /**Proprietà per recuperare l'allegato caricato come array per eqp-attachments (se ImageIsContextualAttachment == true) */
+            get: function () {
+                return this.ContextualAttachment ? [this.ContextualAttachment] : [];
+            },
+            enumerable: true,
+            configurable: true
+        });
         return ImageField;
     }(BaseField));
 
@@ -3105,15 +3936,6 @@
         return TextareaField;
     }(BaseField));
 
-    /**Campo di testo */
-    var TextField = /** @class */ (function (_super) {
-        __extends(TextField, _super);
-        function TextField() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return TextField;
-    }(BaseField));
-
     exports.ActionOnRecord = ActionOnRecord;
     exports.AddFormFieldComponent = AddFormFieldComponent;
     exports.AddFormRecordComponent = AddFormRecordComponent;
@@ -3126,11 +3948,16 @@
     exports.BaseObj = BaseObj;
     exports.BooleanField = BooleanField;
     exports.BooleanFieldTemplateComponent = BooleanFieldTemplateComponent;
+    exports.ButtonImage = ButtonImage;
     exports.Context = Context;
     exports.ContextUser = ContextUser;
     exports.DateField = DateField;
     exports.DateFieldTemplateComponent = DateFieldTemplateComponent;
+    exports.DynRecord = DynRecord;
     exports.DynamicModuleFieldComponent = DynamicModuleFieldComponent;
+    exports.EndPointConfiguration = EndPointConfiguration;
+    exports.EndPointData = EndPointData;
+    exports.EndPointDataParams = EndPointDataParams;
     exports.Entity = Entity;
     exports.EqpDynamicModuleComponent = EqpDynamicModuleComponent;
     exports.EqpDynamicModuleConfiguratorComponent = EqpDynamicModuleConfiguratorComponent;
@@ -3147,12 +3974,17 @@
     exports.NumericField = NumericField;
     exports.NumericFieldTemplateComponent = NumericFieldTemplateComponent;
     exports.Record = Record;
+    exports.SpinnerService = SpinnerService;
+    exports.TelRegex = TelRegex;
     exports.TextField = TextField;
     exports.TextFieldTemplateComponent = TextFieldTemplateComponent;
     exports.TextareaField = TextareaField;
     exports.TextareaFieldTemplateComponent = TextareaFieldTemplateComponent;
+    exports.UrlRegex = UrlRegex;
     exports.UtilityHelperService = UtilityHelperService;
-    exports.ɵa = MaterialModule;
+    exports.ɵ0 = ɵ0;
+    exports.ɵa = SpinnerComponent;
+    exports.ɵb = MaterialModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });