@eqproject/eqp-dynamic-module 0.0.3 → 0.0.4

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

@@ -1,4 +1,4 @@
-import { __decorate } from 'tslib';
+import { __decorate, __awaiter } from 'tslib';
 import { CommonModule } from '@angular/common';
 import { ɵɵdefineInjectable, ɵɵinject, Injectable, EventEmitter, Input, Output, Component, NgModule, ViewChild, ChangeDetectorRef, ViewChildren } from '@angular/core';
 import { Validators, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -37,6 +37,7 @@ import { TypeColumn, CellAlignmentEnum, NumberColumnPipe, EqpTableModule } from
 import { EqpAttachmentsModule } from '@eqproject/eqp-attachments';
 import { EnumHelper, EqpSelectModule } from '@eqproject/eqp-select';
 import { PickerModeEnum, EqpDatetimepickerModule } from '@eqproject/eqp-datetimepicker';
+import { EqpImgDrawingModule } from '@eqproject/eqp-img-drawing';
 import { EqpFiltersModule } from '@eqproject/eqp-filters';
 import { EqpNumericModule } from '@eqproject/eqp-numeric';
 import Swal from 'sweetalert2';
@@ -1288,11 +1289,10 @@ let AddFormFieldComponent = class AddFormFieldComponent {
                 break;
             case FieldTypeEnum.Immagine:
                 this.field.AttachDefinition = new AttachmentField();
-                this.fieldFormGroup.addControl('IsMultiAttach', new FormControl(this.field.AttachDefinition.IsMultiAttach));
-                // this.fieldFormGroup.addControl('ImgName', new FormControl((this.field as ImageField).ImgName, Validators.required));
-                this.fieldFormGroup.addControl('IsMultiPoint', new FormControl(this.field.IsMultiPoint));
-                this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AttachDefinition.AllowedExtensions));
+                this.fieldFormGroup.addControl('EnableDrawing', new FormControl(this.field.EnableDrawing));
                 this.fieldFormGroup.addControl('ImageIsContextualAttachment', new FormControl(this.field.ImageIsContextualAttachment));
+                // Imposto i FormControl variabili.
+                this.onImageIsContextualAttachmentChange();
                 this.fieldTypeFormTemplate = this.imageFieldFormTemplate;
                 break;
             case FieldTypeEnum['Elenco generico']:
@@ -1309,11 +1309,51 @@ let AddFormFieldComponent = class AddFormFieldComponent {
         if ([FieldTypeEnum.Allegato, FieldTypeEnum.Immagine, FieldTypeEnum['Form di dettaglio']].includes(this.field.FieldType)) {
             this.field.Formula = null;
             this.fieldFormGroup.controls["Formula"].disable();
+            this.fieldFormGroup.controls["InListView"].disable();
         }
         else {
             this.fieldFormGroup.controls["Formula"].enable();
+            this.fieldFormGroup.controls["InListView"].enable();
         }
     }
