@eqproject/eqp-dynamic-module 0.0.1

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

@@ -0,0 +1,2902 @@
+import { __extends, __decorate } from 'tslib';
+import { CommonModule } from '@angular/common';
+import { ɵɵdefineInjectable, ɵɵinject, Injectable, Input, Component, NgModule, EventEmitter, ViewChild, Output, ChangeDetectorRef, ViewChildren } from '@angular/core';
+import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+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 { EqpAttachmentsModule } from '@eqproject/eqp-attachments';
+import { EnumHelper, EqpSelectModule } from '@eqproject/eqp-select';
+import { PickerModeEnum, EqpDatetimepickerModule } from '@eqproject/eqp-datetimepicker';
+import { EqpFiltersModule } from '@eqproject/eqp-filters';
+import { EqpNumericModule } from '@eqproject/eqp-numeric';
+import Swal from 'sweetalert2';
+import { BrowserModule } from '@angular/platform-browser';
+import { UtilityHelperService as UtilityHelperService$1 } from 'projects/eqp-dynamic-module/src/lib/services/utilityHelper.services';
+import { UtilityHelperService as UtilityHelperService$2, EqpDynamicModuleDialogService as EqpDynamicModuleDialogService$1, FieldTypeEnum as FieldTypeEnum$1, DateTimeTypeEnum as DateTimeTypeEnum$1 } from 'projects/eqp-dynamic-module/src/public-api';
+
+var Context = /** @class */ (function () {
+    function Context() {
+        this.User = new ContextUser();
+    }
+    return Context;
+}());
+var ContextUser = /** @class */ (function () {
+    function ContextUser() {
+    }
+    return ContextUser;
+}());
+
+/**
+ * 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 = {}));
+
+/**
+ * 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 = {}));
+
+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 UtilityHelperService = /** @class */ (function () {
+    function UtilityHelperService(formBuilder) {
+        this.formBuilder = formBuilder;
+    }
+    UtilityHelperService_1 = UtilityHelperService;
+    UtilityHelperService.EvaluateFieldFormula = function (formula, rec, ctx) {
+        var evaluatedValue = eval(formula.replace('"', '\"'));
+        return (evaluatedValue ? evaluatedValue : null);
+    };
+    UtilityHelperService.SetContext = function (ctx) {
+        this.context = ctx;
+    };
+    /**
+     * 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 = [];
+            // 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 = 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)) {
+                        availableOptions.push({ label: prop, value: typedFormula + prop.substring(lastTypedWork.length, prop.length) });
+                    }
+                });
+            }
+            autocompleteOptions = availableOptions;
+        }
+        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));
+                }
+                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);
+    };
+    var UtilityHelperService_1;
+    UtilityHelperService.context = new Context();
+    UtilityHelperService.ctorParameters = function () { return [
+        { type: FormBuilder }
+    ]; };
+    UtilityHelperService.ɵprov = ɵɵdefineInjectable({ factory: function UtilityHelperService_Factory() { return new UtilityHelperService(ɵɵinject(FormBuilder)); }, token: UtilityHelperService, providedIn: "root" });
+    UtilityHelperService = UtilityHelperService_1 = __decorate([
+        Injectable({
+            providedIn: 'root'
+        })
+    ], UtilityHelperService);
+    return UtilityHelperService;
+}());
+
+var EqpDynamicModuleComponent = /** @class */ (function () {
+    function EqpDynamicModuleComponent() {
+        this.context = new Context();
+        this.form = new Form();
+        this.showButtons = true;
+        this.viewMode = FormTypeEnum.LIST;
+        this.FormTypeEnum = FormTypeEnum;
+    }
+    EqpDynamicModuleComponent.prototype.ngOnInit = function () {
+        UtilityHelperService.SetContext(this.context);
+    };
+    EqpDynamicModuleComponent.prototype.onAddViewEditRecord = function (event) {
+        if (event != null) {
+            this.selectedRecord = JSON.parse(JSON.stringify(event.record));
+            this.onlyView = event.onlyView;
+        }
+        else {
+            this.selectedRecord = null;
+            this.onlyView = false;
+        }
+        this.viewMode = FormTypeEnum.SCALAR;
+    };
+    EqpDynamicModuleComponent.prototype.onSaveForm = function (event) {
+        //TODO: Salvare il record!
+        if (event != null) {
+            if (event.ID && this.values.find(function (v) { return v.ID == event.ID; })) {
+                this.values[this.values.findIndex(function (v) { return v.ID == event.ID; })] = event;
+            }
+            else {
+                this.values.push(event);
+            }
+        }
+        this.viewMode = FormTypeEnum.LIST;
+        console.log(event);
+    };
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "context", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "form", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "values", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "showButtons", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleComponent.prototype, "viewMode", void 0);
+    EqpDynamicModuleComponent = __decorate([
+        Component({
+            selector: 'eqp-dynamic-module',
+            template: "<add-form-record *ngIf=\"viewMode == FormTypeEnum.SCALAR\" [form]=\"form\" [record]=\"selectedRecord\"\r\n    [showButtons]=\"showButtons\" [onlyView]=\"onlyView\" (saveRecordEvent)=\"onSaveForm($event)\">\r\n</add-form-record>\r\n\r\n<list-form-record *ngIf=\"viewMode == FormTypeEnum.LIST\" [form]=\"form\" [values]=\"values\"\r\n    (onAddViewEditRecord)=\"onAddViewEditRecord($event)\">\r\n</list-form-record>",
+            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 EqpDynamicModuleDialogService = /** @class */ (function () {
+    function EqpDynamicModuleDialogService() {
+    }
+    /**
+     * Mostra uno sweet alert di tipo ERROR con il messaggio passato come parametro.
+     * @param message Messaggio d'errore da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Errore')
+     */
+    EqpDynamicModuleDialogService.Error = function (message, title) {
+        if (title === void 0) { title = null; }
+        var currentTitle = title != null ? title : 'Errore';
+        if (Array.isArray(message)) {
+            currentTitle = title != null ? title : 'Errore';
+            var htmlErrors = message.join("<br>");
+            Swal.fire({
+                title: currentTitle,
+                html: htmlErrors,
+                icon: 'error'
+            });
+        }
+        else {
+            Swal.fire(currentTitle, message, 'error');
+        }
+    };
+    /**
+     * Mostra uno sweetalert di tipo CONFIRM con il messaggio passato come parametro e se viene premuto
+     * CONFERMA lancia la funzione di callback passata come parametro
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Info')
+     */
+    EqpDynamicModuleDialogService.Confirm = function (message, confirmCallback, isWarning, title, customWidth) {
+        if (isWarning === void 0) { isWarning = false; }
+        if (title === void 0) { title = null; }
+        if (customWidth === void 0) { customWidth = null; }
+        var currentTitle = title != null ? title : 'Sei sicuro di voler procedere?';
+        if (Array.isArray(message)) {
+            var htmlErrors = message.join("<br>");
+            Swal.fire({
+                title: currentTitle,
+                html: htmlErrors,
+                width: customWidth ? customWidth : '32rem',
+                icon: !isWarning ? 'question' : 'warning',
+                showCancelButton: true,
+                allowOutsideClick: false,
+                allowEscapeKey: false
+            }).then(function (result) {
+                if (result.value && confirmCallback) {
+                    confirmCallback();
+                }
+            });
+        }
+        else {
+            Swal.fire({
+                title: currentTitle,
+                text: message,
+                width: customWidth ? customWidth : '32rem',
+                icon: !isWarning ? 'question' : 'warning',
+                showCancelButton: true,
+                allowOutsideClick: false,
+                allowEscapeKey: false
+            }).then(function (result) {
+                if (result.value && confirmCallback) {
+                    confirmCallback();
+                }
+            });
+        }
+    };
+    /**
+     * Mostra uno sweetalert di tipo INFO con il messaggio passato come parametro
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Info')
+     */
+    EqpDynamicModuleDialogService.Info = function (message, title, isToast) {
+        if (title === void 0) { title = null; }
+        if (isToast === void 0) { isToast = null; }
+        var currentTitle = title != null ? title : "Informazione:";
+        Swal.fire(currentTitle, message, 'info');
+    };
+    /**
+     * Mostra uno sweetalert di tipo WARNING con il messaggio passato come parametro
+     * @param message Messaggio da mostrare nello sweetalert
+     * @param title Titolo dello sweetalert (di default mostra 'Attenzione!')
+     */
+    EqpDynamicModuleDialogService.Warning = function (message, title, isToast) {
+        if (title === void 0) { title = null; }
+        if (isToast === void 0) { isToast = null; }
+        var currentTitle = title != null ? title : "Attenzione!";
+        if (Array.isArray(message)) {
+            var htmlWarnings = message.join("<br>");
+            Swal.fire({
+                title: currentTitle,
+                html: htmlWarnings,
+                icon: 'warning'
+            });
+        }
+        else {
+            Swal.fire(currentTitle, message, 'warning');
+        }
+    };
+    EqpDynamicModuleDialogService.ɵprov = ɵɵdefineInjectable({ factory: function EqpDynamicModuleDialogService_Factory() { return new EqpDynamicModuleDialogService(); }, token: EqpDynamicModuleDialogService, providedIn: "root" });
+    EqpDynamicModuleDialogService = __decorate([
+        Injectable({
+            providedIn: 'root'
+        })
+    ], EqpDynamicModuleDialogService);
+    return EqpDynamicModuleDialogService;
+}());
+
+var EqpDynamicModuleConfiguratorComponent = /** @class */ (function () {
+    function EqpDynamicModuleConfiguratorComponent(formBuilder, dialog) {
+        this.formBuilder = formBuilder;
+        this.dialog = dialog;
+        this.context = new Context();
+        this.form = new Form();
+        this.innerFormManagment = false;
+        this.formCompleted = false;
+        //#region Enumeratori usati nell'html
+        this.FormTypeEnum = FormTypeEnum;
+        this.FormScalarTypeEnum = FormScalarTypeEnum;
+        //#endregion
+        this.saveFormEvent = new EventEmitter();
+    }
+    EqpDynamicModuleConfiguratorComponent.prototype.ngOnInit = function () {
+        if (this.context) {
+            UtilityHelperService.SetContext(this.context);
+        }
+        this.configureColumns();
+        this.createFormForm();
+    };
+    /**
+     * 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 che scatena l'evento di output per salvare la form creata alla fine del wizard
+     */
+    EqpDynamicModuleConfiguratorComponent.prototype.saveForm = function () {
+        this.saveFormEvent.emit(this.form);
+    };
+    /**
+     * 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 }
+    ]; };
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "context", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "form", void 0);
+    __decorate([
+        Input()
+    ], EqpDynamicModuleConfiguratorComponent.prototype, "innerFormManagment", 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);
+    EqpDynamicModuleConfiguratorComponent = __decorate([
+        Component({
+            selector: 'eqp-dynamic-module-configurator',
+            template: "<mat-horizontal-stepper linear #stepper>\r\n    <!-- DATI GENERALI DELLA FORM -->\r\n    <mat-step [stepControl]=\"formFormGroup\">\r\n        <form [formGroup]=\"formFormGroup\" (keydown.enter)=\"false\">\r\n            <ng-template matStepLabel>\r\n                <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n                Dati generali della form\r\n            </ng-template>\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col-md-4\">\r\n                    <mat-form-field>\r\n                        <mat-label>Nome</mat-label>\r\n                        <input matInput formControlName=\"Name\" [(ngModel)]=\"form.Name\" required>\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                    <eqp-select [enumData]=\"FormScalarTypeEnum\" [(ngModelInput)]=\"form.FormScalarType\"\r\n                        [isRequired]=\"true\" [showCancelButton]=\"false\" placeholder=\"Tipo di visualizzazione\"\r\n                        [formGroupInput]=\"formFormGroup\" [formControlNameInput]=\"'FormScalarType'\"\r\n                        (ngModelInputChange)=\"onChangeFormScalarType()\">\r\n                    </eqp-select>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\" *ngIf=\"form.FormScalarType && form.FormScalarType != FormScalarTypeEnum.Semplice\">\r\n                <div class=\"col-md-4 d-flex align-items-center\">\r\n                    <mat-form-field>\r\n                        <mat-label> Nome sezione (invio per confermare) </mat-label>\r\n                        <input matInput [(ngModel)]=\"formFieldGroupName\" [ngModelOptions]=\"{standalone: true}\"\r\n                            (keyup)=\"onFormFieldGroupNameKeyUp($event)\">\r\n                    </mat-form-field>\r\n                </div>\r\n                <div class=\"col-md-4 d-flex align-items-center\">\r\n                    <span class=\"mr-3\">Sezioni inserite:</span>\r\n                    <ul class=\"section-list\">\r\n                        <li *ngFor=\"let groupName of form.FormFieldsGroups, let i=index\">\r\n                            <mat-icon class=\"mr-1\" (click)=\"onDeleteFormFieldGroupName(groupName.Name)\">close\r\n                            </mat-icon>\r\n                            <span> {{i+1}}) {{groupName.Name}}</span>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"mt-2 d-flex justify-content-end\">\r\n                <button mat-raised-button color=\"primary\" matStepperNext\r\n                    [disabled]=\"formFormGroup.invalid\">Successivo</button>\r\n            </div>\r\n        </form>\r\n    </mat-step>\r\n\r\n    <!-- AGGIUNTA DEI CAMPI DELLA FORM -->\r\n    <mat-step [completed]=\"isFieldStepCompleted()\">\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n            Campi da inserire\r\n        </ng-template>\r\n\r\n        <div class=\"row justify-content-end\">\r\n            <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"openFieldDialog()\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi campo</span>\r\n            </button>\r\n\r\n            <button class=\"btn btn-primary ml-2\" mat-raised-button color=\"primary\" type=\"button\"\r\n                (click)=\"openInnerFormDialog()\" *ngIf=\"!innerFormManagment\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi form di dettaglio</span>\r\n            </button>\r\n        </div>\r\n\r\n        <eqp-table #fieldsTable [createMatCard]=\"false\" [columns]=\"fieldsColumns\" [data]=\"form.Fields\"\r\n            [emptyTableMessage]=\"'Nessun campo inserito'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious>Precedente</button>\r\n            <button mat-raised-button color=\"primary\" matStepperNext [disabled]=\"!isFieldStepCompleted()\"\r\n                (click)=\"setFormStatus(false)\">Successivo</button>\r\n        </div>\r\n    </mat-step>\r\n\r\n    <!-- AGGIUNTA DELLE OPERAZIONI SUI RECORD -->\r\n    <mat-step>\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\" (click)=\"setFormStatus(false)\"></div>\r\n            Azioni aggiuntive sui record\r\n        </ng-template>\r\n\r\n        <div class=\"row justify-content-end\">\r\n            <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\r\n                (click)=\"openActionOnRecordDialog()\">\r\n                <mat-icon>add</mat-icon>\r\n                <span style=\"margin-left: 10px;\">Aggiungi azione</span>\r\n            </button>\r\n        </div>\r\n        <eqp-table #actionsOnRecordTable [createMatCard]=\"false\" [columns]=\"actionsOnRecordColumns\"\r\n            [data]=\"form.ActionsOnRecord\" [emptyTableMessage]=\"'Nessuna action inserita'\" [searchText]=\"'Cerca'\">\r\n        </eqp-table>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious>Precedente</button>\r\n            <button mat-raised-button color=\"primary\" matStepperNext (click)=\"setFormStatus(true)\">\r\n                Successivo\r\n            </button>\r\n        </div>\r\n    </mat-step>\r\n\r\n    <!-- VISUALIZZAZIONE FORM CREATA -->\r\n    <mat-step>\r\n        <ng-template matStepLabel>\r\n            <div class=\"stepper-header-overlay\"\r\n                (click)=\"setFormStatus(formFormGroup.valid && form.Fields && form.Fields.length > 0)\"></div>\r\n            Riepilogo\r\n        </ng-template>\r\n\r\n        <eqp-dynamic-module [form]=\"previewForm\" *ngIf=\"previewForm && formCompleted\" [showButtons]=\"false\"\r\n            [viewMode]=\"FormTypeEnum.SCALAR\"></eqp-dynamic-module>\r\n\r\n        <div class=\"mt-2 d-flex justify-content-end\">\r\n            <button class=\"mr-2\" mat-raised-button matStepperPrevious (click)=\"setFormStatus(false)\">Precedente</button>\r\n            <button mat-raised-button color=\"primary\" (click)=\"saveForm()\">Salva form</button>\r\n        </div>\r\n    </mat-step>\r\n</mat-horizontal-stepper>\r\n\r\n<div class=\"row\" *ngIf=\"innerFormManagment\">\r\n    <div class=\"col-md-12 text-right\">\r\n        <button mat-raised-button (click)=\"saveFormEvent.emit(null)\">Esci</button>\r\n    </div>\r\n</div>\r\n\r\n<!-- DIALOG AGGIUNTA/MODIFICA CAMPO -->\r\n<ng-template #dialogField>\r\n    <eqp-dynamic-module-add-form-field [field]=\"selectedField\" [indexField]=\"indexSelectedField\"\r\n        (saveFieldEvent)=\"onSaveField($event)\" [availableFields]=\"form.Fields\"\r\n        [formFieldsGroups]=\"form.FormScalarType != FormScalarTypeEnum.Semplice ? form.FormFieldsGroups : null\">\r\n    </eqp-dynamic-module-add-form-field>\r\n</ng-template>\r\n\r\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\r\n<ng-template #fieldSectionColumnTemplate let-row=\"row\">\r\n    <eqp-select [arrayData]=\"form.FormFieldsGroups\" [(ngModelInput)]=\"row.FieldGroup\" [arrayKeyProperty]=\"'Name'\"\r\n        [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\" [isRequired]=\"true\" [includeFullObject]=\"false\">\r\n    </eqp-select>\r\n</ng-template>\r\n\r\n<!-- DIALOG PER AGGIUNGERE/MODIFICARE UNA ACTION SUI RECORD DELLA FORM -->\r\n<ng-template #dialogActionOnRecord>\r\n    <div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\r\n        <form [formGroup]=\"actionOnRecordFormGroup\">\r\n            <div class=\"row\">\r\n                <div class=\"header-title-standard\">{{indexSelectedAction != null && indexSelectedAction >= 0 ?\r\n                    \"Modifica\"\r\n                    : \"Aggiungi\"}} azione sul record</div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Nome </mat-label>\r\n                        <input formControlName=\"Name\" required matInput [(ngModel)]=\"selectedAction.Name\">\r\n                    </mat-form-field>\r\n                </div>\r\n\r\n                <div class=\"col-sm-12 col-md-4 mt-2\">\r\n                    <mat-form-field>\r\n                        <mat-label> Icona </mat-label>\r\n                        <input formControlName=\"Icon\" required matInput [(ngModel)]=\"selectedAction.Icon\">\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12 col-md-12 mt-2\">\r\n                    <mat-form-field>\r\n                        <textarea matInput [placeholder]=\"'Azione (Javascript)'\" [rows]=\"3\" formControlName=\"Action\"\r\n                            required [(ngModel)]=\"selectedAction.Action\" [matAutocomplete]=\"actionAutocomplete\"\r\n                            (keyup)=\"setActionAutocompleteOptions($event)\"\r\n                            (focus)=\"setActionAutocompleteOptions(null)\"></textarea>\r\n                        <mat-autocomplete #actionAutocomplete=\"matAutocomplete\">\r\n                            <mat-option *ngFor=\"let option of actionAutocompleteOptions\" [value]=\"option.value\">\r\n                                {{option.label}}\r\n                            </mat-option>\r\n                        </mat-autocomplete>\r\n                    </mat-form-field>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <div class=\"row mt-2 mb-1\">\r\n                <div class=\"col-sm-12 text-right\">\r\n                    <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveActionOnRecord()\"\r\n                        [disabled]=\"actionOnRecordFormGroup.invalid\" type=\"button\">\r\n                        Salva\r\n                    </button>\r\n                    <button class=\"btn mat-raised-button\" (click)=\"closeDialogActionOnRecord()\" type=\"button\">\r\n                        Esci\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #dialogInnerForm>\r\n    <eqp-dynamic-module-configurator [form]=\"selectedInnerForm\" [innerFormManagment]=\"true\"\r\n        (saveFormEvent)=\"onSaveOrExitInnerForm($event)\"></eqp-dynamic-module-configurator>\r\n</ng-template>",
+            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 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) {
+        this.formBuilder = formBuilder;
+        this.enumHelper = enumHelper;
+        this.dialog = dialog;
+        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;
+    }
+    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],
+            ColSizes: [this.field.ColSizes],
+            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.onColSizeSelect();
+        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.fieldTypeFormTemplate = this.dateFieldFormTemplate;
+                break;
+            case FieldTypeEnum['Campo numerico']:
+                this.fieldFormGroup.addControl('IsInteger', new FormControl(this.field.IsInteger));
+                this.fieldFormGroup.addControl('MinValue', new FormControl(this.field.MinValue));
+                this.fieldFormGroup.addControl('MaxValue', new FormControl(this.field.MaxValue));
+                this.fieldFormGroup.addControl('NumberFormat', new FormControl(this.field.NumberFormat));
+                this.fieldFormGroup.addControl('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('IsMultiAttach', new FormControl(this.field.AttachDefinition.IsMultiAttach));
+                // this.fieldFormGroup.addControl('ImgName', new FormControl((this.field as ImageField).ImgName, Validators.required));
+                this.fieldFormGroup.addControl('IsMultiPoint', new FormControl(this.field.IsMultiPoint));
+                this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AttachDefinition.AllowedExtensions));
+                this.fieldFormGroup.addControl('ImageIsContextualAttachment', new FormControl(this.field.ImageIsContextualAttachment));
+                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();
+        }
+        else {
+            this.fieldFormGroup.controls["Formula"].enable();
+        }
+    };
+    /**
+     * 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.onColSizeSelect = 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.ColSizes ? this.field.ColSizes.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 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']:
+                return !this.field.ValuePairs || this.field.ValuePairs.length === 0;
+            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.ColSizes = tmpBaseField.ColSizes;
+            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 }
+    ]; };
+    __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);
+    AddFormFieldComponent = __decorate([
+        Component({
+            selector: 'eqp-dynamic-module-add-form-field',
+            template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <!-- <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\">\n        </mat-form-field>\n    </div> -->\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiPoint\" formControlName=\"IsMultiPoint\" color=\"primary\">\n            Immagine multi-point\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\">\n            Carica immagine come allegato\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
+            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();
+    }
+    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();
+        }
+    };
+    /**
+     * 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=\"text\" [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\">\n\n    <!-- VISUALIZZAZIONE A TOGGLE -->\n    <mat-slide-toggle color=\"primary\" *ngIf=\"field.PresetationType == BoolPresentantioEnum.Toggle\"\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\n    </mat-slide-toggle>\n\n\n    <!-- VISUALIZZAZIONE A RADIOBUTTON -->\n    <mat-label class=\"mr-3\" *ngIf=\"field.PresetationType == BoolPresentantioEnum['Radio button']\">\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\n    </mat-label>\n    <mat-radio-group *ngIf=\"field.PresetationType == BoolPresentantioEnum['Radio button']\"\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        <mat-radio-button class=\"mr-2\" [value]=\"true\" color=\"primary\"> Si </mat-radio-button>\n        <mat-radio-button class=\"mr-2\" [value]=\"false\" color=\"primary\"> No </mat-radio-button>\n        <mat-radio-button class=\"mr-2\" [value]=\"null\" color=\"primary\" *ngIf=\"field.IsTristate\"> ND\n        </mat-radio-button>\n    </mat-radio-group>\n\n    <!-- VISUALIZZAZIONE A CHECKBOX -->\n    <mat-checkbox class=\"mr-2\" *ngIf=\"field.PresetationType == BoolPresentantioEnum.Checkbox\"\n        [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\" [formControlName]=\"field.Name\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        {{field.Label + (field.Required ? \" *\" : \"\")}}\n    </mat-checkbox>\n\n    <!-- TODO: Visualizzazione \"Stringa true o false\" e \"Numerico 0 o 1\" ?? -->\n</div>",
+            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\"\n    [formGroupInput]=\"field.FormFormGroup\" [formControlNameInput]=\"field.Name\"\n    [minDate]=\"field.MinDate ? field.MinDate : null\" [maxDate]=\"field.MaxDate ? field.MaxDate : null\"\n    [isRequired]=\"field.Required\" [disabled]=\"field.FormFormGroup.disabled\" [(ngModelInput)]=\"record[field.Name]\"\n    (ngModelInputChange)=\"onRecordValueChange()\">\n</eqp-datetimepicker>",
+            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\">\n    <textarea matInput [placeholder]=\"field.Label\" [rows]=\"field.Rows\" [formControlName]=\"field.Name\"\n        [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\"\n        (ngModelChange)=\"onRecordValueChange()\"></textarea>\n</mat-form-field>",
+            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 : "";
+        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;
+    };
+    __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\">\n    <mat-label> {{field.Label}} </mat-label>\n    <input matInput eqpNumericMask [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\"\n        [required]=\"field.Required\" [(ngModel)]=\"record[field.Name]\" [options]=\"eqpNumericOptions\"\n        [step]=\"field.IsInteger ? 1 : null\" (ngModelChange)=\"onRecordValueChange()\" />\n</mat-form-field>",
+            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 per recuperare la classe da applicare al button (nella relativa visualizzazione).
+     * Se il pulsante è stato selezionato imposta la classe "selected-button".
+     * @param data Oggetto bindato al pulsante
+     * @returns Restituisce la classe da applicare tramite [ngClass]
+     */
+    ListValueFieldTemplateComponent.prototype.getSelectButtonClass = function (data) {
+        var selectedButtonClass = "selected-button";
+        return data.Selected ? selectedButtonClass : null;
+    };
+    /**
+     * Metodo invocato quando viene selezionata un'opzione nella visualizzazione a button
+     * @param data Rappresenta l'oggetto selezionato
+     */
+    ListValueFieldTemplateComponent.prototype.buttonSelectClick = function (data) {
+        if (this.field.IsMultiChoiche) {
+            data.Selected = !data.Selected;
+            this.updateSelected(false);
+        }
+        else {
+            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;
+        Object.keys(this.field.ValuePairs).forEach(function (k) {
+            var isOptionSelected;
+            if (_this.field.IsMultiChoiche && _this.record[_this.field.Name] && _this.record[_this.field.Name].length > 0) {
+                isOptionSelected = !!_this.record[_this.field.Name].find(function (v) { return v == _this.field.ValuePairs[k]; });
+            }
+            else {
+                isOptionSelected = _this.record[_this.field.Name] === _this.field.ValuePairs[k];
+            }
+            _this.arrayData.push({ Key: k, Value: _this.field.ValuePairs[k], Selected: isOptionSelected });
+        });
+    };
+    /**
+     * 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\"\n    [arrayKeyProperty]=\"'Value'\" [showCancelButton]=\"!field.Required\" [arrayValueProperty]=\"'Key'\"\n    [formGroupInput]=\"field.FormFormGroup\" [formControlNameInput]=\"field.Name\" [placeholder]=\"field.Label\"\n    [includeFullObject]=\"false\" [isRequired]=\"field.Required\" [isDisabled]=\"field.FormFormGroup.disabled\"\n    [(ngModelInput)]=\"record[field.Name]\" [isMultiSelect]=\"field.IsMultiChoiche\"\n    (ngModelInputChange)=\"onRecordValueChange()\">\n</eqp-select>\n\n<div *ngIf=\"field.PresentationMode != ListPresentationEnum['Combo box']\" [formGroup]=\"field.FormFormGroup\">\n\n    <mat-label class=\"mr-3\"> {{field.Label + (field.Required ? \" *\" : \"\")}} </mat-label>\n\n    <!-- VISUALIZZAZIONE A RADIO BUTTON (SENZA SELEZIONE MULTIPLA) -->\n    <mat-radio-group *ngIf=\"field.PresentationMode == ListPresentationEnum['Radio button'] && !field.IsMultiChoiche\"\n        [formControlName]=\"field.Name\" [disabled]=\"field.FormFormGroup.disabled\" [required]=\"field.Required\"\n        [(ngModel)]=\"record[field.Name]\" (ngModelChange)=\"onRecordValueChange()\">\n        <mat-radio-button class=\"mr-2\" *ngFor=\"let data of arrayData\" [value]=\"data.Value\" color=\"primary\">\n            {{data.Key}}\n        </mat-radio-button>\n    </mat-radio-group>\n\n    <!-- VISUALIZZAZIONE A CHECKBOX (SELEZIONE MULTIPLA) -->\n    <div class=\"d-inline-block\"\n        *ngIf=\"field.PresentationMode == ListPresentationEnum['Radio button'] && field.IsMultiChoiche\">\n        <mat-checkbox class=\"mr-2\" *ngFor=\"let data of arrayData\" [disabled]=\"field.FormFormGroup.disabled\"\n            [formControlName]=\"field.Name\" [(ngModel)]=\"data.Selected\" (ngModelChange)=\"updateSelected()\">\n            {{data.Key}}\n        </mat-checkbox>\n    </div>\n\n    <!-- VISUALIZZAZIONE A PULSANTI (CON TESTO) -->\n    <div class=\"d-inline-block\" *ngIf=\"field.PresentationMode == ListPresentationEnum['Pulsante con testo']\">\n        <button mat-raised-button color=\"primary\" class=\"btn btn-primary mr-2\" *ngFor=\"let data of arrayData\"\n            (click)=\"buttonSelectClick(data)\" [ngClass]=\"getSelectButtonClass(data)\"\n            [disabled]=\"field.FormFormGroup.disabled\">\n            {{data.Key}}\n        </button>\n    </div>\n\n    <!-- TODO: VISUALIZZAZIONE A PULSANTI (CON IMMAGINI) ?? -->\n</div>",
+            styles: [".selected-button{opacity:.7}.selected-button:disabled{background-color:var(--primary)!important;opacity:.3;color:#fff}"]
+        })
+    ], ListValueFieldTemplateComponent);
+    return ListValueFieldTemplateComponent;
+}());
+
+var AttachmentFieldTemplateComponent = /** @class */ (function () {
+    //#endregion
+    function AttachmentFieldTemplateComponent(utilityService, cdr) {
+        this.utilityService = utilityService;
+        this.cdr = cdr;
+        this.onlyImages = false;
+        this.recordChange = new EventEmitter();
+        this.metadataFormGroups = new Array();
+        //#region Etichette per eqp-attachments
+        this.previewLabel = "Anteprima";
+        this.emptyTableMessage = "No record found";
+        this.downloadTooltipPosition = "below";
+        this.openLinkLabel = "Apri link";
+        this.addButtonLabel = "Aggiungi";
+        this.downloadLabel = "Download";
+        this.deleteLabel = "Elimina";
+        this.fileNameLabel = "Nome file";
+        this.uploadFileLabel = "Carica file";
+        this.confirmLabel = "Conferma";
+        this.abortLabel = "Annulla";
+        this.saveLabel = "Salva";
+        this.exitLabel = "Esci";
+        this.eqpTableSearchText = "Cerca...";
+        this.deleteDialogTitle = "Attenzione:";
+        this.deleteDialogMessage = "Sicuro di voler eliminare questo allegato?";
+        this.noImageSelectedErrorMessage = "Nessuna immagine selezionata!";
+    }
+    AttachmentFieldTemplateComponent.prototype.ngOnInit = function () {
+        // Nel caso in cui sono in modifica di un Record aggiorno il valore
+        // 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();
+        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([
+        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\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\" [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" [previewLabel]=\"previewLabel\"\n    [emptyTableMessage]=\"emptyTableMessage\" [downloadTooltipPosition]=\"downloadTooltipPosition\"\n    [openLinkLabel]=\"openLinkLabel\" [addButtonLabel]=\"addButtonLabel\" [downloadLabel]=\"downloadLabel\"\n    [deleteLabel]=\"deleteLabel\" [fileNameLabel]=\"fileNameLabel\" [uploadFileLabel]=\"uploadFileLabel\"\n    [confirmLabel]=\"confirmLabel\" [abortLabel]=\"abortLabel\" [saveLabel]=\"saveLabel\" [exitLabel]=\"exitLabel\"\n    [eqpTableSearchText]=\"eqpTableSearchText\" [deleteDialogTitle]=\"deleteDialogTitle\"\n    [deleteDialogMessage]=\"deleteDialogMessage\" [noImageSelectedErrorMessage]=\"noImageSelectedErrorMessage\"\n    (localEditedAttachments)=\"catchAttachmentList($event)\" #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
+            styles: [""]
+        })
+    ], AttachmentFieldTemplateComponent);
+    return AttachmentFieldTemplateComponent;
+}());
+
+var ImageFieldTemplateComponent = /** @class */ (function () {
+    function ImageFieldTemplateComponent() {
+        this.recordChange = new EventEmitter();
+    }
+    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;
+    };
+    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();
+        }
+    };
+    /**
+     * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+     */
+    ImageFieldTemplateComponent.prototype.updateField = function () {
+        if (this.field.Formula) {
+            this.record[this.field.Name] = UtilityHelperService$1.EvaluateFieldFormula(this.field.Formula, this.record, null);
+        }
+    };
+    __decorate([
+        Input()
+    ], ImageFieldTemplateComponent.prototype, "record", void 0);
+    __decorate([
+        Input()
+    ], ImageFieldTemplateComponent.prototype, "field", void 0);
+    __decorate([
+        Output()
+    ], ImageFieldTemplateComponent.prototype, "recordChange", void 0);
+    ImageFieldTemplateComponent = __decorate([
+        Component({
+            selector: 'image-field-template',
+            template: "<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\"\n     [onlyImages]=\"true\">\n</attachment-field-template>",
+            styles: [""]
+        })
+    ], ImageFieldTemplateComponent);
+    return ImageFieldTemplateComponent;
+}());
+
+var ListFormRecordComponent = /** @class */ (function () {
+    function ListFormRecordComponent() {
+        this.columns = new Array();
+        this.onAddViewEditRecord = new EventEmitter();
+    }
+    ListFormRecordComponent.prototype.ngOnInit = function () {
+        this.configureColumns();
+    };
+    /**
+     * 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$2.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) {
+        var _this = this;
+        EqpDynamicModuleDialogService$1.Confirm('Duplicare il record selezionato?', function () {
+            var copiedRecord = JSON.parse(JSON.stringify(record));
+            if (!isNaN(parseInt(copiedRecord.ID))) {
+                copiedRecord.ID = (parseInt(copiedRecord.ID) + 1).toString();
+            }
+            else {
+                copiedRecord.ID = "xxxxxxxxx".replace("x", function (c) { return (Math.random() + 16 | 0).toString(16); });
+            }
+            _this.values.push(copiedRecord);
+            _this.reloadTables();
+        }, false, 'Richiesta conferma');
+        //TODO
+    };
+    /**
+     * Metodo per eliminare un record dalla lista.
+     * @param record Record da eliminare selezionato sulla eqp-table.
+     */
+    ListFormRecordComponent.prototype.deleteRecord = function (record) {
+        var _this = this;
+        EqpDynamicModuleDialogService$1.Confirm('Eliminare il record selezionato?', function () {
+            _this.values.splice(_this.values.indexOf(record), 1);
+            _this.reloadTables();
+        }, false, 'Richiesta conferma');
+        // TODO
+    };
+    /**
+     * 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$1['Booleano']:
+                column.type = TypeColumn.Boolean;
+                column.booleanValues = { false: '<i class="fa fa-times error-color"></i>', true: '<i class="fa fa-check success-color"></i>' };
+                column.styles = { flex: "0 0 7%", cellAlignment: CellAlignmentEnum.CENTER };
+                break;
+            case FieldTypeEnum$1['Data e/o ora']:
+                if (field.IsOnlyDate != DateTimeTypeEnum$1['Solo orario']) {
+                    column.type = TypeColumn.Date;
+                    if (field.IsOnlyDate == DateTimeTypeEnum$1['Data e ora']) {
+                        column.format = "dd/MM/yyyy HH:mm";
+                    }
+                    else if (field.IsOnlyDate == DateTimeTypeEnum$1['Solo data']) {
+                        column.format = "dd/MM/yyyy";
+                    }
+                }
+                break;
+            case FieldTypeEnum$1['Campo numerico']:
+                if (field.CurrencySymbol) {
+                    column.numberPipe = NumberColumnPipe.CURRENCY;
+                    column.currencyPipeCode = field.CurrencySymbol;
+                }
+                else if (!field.IsInteger) {
+                    column.numberPipe = NumberColumnPipe.DECIMAL;
+                }
+                break;
+            case FieldTypeEnum$1['Allegato']:
+            case FieldTypeEnum$1['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$1['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$1['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, "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);
+    ListFormRecordComponent = __decorate([
+        Component({
+            selector: 'list-form-record',
+            template: "<div class=\"row eqp-dynamic-module-title\">\r\n    <div class=\"col-md-6\">\r\n        <h4><b>Elenco {{form.Name}}</b></h4>\r\n    </div>\r\n    <div class=\"col-md-6 text-right\">\r\n        <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"onAddViewEditRecord.emit(null)\">\r\n            <mat-icon>add</mat-icon>\r\n            <span style=\"margin-left: 10px;\">Aggiungi</span>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n\r\n<eqp-table #tableRecords [data]=\"values\" [columns]=\"columns\"></eqp-table>",
+            styles: ["::ng-deep .error-color{color:var(--danger)}::ng-deep .success-color{color:var(--success)}"]
+        })
+    ], ListFormRecordComponent);
+    return ListFormRecordComponent;
+}());
+
+var Record = /** @class */ (function () {
+    function Record() {
+    }
+    return Record;
+}());
+
+var AddFormRecordComponent = /** @class */ (function () {
+    function AddFormRecordComponent(cdr, utilityService) {
+        this.cdr = cdr;
+        this.utilityService = utilityService;
+        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$2 }
+    ]; };
+    __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\">\n    <div class=\"col-md-12 text-center\">\n        <h4><b>{{form.Name}}</b></h4>\n    </div>\n</div>\n\n<form [formGroup]=\"formForm\">\n\n    <!-- VISUALIZZAZIONE SEMPLICE -->\n    <ng-container *ngIf=\"form.FormScalarType == FormScalarTypeEnum.Semplice\" [ngTemplateOutlet]=\"fieldTemplates\"\n        [ngTemplateOutletContext]=\"{ fields: form.Fields }\">\n    </ng-container>\n\n    <!-- VISUALIZZAZIONE A STEPPER -->\n    <mat-horizontal-stepper linear *ngIf=\"form.FormScalarType == FormScalarTypeEnum['A step']\">\n        <mat-step *ngFor=\"let group of form.FormFieldsGroups\">\n            <ng-template matStepLabel>\n                {{group.Name}}\n            </ng-template>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-step>\n    </mat-horizontal-stepper>\n\n    <!-- VISUALIZZAZIONE A TAB -->\n    <mat-tab-group *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In tab']\">\n        <mat-tab *ngFor=\"let group of form.FormFieldsGroups\" [label]=\"group.Name\">\n            <div class=\"mt-3\">\n                <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                    [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n                </ng-container>\n            </div>\n        </mat-tab>\n    </mat-tab-group>\n\n    <!-- VISUALIZZAZIONE AD ACCORDION -->\n    <mat-accordion multi *ngIf=\"form.FormScalarType == FormScalarTypeEnum['In accordion']\">\n        <mat-expansion-panel *ngFor=\"let group of form.FormFieldsGroups\">\n            <mat-expansion-panel-header>\n                <mat-panel-title>\n                    {{group.Name}}\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <ng-container [ngTemplateOutlet]=\"fieldTemplates\"\n                [ngTemplateOutletContext]=\"{ fields: fieldGroups[group.Name] }\">\n            </ng-container>\n        </mat-expansion-panel>\n    </mat-accordion>\n</form>\n\n<div class=\"row mt-2\" *ngIf=\"showButtons\">\n    <div class=\"col-sm-12 text-right\">\n        <button class=\"mr-2\" mat-raised-button (click)=\"saveOrExitForm(true)\" type=\"button\">\n            Annulla\n        </button>\n        <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveOrExitForm(false)\"\n            [disabled]=\"formForm.invalid || formForm.disabled\" type=\"button\">\n            Salva\n        </button>\n    </div>\n</div>\n\n<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->\n<ng-template #fieldTemplates let-fields='fields'>\n    <div class=\"row\">\n        <div class=\"mt-2\" *ngFor=\"let field of fields\" [ngClass]=\"utilityService.getFieldSyleClass(field)\">\n            <dynamic-module-field #fieldTemplate [field]=\"field\" [form]=\"form\" [record]=\"record\" (recordChange)=\"onRecordChange()\"></dynamic-module-field>\n        </div>\n    </div>\n</ng-template>",
+            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']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</text-field-template>\n\n<textarea-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Area di testo']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</textarea-field-template>\n\n<boolean-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Booleano']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</boolean-field-template>\n\n<date-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Data e/o ora']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</date-field-template>\n\n<numeric-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Campo numerico']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</numeric-field-template>\n\n<list-value-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Elenco generico']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</list-value-field-template>\n\n<attachment-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Allegato']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</attachment-field-template>\n\n<image-field-template #fieldTemplate *ngIf=\"field.FieldType == FieldTypeEnum['Immagine']\"\n    [matTooltip]=\"field.Description\" [(record)]=\"record\" [field]=\"field\" (recordChange)=\"onRecordChange()\">\n</image-field-template>\n\n<list-form-record #listInnerFormRecords *ngIf=\"field.FieldType == FieldTypeEnum['Form di dettaglio']\"\n    [form]=\"getInnerFormFromField(field)\" [values]=\"record[field.Name]\"\n    (onAddViewEditRecord)=\"onAddViewEditInnerFormRecord($event, field)\">\n</list-form-record>\n\n<!-- DIALOG PER AGGIUNGERE/MODIFICARE/VISUALIZZARE UN RECORD IN UNA FORM DI DETTAGLIO -->\n<ng-template #dialogInnerFormRecord>\n    <add-form-record [form]=\"selectedInnerForm\" [record]=\"selectedInnerFormRecord\" [onlyView]=\"onlyViewInnerFormRecord\"\n        (saveRecordEvent)=\"onSaveInnerFormRecord($event)\"></add-form-record>\n</ng-template>",
+            styles: [""]
+        })
+    ], DynamicModuleFieldComponent);
+    return DynamicModuleFieldComponent;
+}());
+
+var EqpDynamicModuleModule = /** @class */ (function () {
+    function EqpDynamicModuleModule() {
+    }
+    EqpDynamicModuleModule = __decorate([
+        NgModule({
+            declarations: [
+                EqpDynamicModuleComponent,
+                EqpDynamicModuleConfiguratorComponent,
+                AddFormFieldComponent,
+                TextFieldTemplateComponent,
+                BooleanFieldTemplateComponent,
+                DateFieldTemplateComponent,
+                TextareaFieldTemplateComponent,
+                NumericFieldTemplateComponent,
+                ListValueFieldTemplateComponent,
+                AttachmentFieldTemplateComponent,
+                ImageFieldTemplateComponent,
+                ListFormRecordComponent,
+                AddFormRecordComponent,
+                DynamicModuleFieldComponent,
+            ],
+            imports: [
+                BrowserModule,
+                MaterialModule,
+                FormsModule,
+                CommonModule,
+                ReactiveFormsModule,
+                EqpTableModule,
+                EqpAttachmentsModule,
+                EqpSelectModule,
+                EqpDatetimepickerModule,
+                EqpFiltersModule,
+                EqpNumericModule
+            ],
+            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;
+    }
+    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));
+
+/**Campo di testo */
+var TextField = /** @class */ (function (_super) {
+    __extends(TextField, _super);
+    function TextField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return TextField;
+}(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, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynamicModuleFieldComponent, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, Record, TextField, TextFieldTemplateComponent, TextareaField, TextareaFieldTemplateComponent, UtilityHelperService, MaterialModule as ɵa };
+//# sourceMappingURL=eqproject-eqp-dynamic-module.js.map