@eqproject/eqp-dynamic-module 0.0.7 → 0.0.8

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

@@ -0,0 +1,3766 @@
+import { __extends, __decorate, __awaiter, __generator } from 'tslib';
+import { CommonModule } from '@angular/common';
+import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, Component, NgModule, ViewChild, ChangeDetectorRef, ViewChildren } from '@angular/core';
+import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import Swal from 'sweetalert2';
+import { HttpClient } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatListModule } from '@angular/material/list';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCardModule } from '@angular/material/card';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatDialogModule, MatDialog } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatNativeDateModule } from '@angular/material/core';
+import { TypeColumn, CellAlignmentEnum, NumberColumnPipe, EqpTableModule } from '@eqproject/eqp-table';
+import { AttachmentType, EqpAttachmentsModule } from '@eqproject/eqp-attachments';
+import { EnumHelper, EqpSelectModule } from '@eqproject/eqp-select';
+import { PickerModeEnum, EqpDatetimepickerModule } from '@eqproject/eqp-datetimepicker';
+import { EqpImgDrawingModule } from '@eqproject/eqp-img-drawing';
+import { EqpFiltersModule } from '@eqproject/eqp-filters';
+import { EqpNumericInputMode, EqpNumericModule } from '@eqproject/eqp-numeric';
+
+var Context = /** @class */ (function () {
+    function Context() {
+        this.User = new ContextUser();
+    }
+    return Context;
+}());
+var ContextUser = /** @class */ (function () {
+    function ContextUser() {
+    }
+    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;
+}());
+var ParamTypeEnum;
+(function (ParamTypeEnum) {
+    ParamTypeEnum[ParamTypeEnum["Query param"] = 1] = "Query param";
+    ParamTypeEnum[ParamTypeEnum["In route"] = 2] = "In route";
+    ParamTypeEnum[ParamTypeEnum["In Body"] = 3] = "In Body";
+})(ParamTypeEnum || (ParamTypeEnum = {}));
+var RequestMethodEnum;
+(function (RequestMethodEnum) {
+    RequestMethodEnum["GET"] = "GET";
+    RequestMethodEnum["POST"] = "POST";
+    RequestMethodEnum["PUT"] = "PUT";
+    RequestMethodEnum["DELETE"] = "DELETE";
+})(RequestMethodEnum || (RequestMethodEnum = {}));
+
+/**
+ * Classe base che implementa la valorizzazione dell'ID (se null) con una nuova GUID
+ * in creazione dell'oggetto.
+ * Per scelta architetturale, visto che non possiamo assumere la persistenza su DB relazionale o su NOSQL, ogni
+ * oggetto della configurazione viene persistito, e gestito con ID di tipo stringa creato da una GUID.
+ */
+var BaseObj = /** @class */ (function () {
+    function BaseObj() {
+    }
+    return BaseObj;
+}());
+
+/**
+ * Classe che rappresenta una Form completa.
+ * Si tratta dell'oggetto che viene rappresentato a video e con cui l'utente interagisce.
+ */
+var Form = /** @class */ (function (_super) {
+    __extends(Form, _super);
+    function Form() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Form;
+}(BaseObj));
+var FormFieldGroup = /** @class */ (function () {
+    function FormFieldGroup() {
+    }
+    return FormFieldGroup;
+}());
+var ActionOnRecord = /** @class */ (function () {
+    function ActionOnRecord() {
+    }
+    return ActionOnRecord;
+}());
+var FormTypeEnum;
+(function (FormTypeEnum) {
+    FormTypeEnum[FormTypeEnum["SCALAR"] = 1] = "SCALAR";
+    FormTypeEnum[FormTypeEnum["LIST"] = 2] = "LIST"; /* form di tipo lista che viene rappresentata con molti record */
+})(FormTypeEnum || (FormTypeEnum = {}));
+var FormScalarTypeEnum;
+(function (FormScalarTypeEnum) {
+    FormScalarTypeEnum[FormScalarTypeEnum["Semplice"] = 1] = "Semplice";
+    FormScalarTypeEnum[FormScalarTypeEnum["A step"] = 2] = "A step";
+    FormScalarTypeEnum[FormScalarTypeEnum["In tab"] = 3] = "In tab";
+    FormScalarTypeEnum[FormScalarTypeEnum["In accordion"] = 4] = "In accordion"; //GROUPED_BY_ACCORDION
+})(FormScalarTypeEnum || (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 = ɵɵdefineInjectable({ factory: function EqpDynamicModuleDialogService_Factory() { return new EqpDynamicModuleDialogService(); }, token: EqpDynamicModuleDialogService, providedIn: "root" });
+    EqpDynamicModuleDialogService = __decorate([
+        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
+ */
+var BaseField = /** @class */ (function (_super) {
+    __extends(BaseField, _super);
+    function BaseField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return BaseField;
+}(BaseObj));
+var FieldTypeEnum;
+(function (FieldTypeEnum) {
+    FieldTypeEnum[FieldTypeEnum["Campo di testo"] = 1] = "Campo di testo";
+    FieldTypeEnum[FieldTypeEnum["Area di testo"] = 2] = "Area di testo";
+    FieldTypeEnum[FieldTypeEnum["Booleano"] = 3] = "Booleano";
+    FieldTypeEnum[FieldTypeEnum["Data e/o ora"] = 4] = "Data e/o ora";
+    FieldTypeEnum[FieldTypeEnum["Campo numerico"] = 5] = "Campo numerico";
+    FieldTypeEnum[FieldTypeEnum["Allegato"] = 6] = "Allegato";
+    FieldTypeEnum[FieldTypeEnum["Immagine"] = 7] = "Immagine";
+    FieldTypeEnum[FieldTypeEnum["Elenco generico"] = 8] = "Elenco generico";
+    FieldTypeEnum[FieldTypeEnum["Lookup"] = 9] = "Lookup";
+    FieldTypeEnum[FieldTypeEnum["Form di dettaglio"] = 10] = "Form di dettaglio";
+})(FieldTypeEnum || (FieldTypeEnum = {}));
+var ColSpanSizesEnum;
+(function (ColSpanSizesEnum) {
+    ColSpanSizesEnum[ColSpanSizesEnum["col-sm-3"] = 1] = "col-sm-3";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-sm-4"] = 2] = "col-sm-4";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-sm-6"] = 3] = "col-sm-6";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-sm-12"] = 4] = "col-sm-12";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-md-3"] = 5] = "col-md-3";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-md-4"] = 6] = "col-md-4";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-md-6"] = 7] = "col-md-6";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-md-12"] = 8] = "col-md-12";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-lg-3"] = 9] = "col-lg-3";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-lg-4"] = 10] = "col-lg-4";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-lg-6"] = 11] = "col-lg-6";
+    ColSpanSizesEnum[ColSpanSizesEnum["col-lg-12"] = 12] = "col-lg-12";
+})(ColSpanSizesEnum || (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));
+var TextMaskEnum;
+(function (TextMaskEnum) {
+    TextMaskEnum[TextMaskEnum["Password"] = 1] = "Password";
+    TextMaskEnum[TextMaskEnum["Email"] = 2] = "Email";
+    TextMaskEnum[TextMaskEnum["Telefono"] = 3] = "Telefono";
+    TextMaskEnum[TextMaskEnum["Url"] = 4] = "Url";
+})(TextMaskEnum || (TextMaskEnum = {}));
+var UrlRegex = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
+var TelRegex = '([+]?[0-9]{10,14})';
+
+var ArrayValidators = /** @class */ (function () {
+    function ArrayValidators() {
+    }
+    ArrayValidators.minLenght = function (minLenght) {
+        var validationFunction = function (control) {
+            return !!control && !!control.value && Array.isArray(control.value) && control.value.length >= minLenght
+                ? null
+                : { hasMinLenght: false };
+        };
+        return validationFunction;
+    };
+    ArrayValidators.maxLenght = function (maxLenght) {
+        var validationFunction = function (control) {
+            return !!control && !!control.value && Array.isArray(control.value) && control.value.length <= maxLenght
+                ? null
+                : { hasMinLenght: false };
+        };
+        return validationFunction;
+    };
+    return ArrayValidators;
+}());
+
+var SpinnerService = /** @class */ (function () {
+    function SpinnerService() {
+        this.isLoading = new 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 = ɵɵdefineInjectable({ factory: function SpinnerService_Factory() { return new SpinnerService(); }, token: SpinnerService, providedIn: "root" });
+    SpinnerService = __decorate([
+        Injectable({
+            providedIn: 'root'
+        })
+    ], SpinnerService);
+    return SpinnerService;
+}());
+
+var UtilityHelperService = /** @class */ (function () {
+    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);
+        return (evaluatedValue ? evaluatedValue : null);
+    };
+    UtilityHelperService.SetContext = function (ctx) {
+        this.context = ctx;
+    };
+    UtilityHelperService.GetFieldType = function (field) {
+        switch (field.FieldType) {
+            case 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.
+     * @param fields Array di BaseField aggiunti alla Form
+     * @param typedFormula Stringa digitata dall'utente
+     * @summary Il metodo imposta i suggerimenti basandosi su 3 casi:
+     *  1) l'utente non ha digitato nulla o la stringa digitata dall'utente finisce con uno spazio vuoto
+     *  2) la stringa digitata dall'utente finisce con un "."
+     *  3) la stringa digitata dall'utente non coincide con nessun altro caso sopra (finisce con un carattere qualunque)
+     */
+    UtilityHelperService.GetAutocompleteOptions = function (fields, typedFormula) {
+        var autocompleteOptions = [];
+        // Recupero i nomi di tutti i campi creati fino ad ora nella form.
+        var availableRecProperties = fields.map(function (f) { return f.Label.split(' ').join('_'); });
+        // Nel casi in cui l'utente non ha inserito nulla oppure la stringa finisce con uno spazio vuoto o un simbolo diverso da "."
+        // (un carattere non alfanumerico) imposto come suggerimenti solo "rec" e "ctx", ovvero gli unici due oggetti a cui l'utente ha accesso.
+        if (!typedFormula ||
+            (!typedFormula.endsWith(".")
+                && new RegExp("[^0-9a-zA-Z_]").test(typedFormula.substring(typedFormula.length - 1, typedFormula.length)))) {
+            autocompleteOptions = [
+                { label: "rec", value: (typedFormula ? typedFormula : '') + "rec" },
+                { label: "ctx", value: (typedFormula ? typedFormula : '') + "ctx" }
+            ];
+        }
+        // Se la stringa finisce con un "." vuol dire che l'utente sta cercando di accedere ad una proprietà di un oggetto
+        // a sua disposizione. Recupero il nome dell'ultimo oggetto digitato dall'utente e se l'oggetto scelto è "rec" o "ctx"
+        // allora suggerisco le proprietà che esistono all'interno di questi oggetti altrimenti non mostro nulla.
+        else if (typedFormula.endsWith(".")) {
+            var formulaPieces = typedFormula.split(" ")[typedFormula.split(" ").length - 1].split('.');
+            if (formulaPieces[formulaPieces.length - 2] === "rec") {
+                autocompleteOptions = availableRecProperties.map(function (f) { return { label: f, value: typedFormula + f }; });
+            }
+            else if (formulaPieces[formulaPieces.length - 2] === "ctx") {
+                autocompleteOptions = Object.keys(UtilityHelperService_1.context).map(function (f) { return { label: f, value: typedFormula + f }; });
+            }
+            else if (formulaPieces.length > 2 && formulaPieces[formulaPieces.length - 3] === "ctx" && formulaPieces[formulaPieces.length - 2] === "User") {
+                autocompleteOptions = Object.keys(UtilityHelperService_1.context.User).map(function (f) { return { label: f, value: typedFormula + f }; });
+            }
+            else {
+                autocompleteOptions = [];
+            }
+        }
+        // In tutti gli altri casi, ovvero quando la stringa digitata finisce con un carattere diverso da quelli
+        // controllati finora, vuol dire che l'utente sta digitanto il nome di un oggetto, una proprietà o una
+        // 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_1 = [];
+            // Prendo tutti i blocchi di caratteri digitati dall'utente
+            var allFormulaWords = typedFormula.split(" ");
+            // Prendo l'ultimo blocco di caratteri digitato dall'utente
+            var lastTypedString = allFormulaWords[allFormulaWords.length - 1];
+            // Se la l'ultima stringa digitata non contiene caratteri speciali allora splitto la stringa
+            // sui "." e imposto i suggerimenti in base al path della prorpietà che si sta digitando.
+            if (!new RegExp("[^0-9a-zA-Z_.]").test(lastTypedString)) {
+                var propertyPath = lastTypedString.split(".");
+                var lastTypedWork_1 = propertyPath[propertyPath.length - 1];
+                var propertiesToCheck = [];
+                if (propertyPath.length == 1) {
+                    propertiesToCheck = ["rec", "ctx"];
+                }
+                else if (propertyPath.length > 1 && propertyPath[propertyPath.length - 2] === "ctx") {
+                    propertiesToCheck = Object.keys(UtilityHelperService_1.context);
+                }
+                else if (propertyPath.length > 2 && propertyPath[propertyPath.length - 3] === "ctx" && propertyPath[propertyPath.length - 2] === "User") {
+                    propertiesToCheck = Object.keys(UtilityHelperService_1.context.User);
+                }
+                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
+                // quello che sta digitando l'utente.
+                propertiesToCheck.forEach(function (prop) {
+                    if (prop.startsWith(lastTypedWork_1)) {
+                        availableOptions_1.push({ label: prop, value: typedFormula + prop.substring(lastTypedWork_1.length, prop.length) });
+                    }
+                });
+            }
+            autocompleteOptions = availableOptions_1;
+        }
+        return autocompleteOptions;
+    };
+    /**
+     * Metodo invocato dall'html per impostare le classi css per visualizzare il campo all'interno della form.
+     * Se per il field sono state specificate delle classi allora vengono applcate quelle, altrimenti vengono usate
+     * delle classi di default.
+     * @param field BaseField da visualizzare.
+     * @returns Restituisce una stringa contenente le classi css da applicare.
+     */
+    UtilityHelperService.prototype.getFieldSyleClass = function (field) {
+        if (field.ColSpanSizes && field.ColSpanSizes.length > 0)
+            return field.ColSpanSizes.map(function (size) { return ColSpanSizesEnum[size].toString(); }).join(" ");
+        switch (field.FieldType) {
+            case FieldTypeEnum["Campo di testo"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Area di testo"]:
+                return "col-sm-12 col-md-12 col-lg-12";
+            case FieldTypeEnum["Booleano"]:
+                return "col-sm-12 col-md-4 col-lg-4 d-flex align-items-center";
+            case FieldTypeEnum["Data e/o ora"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Campo numerico"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Allegato"]:
+                if (field.IsMultiAttach ||
+                    (field.MetadataFields && field.MetadataFields.length > 0)) {
+                    return "col-sm-12 col-md-12 col-lg-12";
+                }
+                else {
+                    return "col-sm-12 col-md-4 col-lg-4";
+                }
+            case FieldTypeEnum["Immagine"]:
+                if (field.AttachDefinition.IsMultiAttach ||
+                    (field.AttachDefinition.MetadataFields && field.AttachDefinition.MetadataFields.length > 0)) {
+                    return "col-sm-12 col-md-12 col-lg-12";
+                }
+                else {
+                    return "col-sm-12 col-md-4 col-lg-4";
+                }
+            case FieldTypeEnum["Elenco generico"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum["Lookup"]:
+                return "col-sm-12 col-md-4 col-lg-4";
+            case FieldTypeEnum['Form di dettaglio']:
+                return "col-sm-12 col-md-12 col-lg-12";
+        }
+    };
+    /**
+     * Metodo per creare il FormGroup che rappresenta una Form a partire dai suoi BaseField.
+     * @param formFields Lista dei BaseField che compongono la form.
+     * @param record Oggetto di tipo Record che contiene i valori dei campi.
+     * @param onlyView Se TRUE disabilita la form per renderla in sola lettura.
+     * @param includeCurrentFormInField Se TRUE popola la proprietà FormFormGroup all'interno di ogni BaseField con il FormGroup corrente.
+     * @returns Restituisce un FormGroup rappresentate la Form a cui appartengono i BaseField ricevuti in input.
+     */
+    UtilityHelperService.prototype.CreateFormFormGroup = function (formFields, record, onlyView, includeCurrentFormInField) {
+        var _this = this;
+        if (onlyView === void 0) { onlyView = false; }
+        if (includeCurrentFormInField === void 0) { includeCurrentFormInField = true; }
+        var formForm = this.formBuilder.group([]);
+        formFields.forEach(function (field) {
+            formForm.addControl(field.Name, _this.createFieldFormControl(field, record));
+            if (includeCurrentFormInField) {
+                field.FormFormGroup = formForm;
+            }
+        });
+        if (onlyView) {
+            formForm.disable();
+        }
+        return formForm;
+    };
+    /**
+     * Funzione per creare e aggiungere al FormGroup rappresentante la form un nuovo FormControl a partire da un Field.
+     * In nuovo FormControl avrà il nome del campo passato e verranno impostati i Validators in base al tipo del campo stesso.
+     * @param field BaseField per cui creare il FormControl da inserire nel FormGroup dela form.
+     */
+    UtilityHelperService.prototype.createFieldFormControl = function (field, record) {
+        var validators = [];
+        if (field.Required)
+            validators.push(Validators.required);
+        switch (field.FieldType) {
+            case FieldTypeEnum["Campo di testo"]:
+                if (field.MaxLenght) {
+                    validators.push(Validators.maxLength(field.MaxLenght));
+                }
+                if (field.MinLenght) {
+                    validators.push(Validators.minLength(field.MinLenght));
+                }
+                switch (field.TextMask) {
+                    case TextMaskEnum.Url:
+                        validators.push(Validators.pattern(UrlRegex));
+                        break;
+                    case TextMaskEnum.Email:
+                        validators.push(Validators.email);
+                        break;
+                    case TextMaskEnum.Telefono:
+                        validators.push(Validators.pattern(TelRegex));
+                        break;
+                }
+                break;
+            case FieldTypeEnum["Area di testo"]:
+                if (field.MaxLenght) {
+                    validators.push(Validators.maxLength(field.MaxLenght));
+                }
+                if (field.MinLenght) {
+                    validators.push(Validators.minLength(field.MinLenght));
+                }
+                break;
+            case FieldTypeEnum.Allegato:
+            case FieldTypeEnum.Immagine:
+                if (field.Required)
+                    validators.push(ArrayValidators.minLenght(1));
+                break;
+            case FieldTypeEnum['Elenco generico']:
+                if (field.IsMultiChoiche)
+                    if (field.Required)
+                        validators.push(ArrayValidators.minLenght(1));
+                break;
+        }
+        return new FormControl(record[field.Name], validators);
+    };
+    /**
+     * Metodo per configurare gli endpoint da usare di default a partire dall'url base del server
+     * a cui si deve connettere e al token da passare per autenticarsi.
+     * @param baseServerUrl Stringa dell'url base del server (es: "http://localhost:5000").
+     * @param userToken Token dell'utente loggato da usare per autenticarsi se necessario.
+     * @returns Resituisce la configurazione completa degli endPoint da usare di default.
+     */
+    UtilityHelperService.prototype.ConfigureDefaultEndPoints = function (baseServerUrl, userToken) {
+        var endPointConfiguration = new EndPointConfiguration();
+        endPointConfiguration = new EndPointConfiguration();
+        endPointConfiguration.Records = {
+            GetByFormIDEndPoint: {
+                Url: baseServerUrl + "/api/v1/getall",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            GetByIDEndPoint: {
+                Url: baseServerUrl + "/api/v1/getByID",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            SaveEndPoint: {
+                Url: baseServerUrl + "/api/v1/save",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            },
+            DuplicateEndPoint: {
+                Url: baseServerUrl + "/api/v1/duplicate",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            },
+            DeleteEndPoint: {
+                Url: baseServerUrl + "/api/v1/delete",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.DELETE,
+            }
+        };
+        endPointConfiguration.Forms = {
+            GetByIDEndPoint: {
+                Url: baseServerUrl + "/api/conf/form",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.GET,
+            },
+            SaveEndPoint: {
+                Url: baseServerUrl + "/api/conf/form",
+                Token: userToken,
+                RequestMethod: RequestMethodEnum.POST,
+            }
+        };
+        return endPointConfiguration;
+    };
+    /**
+     * Metodo che data la configurazione di un endpoint costruisce l'url da chiamare, gli eventuali parametri
+     * da passare (nel body o nella rotta) ed effettua la chiamata. Al termine della chiamata esegue le eventuali
+     * funzioni di callback (sia in caso di successo che in caso di errore) passate in input.
+     * @param endPointData Cofigurazione dell'endpoint da chiamare.
+     * @param dynamicModuleParams Array dei parametri aggiunti dal modulo dinamico a quelli già configurati
+     * (ad esempio il record o la form da salvare oppure l'ID per recuperare una particolare entità).
+     * @param callback Metodo da eseguire in caso di successo dopo la chiamata http.
+     * NOTA: in input viene passata la risposta della chiamata stessa.
+     * @param errorCallBack Metodo da eseguire in caso di errore dopo la chiamata http.
+     * NOTA: in input viene passato l'errore generato della chiamata stessa.
+     */
+    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 ParamTypeEnum['Query param']: {
+                        var stringParam = p.ParamName + "=" + p.ParamValue;
+                        queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                        break;
+                    }
+                    case ParamTypeEnum['In route']: {
+                        url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                        break;
+                    }
+                    case ParamTypeEnum['In Body']: {
+                        bodyParams.AdditionalParams[p.ParamName] = p.ParamValue;
+                        break;
+                    }
+                }
+            });
+        }
+        // Se sono stati passati parametri da aggiungere alla chiamata definiti all'interno del modulo dinamico
+        // vengono ciclati e aggiunti nel punto in cui devono essere usati dopo quelli definiti nella configurazione.
+        if (dynamicModuleParams) {
+            dynamicModuleParams.forEach(function (p) {
+                switch (p.ParamType) {
+                    case ParamTypeEnum['Query param']: {
+                        var stringParam = p.ParamName + "=" + p.ParamValue;
+                        queryParams = (queryParams == null ? "" : queryParams + "&") + stringParam;
+                        break;
+                    }
+                    case ParamTypeEnum['In route']: {
+                        url = url + (url.endsWith("/") ? "" : "/") + p.ParamValue;
+                        break;
+                    }
+                    case ParamTypeEnum['In Body']: {
+                        bodyParams[p.ParamName] = p.ParamValue;
+                        break;
+                    }
+                }
+            });
+        }
+        if (queryParams != null) {
+            url = (url.endsWith("/") ? url.substring(0, url.length - 1) : url) + "?" + queryParams;
+        }
+        this.http.request(endPointData.RequestMethod, url, {
+            headers: endPointData.Token ? { Authorization: endPointData.Token } : null,
+            body: ![RequestMethodEnum.DELETE, RequestMethodEnum.GET].includes(endPointData.RequestMethod) ? bodyParams : null
+        })
+            .subscribe(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: FormBuilder },
+        { type: HttpClient },
+        { type: SpinnerService }
+    ]; };
+    UtilityHelperService.ɵprov = ɵɵdefineInjectable({ factory: function UtilityHelperService_Factory() { return new UtilityHelperService(ɵɵinject(FormBuilder), ɵɵinject(HttpClient), ɵɵinject(SpinnerService)); }, token: UtilityHelperService, providedIn: "root" });
+    UtilityHelperService = UtilityHelperService_1 = __decorate([
+        Injectable({
+            providedIn: 'root'
+        })
+    ], UtilityHelperService);
+    return UtilityHelperService;
+}());
+
+var EqpDynamicModuleComponent = /** @class */ (function () {
+    function EqpDynamicModuleComponent(utilityHelperService) {
+        this.utilityHelperService = utilityHelperService;
+        this.context = new Context();
+        this.showButtons = true;
+        this.showTitle = true;
+        /**
+         * Url del server da chiamare per recuperare, salvare o eliminare i record.
+         * Usato per creare la configurazione di default degli endpoint da chiamare.
+         */
+        this.baseServerUrl = null;
+        /**
+         * Token da usare negli endpoint da chiamare per recuperare o salvare i record.
+         * Usato solo se viene popolata la proprietà "baseServerUrl".
+         */
+        this.userToken = null;
+        /**
+         * Configurazione degli endpoint da chiamare per recuperare o salvare i dati.
+         * Può essere definita dall'utente oppure lasciata null, viene popolata con dei
+         * valori di default se viene valorizzata la proprietà "baseServerUrl" altrimenti
+         * viene lasciata null e non viene eseguita nessuna chiamata al server.
+         */
+        this.endPointConfiguration = null;
+        /**
+         * Eventi emessi quando si salva, elimina o duplica un record
+         * se non è stato specificato un endpoint da chiamare.
+         */
+        this.saveRecord = new EventEmitter();
+        this.deleteRecord = new EventEmitter();
+        this.duplicateRecord = new EventEmitter();
+        /**
+         * Eventi emessi DOPO aver eseguito una chiamata al server per il salvataggio,
+         * l'eliminazione o la duplicazione di un record all'endpoint specificato.
+         */
+        this.afterSaveRecord = new EventEmitter();
+        this.afterDeleteRecord = new EventEmitter();
+        this.afterDuplicateRecord = new EventEmitter();
+        this.form = new Form();
+        this.viewMode = FormTypeEnum.LIST;
+        this.FormTypeEnum = FormTypeEnum;
+    }
+    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: 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: 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.onlyView = event.onlyView;
+            if (this.endPointConfiguration && this.endPointConfiguration.Records && this.endPointConfiguration.Records.GetByIDEndPoint) {
+                var dynamicModuleParams = [
+                    { ParamName: "id", ParamValue: event.record.ID, ParamType: ParamTypeEnum['Query param'] }
+                ];
+                this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.GetByIDEndPoint, dynamicModuleParams, function (res) {
+                    _this.selectedRecord = JSON.parse(res.SerializedValues);
+                    _this.selectedRecord.ID = res.ID;
+                    _this.selectedRecord.EntID = res.EntID;
+                    _this.viewMode = FormTypeEnum.SCALAR;
+                });
+            }
+            else {
+                this.selectedRecord = JSON.parse(JSON.stringify(event.record));
+                this.viewMode = FormTypeEnum.SCALAR;
+            }
+        }
+        else {
+            this.selectedRecord = null;
+            this.onlyView = false;
+            this.viewMode = FormTypeEnum.SCALAR;
+        }
+    };
+    /**
+     * Metodo per salvare il record aggiunto o modificato.
+     * Se è stato configurato un endPoint per il salvataggio viene effettuata una chiamata al server passando l'oggeto da salvare
+     * nel body della chiamata, altrimenti scatena l'evento "saveRecord".
+     * @param event Oggetto di tipo Record da salvare.
+     */
+    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: ParamTypeEnum['In Body'] }
+            ];
+            this.utilityHelperService.RunEndPointCall(this.endPointConfiguration.Records.SaveEndPoint, dynamicModuleParams, function (res) {
+                _this.getRecordsByFormID();
+                _this.afterSaveRecord.emit(event);
+                _this.viewMode = FormTypeEnum.LIST;
+            });
+        }
+        else {
+            this.saveRecord.emit(event);
+            this.viewMode = FormTypeEnum.LIST;
+        }
+    };
+    /**
+     * Metodo per duplicare un record precedentemente salvato.
+     * Se è stato configurato un endPoint per la duplicazione lato server allora effettua una chiamata passando nel body
+     * un oggetto contenente il record da duplicare, altrimenti scatena l'evento di output "duplicateRecord".
+     * @param record Oggetto di tipo Record da duplicare.
+     */
+    EqpDynamicModuleComponent.prototype.onDuplicateRecord = function (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: 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) {
+        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: 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([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "context", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "formID", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "values", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "showButtons", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "showTitle", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "baseServerUrl", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "userToken", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "endPointConfiguration", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "saveRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "deleteRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "duplicateRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "afterSaveRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "afterDeleteRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleComponent.prototype, "afterDuplicateRecord", void 0);
+    EqpDynamicModuleComponent = __decorate([
+        Component({
+            selector: 'eqp-dynamic-module',
+            template: "<eqp-dynamic-module-spinner></eqp-dynamic-module-spinner>\r\n\r\n<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveRecord($event)\" [showTitle]=\"showTitle\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST && values\" [form]=\"form\" [values]=\"values\"\r\n    (onAddViewEditRecord)=\"onAddViewEditRecord($event)\" [showTitle]=\"showTitle\"\r\n    (onDeleteRecord)=\"onDeleteRecord($event)\" (onDuplicateRecord)=\"onDuplicateRecord($event)\">\r\n</list-form-record>",
+            styles: ["::ng-deep mat-form-field{width:100%}"]
+        })
+    ], EqpDynamicModuleComponent);
+    return EqpDynamicModuleComponent;
+}());
+
+var MaterialModule = /** @class */ (function () {
+    function MaterialModule() {
+    }
+    MaterialModule = __decorate([
+        NgModule({
+            imports: [
+                MatCheckboxModule,
+                MatButtonModule,
+                MatInputModule,
+                MatAutocompleteModule,
+                MatDatepickerModule,
+                MatFormFieldModule,
+                MatRadioModule,
+                MatSelectModule,
+                MatSliderModule,
+                MatSlideToggleModule,
+                MatMenuModule,
+                MatSidenavModule,
+                MatToolbarModule,
+                MatListModule,
+                MatGridListModule,
+                MatCardModule,
+                MatStepperModule,
+                MatTabsModule,
+                MatExpansionModule,
+                MatButtonToggleModule,
+                MatChipsModule,
+                MatIconModule,
+                MatProgressSpinnerModule,
+                MatProgressBarModule,
+                MatDialogModule,
+                MatTooltipModule,
+                MatSnackBarModule,
+                MatTableModule,
+                MatSortModule,
+                MatPaginatorModule,
+                MatDatepickerModule,
+                MatNativeDateModule
+            ],
+            exports: [
+                MatCheckboxModule,
+                MatButtonModule,
+                MatInputModule,
+                MatAutocompleteModule,
+                MatDatepickerModule,
+                MatFormFieldModule,
+                MatRadioModule,
+                MatSelectModule,
+                MatSliderModule,
+                MatSlideToggleModule,
+                MatMenuModule,
+                MatSidenavModule,
+                MatToolbarModule,
+                MatListModule,
+                MatGridListModule,
+                MatCardModule,
+                MatStepperModule,
+                MatTabsModule,
+                MatExpansionModule,
+                MatButtonToggleModule,
+                MatChipsModule,
+                MatIconModule,
+                MatProgressSpinnerModule,
+                MatProgressBarModule,
+                MatDialogModule,
+                MatTooltipModule,
+                MatSnackBarModule,
+                MatTableModule,
+                MatSortModule,
+                MatPaginatorModule
+            ],
+        })
+    ], MaterialModule);
+    return MaterialModule;
+}());
+
+var EqpDynamicModuleConfiguratorComponent = /** @class */ (function () {
+    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 = FormTypeEnum;
+        this.FormScalarTypeEnum = FormScalarTypeEnum;
+        //#endregion
+        /**
+         * Evento emesso quando si salva una form e non è stato specificato un endpoint da chiamare.
+         */
+        this.saveFormEvent = new EventEmitter();
+        /**
+         * Evento emesso DOPO aver eseguito una chiamata al server per il salvataggiodi una form all'endpoint specificato.
+         */
+        this.afterSaveFormEvent = new EventEmitter();
+    }
+    EqpDynamicModuleConfiguratorComponent.prototype.ngOnInit = function () {
+        this.configureDefaultEndPoints();
+        this.getFormByID();
+        if (this.context) {
+            UtilityHelperService.SetContext(this.context);
+        }
+    };
+    /**
+     * 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: 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.
+     * Se l'utente sceglie una visualizzazione raggruppata il metodo aggiunge al FormGroup un nuovo
+     * controllo per l'array dei nomi delle sezioni da creare.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.onChangeFormScalarType = function () {
+        if (this.form.FormScalarType != FormScalarTypeEnum.Semplice) {
+            if (!this.formFormGroup.contains("FormFieldsGroups")) {
+                this.formFormGroup.removeControl("FormFieldsGroups");
+                this.formFormGroup.addControl("FormFieldsGroups", new FormControl(this.form.FormFieldsGroups, [Validators.required, ArrayValidators.minLenght(1)]));
+            }
+        }
+        else {
+            this.form.FormFieldsGroups = null;
+            if (this.formFormGroup.contains("FormFieldsGroups"))
+                this.formFormGroup.removeControl("FormFieldsGroups");
+        }
+        this.formFormGroup.updateValueAndValidity();
+        this.configureColumns();
+    };
+    /**
+     * Evento invocato al keyup nell'input per inserire i nomi delle sezioni per la visualizzazione
+     * raggruppata della form. Quanto l'utente preme il tasto invio viene aggiunto il nuovo nome alle
+     * sezioni dispobili se non ne esiste una con lo stesso nome.
+     * @param event Evento che rappresenta il keyup sulla tastiera.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.onFormFieldGroupNameKeyUp = function (event) {
+        var _this = this;
+        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+            if (!this.form.FormFieldsGroups) {
+                this.form.FormFieldsGroups = new Array();
+            }
+            if (!this.form.FormFieldsGroups.find(function (n) { return n.Name == _this.formFieldGroupName; })) {
+                this.form.FormFieldsGroups.push({ Name: this.formFieldGroupName });
+            }
+            // Imposto il nuovo valore del FormControl per aggiornare lo stato della form.
+            this.formFormGroup.controls["FormFieldsGroups"].setValue(this.form.FormFieldsGroups);
+            this.formFieldGroupName = null;
+            this.setFormFieldGroupOrdinalPosition();
+        }
+    };
+    /**
+     * Metodo per rimuovere la sezione selezionata da quelle disponibili per la form.
+     * @param groupName Nome della sezione da eliminare.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.onDeleteFormFieldGroupName = function (groupName) {
+        this.form.FormFieldsGroups.splice(this.form.FormFieldsGroups.findIndex(function (g) { return g.Name === groupName; }), 1);
+        // Imposto il nuovo valore del FormControl per aggiornare lo stato della form.
+        this.formFormGroup.controls["FormFieldsGroups"].setValue(this.form.FormFieldsGroups);
+        // Se esistono Field legati alla sezione che si vuole eliminare allora rompo il legame.
+        if (this.form.Fields.find(function (f) { return f.FieldGroup == groupName; })) {
+            this.form.Fields.filter(function (f) { return f.FieldGroup == groupName; }).forEach(function (f) { return f.FieldGroup = null; });
+        }
+        this.setFormFieldGroupOrdinalPosition();
+    };
+    /**
+     * Metodo chiamato quando si vuole aggiungere un nuovo campo o si vuole modificare uno esistente.
+     * Memorizza l'eventuale Field scelto one crea uno nuovo prima di aprire il dialog per modificarlo/aggiungerlo.
+     * @param field Oggetto BaseField da modificare. Se null ne viene creata una nuova istanza per l'aggiunta.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.openFieldDialog = function (field) {
+        if (field === void 0) { field = null; }
+        if (field) {
+            this.indexSelectedField = this.form.Fields.indexOf(field);
+            this.selectedField = JSON.parse(JSON.stringify(field));
+        }
+        else {
+            this.selectedField = new BaseField();
+            this.indexSelectedField = null;
+        }
+        this.dialogFieldRef = this.dialog.open(this.dialogField, {
+            disableClose: true,
+            hasBackdrop: true,
+            width: '75%'
+        });
+    };
+    /**
+     * Metodo che salva il campo appena creato o modificato.
+     * Prima del salvataggio controlla se esiste un altro campo con la stessa label, in questo
+     * case genere un errore (i campi devono avere nomi, e quindi label, univoche - i nomi vengono
+     * ricavati unendo le parole che formano la label tramite "_").
+     * @param field Campo da salvare
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.onSaveField = function (field) {
+        var _this = this;
+        if (field) {
+            if (this.form.Fields
+                && this.form.Fields.find(function (f, i) { return f.Label === field.Label
+                    && (_this.indexSelectedField == null ? true : _this.indexSelectedField !== i); })) {
+                EqpDynamicModuleDialogService.Warning('Impossibile inserire due campi con la stessa label.');
+                throw new Error('Impossibile inserire due campi con la stessa label.');
+            }
+            if (this.indexSelectedField != null && this.indexSelectedField >= 0) {
+                this.form.Fields[this.indexSelectedField] = field;
+            }
+            else {
+                if (!this.form.Fields) {
+                    this.form.Fields = new Array();
+                }
+                this.form.Fields.push(field);
+            }
+        }
+        this.closeFieldDialog();
+        this.setFieldOrdinalPosition();
+        this.reloadFieldsTable();
+    };
+    /**
+     * Metodo che controlla se lo step per l'aggiunta dei campi nella form è concluso.
+     * @returns Se TRUE lo step viene considerato completato ed è possbile passare al successivo.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.isFieldStepCompleted = function () {
+        if (!this.form.Fields) {
+            return false;
+        }
+        if (this.form.FormScalarType != FormScalarTypeEnum.Semplice && this.form.Fields.find(function (f) { return !f.FieldGroup; })) {
+            return false;
+        }
+        return this.form.Fields.length > 0;
+    };
+    /**
+     * Metodo per aprire il dialog di creazione/modifica delle form di dettaglio.
+     * Se il parametro passato è null sono in aggiunta altrimenti sono in modifica.
+     * @param innenrForm Form di dettaglio da modificare (se null allora vado in add).
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.openInnerFormDialog = function (innenrForm) {
+        if (innenrForm === void 0) { innenrForm = null; }
+        if (innenrForm) {
+            this.indexSelectedInnerForm = this.form.InnerForms.indexOf(innenrForm);
+            this.selectedInnerForm = JSON.parse(JSON.stringify(innenrForm));
+            this.selectedInnerForm.OldName = innenrForm.Name;
+            this.indexSelectedField = this.form.Fields.findIndex(function (f) { return f.Label === innenrForm.Name; });
+        }
+        else {
+            this.selectedInnerForm = new Form();
+            this.indexSelectedInnerForm = null;
+            this.indexSelectedField = null;
+        }
+        this.dialogInnerFormRef = this.dialog.open(this.dialogInnerForm, {
+            disableClose: true,
+            hasBackdrop: true,
+            width: '85%'
+        });
+    };
+    /**
+     * Metodo scatenato al salvataggio di una form di dettaglio.
+     * @param event Form creata/modificata dall'utente. Se è null allora l'utente ha abbandonato la configurazione.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.onSaveOrExitInnerForm = function (event) {
+        var _this = this;
+        if (event != null) {
+            if (this.form.Name === event.Name ||
+                (this.form.InnerForms
+                    && this.form.InnerForms.find(function (a, i) { return a.Name === event.Name
+                        && (_this.indexSelectedInnerForm == null ? true : _this.indexSelectedInnerForm !== i); })) ||
+                (this.form.Fields
+                    && this.indexSelectedInnerForm == null
+                    && this.form.Fields.find(function (f, i) { return f.Label === event.Name
+                        && (_this.indexSelectedField == null ? true : _this.indexSelectedField !== i); }))) {
+                EqpDynamicModuleDialogService.Warning('Impossibile inserire due form di dettaglio con lo stesso nome.');
+                throw new Error('Impossibile inserire due form di dettaglio con lo stesso nome.');
+            }
+            var innerFormField = new BaseField();
+            innerFormField.Name = event.Name.split(" ").join("_");
+            innerFormField.Label = event.Name;
+            innerFormField.FieldType = FieldTypeEnum['Form di dettaglio'];
+            innerFormField.FieldGroup = this.indexSelectedField != null ? this.form.Fields[this.indexSelectedField].FieldGroup : null;
+            if (this.indexSelectedInnerForm != null && this.indexSelectedInnerForm >= 0) {
+                this.form.InnerForms[this.indexSelectedInnerForm] = event;
+                this.form.Fields[this.indexSelectedField] = innerFormField;
+            }
+            else {
+                if (!this.form.InnerForms) {
+                    this.form.InnerForms = new Array();
+                }
+                this.form.InnerForms.push(event);
+                this.form.Fields.push(innerFormField);
+            }
+            this.reloadFieldsTable();
+        }
+        this.dialogInnerFormRef.close();
+    };
+    /**
+     * Metodo per aprire il dialog di creazione/modifica delle action.
+     * Se il parametro passato è null sono in aggiunta altrimenti sono in modifica.
+     * @param action ActionOnRecord da modificare (se null allora vado in add).
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.openActionOnRecordDialog = function (action) {
+        if (action === void 0) { action = null; }
+        if (action) {
+            this.indexSelectedAction = this.form.ActionsOnRecord.indexOf(action);
+            this.selectedAction = JSON.parse(JSON.stringify(action));
+        }
+        else {
+            this.selectedAction = new ActionOnRecord();
+            this.indexSelectedAction = null;
+        }
+        this.createActionOnRecordForm();
+        this.dialogActionOnRecordRef = this.dialog.open(this.dialogActionOnRecord, {
+            disableClose: true,
+            hasBackdrop: true,
+            width: '75%'
+        });
+    };
+    /**
+     * Metodo per impostare i valori da suggerire nell'autocomplete del campo Formula.
+     * Viene scatenato al focus (in questo caso viene passato il parametro a null per differenziarlo
+     * dall'evento di click sulla tastiera) e al keyup sull'input (il parametro è diverso da null).
+     * @param keyboardEvent Evento scatenato al keyup sulla tastiera. Se null allora il metodo è stato invocato dal focus sull'input.
+     * @summary Aggiorna l'elenco dei suggerimenti per l'autocomplete se l'utente esegue il focus sull'input
+     * oppure al keyup sulla tastiera di un tasto diverso dalle frecce.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.setActionAutocompleteOptions = function (keyboardEvent) {
+        // Creo l'array per l'autocomplete solo se sto facendo il focus sull'input o se sto premendo un tasto
+        // sulla tastiera diverso dalle frecce (in quest'ultimo caso, se non viene eseguito il filtro sull'evento,
+        // non si può selezionare un suggerimento dell'autocomplete perchè al click verrebbe ricaricato l'array e
+        // si prederebbe la selezione appena fatta).
+        if (!keyboardEvent || !keyboardEvent.code.includes("Arrow")) {
+            this.actionAutocompleteOptions = UtilityHelperService.GetAutocompleteOptions(this.form.Fields, this.selectedAction.Action);
+        }
+    };
+    /**
+     * Metodo per salvare l'azione creata/modificate.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.saveActionOnRecord = function () {
+        var _this = this;
+        if (this.form.ActionsOnRecord
+            && this.form.ActionsOnRecord.find(function (a, i) { return a.Name === _this.selectedAction.Name
+                && (_this.indexSelectedAction == null ? true : _this.indexSelectedAction !== i); })) {
+            EqpDynamicModuleDialogService.Warning('Impossibile inserire due action con lo stesso nome.');
+            throw new Error('Impossibile inserire due action con lo stesso nome.');
+        }
+        if (this.indexSelectedAction != null && this.indexSelectedAction >= 0) {
+            this.form.ActionsOnRecord[this.indexSelectedAction] = this.selectedAction;
+        }
+        else {
+            if (!this.form.ActionsOnRecord) {
+                this.form.ActionsOnRecord = new Array();
+            }
+            this.form.ActionsOnRecord.push(this.selectedAction);
+        }
+        this.closeDialogActionOnRecord();
+        this.setActionOrdinalPosition();
+        this.reloadActionsOnRecordTable();
+    };
+    /**
+     * Metodo per chiudere il dialog di gestione delle action.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.closeDialogActionOnRecord = function () {
+        this.dialogActionOnRecordRef.close();
+    };
+    /**
+     * Metodo per segnare come conclusa la creazione della form e per crearne una copia
+     * da visalizzare come anteprima.
+     * @param completed Se TRUE segna la form come conclusa e ne crea una copia da visualizzare
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.setFormStatus = function (completed) {
+        if (completed) {
+            this.formCompleted = true;
+            this.previewForm = JSON.parse(JSON.stringify(this.form));
+            // Per visualizzare correttamente l'oanteprima della form appena creata
+            // bisogna valorizzare la proprietà Name dei campi della form e delle InnerForms.
+            this.previewForm.Fields.forEach(function (field) { field.Name = field.Label.split(' ').join('_'); });
+            if (this.previewForm.InnerForms && this.previewForm.InnerForms.length > 0) {
+                this.previewForm.InnerForms.forEach(function (form) {
+                    form.Fields.forEach(function (field) { field.Name = field.Label.split(' ').join('_'); });
+                });
+            }
+        }
+        else {
+            this.formCompleted = false;
+            this.previewForm = null;
+        }
+    };
+    /**
+     * 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 () {
+        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: 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:
+     *  - per la visualizzazione dei campi inseriti
+     *  - per le form di dettaglio create
+     *  - per le azioni configurate sui record della form
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.configureColumns = function () {
+        var _this = this;
+        this.fieldsColumns = [
+            {
+                key: 'action', display: '', type: TypeColumn.MenuAction, buttonMenuIcon: 'more_vert', styles: { flex: '0 0 6%' },
+                actions: [
+                    { name: 'Modifica', icon: 'edit', fn: function (element, index, col) { return _this.editField(element); } },
+                    { name: 'Elimina', icon: 'delete', fn: function (element, index, col) { return _this.deleteElement(element, "Fields"); } },
+                    {
+                        name: 'Sposta su', icon: 'arrow_upward',
+                        fn: function (element, index, col) { return _this.moveElement(element, true, "Fields"); },
+                        disabled: function (element) { return _this.form.Fields.indexOf(element) === 0; }
+                    },
+                    {
+                        name: 'Sposta giù', icon: 'arrow_downward',
+                        fn: function (element, index, col) { return _this.moveElement(element, false, "Fields"); },
+                        disabled: function (element) { return _this.form.Fields.indexOf(element) >= (_this.form.Fields.length - 1); }
+                    },
+                ]
+            },
+            { key: 'FieldType', display: 'Tipologia', type: TypeColumn.Enum, enumModel: FieldTypeEnum },
+            { key: 'Label', display: 'Label' },
+            { key: 'Description', display: 'Descrizione' },
+            {
+                key: 'Required', display: 'Obbligatorio',
+                value: function (element) { return !!element.Required; },
+                type: TypeColumn.Boolean,
+                booleanValues: {
+                    true: '<i class="fa fa-check success-color"></i>',
+                    false: '<i class="fa fa-close error-color"></i>'
+                },
+                styles: { flex: '0 0 7%', cellAlignment: CellAlignmentEnum.CENTER }
+            },
+        ];
+        if (this.form.FormScalarType && this.form.FormScalarType != FormScalarTypeEnum.Semplice) {
+            this.fieldsColumns.splice(this.fieldsColumns.findIndex(function (c) { return c.key == 'Description'; }), 0, { key: 'FieldGroup', display: 'Sezione', type: TypeColumn.ExternalTemplate, externalTemplate: this.fieldSectionColumnTemplate });
+        }
+        this.actionsOnRecordColumns = [
+            {
+                key: 'action', display: '', type: TypeColumn.MenuAction, buttonMenuIcon: 'more_vert', styles: { flex: '0 0 6%' },
+                actions: [
+                    { name: 'Modifica', icon: 'edit', fn: function (element, index, col) { return _this.openActionOnRecordDialog(element); } },
+                    { name: 'Elimina', icon: 'delete', fn: function (element, index, col) { return _this.deleteElement(element, "ActionsOnRecord"); } },
+                    {
+                        name: 'Sposta su', icon: 'arrow_upward',
+                        fn: function (element, index, col) { return _this.moveElement(element, true, "ActionsOnRecord"); },
+                        disabled: function (element) { return _this.form.ActionsOnRecord.indexOf(element) === 0; }
+                    },
+                    {
+                        name: 'Sposta giù', icon: 'arrow_downward',
+                        fn: function (element, index, col) { return _this.moveElement(element, false, "ActionsOnRecord"); },
+                        disabled: function (element) { return _this.form.ActionsOnRecord.indexOf(element) >= (_this.form.ActionsOnRecord.length - 1); }
+                    },
+                ]
+            },
+            { key: 'Icon', display: 'Icona', styles: { flex: ' 0 0 15%' } },
+            { key: 'Name', display: 'Nome', styles: { flex: ' 0 0 20%' } },
+            { key: 'Action', display: 'Azione' },
+        ];
+    };
+    /**
+     * Crea il FormGroup per l'oggetto Form
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.createFormForm = function () {
+        this.formFormGroup = this.formBuilder.group({
+            Name: [this.form.Name, Validators.required],
+            FormScalarType: [this.form.FormScalarType, Validators.required],
+        });
+        this.onChangeFormScalarType();
+    };
+    /**
+     * Crea il FormGroup epr l'aggiunta o la modifica di una action sui record della Form.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.createActionOnRecordForm = function () {
+        this.actionOnRecordFormGroup = this.formBuilder.group({
+            Name: [this.selectedAction.Name, Validators.required],
+            Icon: [this.selectedAction.Icon, Validators.required],
+            Action: [this.selectedAction.Action, Validators.required],
+        });
+    };
+    /**
+     * Chiude il dialog per aggiungere/modificare un Field senza salvare
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.closeFieldDialog = function () {
+        this.dialogFieldRef.close();
+    };
+    /**
+     * Metodo per gestire l'apertura del dialog per la modifica di un Field.
+     * Se il field è di tipo "Form di dettaglio" apre il dialog per la modifica di una
+     * InnerForm altrimenti apre quello per la modifica di un Field.
+     * @param field Campo da modificare
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.editField = function (field) {
+        if (field.FieldType != FieldTypeEnum['Form di dettaglio']) {
+            this.openFieldDialog(field);
+        }
+        else {
+            this.openInnerFormDialog(this.form.InnerForms.find(function (f) { return f.Name == field.Label; }));
+        }
+    };
+    /**
+     * Metodo per rimuovere un Field all'interno di una Form.
+     * Richiede conferma all'utente prima di rimuoverlo.
+     * @param field BaseField da rimuovere
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.deleteElement = function (element, propertyName) {
+        var _this = this;
+        EqpDynamicModuleDialogService.Confirm('Eliminare l\'elemento selezionato?', function () {
+            _this.form[propertyName].splice(_this.form[propertyName].indexOf(element), 1);
+            if (propertyName === "Fields") {
+                _this.setFieldOrdinalPosition();
+                _this.reloadFieldsTable();
+            }
+            else if (propertyName === "ActionsOnRecord") {
+                _this.setActionOrdinalPosition();
+                _this.reloadActionsOnRecordTable();
+            }
+        }, false, 'Richiesta conferma');
+    };
+    /**
+     * Metodo per spostare un campo all'interno della form.
+     * @param field Oggetto di tipo BaseField da spostare.
+     * @param moveUp Se TRUE allora sposta verso l'alto il campo (abbassa l'indice) altrimenti il contrario.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.moveElement = function (element, moveUp, propertyName) {
+        var startingIndex = this.form[propertyName].indexOf(element);
+        var endingIndex = startingIndex + (moveUp ? -1 : 1);
+        this.form[propertyName].splice(startingIndex, 1);
+        this.form[propertyName].splice(endingIndex, 0, element);
+        if (propertyName === "Fields") {
+            this.setFieldOrdinalPosition();
+            this.reloadFieldsTable();
+        }
+        else if (propertyName === "ActionsOnRecord") {
+            this.setActionOrdinalPosition();
+            this.reloadActionsOnRecordTable();
+        }
+    };
+    /**
+     * Imposta l'ordinamento delle sezioni che compongono la form.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.setFormFieldGroupOrdinalPosition = function () {
+        this.form.FormFieldsGroups.forEach(function (g, i) { return g.OrdinalPosition = i; });
+    };
+    /**
+     * Imposta l'ordinamento dei campi all'interno della form in base all'ordine che l'utente
+     * ha definito nella tabella in cui sono mostrati
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.setFieldOrdinalPosition = function () {
+        var _this = this;
+        if (this.form.Fields) {
+            this.form.Fields.forEach(function (field) {
+                field.OrdinalPosition = _this.form.Fields.indexOf(field);
+            });
+        }
+    };
+    /**
+     * Metodo per ricaricare i dati della tabella dei campi aggiunti in una form
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.reloadFieldsTable = function () {
+        if (this.fieldsTable) {
+            this.fieldsTable.reloadDatatable();
+        }
+    };
+    /**
+     * Imposta l'ordinamento dei campi all'interno della form in base all'ordine che l'utente
+     * ha definito nella tabella in cui sono mostrati
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.setActionOrdinalPosition = function () {
+        var _this = this;
+        if (this.form.ActionsOnRecord) {
+            this.form.ActionsOnRecord.forEach(function (action) {
+                action.OrdinalPosition = _this.form.ActionsOnRecord.indexOf(action);
+            });
+        }
+    };
+    /**
+     * Metodo per ricaricare i dati della tabella delle azioni aggiuntive sui record della Form.
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.reloadActionsOnRecordTable = function () {
+        if (this.actionsOnRecordTable) {
+            this.actionsOnRecordTable.reloadDatatable();
+        }
+    };
+    EqpDynamicModuleConfiguratorComponent.ctorParameters = function () { return [
+        { type: FormBuilder },
+        { type: MatDialog },
+        { type: UtilityHelperService }
+    ]; };
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "context", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "form", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "formID", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "innerFormManagment", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "baseServerUrl", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "userToken", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "endPointConfiguration", void 0);
+    __decorate([
+        ViewChild('fieldsTable', { static: false })
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "fieldsTable", void 0);
+    __decorate([
+        ViewChild('dialogField', { static: true })
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "dialogField", void 0);
+    __decorate([
+        ViewChild('fieldSectionColumnTemplate', { static: true })
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "fieldSectionColumnTemplate", void 0);
+    __decorate([
+        ViewChild('dialogInnerForm', { static: true })
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "dialogInnerForm", void 0);
+    __decorate([
+        ViewChild('actionsOnRecordTable', { static: false })
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "actionsOnRecordTable", void 0);
+    __decorate([
+        ViewChild('dialogActionOnRecord', { static: true })
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "dialogActionOnRecord", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "saveFormEvent", void 0);
+    __decorate([
+        Output()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "afterSaveFormEvent", void 0);
+    EqpDynamicModuleConfiguratorComponent = __decorate([
+        Component({
+            selector: 'eqp-dynamic-module-configurator',
+            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);
+    return EqpDynamicModuleConfiguratorComponent;
+}());
+
+var AttachmentField = /** @class */ (function (_super) {
+    __extends(AttachmentField, _super);
+    function AttachmentField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return AttachmentField;
+}(BaseField));
+var AvailableFileExtensions = [
+    { value: '.pdf', key: 'application/pdf' },
+    { value: '.doc', key: 'application/msword' },
+    { value: '.xls', key: 'application/vnd.ms-excel' },
+    { value: '.ppt', key: 'application/vnd.ms-powerpoint' },
+    { value: '.docx', key: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
+    { value: '.xlsx', key: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
+    { value: '.pptx', key: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
+    { value: '.csv', key: 'text/csv' },
+    { value: '.txt', key: 'text/plain' },
+];
+var AvailableImageExtensions = [
+    { value: '.jpg/.jpeg', key: 'image/jpeg' },
+    { value: '.png', key: 'image/png' },
+    { value: '.bmp', key: 'image/bmp' },
+    { value: '.svg', key: 'image/svg+xml' },
+    { value: '.ico', key: 'image/x-icon' },
+];
+
+var BooleanField = /** @class */ (function (_super) {
+    __extends(BooleanField, _super);
+    function BooleanField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return BooleanField;
+}(BaseField));
+var BoolPresentantioEnum;
+(function (BoolPresentantioEnum) {
+    BoolPresentantioEnum[BoolPresentantioEnum["Checkbox"] = 1] = "Checkbox";
+    BoolPresentantioEnum[BoolPresentantioEnum["Toggle"] = 2] = "Toggle";
+    BoolPresentantioEnum[BoolPresentantioEnum["Radio button"] = 3] = "Radio button";
+    // "Stringa true o false" = 3,
+    // "Numerico 0 o 1" = 4
+})(BoolPresentantioEnum || (BoolPresentantioEnum = {}));
+
+/**Rappresenta la configurazione di un campo Data o Data e ora, o solo ora */
+var DateField = /** @class */ (function (_super) {
+    __extends(DateField, _super);
+    function DateField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return DateField;
+}(BaseField));
+var DateTimeTypeEnum;
+(function (DateTimeTypeEnum) {
+    DateTimeTypeEnum[DateTimeTypeEnum["Solo data"] = 1] = "Solo data";
+    DateTimeTypeEnum[DateTimeTypeEnum["Solo orario"] = 2] = "Solo orario";
+    DateTimeTypeEnum[DateTimeTypeEnum["Data e ora"] = 3] = "Data e ora";
+})(DateTimeTypeEnum || (DateTimeTypeEnum = {}));
+
+/**Lista di valori */
+var ListValueField = /** @class */ (function (_super) {
+    __extends(ListValueField, _super);
+    function ListValueField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ListValueField;
+}(BaseField));
+var ButtonImage = /** @class */ (function () {
+    function ButtonImage() {
+    }
+    return ButtonImage;
+}());
+var ListPresentationEnum;
+(function (ListPresentationEnum) {
+    ListPresentationEnum[ListPresentationEnum["Combo box"] = 1] = "Combo box";
+    ListPresentationEnum[ListPresentationEnum["Radio button"] = 2] = "Radio button";
+    ListPresentationEnum[ListPresentationEnum["Pulsante con testo"] = 3] = "Pulsante con testo";
+    ListPresentationEnum[ListPresentationEnum["Immagini"] = 4] = "Immagini";
+})(ListPresentationEnum || (ListPresentationEnum = {}));
+
+var AddFormFieldComponent = /** @class */ (function () {
+    //#endregion
+    function AddFormFieldComponent(formBuilder, enumHelper, dialog, cdr) {
+        this.formBuilder = formBuilder;
+        this.enumHelper = enumHelper;
+        this.dialog = dialog;
+        this.cdr = cdr;
+        this.fieldTypesToExclude = [FieldTypeEnum['Form di dettaglio']];
+        this.keyValueObject = { key: '', value: '' };
+        this.availableColSpanSizes = [];
+        this.AvailableFileExtensions = AvailableFileExtensions;
+        this.AvailableImageExtensions = AvailableImageExtensions;
+        this.saveFieldEvent = new EventEmitter();
+        //#endregion
+        //#region Enumeratori usati nell'html
+        this.FieldTypeEnum = FieldTypeEnum;
+        this.BoolPresentantioEnum = BoolPresentantioEnum;
+        this.DateTimeTypeEnum = DateTimeTypeEnum;
+        this.ListPresentationEnum = ListPresentationEnum;
+        this.TextMaskEnum = TextMaskEnum;
+        this.AttachmentType = AttachmentType;
+    }
+    AddFormFieldComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        if (!this.fieldTypesToExclude.includes(FieldTypeEnum['Form di dettaglio'])) {
+            this.fieldTypesToExclude.push(FieldTypeEnum['Form di dettaglio']);
+        }
+        this.onFieldTypeChange(false);
+        this.availableFields = this.availableFields ? this.availableFields.filter(function (f) { return f != _this.field; }) : [];
+        this.configureColumns();
+    };
+    /**
+     * Metodo per impostare i valori da suggerire nell'autocomplete del campo Formula.
+     * Viene scatenato al focus (in questo caso viene passato il parametro a null per differenziarlo
+     * dall'evento di click sulla tastiera) e al keyup sull'input (il parametro è diverso da null).
+     * @param keyboardEvent Evento scatenato al keyup sulla tastiera. Se null allora il metodo è stato invocato dal focus sull'input.
+     * @summary Aggiorna l'elenco dei suggerimenti per l'autocomplete se l'utente esegue il focus sull'input
+     * oppure al keyup sulla tastiera di un tasto diverso dalle frecce.
+     */
+    AddFormFieldComponent.prototype.setFormulaAutocompleteOptions = function (keyboardEvent) {
+        // Creo l'array per l'autocomplete solo se sto facendo il focus sull'input o se sto premendo un tasto
+        // sulla tastiera diverso dalle frecce (in quest'ultimo caso, se non viene eseguito il filtro sull'evento,
+        // non si può selezionare un suggerimento dell'autocomplete perchè al click verrebbe ricaricato l'array e
+        // si prederebbe la selezione appena fatta).
+        if (!keyboardEvent || !keyboardEvent.code.includes("Arrow")) {
+            this.formulaAutocompleteOptions = UtilityHelperService.GetAutocompleteOptions(this.availableFields, this.field.Formula);
+        }
+    };
+    /**
+     * Crea il FormGroup per l'aggiunta di un nuovo campo all'interno della form.
+     * Metodo richiamato ogni volta che cambia il tipo del campo scelto o viene aggiunto/modificato un Field
+     */
+    AddFormFieldComponent.prototype.createFieldForm = function () {
+        this.fieldFormGroup = this.formBuilder.group({
+            Label: [this.field.Label, Validators.required],
+            Description: [this.field.Description],
+            Required: [this.field.Required],
+            FieldType: [this.field.FieldType, Validators.required],
+            Formula: [this.field.Formula],
+            ColSpanSizes: [this.field.ColSpanSizes],
+            InListView: [this.field.InListView],
+        });
+        if (this.formFieldsGroups) {
+            this.fieldFormGroup.addControl('FieldGroup', new FormControl(this.field.FieldGroup, Validators.required));
+        }
+    };
+    /**
+     * Metodo chiamato quando cambia il FieldType del BaseField che si sta aggiungendo/modificando.
+     * Ricrea l'oggetto field popolando solo le proprietà del BaseField inserite dall'utente
+     * (quelle comuni a tutte le tipologie di campo), ricrea la form e, in base al FieldType scelto,
+     * aggiunge alla form i FormControl necessari e seleziona il template corretto da usare.
+     * @param restoreField Se TRUE ripristina i valori base (ereditati dal modello BaseField) del campo aggiunto/modificato
+     */
+    AddFormFieldComponent.prototype.onFieldTypeChange = function (restoreField) {
+        if (restoreField === void 0) { restoreField = true; }
+        if (restoreField)
+            this.restoreBaseFieldProperties();
+        this.createFieldForm();
+        this.onColSpanSizeSelect();
+        this.fieldTypeFormTemplate = null;
+        switch (this.field.FieldType) {
+            case FieldTypeEnum['Campo di testo']:
+                this.fieldFormGroup.addControl('TextMask', new FormControl(this.field.TextMask));
+                this.fieldFormGroup.addControl('MaxLenght', new FormControl(this.field.MaxLenght));
+                this.fieldFormGroup.addControl('MinLenght', new FormControl(this.field.MinLenght));
+                this.fieldTypeFormTemplate = this.textFieldFormTemplate;
+                break;
+            case FieldTypeEnum['Area di testo']:
+                this.fieldFormGroup.addControl('Rows', new FormControl(this.field.Rows));
+                this.fieldFormGroup.addControl('MaxLenght', new FormControl(this.field.MaxLenght));
+                this.fieldFormGroup.addControl('MinLenght', new FormControl(this.field.MinLenght));
+                this.fieldTypeFormTemplate = this.textareaFieldFormTemplate;
+                break;
+            case FieldTypeEnum.Booleano:
+                this.fieldFormGroup.addControl('IsTristate', new FormControl(this.field.IsTristate));
+                this.fieldFormGroup.addControl('PresetationType', new FormControl(this.field.PresetationType, Validators.required));
+                this.fieldTypeFormTemplate = this.booleadFieldFormTemplate;
+                break;
+            case FieldTypeEnum['Data e/o ora']:
+                this.fieldFormGroup.addControl('IsOnlyDate', new FormControl(this.field.IsOnlyDate, Validators.required));
+                this.fieldFormGroup.addControl('MinDate', new FormControl(this.field.MinDate));
+                this.fieldFormGroup.addControl('MaxDate', new FormControl(this.field.MaxDate));
+                this.fieldFormGroup.addControl('DateFormat', new FormControl(this.field.DateFormat));
+                this.fieldTypeFormTemplate = this.dateFieldFormTemplate;
+                break;
+            case FieldTypeEnum['Campo numerico']:
+                this.fieldFormGroup.addControl('IsInteger', new FormControl(this.field.IsInteger));
+                this.fieldFormGroup.addControl('MinValue', new FormControl(this.field.MinValue));
+                this.fieldFormGroup.addControl('MaxValue', new FormControl(this.field.MaxValue));
+                this.fieldFormGroup.addControl('DecimalSeparator', new FormControl(this.field.DecimalSeparator));
+                this.fieldFormGroup.addControl('DecimalPrecision', new FormControl(this.field.DecimalPrecision));
+                this.fieldFormGroup.addControl('ThousandsSeparator', new FormControl(this.field.ThousandsSeparator));
+                this.fieldFormGroup.addControl('CurrencySymbol', new FormControl(this.field.CurrencySymbol));
+                this.fieldTypeFormTemplate = this.numericFieldFormTemplate;
+                break;
+            case FieldTypeEnum.Allegato:
+                this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AllowedExtensions));
+                this.fieldFormGroup.addControl('IsMultiAttach', new FormControl(this.field.IsMultiAttach));
+                this.fieldTypeFormTemplate = this.attachmentFieldFormTemplate;
+                break;
+            case FieldTypeEnum.Immagine:
+                this.field.AttachDefinition = new AttachmentField();
+                this.fieldFormGroup.addControl('EnableDrawing', new FormControl(this.field.EnableDrawing));
+                this.fieldFormGroup.addControl('ImageIsContextualAttachment', new FormControl(this.field.ImageIsContextualAttachment));
+                // Imposto i FormControl variabili.
+                this.onImageIsContextualAttachmentChange();
+                this.fieldTypeFormTemplate = this.imageFieldFormTemplate;
+                break;
+            case FieldTypeEnum['Elenco generico']:
+                this.fieldFormGroup.addControl('IsMultiChoiche', new FormControl(this.field.IsMultiChoiche));
+                this.fieldFormGroup.addControl('PresentationMode', new FormControl(this.field.PresentationMode, Validators.required));
+                this.fieldTypeFormTemplate = this.listValueFieldFormTemplate;
+                break;
+            case FieldTypeEnum.Lookup:
+                this.fieldFormGroup.addControl('EntitySourceName', new FormControl(this.field.EntitySourceName, Validators.required));
+                this.fieldFormGroup.addControl('UseAsGetOrDiscard', new FormControl(this.field.UseAsGetOrDiscard));
+                this.fieldTypeFormTemplate = this.lookupFieldFormTemplate;
+                break;
+        }
+        if ([FieldTypeEnum.Allegato, FieldTypeEnum.Immagine, FieldTypeEnum['Form di dettaglio']].includes(this.field.FieldType)) {
+            this.field.Formula = null;
+            this.fieldFormGroup.controls["Formula"].disable();
+            this.fieldFormGroup.controls["InListView"].disable();
+        }
+        else {
+            this.fieldFormGroup.controls["Formula"].enable();
+            this.fieldFormGroup.controls["InListView"].enable();
+        }
+    };
+    /**
+     * Metodo invocato al cambio del valore della proprietà ImageIsContextualAttachment nel caso
+     * di campi di tipo Immagine. Se TRUE allora rimuove i FormControl per le proprietà IsMultiAttach
+     * e AllowedExtensions e aggiunge i FormControl per le proprietà ImgName e ContextualAttachment,
+     * altrimenti il contrario.
+     */
+    AddFormFieldComponent.prototype.onImageIsContextualAttachmentChange = function () {
+        this.field.ImgName = null;
+        this.field.AttachDefinition.AllowedExtensions = [];
+        this.field.AttachDefinition.IsMultiAttach = false;
+        this.field.ContextualAttachment = null;
+        if (this.field.ImageIsContextualAttachment) {
+            this.fieldFormGroup.removeControl("IsMultiAttach");
+            this.fieldFormGroup.removeControl("AllowedExtensions");
+            this.fieldFormGroup.addControl('ImgName', new FormControl(this.field.ImgName, Validators.required));
+            this.fieldFormGroup.addControl('ContextualAttachment', new FormControl(this.field.ContextualAttachment, Validators.required));
+        }
+        else {
+            this.fieldFormGroup.removeControl("ImgName");
+            this.fieldFormGroup.removeControl("ContextualAttachment");
+            this.fieldFormGroup.addControl('IsMultiAttach', new FormControl(this.field.AttachDefinition.IsMultiAttach));
+            this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AttachDefinition.AllowedExtensions));
+        }
+    };
+    /**
+     * Metodo per intercettare l'aggiunta di un allegato nei campi di tipo Immagine per aggiornare
+     * il valore della proprietà ContextualAttachment e la validazione del relativo FormControl.
+     * @param event Array contenente l'elenco aggiornato degli allegati caricati (nel nostro caso ne contiene al più 1).
+     */
+    AddFormFieldComponent.prototype.catchContextualAttachmentChange = function (event) {
+        if (event && event.length > 0) {
+            this.field.ContextualAttachment = event[0];
+        }
+        else {
+            this.field.ContextualAttachment = null;
+        }
+        this.fieldFormGroup.controls['ContextualAttachment'].setValue(this.field.ContextualAttachment);
+    };
+    /**
+     * Metodo invocato alla selezione di una classe nella select per le colonne di bootstrap
+     * da usare nella visualizzazione del campo. Questa funzione manipola la sorgente dati per
+     * la eqp-select in modo da escludere i valori dell'enumeratore che fanno riferimento ad
+     * una larghezza di schermo già selezionata. Esempio: per gli schermi piccoli (sm) l'utente
+     * 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.onColSpanSizeSelect = function () {
+        // Recupero l'array degli oggetti chiave-valore che rappreseta l'enumeratore
+        var colSizeClassEnumArray = this.enumHelper.getEnumArray(ColSpanSizesEnum, false, null);
+        // Costruisco l'array delle classi selezionate dall'utente in formato stringa
+        var selectedDimensions = this.field.ColSpanSizes ? this.field.ColSpanSizes.map(function (col) { return 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 === 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: TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn });
+        component.attachmentsColumns.splice(component.attachmentsColumns.length - 1, 0, { key: "ButtonValue", display: "Valore", type: TypeColumn.ExternalTemplate, externalTemplate: this.buttonImagesKeyValueInputColumn });
+        this.cdr.detectChanges();
+    };
+    /**
+     * Metodo invocato al salvataggio degli allegati quando viene configurato un campo di tipo "Elenco generico"
+     * con il tipo di visualizzazione ad immagini. Intercetta l'elenco aggiornato delle immagini caricate e lo
+     * memorizza nell'oggetto field corrente.
+     * @param attachments Array aggiornato degli allegati caricati.
+     */
+    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
+     * aggiunge il valore inserito dall'utente nella lista di stringhe corretta (in input viene passato il nome
+     * della proprietà in cui inserire la stringa).
+     * @param event Evento che rappresenta il keyup dell'utente
+     * @param propertyName Nome della proprietà del field in cui inserire la stringa digitata.
+     */
+    AddFormFieldComponent.prototype.onMultiSelectInputKeyup = function (event, propertyName) {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+            switch (this.field.FieldType) {
+                case FieldTypeEnum.Lookup:
+                case FieldTypeEnum.Allegato:
+                    if (!this.field[propertyName]) {
+                        this.field[propertyName] = new Array();
+                    }
+                    this.field[propertyName].push(event.currentTarget.value);
+                    break;
+                case FieldTypeEnum.Immagine:
+                    if (!this.field.AttachDefinition[propertyName]) {
+                        this.field.AttachDefinition[propertyName] = new Array();
+                    }
+                    this.field.AttachDefinition[propertyName].push(event.currentTarget.value);
+                    break;
+                case FieldTypeEnum['Elenco generico']:
+                    if (!this.keyValueObject.key || !this.keyValueObject.value) {
+                        return;
+                    }
+                    if (!this.field.ValuePairs) {
+                        this.field.ValuePairs = {};
+                    }
+                    this.field.ValuePairs[this.keyValueObject.key] = this.keyValueObject.value;
+                    this.keyValueObject = { key: '', value: '' };
+                    break;
+            }
+            event.currentTarget.value = null;
+        }
+    };
+    /**
+     * Metodo chiamato per mostrare come elenco le opzioni aggiunte in un campo di tipo "Elenco generico".
+     * @returns Restituisce un array di oggetti del tipo { key: string, value: string } con i valori inseriti dall'utente.
+     */
+    AddFormFieldComponent.prototype.getDictionaryKeyValue = function () {
+        var _this = this;
+        if (this.field.ValuePairs) {
+            return Object.keys(this.field.ValuePairs).map(function (k) {
+                return {
+                    key: k,
+                    value: _this.field.ValuePairs[k]
+                };
+            });
+        }
+        else {
+            return [];
+        }
+    };
+    /**
+     * Metodo per rimuovere una opzione aggiunta al campo di tipo "Elenco generico"
+     * @param key Nome della chiave da rimuovere
+     */
+    AddFormFieldComponent.prototype.deleteKeyFromDictionary = function (key) {
+        delete this.field.ValuePairs[key];
+    };
+    /**
+     * Metodo per aprire il dialog per aggiungere/modificare un metadata in un campo di tipo Allegato o Immagine.
+     * @param metadata Metadata da modificare, se null allora ne sto creando uno nuovo.
+     */
+    AddFormFieldComponent.prototype.openMetadataDialog = function (field) {
+        if (field === void 0) { field = null; }
+        if (field) {
+            if (this.field.FieldType === FieldTypeEnum.Allegato) {
+                this.indexSelectedMetadata = this.field.MetadataFields.indexOf(field);
+                this.selectedMetadata = JSON.parse(JSON.stringify(field));
+            }
+            else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+                this.indexSelectedMetadata = this.field.AttachDefinition.MetadataFields.indexOf(field);
+                this.selectedMetadata = JSON.parse(JSON.stringify(field));
+            }
+        }
+        else {
+            this.selectedMetadata = new BaseField();
+            this.indexSelectedMetadata = null;
+        }
+        this.dialogMetadataRef = this.dialog.open(this.dialogMetadata, {
+            disableClose: true,
+            hasBackdrop: true,
+            width: '75%'
+        });
+    };
+    /**
+     * Metodo invocato dall'output dal dialog per aggiungere/modificare un metadata
+     * nei campi di tipo Allegato o Immagine. Prima di aggiungere il metadata nell'elenco
+     * contolla se esiste un altro metadata con lo stesso nome e nel caso genera un errore
+     * (i metadata, come per i campi della form, devono avere un nome univoco).
+     * @param metadata Metadata aggiunto o modificato, se null allora il dialog è stato chiuso senza fare modifiche.
+     */
+    AddFormFieldComponent.prototype.onSaveMetadata = function (metadata) {
+        var _this = this;
+        if (metadata) {
+            if ((this.field.FieldType === FieldTypeEnum.Allegato
+                && this.field.MetadataFields
+                && this.field.MetadataFields.find(function (m, i) { return m.Label === metadata.Label
+                    && (_this.indexSelectedMetadata == null ? true : _this.indexSelectedMetadata !== i); })) ||
+                (this.field.FieldType === FieldTypeEnum.Immagine
+                    && this.field.AttachDefinition.MetadataFields
+                    && this.field.AttachDefinition.MetadataFields.find(function (m, i) { return m.Label === metadata.Label
+                        && (_this.indexSelectedMetadata == null ? true : _this.indexSelectedMetadata !== i); }))) {
+                EqpDynamicModuleDialogService.Warning('Impossibile inserire due metadata con la stessa label.');
+                throw new Error('Impossibile inserire due metadata con la stessa label.');
+            }
+            if (this.indexSelectedMetadata != null && this.indexSelectedMetadata >= 0) {
+                if (this.field.FieldType === FieldTypeEnum.Allegato) {
+                    this.field.MetadataFields[this.indexSelectedMetadata] = metadata;
+                }
+                else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+                    this.field.AttachDefinition.MetadataFields[this.indexSelectedMetadata] = metadata;
+                }
+            }
+            else {
+                if (this.field.FieldType === FieldTypeEnum.Allegato) {
+                    if (!this.field.MetadataFields) {
+                        this.field.MetadataFields = new Array();
+                    }
+                    this.field.MetadataFields.push(metadata);
+                }
+                else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+                    if (!this.field.AttachDefinition.MetadataFields) {
+                        this.field.AttachDefinition.MetadataFields = new Array();
+                    }
+                    this.field.AttachDefinition.MetadataFields.push(metadata);
+                }
+            }
+        }
+        this.dialogMetadataRef.close();
+        this.setMetadataOrdinalPosition();
+        this.reloadMetadataTable();
+    };
+    /**
+     * Metodo per disabilitare il pulsante per salvare il campo inserito/modificato.
+     * @returns Restituisce un booleano, se true il salvataggio viene disabilitato.
+     */
+    AddFormFieldComponent.prototype.disableSaveField = function () {
+        if (this.fieldFormGroup.invalid) {
+            return true;
+        }
+        switch (this.field.FieldType) {
+            case FieldTypeEnum['Elenco generico']:
+                if (this.field.PresentationMode != ListPresentationEnum.Immagini) {
+                    return !this.field.ValuePairs || this.field.ValuePairs.length === 0;
+                }
+                else {
+                    return (!this.field.ButtonImageList
+                        || this.field.ButtonImageList.length === 0
+                        || !!this.field.ButtonImageList.find(function (i) { return !i.ButtonKey || !i.ButtonValue; }));
+                }
+            case FieldTypeEnum.Lookup:
+                return !this.field.FieldNames || this.field.FieldNames.length === 0;
+            default:
+                return false;
+        }
+    };
+    /**
+     * Metodo per salvare il campo inserito/modificato.
+     * Se è stato inserito un field con la stessa label viene generato un errore (le label devono essere univoche).
+     * Una volta aggiunto/aggiornato il campo nell'elenco dei Field della Form chiude il dialog e ricarica la tabella
+     * che mostra l'elenco dei campi aggiunti alla form.
+     */
+    AddFormFieldComponent.prototype.saveAndExitAddField = function (save) {
+        if (save) {
+            this.saveFieldEvent.emit(this.field);
+        }
+        else {
+            this.saveFieldEvent.emit(null);
+        }
+    };
+    /**
+     * Metodo per ripristinare l'oggetto field al cambio del tipo selezionato.
+     * Lascia valorizzate solo le proprietà dell'oggetto BaseField comune a tutti i tipi di campo.
+     */
+    AddFormFieldComponent.prototype.restoreBaseFieldProperties = function () {
+        if (this.field) {
+            var tmpBaseField = JSON.parse(JSON.stringify(this.field));
+            this.field = new BaseField();
+            this.field.Label = tmpBaseField.Label;
+            this.field.Description = tmpBaseField.Description;
+            this.field.Required = tmpBaseField.Required;
+            this.field.FieldType = tmpBaseField.FieldType;
+            this.field.Formula = tmpBaseField.Formula;
+            this.field.ColSpanSizes = tmpBaseField.ColSpanSizes;
+            this.field.FieldGroup = tmpBaseField.FieldGroup;
+        }
+    };
+    AddFormFieldComponent.prototype.configureColumns = function () {
+        var _this = this;
+        this.metadataColumns = [
+            {
+                key: 'action', display: '', type: TypeColumn.MenuAction, buttonMenuIcon: 'more_vert', styles: { flex: '0 0 6%' },
+                actions: [
+                    { name: 'Modifica', icon: 'edit', fn: function (element, index, col) { return _this.openMetadataDialog(element); } },
+                    { name: 'Elimina', icon: 'delete', fn: function (element, index, col) { return _this.deleteMetadata(element); } },
+                ]
+            },
+            { key: 'FieldType', display: 'Tipologia', type: TypeColumn.Enum, enumModel: FieldTypeEnum },
+            { key: 'Label', display: 'Label' },
+            { key: 'Description', display: 'Descrizione' },
+            {
+                key: 'Required', display: 'Obbligatorio',
+                value: function (element) { return !!element.Required; },
+                type: TypeColumn.Boolean,
+                booleanValues: {
+                    true: '<i class="fa fa-check success-color"></i>',
+                    false: '<i class="fa fa-close error-color"></i>'
+                },
+                styles: { flex: '0 0 7%', cellAlignment: CellAlignmentEnum.CENTER }
+            },
+        ];
+    };
+    /**
+     * Metodo per eliminare un metadata aggiunto per un campo di tipo Allegato o Immagine.
+     * @param metadata Metadata da eliminare.
+     */
+    AddFormFieldComponent.prototype.deleteMetadata = function (metadata) {
+        var _this = this;
+        EqpDynamicModuleDialogService.Confirm('Eliminare il metadata selezionato?', function () {
+            if (_this.field.FieldType === FieldTypeEnum.Allegato) {
+                _this.field.MetadataFields.splice(_this.field.MetadataFields.indexOf(metadata), 1);
+            }
+            else if (_this.field.FieldType === FieldTypeEnum.Immagine) {
+                _this.field.AttachDefinition.MetadataFields.splice(_this.field.AttachDefinition.MetadataFields.indexOf(metadata), 1);
+            }
+            _this.setMetadataOrdinalPosition();
+            _this.reloadMetadataTable();
+        }, false, 'Richiesta conferma');
+    };
+    /**
+     * Imposta l'ordinamento dei metadata all'interno dei campi di tipo Allegato e Immagine.
+     */
+    AddFormFieldComponent.prototype.setMetadataOrdinalPosition = function () {
+        var _this = this;
+        if (this.field.FieldType === FieldTypeEnum.Allegato) {
+            if (this.field.MetadataFields) {
+                this.field.MetadataFields.forEach(function (metadata) {
+                    metadata.OrdinalPosition = _this.field.MetadataFields.indexOf(metadata);
+                });
+            }
+        }
+        else if (this.field.FieldType === FieldTypeEnum.Immagine) {
+            if (this.field.AttachDefinition.MetadataFields) {
+                this.field.AttachDefinition.MetadataFields.forEach(function (metadata) {
+                    metadata.OrdinalPosition = _this.field.AttachDefinition.MetadataFields.indexOf(metadata);
+                });
+            }
+        }
+    };
+    /**
+     * Metodo per ricaricare i dati della tabella dei metadata visualizzata nella creazione/modifica
+     * dei campi di tipo Allegato o Immagine.
+     */
+    AddFormFieldComponent.prototype.reloadMetadataTable = function () {
+        if (this.metadataFieldsTable) {
+            this.metadataFieldsTable.reloadDatatable();
+        }
+    };
+    AddFormFieldComponent.ctorParameters = function () { return [
+        { type: FormBuilder },
+        { type: EnumHelper },
+        { type: MatDialog },
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input()
+    ], AddFormFieldComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], AddFormFieldComponent.prototype, "indexField", void 0);
+    __decorate([
+        Input()
+    ], AddFormFieldComponent.prototype, "formFieldsGroups", void 0);
+    __decorate([
+        Input()
+    ], AddFormFieldComponent.prototype, "availableFields", void 0);
+    __decorate([
+        Input()
+    ], AddFormFieldComponent.prototype, "fieldTypesToExclude", void 0);
+    __decorate([
+        Output()
+    ], AddFormFieldComponent.prototype, "saveFieldEvent", void 0);
+    __decorate([
+        ViewChild('textFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "textFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('textareaFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "textareaFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('booleadFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "booleadFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('dateFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "dateFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('numericFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "numericFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('attachmentFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "attachmentFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('imageFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "imageFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('listValueFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "listValueFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('lookupFieldFormTemplate', { static: true })
+    ], AddFormFieldComponent.prototype, "lookupFieldFormTemplate", void 0);
+    __decorate([
+        ViewChild('metadataFieldsTable', { static: false })
+    ], AddFormFieldComponent.prototype, "metadataFieldsTable", void 0);
+    __decorate([
+        ViewChild('dialogMetadata', { static: true })
+    ], AddFormFieldComponent.prototype, "dialogMetadata", void 0);
+    __decorate([
+        ViewChild('buttonImagesKeyValueInputColumn', { static: true })
+    ], AddFormFieldComponent.prototype, "buttonImagesKeyValueInputColumn", void 0);
+    AddFormFieldComponent = __decorate([
+        Component({
+            selector: 'eqp-dynamic-module-add-form-field',
+            template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\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);
+    return AddFormFieldComponent;
+}());
+
+var TextFieldTemplateComponent = /** @class */ (function () {
+    function TextFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+        this.InputMaskEnum = TextMaskEnum;
+    }
+    TextFieldTemplateComponent.prototype.ngOnInit = function () {
+    };
+    TextFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    TextFieldTemplateComponent.prototype.getInputType = function () {
+        switch (this.field.TextMask) {
+            case TextMaskEnum.Email:
+                return 'email';
+            case TextMaskEnum.Password:
+                return 'password';
+            case TextMaskEnum.Telefono:
+                return 'tel';
+            case TextMaskEnum.Url:
+                return 'url';
+            default:
+                return 'text';
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    TextFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    TextFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    __decorate([
+        Input()
+    ], TextFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], TextFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], TextFieldTemplateComponent.prototype, "recordChange", void 0);
+    TextFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'text-field-template',
+            template: "<mat-form-field [formGroup]=\"field.FormFormGroup\">\r\n    <mat-label> {{field.Label}} </mat-label>\r\n    <input matInput [type]=\"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);
+    return TextFieldTemplateComponent;
+}());
+
+var BooleanFieldTemplateComponent = /** @class */ (function () {
+    function BooleanFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+        this.BoolPresentantioEnum = BoolPresentantioEnum;
+    }
+    BooleanFieldTemplateComponent.prototype.ngOnInit = function () {
+        if (this.record[this.field.Name] == undefined || this.record[this.field.Name] == null) {
+            this.record[this.field.Name] = this.field.IsTristate ? null : false;
+        }
+    };
+    BooleanFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    BooleanFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    BooleanFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    __decorate([
+        Input()
+    ], BooleanFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], BooleanFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], BooleanFieldTemplateComponent.prototype, "recordChange", void 0);
+    BooleanFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'boolean-field-template',
+            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);
+    return BooleanFieldTemplateComponent;
+}());
+
+var DateFieldTemplateComponent = /** @class */ (function () {
+    function DateFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+    }
+    DateFieldTemplateComponent.prototype.ngOnInit = function () {
+        this.setTimeType();
+    };
+    DateFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    DateFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    DateFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    /**
+     * In base al formato della data richiesta nel DateField (solo data, solo orario o data e ora)
+     * imposta la visualizzazione corretta del componente eqp-datetimepicker.
+     */
+    DateFieldTemplateComponent.prototype.setTimeType = function () {
+        switch (this.field.IsOnlyDate) {
+            case DateTimeTypeEnum["Solo data"]:
+                this.pickerMode = PickerModeEnum.DATE;
+                break;
+            case DateTimeTypeEnum["Solo orario"]:
+                this.pickerMode = PickerModeEnum.TIME;
+                break;
+            case DateTimeTypeEnum["Data e ora"]:
+                this.pickerMode = PickerModeEnum.DATETIME;
+                break;
+        }
+    };
+    __decorate([
+        Input()
+    ], DateFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], DateFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], DateFieldTemplateComponent.prototype, "recordChange", void 0);
+    DateFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'date-field-template',
+            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);
+    return DateFieldTemplateComponent;
+}());
+
+var TextareaFieldTemplateComponent = /** @class */ (function () {
+    function TextareaFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+    }
+    TextareaFieldTemplateComponent.prototype.ngOnInit = function () {
+    };
+    TextareaFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    TextareaFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    TextareaFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    __decorate([
+        Input()
+    ], TextareaFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], TextareaFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], TextareaFieldTemplateComponent.prototype, "recordChange", void 0);
+    TextareaFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'textarea-field-template',
+            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);
+    return TextareaFieldTemplateComponent;
+}());
+
+var NumericFieldTemplateComponent = /** @class */ (function () {
+    function NumericFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+        this.eqpNumericOptions = {};
+    }
+    NumericFieldTemplateComponent.prototype.ngOnInit = function () {
+        this.configureEqpNumericOptions();
+    };
+    NumericFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    NumericFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    NumericFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    /**
+     * Metodo per configurare eqp-numeric
+     */
+    NumericFieldTemplateComponent.prototype.configureEqpNumericOptions = function () {
+        this.eqpNumericOptions.prefix = this.field.CurrencySymbol ? this.field.CurrencySymbol : "";
+        this.eqpNumericOptions.inputMode = this.field.CurrencySymbol ? EqpNumericInputMode.FINANCIAL : EqpNumericInputMode.NATURAL;
+        if (this.field.MinValue != null && this.field.MinValue != undefined)
+            this.eqpNumericOptions.min = this.field.MinValue;
+        if (this.field.MaxValue != null && this.field.MaxValue != undefined)
+            this.eqpNumericOptions.max = this.field.MaxValue;
+        if (this.field.DecimalSeparator != null && this.field.DecimalSeparator != undefined)
+            this.eqpNumericOptions.decimal = this.field.DecimalSeparator;
+        if (this.field.ThousandsSeparator != null && this.field.ThousandsSeparator != undefined)
+            this.eqpNumericOptions.thousands = this.field.ThousandsSeparator;
+        if (this.field.DecimalPrecision != null && this.field.DecimalPrecision != undefined)
+            this.eqpNumericOptions.precision = this.field.DecimalPrecision;
+    };
+    __decorate([
+        Input()
+    ], NumericFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], NumericFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], NumericFieldTemplateComponent.prototype, "recordChange", void 0);
+    NumericFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'numeric-field-template',
+            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);
+    return NumericFieldTemplateComponent;
+}());
+
+var ListValueFieldTemplateComponent = /** @class */ (function () {
+    function ListValueFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+        this.ListPresentationEnum = ListPresentationEnum;
+        this.arrayData = [];
+    }
+    ListValueFieldTemplateComponent.prototype.ngOnInit = function () {
+        this.setArrayData();
+        if (this.field.IsMultiChoiche && !this.record[this.field.Name]) {
+            this.record[this.field.Name] = [];
+        }
+        // Nel caso in cui sono in modifica di un Record aggiorno il valore
+        // e il validator del FormControl. Se non viene eseguita questa riga
+        // l'utente deve modificare la selezione fatta per aggiornare la form.
+        this.setFormControlValue();
+    };
+    ListValueFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    ListValueFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, 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) {
+            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();
+    };
+    /**
+     * Metodo per aggiornare il/i valore/i selezionato/i dall'utente.
+     * @param emitChange Se true scatena l'evento di output della modifica del valore di record
+     */
+    ListValueFieldTemplateComponent.prototype.updateSelected = function (emitChange) {
+        if (emitChange === void 0) { emitChange = true; }
+        this.record[this.field.Name] = this.arrayData.filter(function (data) { return data.Selected; }).map(function (data) { return data.Value; });
+        this.setFormControlValue();
+        if (emitChange) {
+            this.onRecordValueChange();
+        }
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    ListValueFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    /**
+     * Metodo per creare un array di oggetti del tipo { Key: string, Value: any } da usare come sorgente dati per la eqp-select.
+     */
+    ListValueFieldTemplateComponent.prototype.setArrayData = function () {
+        var _this = this;
+        if (this.field.PresentationMode != 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.
+     */
+    ListValueFieldTemplateComponent.prototype.setFormControlValue = function () {
+        this.field.FormFormGroup.controls[this.field.Name].setValue(this.record[this.field.Name]);
+    };
+    __decorate([
+        Input()
+    ], ListValueFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], ListValueFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], ListValueFieldTemplateComponent.prototype, "recordChange", void 0);
+    ListValueFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'list-value-field-template',
+            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 () {
+    function AttachmentFieldTemplateComponent(utilityService, cdr) {
+        this.utilityService = utilityService;
+        this.cdr = cdr;
+        this.onlyImages = false;
+        this.recordChange = new EventEmitter();
+        this.onAttachmentsChange = new EventEmitter();
+        this.metadataFormGroups = new Array();
+    }
+    AttachmentFieldTemplateComponent.prototype.ngOnInit = function () {
+        // Nel caso in cui sono in modifica di un Record aggiorno il valore
+        // e il validator del FormControl. Se non viene eseguita questa riga
+        // l'utente deve modificare la selezione fatta per aggiornare la form.
+        this.setFormControlValue();
+        // Sempre nel caso in cui sono in modifica creo i FormGroup che rappresentano
+        // gli eventuali metadata degli allegati recuperati.
+        this.createMetadataFormGroups();
+        if (this.field.MetadataFields) {
+            this.field.MetadataFields.sort(function (a, b) { return (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0); });
+        }
+        if (!this.field.AllowedExtensions) {
+            this.field.AllowedExtensions = AvailableFileExtensions.concat(AvailableImageExtensions).map(function (ext) { return ext.key; });
+        }
+    };
+    AttachmentFieldTemplateComponent.prototype.ngAfterViewInit = function () {
+        // Dopo aver renderizzato il DOM, se il campo ammette molteplici allegati
+        // configuro le colonne della eqp-table in eqp-attachments.
+        if (this.field.IsMultiAttach) {
+            this.configureMultiAttachmentColumns();
+        }
+    };
+    AttachmentFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    AttachmentFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    /**
+     * Metodo per intercettare le modifiche agli allegati caricati.
+     * Se il campo prevede dei metadata allora per ogni allegato caricato crea un FormGroup
+     * per gestire la validazione degli input che l'utente può/deve riempire. I FormGroup
+     * seguono lo stesso ordine degli allegati caricati.
+     * @param event Contiene la lista aggiornata degli Attachment caricati dall'utente.
+     */
+    AttachmentFieldTemplateComponent.prototype.catchAttachmentList = function (event) {
+        this.record[this.field.Name] = event;
+        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();
+    };
+    /**
+     * Metodo per aggiornare lo stato di validazione del FormControl che rappresenta
+     * il campo Allegato (non i metadata al suo interno). Se tra le form dei metadata
+     * ne trova una invalida allora marca il controllo come invalido.
+     */
+    AttachmentFieldTemplateComponent.prototype.updateMetadataValidity = function () {
+        if (this.metadataFormGroups.find(function (form) { return form.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 recuperare il BaseField che rappresenta il metadata nella riga della eqp-table
+     * in base alla colonna e alla riga. Una volta trovato il BaseField gli viene associato il
+     * FormGroup di cui fa parte.
+     * @param col Colonna della eqp-table.
+     * @param row Riga della eqp-table (in questo caso eredita da IAttachment).
+     * @returns Restituisce un BaseField per renderizzare il campo nella eqp-table degli allegati multipli.
+     */
+    AttachmentFieldTemplateComponent.prototype.getFieldFromMetadata = function (col, row) {
+        var baseField = JSON.parse(JSON.stringify(this.field.MetadataFields.find(function (metadata) { return metadata.Name === col.key; })));
+        baseField.FormFormGroup = this.metadataFormGroups[this.record[this.field.Name].indexOf(row)];
+        return baseField;
+    };
+    /**
+     * Metodo per aggiornare il valore e il validator del FormControl associato al campo.
+     */
+    AttachmentFieldTemplateComponent.prototype.setFormControlValue = function () {
+        this.field.FormFormGroup.controls[this.field.Name].setValue(this.record[this.field.Name]);
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    AttachmentFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    /**
+     * Metodo per aggiungere alle colonne di eqp-attachments le colonne per modificare i metadata
+     * configurati per il campo Allegato o Immagine.
+     */
+    AttachmentFieldTemplateComponent.prototype.configureMultiAttachmentColumns = function () {
+        var _this = this;
+        if (this.eqpAttachments && this.eqpAttachments.attachmentsColumns && this.field.MetadataFields && this.field.MetadataFields.length > 0) {
+            this.field.MetadataFields.forEach(function (metadata) {
+                _this.eqpAttachments.attachmentsColumns.splice(_this.eqpAttachments.attachmentsColumns.length - 1, 0, { key: metadata.Name, display: metadata.Label, type: TypeColumn.ExternalTemplate, externalTemplate: _this.metadataColumnTemplate });
+            });
+        }
+    };
+    /**
+     * Metodo per creare i FormGroup che rappresentano i metadata degli allegati caricati.
+     */
+    AttachmentFieldTemplateComponent.prototype.createMetadataFormGroups = function () {
+        var _this = this;
+        if (this.field.MetadataFields && this.field.MetadataFields.length > 0) {
+            this.metadataFormGroups = [];
+            if (this.record[this.field.Name] && this.record[this.field.Name].length > 0) {
+                this.record[this.field.Name].forEach(function (attachment) {
+                    _this.metadataFormGroups.push(_this.utilityService.CreateFormFormGroup(_this.field.MetadataFields, attachment, _this.field.FormFormGroup.disabled, !_this.field.IsMultiAttach));
+                });
+            }
+            this.updateMetadataValidity();
+        }
+    };
+    AttachmentFieldTemplateComponent.ctorParameters = function () { return [
+        { type: UtilityHelperService },
+        { type: ChangeDetectorRef }
+    ]; };
+    __decorate([
+        Input()
+    ], AttachmentFieldTemplateComponent.prototype, "onlyImages", void 0);
+    __decorate([
+        Input()
+    ], AttachmentFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], AttachmentFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], AttachmentFieldTemplateComponent.prototype, "recordChange", void 0);
+    __decorate([
+        Output()
+    ], AttachmentFieldTemplateComponent.prototype, "onAttachmentsChange", void 0);
+    __decorate([
+        ViewChild("eqpAttachments", { static: true })
+    ], AttachmentFieldTemplateComponent.prototype, "eqpAttachments", void 0);
+    __decorate([
+        ViewChild('metadataColumnTemplate', { static: true })
+    ], AttachmentFieldTemplateComponent.prototype, "metadataColumnTemplate", void 0);
+    AttachmentFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'attachment-field-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 () {
+    //#endregion
+    function ImageFieldTemplateComponent(dialog, utilityService) {
+        this.dialog = dialog;
+        this.utilityService = utilityService;
+        this.recordChange = new EventEmitter();
+        //#region Proprietà per configurare il componente ngx-image-drawing e aprire il relativo dialog.
+        this.width = null;
+        this.height = null;
+        this.i18n = {
+            saveBtn: 'Salva modifiche',
+            cancelBtn: 'Ricarica originale'
+        };
+    }
+    ImageFieldTemplateComponent.prototype.ngOnInit = function () {
+        this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
+        if (!this.field.AttachDefinition.AllowedExtensions) {
+            this.field.AttachDefinition.AllowedExtensions = AvailableImageExtensions.map(function (ext) { return ext.key; });
+        }
+        this.field.AttachDefinition.Name = this.field.Name;
+        this.field.AttachDefinition.Label = this.field.Label;
+        this.field.AttachDefinition.Description = this.field.Description;
+        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
+        if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+            this.record = changes['record'].currentValue;
+            this.updateField();
+        }
+    };
+    ImageFieldTemplateComponent.prototype.updateMetadataValidity = function () {
+        if (this.preLoadedImageMetadataFormGroup.invalid) {
+            this.field.FormFormGroup.controls[this.field.Name].setErrors({ 'incorrect': true });
+        }
+        else {
+            this.field.FormFormGroup.controls[this.field.Name].setErrors(null);
+        }
+        this.onRecordValueChange();
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    ImageFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    ImageFieldTemplateComponent.prototype.resetPreLoadedImage = function () {
+        this.width = null;
+        this.height = null;
+        this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+        this.getImageDimensions();
+    };
+    /**
+     * Metodo invocato quando vengono aggiunti o eliminati gli allegati nel componente AttachmentFieldTemplate.
+     * Se l'ImageField è abilitato al disegno (EnableDrawing == true), non permette allegati multipli (IsMulitAttach == false)
+     * e nel Record corrente è presente l'immagine caricata dall'utente allora recupera le dimensioni dell'immagine e
+     * apre il dialog con il componente image-drawing per permettere il disegno sull'immagine appena caricata.
+     */
+    ImageFieldTemplateComponent.prototype.onAttachmentsChange = function () {
+        if (!this.field.AttachDefinition.IsMultiAttach && this.field.EnableDrawing && this.record[this.field.Name] && this.record[this.field.Name][0]) {
+            this.getImageDimensions();
+            this.dialogImageDrowingRef = this.dialog.open(this.dialogImageDrowing, {
+                disableClose: true,
+                hasBackdrop: true,
+                width: '75%'
+            });
+        }
+    };
+    /**
+     * Metodo invocato al salvataggio dell'immagine dal componente image-drawing.
+     * Trasforma il Blob ricevuto in un base64, aggiorna il FileContetType e il FileDataBase64
+     * dell'allegato caricato e chiude il dialog in cui disegnare.
+     * @param drawnPicture Blob dell'immagine disegnata.
+     */
+    ImageFieldTemplateComponent.prototype.saveDrowning = function (drawnPicture) {
+        return __awaiter(this, void 0, void 0, function () {
+            var base64File;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, toBase64(drawnPicture)];
+                    case 1:
+                        base64File = _a.sent();
+                        if (base64File) {
+                            this.record[this.field.Name][0].FileContentType = base64File.split(",")[0].split(":")[1].split(";")[0];
+                            this.record[this.field.Name][0].FileDataBase64 = base64File.split(",")[1];
+                        }
+                        if (this.dialogImageDrowingRef) {
+                            this.closeImageDrowingDialog();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Metodo per chiudere il dialog in cui disegnare sull'immagine cariata e svuotare le dimensioni.
+     */
+    ImageFieldTemplateComponent.prototype.closeImageDrowingDialog = function () {
+        this.dialogImageDrowingRef.close();
+        this.width = null;
+        this.height = null;
+    };
+    /**
+     * Metodo per recuperare le dimensioni dell'immagine caricata per mostrare correttamente
+     * il componente image-drawing. Se non viene eseguito questo passaggio l'area in cui disegnare
+     * è più grande dell'immagine stessa e al salvataggio i tratti disegnati vengono spostati.
+     */
+    ImageFieldTemplateComponent.prototype.getImageDimensions = function () {
+        var _this = this;
+        var blob = this.getBlobFromBase64();
+        var reader = new FileReader();
+        reader.onload = function (e) {
+            var image = new Image();
+            image.src = e.target.result;
+            image.onload = function (rs) {
+                _this.height = rs.currentTarget['height'];
+                _this.width = rs.currentTarget['width'];
+            };
+        };
+        reader.readAsDataURL(blob);
+    };
+    /**
+     * Metodo per convertire il base64 di un'immagine in un Blob.
+     * Necessario per il recupero delle dimensioni dell'immagine caricata a partire dal suo base64.
+     * Viene eseguito solo nel caso in cui l'ImageField non ammette allegati multipli.
+     * @returns Restituisce il Blob dell'immagine caricata.
+     */
+    ImageFieldTemplateComponent.prototype.getBlobFromBase64 = function () {
+        var byteCharacters = atob(this.record[this.field.Name][0].FileDataBase64);
+        var byteNumbers = new Array(byteCharacters.length);
+        for (var i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        var byteArray = new Uint8Array(byteNumbers);
+        return new Blob([byteArray], { type: this.record[this.field.Name][0].FileContentType });
+    };
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    ImageFieldTemplateComponent.prototype.onRecordValueChange = function () {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    };
+    ImageFieldTemplateComponent.ctorParameters = function () { return [
+        { type: MatDialog },
+        { type: UtilityHelperService }
+    ]; };
+    __decorate([
+        Input()
+    ], ImageFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Input()
+    ], ImageFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Output()
+    ], ImageFieldTemplateComponent.prototype, "recordChange", void 0);
+    __decorate([
+        ViewChild("dialogImageDrowing", { static: true })
+    ], ImageFieldTemplateComponent.prototype, "dialogImageDrowing", void 0);
+    ImageFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'image-field-template',
+            template: "<!-- 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;
+}());
+
+var ListFormRecordComponent = /** @class */ (function () {
+    function ListFormRecordComponent() {
+        this.showTitle = true;
+        this.columns = new Array();
+        this.onAddViewEditRecord = new EventEmitter();
+        this.onDeleteRecord = new EventEmitter();
+        this.onDuplicateRecord = new EventEmitter();
+    }
+    ListFormRecordComponent.prototype.ngOnInit = function () {
+        this.configureColumns();
+    };
+    ListFormRecordComponent.prototype.ngOnChanges = function (changes) {
+        // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+        if (changes['values'] != undefined && changes['values'].firstChange == false) {
+            this.values = changes['values'].currentValue;
+            this.reloadTables();
+        }
+    };
+    /**
+     * Metodo per configurare le colonne della eqp-table.
+     */
+    ListFormRecordComponent.prototype.configureColumns = function () {
+        var _this = this;
+        this.columns = [
+            {
+                key: "action", display: "",
+                type: TypeColumn.MenuAction, buttonMenuIcon: "more_vert", styles: { flex: "0 0 6%" },
+                actions: [
+                    { name: "Visualizza", icon: "info", fn: function (element, index, col) { return _this.viewOrEditRecord(element, true); } },
+                    { name: "Modifica", icon: "edit", fn: function (element, index, col) { return _this.viewOrEditRecord(element, false); } },
+                    { name: "Duplica", icon: "file_copy", fn: function (element, index, col) { return _this.duplicateRecord(element); } },
+                    { name: "Elimina", icon: "delete", fn: function (element, index, col) { return _this.deleteRecord(element); } },
+                ],
+            },
+        ];
+        this.createAdditionalActions();
+        this.createColumnsFromFormFields();
+    };
+    /**
+     * Metodo per aggiungere nella colonna "action" della eqp-table le azioni sui record
+     * definite dall'utente all'interno della Form.
+     */
+    ListFormRecordComponent.prototype.createAdditionalActions = function () {
+        var _this = this;
+        if (this.form.ActionsOnRecord && this.form.ActionsOnRecord.length > 0) {
+            this.form.ActionsOnRecord
+                .sort(function (a, b) { return (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0); })
+                .forEach(function (action) {
+                _this.columns.find(function (c) { return c.key === 'action'; })
+                    .actions
+                    .push({
+                    name: action.Name, icon: action.Icon, fn: function (element, index, col) {
+                        var rec = element;
+                        var ctx = UtilityHelperService.context;
+                        eval(action.Action);
+                        // TODO: salvare le modifiche
+                    }
+                });
+            });
+        }
+    };
+    /**
+     * Metodo che scatena l'evento di Output per mostrare o modificare il record
+     * selezionato sulla eqp-table.
+     * @param record Record da visualizzare o modificare selezionato sulla eqp-table.
+     * @param onlyView Se TRUE viene mostrato il componente add-form-record in sola lettura.
+     */
+    ListFormRecordComponent.prototype.viewOrEditRecord = function (record, onlyView) {
+        this.onAddViewEditRecord.emit({ record: record, onlyView: onlyView });
+    };
+    /**
+     * Metodo per duplicare un record della form.
+     * @param record Record da duplicare.
+     */
+    ListFormRecordComponent.prototype.duplicateRecord = function (record) {
+        this.onDuplicateRecord.emit(record);
+    };
+    /**
+     * Metodo per eliminare un record dalla lista.
+     * @param record Record da eliminare selezionato sulla eqp-table.
+     */
+    ListFormRecordComponent.prototype.deleteRecord = function (record) {
+        this.onDeleteRecord.emit(record);
+    };
+    /**
+     * Metodo per creare la configurazione delle colonne per la eqp-table.
+     * Individua i BaseField da mostrare e li usa per creare le ConfigColumn.
+     * Le colonne vengono create per i BaseField con il flag InListView a TRUE
+     * oppure, nel caso non siano stati specificati i campi da visualizzare,
+     * seleziona i primi 6.
+     */
+    ListFormRecordComponent.prototype.createColumnsFromFormFields = function () {
+        var _this = this;
+        var fieldsForColumns;
+        if (this.form.Fields.find(function (f) { return f.InListView; })) {
+            fieldsForColumns = this.form.Fields.filter(function (f) { return f.InListView; });
+        }
+        else {
+            fieldsForColumns = this.form.Fields.filter(function (f) { return f.OrdinalPosition < 6; });
+        }
+        fieldsForColumns.sort(function (a, b) { return (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0); })
+            .forEach(function (field) {
+            _this.columns.push(_this.createFieldColumn(field));
+        });
+    };
+    /**
+     * Metodo per creare l'oggetto ConfigureColumn che rappresenta il BaseField passato in input.
+     * @param field BaseField per cui creare la colonna nella eqp-table
+     * @returns Restituisce una ConfigColumn per la eqp-table
+     */
+    ListFormRecordComponent.prototype.createFieldColumn = function (field) {
+        var column = { key: field.Name, display: field.Label };
+        switch (field.FieldType) {
+            case FieldTypeEnum['Booleano']:
+                column.type = TypeColumn.Boolean;
+                column.booleanValues = { false: '<i class="fa fa-times error-color"></i>', true: '<i class="fa fa-check success-color"></i>' };
+                column.styles = { flex: "0 0 7%", cellAlignment: CellAlignmentEnum.CENTER };
+                break;
+            case FieldTypeEnum['Data e/o ora']:
+                if (field.IsOnlyDate != DateTimeTypeEnum['Solo orario']) {
+                    column.type = TypeColumn.Date;
+                    if (field.IsOnlyDate == DateTimeTypeEnum['Data e ora']) {
+                        column.format = "dd/MM/yyyy HH:mm";
+                    }
+                    else if (field.IsOnlyDate == DateTimeTypeEnum['Solo data']) {
+                        column.format = field.DateFormat ? field.DateFormat.replace("DD", "dd") : "dd/MM/yyyy";
+                    }
+                }
+                break;
+            case FieldTypeEnum['Campo numerico']:
+                if (field.CurrencySymbol) {
+                    column.numberPipe = NumberColumnPipe.CURRENCY;
+                    column.currencyPipeCode = field.CurrencySymbol;
+                }
+                else if (!field.IsInteger) {
+                    column.numberPipe = NumberColumnPipe.DECIMAL;
+                }
+                break;
+            case FieldTypeEnum['Allegato']:
+            case FieldTypeEnum['Immagine']:
+                column.value = function (element) {
+                    if (field.IsMultiAttach || (field.AttachDefinition && field.AttachDefinition.IsMultiAttach)) {
+                        return element[field.Name] != null && element[field.Name].length > 0 ? element[field.Name].map(function (a) { return a.FileName; }).join(", ") : null;
+                    }
+                    else {
+                        return element[field.Name] != null && element[field.Name].length > 0 ? element[field.Name][0].FileName : null;
+                    }
+                };
+                column.isSortable = false;
+                column.isSearchable = false;
+                break;
+            case FieldTypeEnum['Elenco generico']:
+                column.value = function (element) {
+                    if (field.IsMultiChoiche) {
+                        if (!element[field.Name] || element[field.Name].length == 0) {
+                            return null;
+                        }
+                        else {
+                            return Object.keys(field.ValuePairs).filter(function (k) { return element[field.Name].includes(field.ValuePairs[k]); }).join(", ");
+                        }
+                    }
+                    else {
+                        return Object.keys(field.ValuePairs).find(function (k) { return field.ValuePairs[k] == element[field.Name]; });
+                    }
+                };
+                column.isSortable = false;
+                column.isSearchable = false;
+                break;
+            case FieldTypeEnum['Lookup']:
+                // TODO
+                break;
+        }
+        return column;
+    };
+    /**
+     * Metodo per ricaricare i dati della eqp-table.
+     */
+    ListFormRecordComponent.prototype.reloadTables = function () {
+        if (this.tableRecords) {
+            this.tableRecords.reloadDatatable();
+        }
+    };
+    __decorate([
+        Input()
+    ], ListFormRecordComponent.prototype, "showTitle", void 0);
+    __decorate([
+        Input()
+    ], ListFormRecordComponent.prototype, "form", void 0);
+    __decorate([
+        Input()
+    ], ListFormRecordComponent.prototype, "values", void 0);
+    __decorate([
+        ViewChild('tableRecords', { static: true })
+    ], ListFormRecordComponent.prototype, "tableRecords", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onAddViewEditRecord", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onDeleteRecord", void 0);
+    __decorate([
+        Output()
+    ], ListFormRecordComponent.prototype, "onDuplicateRecord", void 0);
+    ListFormRecordComponent = __decorate([
+        Component({
+            selector: 'list-form-record',
+            template: "<div class=\"row eqp-dynamic-module-title\">\r\n    <div class=\"col-md-6\">\r\n        <h4 *ngIf=\"showTitle\"><b>Elenco {{form.Name}}</b></h4>\r\n    </div>\r\n    <div class=\"col-md-6 text-right\">\r\n        <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"onAddViewEditRecord.emit(null)\">\r\n            <mat-icon>add</mat-icon>\r\n            <span style=\"margin-left: 10px;\">Aggiungi</span>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n\r\n<eqp-table #tableRecords [data]=\"values\" [columns]=\"columns\"></eqp-table>",
+            styles: ["::ng-deep .error-color{color:var(--danger)}::ng-deep .success-color{color:var(--success)}"]
+        })
+    ], ListFormRecordComponent);
+    return ListFormRecordComponent;
+}());
+
+var AddFormRecordComponent = /** @class */ (function () {
+    function AddFormRecordComponent(cdr, utilityService) {
+        this.cdr = cdr;
+        this.utilityService = utilityService;
+        this.showTitle = true;
+        this.showButtons = true;
+        this.form = new Form();
+        this.fieldGroups = {};
+        this.FormScalarTypeEnum = FormScalarTypeEnum;
+        this.FieldTypeEnum = FieldTypeEnum;
+        this.saveRecordEvent = new EventEmitter();
+    }
+    AddFormRecordComponent.prototype.ngOnInit = function () {
+        if (this.record == null) {
+            this.record = new Record();
+        }
+        this.createRecordProperties();
+        this.reorderFormFields();
+        this.createFormGroup();
+        if (this.form.FormScalarType != FormScalarTypeEnum.Semplice) {
+            this.createFieldGroups();
+        }
+        this.cdr.detectChanges();
+    };
+    /**
+     * Metodo invocato al cambio del valore di ogni proprietà dell'oggetto record.
+     * Serve ad aggiornare il valore di tutti i campi che hanno una formula.
+     */
+    AddFormRecordComponent.prototype.onRecordChange = function () {
+        if (this.fieldTemplate && this.fieldTemplate.length > 0) {
+            this.fieldTemplate.forEach(function (f) { return f.updateField(); });
+        }
+    };
+    /**
+     * Metodo per salvare i dati inseriti dall'utente una volta conclusa la compilazione della form.
+     */
+    AddFormRecordComponent.prototype.saveOrExitForm = function (exit) {
+        if (exit) {
+            this.saveRecordEvent.emit(null);
+        }
+        else {
+            this.saveRecordEvent.emit(this.record);
+        }
+    };
+    /**
+     * Metodo per creare nell'oggetto Record le proprietà mancanti rispetto ai campi che compongono la form.
+     */
+    AddFormRecordComponent.prototype.createRecordProperties = function () {
+        var _this = this;
+        var recordProperties = Object.keys(this.record);
+        this.form.Fields.forEach(function (field) {
+            if (!recordProperties.find(function (p) { return p === field.Name; })) {
+                _this.record[field.Name] = null;
+            }
+        });
+        if (this.form.InnerForms && this.form.InnerForms.length > 0) {
+            this.form.InnerForms.forEach(function (form) {
+                var arrayName = form.Name.split(" ").join("_");
+                if (!recordProperties.find(function (p) { return p === arrayName; })) {
+                    _this.record[arrayName] = [];
+                }
+            });
+        }
+    };
+    /**
+     * Metodo per riordinare i campi che compongono la form.
+     */
+    AddFormRecordComponent.prototype.reorderFormFields = function () {
+        if (this.form.Fields && this.form.Fields.length > 0) {
+            this.form.Fields.sort(function (a, b) { return (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0); });
+        }
+    };
+    /**
+     * Metodo per creare il FormGroup che rappresenta la form.
+     */
+    AddFormRecordComponent.prototype.createFormGroup = function () {
+        this.formForm = this.utilityService.CreateFormFormGroup(this.form.Fields, this.record, this.onlyView);
+    };
+    /**
+     * Metodo per creare i gruppi in cui raggruppare i campi della form in base
+     * a come è stata configurata dall'utente.
+     */
+    AddFormRecordComponent.prototype.createFieldGroups = function () {
+        var _this = this;
+        this.form.FormFieldsGroups
+            .sort(function (a, b) { return (a.OrdinalPosition > b.OrdinalPosition) ? 1 : ((b.OrdinalPosition > a.OrdinalPosition) ? -1 : 0); })
+            .map(function (g) { return g.Name; })
+            .forEach(function (groupName) {
+            _this.fieldGroups[groupName] = _this.form.Fields.filter(function (f) { return f.FieldGroup == groupName; });
+        });
+    };
+    AddFormRecordComponent.ctorParameters = function () { return [
+        { type: ChangeDetectorRef },
+        { type: UtilityHelperService }
+    ]; };
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "showTitle", void 0);
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "showButtons", void 0);
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "form", void 0);
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "record", void 0);
+    __decorate([
+        Input()
+    ], AddFormRecordComponent.prototype, "onlyView", void 0);
+    __decorate([
+        Output()
+    ], AddFormRecordComponent.prototype, "saveRecordEvent", void 0);
+    __decorate([
+        ViewChildren("fieldTemplate")
+    ], AddFormRecordComponent.prototype, "fieldTemplate", void 0);
+    AddFormRecordComponent = __decorate([
+        Component({
+            selector: 'add-form-record',
+            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);
+    return AddFormRecordComponent;
+}());
+
+var DynamicModuleFieldComponent = /** @class */ (function () {
+    function DynamicModuleFieldComponent(dialog) {
+        this.dialog = dialog;
+        this.recordChange = new EventEmitter();
+        this.FieldTypeEnum = FieldTypeEnum;
+        this.onlyViewInnerFormRecord = false;
+    }
+    DynamicModuleFieldComponent.prototype.updateField = function () {
+        if (this.fieldTemplate && this.fieldTemplate.length > 0) {
+            this.fieldTemplate.forEach(function (f) { return f.updateField(); });
+        }
+    };
+    DynamicModuleFieldComponent.prototype.ngOnInit = function () {
+    };
+    /**
+     * Metodo invocato al cambio del valore di ogni proprietà dell'oggetto record.
+     * Serve ad aggiornare il valore di tutti i campi che hanno una formula.
+     */
+    DynamicModuleFieldComponent.prototype.onRecordChange = function () {
+        this.recordChange.emit(this.record);
+    };
+    /**
+     * Metodo per recuperare una InnerForm a partire dal Field che la rappresenta.
+     * @param field Campo a partire dal quale si vuole recuperare la InnerForm.
+     * @returns Restituisce un oggetto di tipo Form.
+     */
+    DynamicModuleFieldComponent.prototype.getInnerFormFromField = function (field) {
+        if (this.form.InnerForms && this.form.InnerForms.find(function (f) { return f.Name == field.Label; })) {
+            return this.form.InnerForms.find(function (f) { return f.Name == field.Label; });
+        }
+        else {
+            return null;
+        }
+    };
+    /**
+   * Metodo per aprire un dialog in cui aggiungere/modificare/visualizzare un record appartenente
+   * a una form di dettaglio.
+   * @param record Evento di output del componente list-form-record, contiene il record selezionato e un booleno che indica
+   * se l'utente vuole modificare o visualizzare l'elemento selezionato.
+   * @param innerForm Contiene la Form di dettaglio dalla quale è stato richiesto il record.
+   */
+    DynamicModuleFieldComponent.prototype.onAddViewEditInnerFormRecord = function (record, field) {
+        this.selectedInnerForm = this.getInnerFormFromField(field);
+        if (record == null) {
+            this.selectedInnerFormRecord = new Record();
+            this.indexInnerFormRecord = null;
+            this.onlyViewInnerFormRecord = false;
+        }
+        else {
+            this.selectedInnerFormRecord = JSON.parse(JSON.stringify(record.record));
+            this.indexInnerFormRecord = this.record[field.Name].indexOf(record);
+            this.onlyViewInnerFormRecord = record.onlyView;
+        }
+        this.dialogInnerFormRecordRef = this.dialog.open(this.dialogInnerFormRecord, {
+            disableClose: true,
+            hasBackdrop: true,
+            width: '75%'
+        });
+    };
+    /**
+     * Metodo invocato al salvataggio o alla chiusura del dialog di aggiunta/modifica/visualizzazione
+     * di un record di una form di dettaglio.
+     * @param record Oggetto restituito dal componente add-form-field (questo qui) contenente il Record
+     * aggiornato dall'utente. Se null allora l'utente non ha modificato nulla e ha chiuso il dialog.
+     */
+    DynamicModuleFieldComponent.prototype.onSaveInnerFormRecord = function (record) {
+        if (record != null) {
+            var arrayName = this.selectedInnerForm.Name.split(' ').join('_');
+            if (this.indexInnerFormRecord != null && this.indexInnerFormRecord >= 0) {
+                this.record[arrayName][this.indexInnerFormRecord] = record;
+            }
+            else {
+                if (!this.record[arrayName]) {
+                    this.record[arrayName] = [];
+                }
+                this.record[arrayName].push(record);
+            }
+        }
+        this.dialogInnerFormRecordRef.close();
+        // Ricarico la tabella dei record per visualizzare le modifiche fatte dall'utente.
+        if (this.listInnerFormRecords && this.listInnerFormRecords.length > 0) {
+            this.listInnerFormRecords.forEach(function (list) {
+                if (list && list.tableRecords) {
+                    list.tableRecords.reloadDatatable();
+                }
+            });
+        }
+    };
+    DynamicModuleFieldComponent.ctorParameters = function () { return [
+        { type: MatDialog }
+    ]; };
+    __decorate([
+        Input()
+    ], DynamicModuleFieldComponent.prototype, "field", void 0);
+    __decorate([
+        Input()
+    ], DynamicModuleFieldComponent.prototype, "form", void 0);
+    __decorate([
+        Input()
+    ], DynamicModuleFieldComponent.prototype, "record", void 0);
+    __decorate([
+        Output()
+    ], DynamicModuleFieldComponent.prototype, "recordChange", void 0);
+    __decorate([
+        ViewChild('dialogInnerFormRecord', { static: true })
+    ], DynamicModuleFieldComponent.prototype, "dialogInnerFormRecord", void 0);
+    __decorate([
+        ViewChildren("fieldTemplate")
+    ], DynamicModuleFieldComponent.prototype, "fieldTemplate", void 0);
+    __decorate([
+        ViewChildren('listInnerFormRecords')
+    ], DynamicModuleFieldComponent.prototype, "listInnerFormRecords", void 0);
+    DynamicModuleFieldComponent = __decorate([
+        Component({
+            selector: 'dynamic-module-field',
+            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([
+        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() {
+    }
+    EqpDynamicModuleModule = __decorate([
+        NgModule({
+            declarations: [
+                EqpDynamicModuleComponent,
+                EqpDynamicModuleConfiguratorComponent,
+                AddFormFieldComponent,
+                TextFieldTemplateComponent,
+                BooleanFieldTemplateComponent,
+                DateFieldTemplateComponent,
+                TextareaFieldTemplateComponent,
+                NumericFieldTemplateComponent,
+                ListValueFieldTemplateComponent,
+                AttachmentFieldTemplateComponent,
+                ImageFieldTemplateComponent,
+                ListFormRecordComponent,
+                AddFormRecordComponent,
+                DynamicModuleFieldComponent,
+                SpinnerComponent,
+            ],
+            imports: [
+                MaterialModule,
+                FormsModule,
+                CommonModule,
+                ReactiveFormsModule,
+                EqpTableModule,
+                EqpAttachmentsModule,
+                EqpSelectModule,
+                EqpDatetimepickerModule,
+                EqpFiltersModule,
+                EqpNumericModule,
+                EqpImgDrawingModule
+            ],
+            exports: [
+                EqpDynamicModuleComponent,
+                EqpDynamicModuleConfiguratorComponent
+            ]
+        })
+    ], EqpDynamicModuleModule);
+    return EqpDynamicModuleModule;
+}());
+
+/**
+ * Rappresenta l'entità su cui vengono eseguite le operazioni di salvataggio.
+ */
+var Entity = /** @class */ (function (_super) {
+    __extends(Entity, _super);
+    function Entity() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Entity;
+}(BaseObj));
+
+var ImageField = /** @class */ (function (_super) {
+    __extends(ImageField, _super);
+    function ImageField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Object.defineProperty(ImageField.prototype, "_contextualAttachments", {
+        /**Proprietà per recuperare l'allegato caricato come array per eqp-attachments (se ImageIsContextualAttachment == true) */
+        get: function () {
+            return this.ContextualAttachment ? [this.ContextualAttachment] : [];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return ImageField;
+}(BaseField));
+
+/**Questo tipo di campo rappresenta una lookup ad altri valori */
+var LookupField = /** @class */ (function (_super) {
+    __extends(LookupField, _super);
+    function LookupField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return LookupField;
+}(BaseField));
+
+/**Classe contiene la configurazione dei campi numerici */
+var NumericField = /** @class */ (function (_super) {
+    __extends(NumericField, _super);
+    function NumericField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return NumericField;
+}(BaseField));
+
+var TextareaField = /** @class */ (function (_super) {
+    __extends(TextareaField, _super);
+    function TextareaField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return TextareaField;
+}(BaseField));
+
+/*
+ * Public API Surface of eqp-dynamic-module
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionOnRecord, AddFormFieldComponent, AddFormRecordComponent, ArrayValidators, AttachmentField, AttachmentFieldTemplateComponent, AvailableFileExtensions, AvailableImageExtensions, BaseField, BaseObj, BoolPresentantioEnum, BooleanField, BooleanFieldTemplateComponent, ButtonImage, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynRecord, DynamicModuleFieldComponent, EndPointConfiguration, EndPointData, EndPointDataParams, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, ParamTypeEnum, Record, RequestMethodEnum, SpinnerService, TelRegex, TextField, TextFieldTemplateComponent, TextMaskEnum, TextareaField, TextareaFieldTemplateComponent, UrlRegex, UtilityHelperService, ɵ0, SpinnerComponent as ɵa, MaterialModule as ɵb };
+//# sourceMappingURL=eqproject-eqp-dynamic-module.js.map