+    /**
+     * Metodo invocato al cambio del valore della proprietà ImageIsContextualAttachment nel caso
+     * di campi di tipo Immagine. Se TRUE allora rimuove i FormControl per le proprietà IsMultiAttach
+     * e AllowedExtensions e aggiunge i FormControl per le proprietà ImgName e ContextualAttachment,
+     * altrimenti il contrario.
+     */
+    onImageIsContextualAttachmentChange() {
+        this.field.ImgName = null;
+        this.field.AttachDefinition.AllowedExtensions = [];
+        this.field.AttachDefinition.IsMultiAttach = false;
+        this.field.ContextualAttachment = null;
+        if (this.field.ImageIsContextualAttachment) {
+            this.fieldFormGroup.removeControl("IsMultiAttach");
+            this.fieldFormGroup.removeControl("AllowedExtensions");
+            this.fieldFormGroup.addControl('ImgName', new FormControl(this.field.ImgName, Validators.required));
+            this.fieldFormGroup.addControl('ContextualAttachment', new FormControl(this.field.ContextualAttachment, Validators.required));
+        }
+        else {
+            this.fieldFormGroup.removeControl("ImgName");
+            this.fieldFormGroup.removeControl("ContextualAttachment");
+            this.fieldFormGroup.addControl('IsMultiAttach', new FormControl(this.field.AttachDefinition.IsMultiAttach));
+            this.fieldFormGroup.addControl("AllowedExtensions", new FormControl(this.field.AttachDefinition.AllowedExtensions));
+        }
+    }
+    /**
+     * Metodo per intercettare l'aggiunta di un allegato nei campi di tipo Immagine per aggiornare
+     * il valore della proprietà ContextualAttachment e la validazione del relativo FormControl.
+     * @param event Array contenente l'elenco aggiornato degli allegati caricati (nel nostro caso ne contiene al più 1).
+     */
+    catchContextualAttachmentChange(event) {
+        if (event && event.length > 0) {
+            this.field.ContextualAttachment = event[0];
+        }
+        else {
+            this.field.ContextualAttachment = null;
+        }
+        this.fieldFormGroup.controls['ContextualAttachment'].setValue(this.field.ContextualAttachment);
+    }
     /**
      * Metodo invocato alla selezione di una classe nella select per le colonne di bootstrap
      * da usare nella visualizzazione del campo. Questa funzione manipola la sorgente dati per
@@ -1641,7 +1681,7 @@ __decorate([
 AddFormFieldComponent = __decorate([
     Component({
         selector: 'eqp-dynamic-module-add-form-field',
-        template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <!-- <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\">\n        </mat-form-field>\n    </div> -->\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiPoint\" formControlName=\"IsMultiPoint\" color=\"primary\">\n            Immagine multi-point\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\">\n            Carica immagine come allegato\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
+        template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\"\n                    [disabled]=\"fieldFormGroup.controls['InListView'].disabled\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\" (ngModelChange)=\"onImageIsContextualAttachmentChange()\">\n            Immagine pre-caricata nel campo\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 mb-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.EnableDrawing\" formControlName=\"EnableDrawing\" color=\"primary\">\n            Abilita il disegno\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\"\n        *ngIf=\"!field.ImageIsContextualAttachment\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"!field.ImageIsContextualAttachment\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\" *ngIf=\"field.ImageIsContextualAttachment\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\" required>\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-8 mt-2\" [formGroup]=\"fieldFormGroup\" *ngIf=\"field.ImageIsContextualAttachment\">\n        <eqp-attachments [attachmentsList]=\"field._contextualAttachments\" [showMatCard]=\"false\" [allowOnlyImages]=\"true\"\n            [isDisabled]=\"false\" [showInlinePreview]=\"true\" [multipleAttachment]=\"false\" [showHeader]=\"false\"\n            (localEditedAttachments)=\"catchContextualAttachmentChange($event)\" #contextualAttachmentEqpAttachments>\n        </eqp-attachments>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
         styles: [".extension-container{display:inline-block;font-size:15px;border:1px solid var(--primary);border-radius:15px;margin-right:10px}.extension-container mat-icon{vertical-align:middle;font-size:15px;height:15px;width:15px;color:var(--danger);margin-right:10px;cursor:pointer}.extension-container span{margin-left:10px}.key-value-list-section-title{background:linear-gradient(to right,var(--gray) 0,#fff 100%) left bottom #fff no-repeat;background-size:100% 1px}.value-pairs-list{list-style:none;padding:0}.value-pairs-list mat-icon{vertical-align:middle;font-size:15px;height:15px;width:15px;color:var(--danger);margin-right:10px;cursor:pointer}"]
     })
 ], AddFormFieldComponent);
@@ -2029,31 +2069,13 @@ ListValueFieldTemplateComponent = __decorate([
 ], ListValueFieldTemplateComponent);
 
 let AttachmentFieldTemplateComponent = class AttachmentFieldTemplateComponent {
-    //#endregion
     constructor(utilityService, cdr) {
         this.utilityService = utilityService;
         this.cdr = cdr;
         this.onlyImages = false;
         this.recordChange = new EventEmitter();
+        this.onAttachmentsChange = new EventEmitter();
         this.metadataFormGroups = new Array();
-        //#region Etichette per eqp-attachments
-        this.previewLabel = "Anteprima";
-        this.emptyTableMessage = "No record found";
-        this.downloadTooltipPosition = "below";
-        this.openLinkLabel = "Apri link";
-        this.addButtonLabel = "Aggiungi";
-        this.downloadLabel = "Download";
-        this.deleteLabel = "Elimina";
-        this.fileNameLabel = "Nome file";
-        this.uploadFileLabel = "Carica file";
-        this.confirmLabel = "Conferma";
-        this.abortLabel = "Annulla";
-        this.saveLabel = "Salva";
-        this.exitLabel = "Esci";
-        this.eqpTableSearchText = "Cerca...";
-        this.deleteDialogTitle = "Attenzione:";
-        this.deleteDialogMessage = "Sicuro di voler eliminare questo allegato?";
-        this.noImageSelectedErrorMessage = "Nessuna immagine selezionata!";
     }
     ngOnInit() {
         // Nel caso in cui sono in modifica di un Record aggiorno il valore
@@ -2104,6 +2126,10 @@ let AttachmentFieldTemplateComponent = class AttachmentFieldTemplateComponent {
         this.createMetadataFormGroups();
         this.setFormControlValue();
         this.onRecordValueChange();
+        // Scateno un evento di output necessario al componente ImageFieldTemplate al
+        // variare degli allegati caricati. Viene usato per aprire il dialog per disegnare
+        // sull'immagine caricata in base alla configurazione del Field.
+        this.onAttachmentsChange.emit();
         this.cdr.detectChanges();
     }
     /**
@@ -2189,6 +2215,9 @@ __decorate([
 __decorate([
     Output()
 ], AttachmentFieldTemplateComponent.prototype, "recordChange", void 0);
+__decorate([
+    Output()
+], AttachmentFieldTemplateComponent.prototype, "onAttachmentsChange", void 0);
 __decorate([
     ViewChild("eqpAttachments", { static: true })
 ], AttachmentFieldTemplateComponent.prototype, "eqpAttachments", void 0);
@@ -2198,14 +2227,36 @@ __decorate([
 AttachmentFieldTemplateComponent = __decorate([
     Component({
         selector: 'attachment-field-template',
-        template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\" [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" [previewLabel]=\"previewLabel\"\n    [emptyTableMessage]=\"emptyTableMessage\" [downloadTooltipPosition]=\"downloadTooltipPosition\"\n    [openLinkLabel]=\"openLinkLabel\" [addButtonLabel]=\"addButtonLabel\" [downloadLabel]=\"downloadLabel\"\n    [deleteLabel]=\"deleteLabel\" [fileNameLabel]=\"fileNameLabel\" [uploadFileLabel]=\"uploadFileLabel\"\n    [confirmLabel]=\"confirmLabel\" [abortLabel]=\"abortLabel\" [saveLabel]=\"saveLabel\" [exitLabel]=\"exitLabel\"\n    [eqpTableSearchText]=\"eqpTableSearchText\" [deleteDialogTitle]=\"deleteDialogTitle\"\n    [deleteDialogMessage]=\"deleteDialogMessage\" [noImageSelectedErrorMessage]=\"noImageSelectedErrorMessage\"\n    (localEditedAttachments)=\"catchAttachmentList($event)\" #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
+        template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\"\n        [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" (localEditedAttachments)=\"catchAttachmentList($event)\"\n    #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
         styles: [""]
     })
 ], AttachmentFieldTemplateComponent);
 
+/**
+ * Metodo per recuperare, a partire da un Blob, la stringa contenente il base64 del file.
+ * Usato per prendere il base64 dell'immagine dopo che l'utente ci ha disegnato sopra.
+ * @param file Blob che rappresenta l'immagine.
+ */
+const toBase64 = file => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result.toString());
+    reader.onerror = error => reject(error);
+});
+const ɵ0 = toBase64;
 let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
-    constructor() {
+    //#endregion
+    constructor(dialog, utilityService) {
+        this.dialog = dialog;
+        this.utilityService = utilityService;
         this.recordChange = new EventEmitter();
+        //#region Proprietà per configurare il componente ngx-image-drawing e aprire il relativo dialog.
+        this.width = null;
+        this.height = null;
+        this.i18n = {
+            saveBtn: 'Salva modifiche',
+            cancelBtn: 'Ricarica originale'
+        };
     }
     ngOnInit() {
         this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
@@ -2218,6 +2269,19 @@ let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
         this.field.AttachDefinition.Required = this.field.Required;
         this.field.AttachDefinition.Formula = this.field.Formula;
         this.field.AttachDefinition.FieldValue = this.field.FieldValue;
+        // Se il campo prevede un'immagine pre-caricata (ImageIsContextualAttachment == true) sulla quale 
+        // l'utente può disegnare (EnableDrawing == true) e non sono in modifica di un record (ovvero nel record
+        // non ho un'immagine già salvata) allora imposta l'immagine pre caricata come valore iniziale
+        // nel record corrente e ne recupera le dimensioni per visualizzare correttamente l'area in cui  
+        // l'utente può disegnare. Se non effettua modifiche o non salva i disegni fatti viene salvata
+        // l'immagine originale.
+        if (this.field.ImageIsContextualAttachment && this.field.ContextualAttachment) {
+            if (!this.record[this.field.Name] || !Array.isArray(this.record[this.field.Name]) || !(this.record[this.field.Name].length > 0)) {
+                this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+            }
+            this.preLoadedImageMetadataFormGroup = this.utilityService.CreateFormFormGroup(this.field.AttachDefinition.MetadataFields, this.record[this.field.Name][0]);
+            this.getImageDimensions();
+        }
     }
     ngOnChanges(changes) {
         // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
@@ -2226,6 +2290,15 @@ let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
             this.updateField();
         }
     }
+    updateMetadataValidity() {
+        if (this.preLoadedImageMetadataFormGroup.invalid) {
+            this.field.FormFormGroup.controls[this.field.Name].setErrors({ 'incorrect': true });
+        }
+        else {
+            this.field.FormFormGroup.controls[this.field.Name].setErrors(null);
+        }
+        this.onRecordValueChange();
+    }
     /**
      * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
      */
@@ -2234,7 +2307,100 @@ let ImageFieldTemplateComponent = class ImageFieldTemplateComponent {
             this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
         }
     }
+    resetPreLoadedImage() {
+        this.width = null;
+        this.height = null;
+        this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+        this.getImageDimensions();
+    }
+    /**
+     * Metodo invocato quando vengono aggiunti o eliminati gli allegati nel componente AttachmentFieldTemplate.
+     * Se l'ImageField è abilitato al disegno (EnableDrawing == true), non permette allegati multipli (IsMulitAttach == false)
+     * e nel Record corrente è presente l'immagine caricata dall'utente allora recupera le dimensioni dell'immagine e
+     * apre il dialog con il componente image-drawing per permettere il disegno sull'immagine appena caricata.
+     */
+    onAttachmentsChange() {
+        if (!this.field.AttachDefinition.IsMultiAttach && this.field.EnableDrawing && this.record[this.field.Name] && this.record[this.field.Name][0]) {
+            this.getImageDimensions();
+            this.dialogImageDrowingRef = this.dialog.open(this.dialogImageDrowing, {
+                disableClose: true,
+                hasBackdrop: true,
+                width: '75%'
+            });
+        }
+    }
+    /**
+     * Metodo invocato al salvataggio dell'immagine dal componente image-drawing.
+     * Trasforma il Blob ricevuto in un base64, aggiorna il FileContetType e il FileDataBase64
+     * dell'allegato caricato e chiude il dialog in cui disegnare.
+     * @param drawnPicture Blob dell'immagine disegnata.
+     */
+    saveDrowning(drawnPicture) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let base64File = yield toBase64(drawnPicture);
+            if (base64File) {
+                this.record[this.field.Name][0].FileContentType = base64File.split(",")[0].split(":")[1].split(";")[0];
+                this.record[this.field.Name][0].FileDataBase64 = base64File.split(",")[1];
+            }
+            if (this.dialogImageDrowingRef) {
+                this.closeImageDrowingDialog();
+            }
+        });
+    }
+    /**
+     * Metodo per chiudere il dialog in cui disegnare sull'immagine cariata e svuotare le dimensioni.
+     */
+    closeImageDrowingDialog() {
+        this.dialogImageDrowingRef.close();
+        this.width = null;
+        this.height = null;
+    }
+    /**
+     * Metodo per recuperare le dimensioni dell'immagine caricata per mostrare correttamente
+     * il componente image-drawing. Se non viene eseguito questo passaggio l'area in cui disegnare
+     * è più grande dell'immagine stessa e al salvataggio i tratti disegnati vengono spostati.
+     */
+    getImageDimensions() {
+        var blob = this.getBlobFromBase64();
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const image = new Image();
+            image.src = e.target.result;
+            image.onload = rs => {
+                this.height = rs.currentTarget['height'];
+                this.width = rs.currentTarget['width'];
+            };
+        };
+        reader.readAsDataURL(blob);
+    }
+    /**
+     * Metodo per convertire il base64 di un'immagine in un Blob.
+     * Necessario per il recupero delle dimensioni dell'immagine caricata a partire dal suo base64.
+     * Viene eseguito solo nel caso in cui l'ImageField non ammette allegati multipli.
+     * @returns Restituisce il Blob dell'immagine caricata.
+     */
+    getBlobFromBase64() {
+        const byteCharacters = atob(this.record[this.field.Name][0].FileDataBase64);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        return new Blob([byteArray], { type: this.record[this.field.Name][0].FileContentType });
+    }
+    /**
+     * Metodo per emettere l'evento che il valore del record è cambiato.
+     */
+    onRecordValueChange() {
+        if (!this.field.Formula) {
+            this.recordChange.emit(this.record);
+        }
+    }
 };
+ImageFieldTemplateComponent.ctorParameters = () => [
+    { type: MatDialog },
+    { type: UtilityHelperService }
+];
 __decorate([
     Input()
 ], ImageFieldTemplateComponent.prototype, "record", void 0);
@@ -2244,11 +2410,14 @@ __decorate([
 __decorate([
     Output()
 ], ImageFieldTemplateComponent.prototype, "recordChange", void 0);
+__decorate([
+    ViewChild("dialogImageDrowing", { static: true })
+], ImageFieldTemplateComponent.prototype, "dialogImageDrowing", void 0);
 ImageFieldTemplateComponent = __decorate([
     Component({
         selector: 'image-field-template',
-        template: "<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\"\n     [onlyImages]=\"true\">\n</attachment-field-template>",
-        styles: [""]
+        template: "<!-- VISUALIZZAZIONE ALLEGATO PRE CARICATO CON POSSIBILITA' DI DISEGNO -->\n<div class=\"row\" *ngIf=\"field.ImageIsContextualAttachment && field.ContextualAttachment\">\n     <div class=\"col-sm-12 col-md-6 col-lg-4\">\n          <p class=\"mb-2\">\n               {{ field.Label + (field.Required ? \" *\" : \"\")}}\n               <br>\n               Nome immagine: {{ field.ImgName}}\n          </p>\n          <eqp-img-drawing\n               *ngIf=\"field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null\"\n               [src]=\"'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64\"\n               [showCancelButton]=\"false\" [enableLoadAnotherImage]=\"false\" [enableRemoveImage]=\"false\" [width]=\"width\"\n               [height]=\"height\" [i18n]=\"i18n\" [showCancelButton]=\"true\" (save)=\"saveDrowning($event)\"\n               (cancel)=\"resetPreLoadedImage()\">\n          </eqp-img-drawing>\n\n          <img *ngIf=\"!field.EnableDrawing\"\n               [src]=\"'data:'+ record[field.Name][0].FileContentType+ ';base64,'+ record[field.Name][0].FileDataBase64\">\n     </div>\n\n     <div class=\"col-sm-12 col-md-6 col-lg-8\">\n          <div class=\"row\"\n               *ngIf=\"field.AttachDefinition && field.AttachDefinition.MetadataFields && preLoadedImageMetadataFormGroup\">\n               <div class=\"mt-2\" *ngFor=\"let metadata of field.AttachDefinition.MetadataFields\"\n                    [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n                    <dynamic-module-field #fieldTemplate [field]=\"metadata\" [form]=\"preLoadedImageMetadataFormGroup\"\n                         [record]=\"record[field.Name][0]\" (recordChange)=\"updateMetadataValidity()\">\n                    </dynamic-module-field>\n               </div>\n          </div>\n     </div>\n</div>\n\n<!-- COMPONENTE IN CUI CARICARE NUOVI ALLEGATI -->\n<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\" [onlyImages]=\"true\"\n     (onAttachmentsChange)=\"onAttachmentsChange()\" *ngIf=\"!field.ImageIsContextualAttachment\">\n</attachment-field-template>\n\n<!-- DIALOG PER DISEGNARE SUL NUOVO ALLEGATO CARICATO -->\n<ng-template #dialogImageDrowing>\n     <div *ngIf=\"field.EnableDrawing && record[field.Name] && record[field.Name][0] && width != null && height != null\"\n          class=\"row\">\n          <div class=\"col-sm-12 col-md-12\">\n               <eqp-img-drawing [showCancelButton]=\"false\" [enableLoadAnotherImage]=\"false\" [enableRemoveImage]=\"false\"\n                    [src]=\"'data:'+ record[field.Name][0].FileContentType + ';base64,'+ record[field.Name][0].FileDataBase64\"\n                    [i18n]=\"i18n\" [showCancelButton]=\"false\" (save)=\"saveDrowning($event)\">\n               </eqp-img-drawing>\n          </div>\n     </div>\n     <div class=\"row mt-2 mb-1\">\n          <div class=\"col-sm-12 text-right\">\n               <button class=\"btn mat-raised-button\" (click)=\"closeImageDrowingDialog()\" type=\"button\">\n                    Annulla disegno\n               </button>\n          </div>\n     </div>\n</ng-template>",
+        styles: ["::ng-deep image-drawing>button{background-color:var(--primary)!important;color:#fff!important}"]
     })
 ], ImageFieldTemplateComponent);
 
@@ -2755,7 +2924,8 @@ EqpDynamicModuleModule = __decorate([
             EqpSelectModule,
             EqpDatetimepickerModule,
             EqpFiltersModule,
-            EqpNumericModule
+            EqpNumericModule,
+            EqpImgDrawingModule
         ],
         exports: [
             EqpDynamicModuleComponent,
@@ -2771,6 +2941,10 @@ class Entity extends BaseObj {
 }
 
 class ImageField extends BaseField {
+    /**Proprietà per recuperare l'allegato caricato come array per eqp-attachments (se ImageIsContextualAttachment == true) */
+    get _contextualAttachments() {
+        return this.ContextualAttachment ? [this.ContextualAttachment] : [];
+    }
 }
 
 /**Questo tipo di campo rappresenta una lookup ad altri valori */
@@ -2796,5 +2970,5 @@ class TextField extends BaseField {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionOnRecord, AddFormFieldComponent, AddFormRecordComponent, ArrayValidators, AttachmentField, AttachmentFieldTemplateComponent, AvailableFileExtensions, AvailableImageExtensions, BaseField, BaseObj, BoolPresentantioEnum, BooleanField, BooleanFieldTemplateComponent, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynamicModuleFieldComponent, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, Record, TextField, TextFieldTemplateComponent, TextareaField, TextareaFieldTemplateComponent, UtilityHelperService, MaterialModule as ɵa };
+export { ActionOnRecord, AddFormFieldComponent, AddFormRecordComponent, ArrayValidators, AttachmentField, AttachmentFieldTemplateComponent, AvailableFileExtensions, AvailableImageExtensions, BaseField, BaseObj, BoolPresentantioEnum, BooleanField, BooleanFieldTemplateComponent, ColSpanSizesEnum, Context, ContextUser, DateField, DateFieldTemplateComponent, DateTimeTypeEnum, DynamicModuleFieldComponent, Entity, EqpDynamicModuleComponent, EqpDynamicModuleConfiguratorComponent, EqpDynamicModuleDialogService, EqpDynamicModuleModule, FieldTypeEnum, Form, FormFieldGroup, FormScalarTypeEnum, FormTypeEnum, ImageField, ImageFieldTemplateComponent, ListFormRecordComponent, ListPresentationEnum, ListValueField, ListValueFieldTemplateComponent, LookupField, NumericField, NumericFieldTemplateComponent, Record, TextField, TextFieldTemplateComponent, TextareaField, TextareaFieldTemplateComponent, UtilityHelperService, ɵ0, MaterialModule as ɵa };
 //# sourceMappingURL=eqproject-eqp-dynamic-module.js.map