@eqproject/eqp-dynamic-module 0.0.3 → 0.0.4

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/dialog'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core'), require('@eqproject/eqp-table'), require('@eqproject/eqp-attachments'), require('@eqproject/eqp-select'), require('@eqproject/eqp-datetimepicker'), require('@eqproject/eqp-filters'), require('@eqproject/eqp-numeric'), require('sweetalert2'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('@eqproject/eqp-dynamic-module', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/dialog', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core', '@eqproject/eqp-table', '@eqproject/eqp-attachments', '@eqproject/eqp-select', '@eqproject/eqp-datetimepicker', '@eqproject/eqp-filters', '@eqproject/eqp-numeric', 'sweetalert2', '@angular/platform-browser'], factory) :
-    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-dynamic-module'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.dialog, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core, global.eqpTable, global.eqpAttachments, global.eqpSelect, global.eqpDatetimepicker, global.eqpFilters, global.eqpNumeric, global.Swal, global.ng.platformBrowser));
-}(this, (function (exports, common, core, forms, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, dialog, tooltip, snackBar, table, sort, paginator, core$1, eqpTable, eqpAttachments, eqpSelect, eqpDatetimepicker, eqpFilters, eqpNumeric, Swal, platformBrowser) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/checkbox'), require('@angular/material/button'), require('@angular/material/input'), require('@angular/material/autocomplete'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/radio'), require('@angular/material/select'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/menu'), require('@angular/material/sidenav'), require('@angular/material/toolbar'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/card'), require('@angular/material/stepper'), require('@angular/material/tabs'), require('@angular/material/expansion'), require('@angular/material/button-toggle'), require('@angular/material/chips'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/progress-bar'), require('@angular/material/dialog'), require('@angular/material/tooltip'), require('@angular/material/snack-bar'), require('@angular/material/table'), require('@angular/material/sort'), require('@angular/material/paginator'), require('@angular/material/core'), require('@eqproject/eqp-table'), require('@eqproject/eqp-attachments'), require('@eqproject/eqp-select'), require('@eqproject/eqp-datetimepicker'), require('@eqproject/eqp-img-drawing'), require('@eqproject/eqp-filters'), require('@eqproject/eqp-numeric'), require('sweetalert2'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('@eqproject/eqp-dynamic-module', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/checkbox', '@angular/material/button', '@angular/material/input', '@angular/material/autocomplete', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/radio', '@angular/material/select', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/menu', '@angular/material/sidenav', '@angular/material/toolbar', '@angular/material/list', '@angular/material/grid-list', '@angular/material/card', '@angular/material/stepper', '@angular/material/tabs', '@angular/material/expansion', '@angular/material/button-toggle', '@angular/material/chips', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/progress-bar', '@angular/material/dialog', '@angular/material/tooltip', '@angular/material/snack-bar', '@angular/material/table', '@angular/material/sort', '@angular/material/paginator', '@angular/material/core', '@eqproject/eqp-table', '@eqproject/eqp-attachments', '@eqproject/eqp-select', '@eqproject/eqp-datetimepicker', '@eqproject/eqp-img-drawing', '@eqproject/eqp-filters', '@eqproject/eqp-numeric', 'sweetalert2', '@angular/platform-browser'], factory) :
+    (global = global || self, factory((global.eqproject = global.eqproject || {}, global.eqproject['eqp-dynamic-module'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.checkbox, global.ng.material.button, global.ng.material.input, global.ng.material.autocomplete, global.ng.material.datepicker, global.ng.material.formField, global.ng.material.radio, global.ng.material.select, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.menu, global.ng.material.sidenav, global.ng.material.toolbar, global.ng.material.list, global.ng.material.gridList, global.ng.material.card, global.ng.material.stepper, global.ng.material.tabs, global.ng.material.expansion, global.ng.material.buttonToggle, global.ng.material.chips, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.progressBar, global.ng.material.dialog, global.ng.material.tooltip, global.ng.material.snackBar, global.ng.material.table, global.ng.material.sort, global.ng.material.paginator, global.ng.material.core, global.eqpTable, global.eqpAttachments, global.eqpSelect, global.eqpDatetimepicker, global.eqpImgDrawing, global.eqpFilters, global.eqpNumeric, global.Swal, global.ng.platformBrowser));
+}(this, (function (exports, common, core, forms, checkbox, button, input, autocomplete, datepicker, formField, radio, select, slider, slideToggle, menu, sidenav, toolbar, list, gridList, card, stepper, tabs, expansion, buttonToggle, chips, icon, progressSpinner, progressBar, dialog, tooltip, snackBar, table, sort, paginator, core$1, eqpTable, eqpAttachments, eqpSelect, eqpDatetimepicker, eqpImgDrawing, eqpFilters, eqpNumeric, Swal, platformBrowser) { 'use strict';
 
     Swal = Swal && Object.prototype.hasOwnProperty.call(Swal, 'default') ? Swal['default'] : Swal;
 
@@ -1549,11 +1549,10 @@
                     break;
                 case exports.FieldTypeEnum.Immagine:
                     this.field.AttachDefinition = new AttachmentField();
-                    this.fieldFormGroup.addControl('IsMultiAttach', new forms.FormControl(this.field.AttachDefinition.IsMultiAttach));
-                    // this.fieldFormGroup.addControl('ImgName', new FormControl((this.field as ImageField).ImgName, Validators.required));
-                    this.fieldFormGroup.addControl('IsMultiPoint', new forms.FormControl(this.field.IsMultiPoint));
-                    this.fieldFormGroup.addControl("AllowedExtensions", new forms.FormControl(this.field.AttachDefinition.AllowedExtensions));
+                    this.fieldFormGroup.addControl('EnableDrawing', new forms.FormControl(this.field.EnableDrawing));
                     this.fieldFormGroup.addControl('ImageIsContextualAttachment', new forms.FormControl(this.field.ImageIsContextualAttachment));
+                    // Imposto i FormControl variabili.
+                    this.onImageIsContextualAttachmentChange();
                     this.fieldTypeFormTemplate = this.imageFieldFormTemplate;
                     break;
                 case exports.FieldTypeEnum['Elenco generico']:
@@ -1570,11 +1569,51 @@
             if ([exports.FieldTypeEnum.Allegato, exports.FieldTypeEnum.Immagine, exports.FieldTypeEnum['Form di dettaglio']].includes(this.field.FieldType)) {
                 this.field.Formula = null;
                 this.fieldFormGroup.controls["Formula"].disable();
+                this.fieldFormGroup.controls["InListView"].disable();
             }
             else {
                 this.fieldFormGroup.controls["Formula"].enable();
+                this.fieldFormGroup.controls["InListView"].enable();
             }
         };
+        /**
+         * Metodo invocato al cambio del valore della proprietà ImageIsContextualAttachment nel caso
+         * di campi di tipo Immagine. Se TRUE allora rimuove i FormControl per le proprietà IsMultiAttach
+         * e AllowedExtensions e aggiunge i FormControl per le proprietà ImgName e ContextualAttachment,
+         * altrimenti il contrario.
+         */
+        AddFormFieldComponent.prototype.onImageIsContextualAttachmentChange = function () {
+            this.field.ImgName = null;
+            this.field.AttachDefinition.AllowedExtensions = [];
+            this.field.AttachDefinition.IsMultiAttach = false;
+            this.field.ContextualAttachment = null;
+            if (this.field.ImageIsContextualAttachment) {
+                this.fieldFormGroup.removeControl("IsMultiAttach");
+                this.fieldFormGroup.removeControl("AllowedExtensions");
+                this.fieldFormGroup.addControl('ImgName', new forms.FormControl(this.field.ImgName, forms.Validators.required));
+                this.fieldFormGroup.addControl('ContextualAttachment', new forms.FormControl(this.field.ContextualAttachment, forms.Validators.required));
+            }
+            else {
+                this.fieldFormGroup.removeControl("ImgName");
+                this.fieldFormGroup.removeControl("ContextualAttachment");
+                this.fieldFormGroup.addControl('IsMultiAttach', new forms.FormControl(this.field.AttachDefinition.IsMultiAttach));
+                this.fieldFormGroup.addControl("AllowedExtensions", new forms.FormControl(this.field.AttachDefinition.AllowedExtensions));
+            }
+        };
+        /**
+         * Metodo per intercettare l'aggiunta di un allegato nei campi di tipo Immagine per aggiornare
+         * il valore della proprietà ContextualAttachment e la validazione del relativo FormControl.
+         * @param event Array contenente l'elenco aggiornato degli allegati caricati (nel nostro caso ne contiene al più 1).
+         */
+        AddFormFieldComponent.prototype.catchContextualAttachmentChange = function (event) {
+            if (event && event.length > 0) {
+                this.field.ContextualAttachment = event[0];
+            }
+            else {
+                this.field.ContextualAttachment = null;
+            }
+            this.fieldFormGroup.controls['ContextualAttachment'].setValue(this.field.ContextualAttachment);
+        };
         /**
          * Metodo invocato alla selezione di una classe nella select per le colonne di bootstrap
          * da usare nella visualizzazione del campo. Questa funzione manipola la sorgente dati per
@@ -1909,7 +1948,7 @@
         AddFormFieldComponent = __decorate([
             core.Component({
                 selector: 'eqp-dynamic-module-add-form-field',
-                template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\n    <form [formGroup]=\"fieldFormGroup\">\n        <div class=\"row\">\n            <div class=\"header-title-standard\">{{indexField != null && indexField >= 0 ? \"Modifica\"\n                : \"Aggiungi\"}} campo</div>\n        </div>\n        <div class=\"row\">\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [enumData]=\"FieldTypeEnum\" [(ngModelInput)]=\"field.FieldType\" [isRequired]=\"true\"\n                    [showCancelButton]=\"false\" placeholder=\"Tipo campo\" (ngModelInputChange)=\"onFieldTypeChange()\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldType'\"\n                    [enumDataToExclude]=\"fieldTypesToExclude\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Label </mat-label>\n                    <input formControlName=\"Label\" required matInput [(ngModel)]=\"field.Label\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Descrizione </mat-label>\n                    <input formControlName=\"Description\" required matInput [(ngModel)]=\"field.Description\">\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.Required\" formControlName=\"Required\" color=\"primary\">\n                    Obbligatorio\n                </mat-slide-toggle>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <mat-form-field>\n                    <mat-label> Formula (Javascript) </mat-label>\n                    <input formControlName=\"Formula\" matInput [(ngModel)]=\"field.Formula\"\n                        [matAutocomplete]=\"formulaAutocomplete\" (keyup)=\"setFormulaAutocompleteOptions($event)\"\n                        (focus)=\"setFormulaAutocompleteOptions(null)\">\n                    <mat-autocomplete #formulaAutocomplete=\"matAutocomplete\">\n                        <mat-option *ngFor=\"let option of formulaAutocompleteOptions\" [value]=\"option.value\">\n                            {{option.label}}\n                        </mat-option>\n                    </mat-autocomplete>\n                </mat-form-field>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\" *ngIf=\"formFieldsGroups\">\n                <eqp-select [arrayData]=\"formFieldsGroups\" [(ngModelInput)]=\"field.FieldGroup\"\n                    [arrayKeyProperty]=\"'Name'\" [arrayValueProperty]=\"'Name'\" placeholder=\"Sezione\"\n                    [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'FieldGroup'\" [isRequired]=\"true\"\n                    [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2\">\n                <eqp-select [arrayData]=\"availableColSpanSizes\" [(ngModelInput)]=\"field.ColSizes\"\n                    [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" (ngModelInputChange)=\"onColSizeSelect()\"\n                    [isMultiSelect]=\"true\" placeholder=\"Larghezza campo\" [formGroupInput]=\"fieldFormGroup\"\n                    [formControlNameInput]=\"'ColSizes'\" [includeFullObject]=\"false\">\n                </eqp-select>\n            </div>\n\n            <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\">\n                <mat-slide-toggle [(ngModel)]=\"field.InListView\" formControlName=\"InListView\" color=\"primary\">\n                    Mostrare nella visualizzazione a lista\n                </mat-slide-toggle>\n            </div>\n\n            <ng-container *ngTemplateOutlet=\"fieldTypeFormTemplate\">\n            </ng-container>\n        </div>\n\n\n        <div class=\"row mt-2 mb-1\">\n            <div class=\"col-sm-12 text-right\">\n                <button class=\"mr-2\" mat-raised-button color=\"primary\" (click)=\"saveAndExitAddField(true)\"\n                    [disabled]=\"disableSaveField()\" type=\"button\">\n                    Salva\n                </button>\n                <button class=\"btn mat-raised-button\" (click)=\"saveAndExitAddField(false)\" type=\"button\">\n                    Esci\n                </button>\n            </div>\n        </div>\n    </form>\n</div>\n\n\n<!-- FORM PROPRIET\u00C0 CAMPI DI TESTO -->\n<ng-template #textFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Maschera </mat-label>\n            <input formControlName=\"TextMask\" matInput [(ngModel)]=\"field.TextMask\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI AREA DI TESTO -->\n<ng-template #textareaFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Righe </mat-label>\n            <input formControlName=\"Rows\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.Rows\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza massima </mat-label>\n            <input formControlName=\"MaxLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxLenght\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Lunghezza minima </mat-label>\n            <input formControlName=\"MinLenght\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinLenght\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI BOOLEANI -->\n<ng-template #booleadFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsTristate\" formControlName=\"IsTristate\" color=\"primary\">\n            A tre stati\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"BoolPresentantioEnum\" [(ngModelInput)]=\"field.PresetationType\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresetationType'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI DATA -->\n<ng-template #dateFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data minima'\" [(ngModelInput)]=\"field.MinDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MinDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-datetimepicker [placeholder]=\"'Data massima'\" [(ngModelInput)]=\"field.MaxDate\"\n            [formGroupInput]=\"fieldFormGroup\" [formControlNameInput]=\"'MaxDate'\" [UTCDate]=\"true\" [showSeconds]=\"false\">\n        </eqp-datetimepicker>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"DateTimeTypeEnum\" [(ngModelInput)]=\"field.IsOnlyDate\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di data\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'IsOnlyDate'\">\n        </eqp-select>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI NUMERICI -->\n<ng-template #numericFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsInteger\" formControlName=\"IsInteger\" color=\"primary\">\n            Valore intero\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Formato numerico </mat-label>\n            <input formControlName=\"NumberFormat\" matInput [(ngModel)]=\"field.NumberFormat\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Simbolo valuta </mat-label>\n            <input formControlName=\"CurrencySymbol\" matInput [(ngModel)]=\"field.CurrencySymbol\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore massimo </mat-label>\n            <input formControlName=\"MinValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MinValue\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Valore minimo </mat-label>\n            <input formControlName=\"MaxValue\" type=\"number\" [min]=\"0\" matInput [(ngModel)]=\"field.MaxValue\">\n        </mat-form-field>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI ALLEGATO -->\n<ng-template #attachmentFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiAttach\" formControlName=\"IsMultiAttach\" color=\"primary\">\n            Allegati multipli\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableFileExtensions.concat(AvailableImageExtensions)\"\n            [(ngModelInput)]=\"field.AllowedExtensions\" [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\"\n            [isMultiSelect]=\"true\" placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\" [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI IMMAGINE -->\n<ng-template #imageFieldFormTemplate>\n    <!-- <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field>\n            <mat-label> Nome immagine </mat-label>\n            <input formControlName=\"ImgName\" matInput [(ngModel)]=\"field.ImgName\">\n        </mat-form-field>\n    </div> -->\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiPoint\" formControlName=\"IsMultiPoint\" color=\"primary\">\n            Immagine multi-point\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.ImageIsContextualAttachment\" formControlName=\"ImageIsContextualAttachment\"\n            color=\"primary\">\n            Carica immagine come allegato\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.AttachDefinition.IsMultiAttach\" formControlName=\"IsMultiAttach\"\n            color=\"primary\">\n            Immagini multiple\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [arrayData]=\"AvailableImageExtensions\" [(ngModelInput)]=\"field.AttachDefinition.AllowedExtensions\"\n            [arrayKeyProperty]=\"'key'\" [arrayValueProperty]=\"'value'\" [isMultiSelect]=\"true\"\n            placeholder=\"Estensioni accettate\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'AllowedExtensions'\" [includeFullObject]=\"false\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row mt-2\">\n            <div class=\"col-sm-12 col-md-6\">\n                <div class=\"header-title-standard\">\n                    Elenco metadata\n                </div>\n            </div>\n            <div class=\"col-sm-12 col-md-6 text-right\">\n                <button class=\"btn btn-primary\" mat-raised-button color=\"primary\" type=\"button\"\n                    (click)=\"openMetadataDialog()\">\n                    <mat-icon>add</mat-icon>\n                    <span style=\"margin-left: 10px;\">Aggiungi</span>\n                </button>\n            </div>\n        </div>\n        <eqp-table #metadataFieldsTable [createMatCard]=\"false\" [columns]=\"metadataColumns\"\n            [data]=\"field.AttachDefinition.MetadataFields\" [emptyTableMessage]=\"'Nessun metadata inserito'\"\n            [searchText]=\"'Cerca'\">\n        </eqp-table>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LISTA DI VALORI -->\n<ng-template #listValueFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.IsMultiChoiche\" formControlName=\"IsMultiChoiche\" color=\"primary\">\n            Scelta multipla\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\">\n        <eqp-select [enumData]=\"ListPresentationEnum\" [(ngModelInput)]=\"field.PresentationMode\" [isRequired]=\"true\"\n            [showCancelButton]=\"false\" placeholder=\"Tipo di presentazione\" [formGroupInput]=\"fieldFormGroup\"\n            [formControlNameInput]=\"'PresentationMode'\">\n        </eqp-select>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <h4 class=\"key-value-list-section-title\"> </h4>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Label opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.key\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <mat-form-field>\n                    <mat-label> Valore opzione (invio per confermare)</mat-label>\n                    <input matInput [(ngModel)]=\"keyValueObject.value\" (keyup)=\"onMultiSelectInputKeyup($event, null)\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-4 d-flex align-items-center\">\n                <span class=\"mr-3\">Opzioni inserite:</span>\n                <ul class=\"value-pairs-list\">\n                    <li *ngFor=\"let keyValuePair of getDictionaryKeyValue()\">\n                        <mat-icon class=\"mr-1\" (click)=\"deleteKeyFromDictionary(keyValuePair.key)\">close\n                        </mat-icon>\n                        <span><b>Label: </b> {{keyValuePair.key}} - <b>Valore: </b> {{keyValuePair.value}}</span>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- FORM PROPRIET\u00C0 CAMPI LOOKUP -->\n<ng-template #lookupFieldFormTemplate>\n    <div class=\"col-sm-12 col-md-4 mt-2 d-flex align-items-center\" [formGroup]=\"fieldFormGroup\">\n        <mat-slide-toggle [(ngModel)]=\"field.UseAsGetOrDiscard\" formControlName=\"UseAsGetOrDiscard\" color=\"primary\"\n            matTooltip=\"Se true la lookup viene visualizzata in una modale per lo scegli scarta\">\n            Usa per scegli o scarta\n        </mat-slide-toggle>\n    </div>\n    <div class=\"col-sm-12 col-md-4 mt-2\" [formGroup]=\"fieldFormGroup\">\n        <mat-form-field matTooltip=\"Nome dell'entit\u00E0 relazionata\">\n            <mat-label> Nome entit\u00E0 </mat-label>\n            <input formControlName=\"EntitySourceName\" required matInput [(ngModel)]=\"field.EntitySourceName\">\n        </mat-form-field>\n    </div>\n    <div class=\"col-sm-12 mt-2\">\n        <div class=\"row\">\n            <div class=\"col-md-4\">\n                <mat-form-field\n                    matTooltip=\"Elenco di campi ordinato che verr\u00E0 visualizzato nella lookup (premere invio per confermare)\">\n                    <mat-label>\n                        Nomi dei campi (invio per confermare) </mat-label>\n                    <input matInput (keyup)=\"onMultiSelectInputKeyup($event, 'FieldNames')\">\n                </mat-form-field>\n            </div>\n            <div class=\"col-md-8 d-flex align-items-center\">\n                <span class=\"mr-3\">Nomi selezionati:</span>\n                <div class=\"extension-container\" *ngFor=\"let extension of field.FieldNames; let i = index\">\n                    <span>{{extension}}</span>\n                    <mat-icon class=\"ml-1\" (click)=\"field.FieldNames.splice(i,1)\">close\n                    </mat-icon>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- DIALOG PER AGGIUNGERE UN METADATA NEI CAMPI DI TIPO ALLEGATO O IMMAGINE -->\n<ng-template #dialogMetadata>\n    <eqp-dynamic-module-add-form-field [field]=\"selectedMetadata\" [availableFields]=\"availableFields\"\n        [indexField]=\"indexSelectedMetadata\" (saveFieldEvent)=\"onSaveMetadata($event)\" [fieldTypesToExclude]=\"[6,7,10]\">\n    </eqp-dynamic-module-add-form-field>\n</ng-template>",
+                template: "<div class=\"container-fluid\" style=\"max-height: 70vh !important; overflow-x: hidden; overflow-y: auto;\">\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);
@@ -2307,31 +2346,13 @@
     }());
 
     var AttachmentFieldTemplateComponent = /** @class */ (function () {
-        //#endregion
         function AttachmentFieldTemplateComponent(utilityService, cdr) {
             this.utilityService = utilityService;
             this.cdr = cdr;
             this.onlyImages = false;
             this.recordChange = new core.EventEmitter();
+            this.onAttachmentsChange = new core.EventEmitter();
             this.metadataFormGroups = new Array();
-            //#region Etichette per eqp-attachments
-            this.previewLabel = "Anteprima";
-            this.emptyTableMessage = "No record found";
-            this.downloadTooltipPosition = "below";
-            this.openLinkLabel = "Apri link";
-            this.addButtonLabel = "Aggiungi";
-            this.downloadLabel = "Download";
-            this.deleteLabel = "Elimina";
-            this.fileNameLabel = "Nome file";
-            this.uploadFileLabel = "Carica file";
-            this.confirmLabel = "Conferma";
-            this.abortLabel = "Annulla";
-            this.saveLabel = "Salva";
-            this.exitLabel = "Esci";
-            this.eqpTableSearchText = "Cerca...";
-            this.deleteDialogTitle = "Attenzione:";
-            this.deleteDialogMessage = "Sicuro di voler eliminare questo allegato?";
-            this.noImageSelectedErrorMessage = "Nessuna immagine selezionata!";
         }
         AttachmentFieldTemplateComponent.prototype.ngOnInit = function () {
             // Nel caso in cui sono in modifica di un Record aggiorno il valore
@@ -2382,6 +2403,10 @@
             this.createMetadataFormGroups();
             this.setFormControlValue();
             this.onRecordValueChange();
+            // Scateno un evento di output necessario al componente ImageFieldTemplate al
+            // variare degli allegati caricati. Viene usato per aprire il dialog per disegnare
+            // sull'immagine caricata in base alla configurazione del Field.
+            this.onAttachmentsChange.emit();
             this.cdr.detectChanges();
         };
         /**
@@ -2468,6 +2493,9 @@
         __decorate([
             core.Output()
         ], AttachmentFieldTemplateComponent.prototype, "recordChange", void 0);
+        __decorate([
+            core.Output()
+        ], AttachmentFieldTemplateComponent.prototype, "onAttachmentsChange", void 0);
         __decorate([
             core.ViewChild("eqpAttachments", { static: true })
         ], AttachmentFieldTemplateComponent.prototype, "eqpAttachments", void 0);
@@ -2477,16 +2505,38 @@
         AttachmentFieldTemplateComponent = __decorate([
             core.Component({
                 selector: 'attachment-field-template',
-                template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\n    {{field.Label + (field.Required ? \" *\" : \"\")}}\n</p>\n<div class=\"row\" *ngIf=\"!field.IsMultiAttach && record[field.Name] && record[field.Name][0]\">\n    <div class=\"mt-2\" *ngFor=\"let metadata of field.MetadataFields\" [ngClass]=\"utilityService.getFieldSyleClass(metadata)\">\n        <dynamic-module-field [field]=\"metadata\" [record]=\"record[field.Name][0]\"\n            (recordChange)=\"updateMetadataValidity()\">\n        </dynamic-module-field>\n    </div>\n</div>\n\n\n\n<eqp-attachments [attachmentsList]=\"record[field.Name]\" [showMatCard]=\"true\" [allowOnlyImages]=\"onlyImages\"\n    [isDisabled]=\"field.FormFormGroup.disabled\" [showInlinePreview]=\"true\" [multipleAttachment]=\"field.IsMultiAttach\"\n    [disableAction]=\"field.FormFormGroup.disabled\" [acceptedFileTypes]=\"field.AllowedExtensions\" [showHeader]=\"true\"\n    [headerTitle]=\"field.Label + (field.Required ? ' *' : '')\" [previewLabel]=\"previewLabel\"\n    [emptyTableMessage]=\"emptyTableMessage\" [downloadTooltipPosition]=\"downloadTooltipPosition\"\n    [openLinkLabel]=\"openLinkLabel\" [addButtonLabel]=\"addButtonLabel\" [downloadLabel]=\"downloadLabel\"\n    [deleteLabel]=\"deleteLabel\" [fileNameLabel]=\"fileNameLabel\" [uploadFileLabel]=\"uploadFileLabel\"\n    [confirmLabel]=\"confirmLabel\" [abortLabel]=\"abortLabel\" [saveLabel]=\"saveLabel\" [exitLabel]=\"exitLabel\"\n    [eqpTableSearchText]=\"eqpTableSearchText\" [deleteDialogTitle]=\"deleteDialogTitle\"\n    [deleteDialogMessage]=\"deleteDialogMessage\" [noImageSelectedErrorMessage]=\"noImageSelectedErrorMessage\"\n    (localEditedAttachments)=\"catchAttachmentList($event)\" #eqpAttachments>\n</eqp-attachments>\n\n<!-- TEMPLATE PER VISUALIZZARE LA COLONNA DELLA SEZIONE NELLA TABELLA DEI FIELDS -->\n<ng-template #metadataColumnTemplate let-row=\"row\" let-col=\"col\">\n    <dynamic-module-field [field]=\"getFieldFromMetadata(col, row)\" [record]=\"row\"\n        (recordChange)=\"updateMetadataValidity()\">\n    </dynamic-module-field>\n</ng-template>",
+                template: "<p *ngIf=\"!field.IsMultiAttach\" class=\"mb-2\">\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);
         return AttachmentFieldTemplateComponent;
     }());
 
+    /**
+     * Metodo per recuperare, a partire da un Blob, la stringa contenente il base64 del file.
+     * Usato per prendere il base64 dell'immagine dopo che l'utente ci ha disegnato sopra.
+     * @param file Blob che rappresenta l'immagine.
+     */
+    var toBase64 = function (file) { return new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function () { return resolve(reader.result.toString()); };
+        reader.onerror = function (error) { return reject(error); };
+    }); };
+    var ɵ0 = toBase64;
     var ImageFieldTemplateComponent = /** @class */ (function () {
-        function ImageFieldTemplateComponent() {
+        //#endregion
+        function ImageFieldTemplateComponent(dialog, utilityService) {
+            this.dialog = dialog;
+            this.utilityService = utilityService;
             this.recordChange = new core.EventEmitter();
+            //#region Proprietà per configurare il componente ngx-image-drawing e aprire il relativo dialog.
+            this.width = null;
+            this.height = null;
+            this.i18n = {
+                saveBtn: 'Salva modifiche',
+                cancelBtn: 'Ricarica originale'
+            };
         }
         ImageFieldTemplateComponent.prototype.ngOnInit = function () {
             this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
@@ -2499,6 +2549,19 @@
             this.field.AttachDefinition.Required = this.field.Required;
             this.field.AttachDefinition.Formula = this.field.Formula;
             this.field.AttachDefinition.FieldValue = this.field.FieldValue;
+            // Se il campo prevede un'immagine pre-caricata (ImageIsContextualAttachment == true) sulla quale 
+            // l'utente può disegnare (EnableDrawing == true) e non sono in modifica di un record (ovvero nel record
+            // non ho un'immagine già salvata) allora imposta l'immagine pre caricata come valore iniziale
+            // nel record corrente e ne recupera le dimensioni per visualizzare correttamente l'area in cui  
+            // l'utente può disegnare. Se non effettua modifiche o non salva i disegni fatti viene salvata
+            // l'immagine originale.
+            if (this.field.ImageIsContextualAttachment && this.field.ContextualAttachment) {
+                if (!this.record[this.field.Name] || !Array.isArray(this.record[this.field.Name]) || !(this.record[this.field.Name].length > 0)) {
+                    this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+                }
+                this.preLoadedImageMetadataFormGroup = this.utilityService.CreateFormFormGroup(this.field.AttachDefinition.MetadataFields, this.record[this.field.Name][0]);
+                this.getImageDimensions();
+            }
         };
         ImageFieldTemplateComponent.prototype.ngOnChanges = function (changes) {
             // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
@@ -2507,6 +2570,15 @@
                 this.updateField();
             }
         };
+        ImageFieldTemplateComponent.prototype.updateMetadataValidity = function () {
+            if (this.preLoadedImageMetadataFormGroup.invalid) {
+                this.field.FormFormGroup.controls[this.field.Name].setErrors({ 'incorrect': true });
+            }
+            else {
+                this.field.FormFormGroup.controls[this.field.Name].setErrors(null);
+            }
+            this.onRecordValueChange();
+        };
         /**
          * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
          */
@@ -2515,6 +2587,108 @@
                 this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
             }
         };
+        ImageFieldTemplateComponent.prototype.resetPreLoadedImage = function () {
+            this.width = null;
+            this.height = null;
+            this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+            this.getImageDimensions();
+        };
+        /**
+         * Metodo invocato quando vengono aggiunti o eliminati gli allegati nel componente AttachmentFieldTemplate.
+         * Se l'ImageField è abilitato al disegno (EnableDrawing == true), non permette allegati multipli (IsMulitAttach == false)
+         * e nel Record corrente è presente l'immagine caricata dall'utente allora recupera le dimensioni dell'immagine e
+         * apre il dialog con il componente image-drawing per permettere il disegno sull'immagine appena caricata.
+         */
+        ImageFieldTemplateComponent.prototype.onAttachmentsChange = function () {
+            if (!this.field.AttachDefinition.IsMultiAttach && this.field.EnableDrawing && this.record[this.field.Name] && this.record[this.field.Name][0]) {
+                this.getImageDimensions();
+                this.dialogImageDrowingRef = this.dialog.open(this.dialogImageDrowing, {
+                    disableClose: true,
+                    hasBackdrop: true,
+                    width: '75%'
+                });
+            }
+        };
+        /**
+         * Metodo invocato al salvataggio dell'immagine dal componente image-drawing.
+         * Trasforma il Blob ricevuto in un base64, aggiorna il FileContetType e il FileDataBase64
+         * dell'allegato caricato e chiude il dialog in cui disegnare.
+         * @param drawnPicture Blob dell'immagine disegnata.
+         */
+        ImageFieldTemplateComponent.prototype.saveDrowning = function (drawnPicture) {
+            return __awaiter(this, void 0, void 0, function () {
+                var base64File;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, toBase64(drawnPicture)];
+                        case 1:
+                            base64File = _a.sent();
+                            if (base64File) {
+                                this.record[this.field.Name][0].FileContentType = base64File.split(",")[0].split(":")[1].split(";")[0];
+                                this.record[this.field.Name][0].FileDataBase64 = base64File.split(",")[1];
+                            }
+                            if (this.dialogImageDrowingRef) {
+                                this.closeImageDrowingDialog();
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * Metodo per chiudere il dialog in cui disegnare sull'immagine cariata e svuotare le dimensioni.
+         */
+        ImageFieldTemplateComponent.prototype.closeImageDrowingDialog = function () {
+            this.dialogImageDrowingRef.close();
+            this.width = null;
+            this.height = null;
+        };
+        /**
+         * Metodo per recuperare le dimensioni dell'immagine caricata per mostrare correttamente
+         * il componente image-drawing. Se non viene eseguito questo passaggio l'area in cui disegnare
+         * è più grande dell'immagine stessa e al salvataggio i tratti disegnati vengono spostati.
+         */
+        ImageFieldTemplateComponent.prototype.getImageDimensions = function () {
+            var _this = this;
+            var blob = this.getBlobFromBase64();
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                var image = new Image();
+                image.src = e.target.result;
+                image.onload = function (rs) {
+                    _this.height = rs.currentTarget['height'];
+                    _this.width = rs.currentTarget['width'];
+                };
+            };
+            reader.readAsDataURL(blob);
+        };
+        /**
+         * Metodo per convertire il base64 di un'immagine in un Blob.
+         * Necessario per il recupero delle dimensioni dell'immagine caricata a partire dal suo base64.
+         * Viene eseguito solo nel caso in cui l'ImageField non ammette allegati multipli.
+         * @returns Restituisce il Blob dell'immagine caricata.
+         */
+        ImageFieldTemplateComponent.prototype.getBlobFromBase64 = function () {
+            var byteCharacters = atob(this.record[this.field.Name][0].FileDataBase64);
+            var byteNumbers = new Array(byteCharacters.length);
+            for (var i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            var byteArray = new Uint8Array(byteNumbers);
+            return new Blob([byteArray], { type: this.record[this.field.Name][0].FileContentType });
+        };
+        /**
+         * Metodo per emettere l'evento che il valore del record è cambiato.
+         */
+        ImageFieldTemplateComponent.prototype.onRecordValueChange = function () {
+            if (!this.field.Formula) {
+                this.recordChange.emit(this.record);
+            }
+        };
+        ImageFieldTemplateComponent.ctorParameters = function () { return [
+            { type: dialog.MatDialog },
+            { type: UtilityHelperService }
+        ]; };
         __decorate([
             core.Input()
         ], ImageFieldTemplateComponent.prototype, "record", void 0);
@@ -2524,11 +2698,14 @@
         __decorate([
             core.Output()
         ], ImageFieldTemplateComponent.prototype, "recordChange", void 0);
+        __decorate([
+            core.ViewChild("dialogImageDrowing", { static: true })
+        ], ImageFieldTemplateComponent.prototype, "dialogImageDrowing", void 0);
         ImageFieldTemplateComponent = __decorate([
             core.Component({
                 selector: 'image-field-template',
-                template: "<attachment-field-template [(record)]=\"record\" [field]=\"field.AttachDefinition\"\n     [onlyImages]=\"true\">\n</attachment-field-template>",
-                styles: [""]
+                template: "<!-- VISUALIZZAZIONE ALLEGATO PRE CARICATO CON POSSIBILITA' DI DISEGNO -->\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);
         return ImageFieldTemplateComponent;
@@ -3049,7 +3226,8 @@
                     eqpSelect.EqpSelectModule,
                     eqpDatetimepicker.EqpDatetimepickerModule,
                     eqpFilters.EqpFiltersModule,
-                    eqpNumeric.EqpNumericModule
+                    eqpNumeric.EqpNumericModule,
+                    eqpImgDrawing.EqpImgDrawingModule
                 ],
                 exports: [
                     EqpDynamicModuleComponent,
@@ -3076,6 +3254,14 @@
         function ImageField() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        Object.defineProperty(ImageField.prototype, "_contextualAttachments", {
+            /**Proprietà per recuperare l'allegato caricato come array per eqp-attachments (se ImageIsContextualAttachment == true) */
+            get: function () {
+                return this.ContextualAttachment ? [this.ContextualAttachment] : [];
+            },
+            enumerable: true,
+            configurable: true
+        });
         return ImageField;
     }(BaseField));
 
@@ -3152,6 +3338,7 @@
     exports.TextareaField = TextareaField;
     exports.TextareaFieldTemplateComponent = TextareaFieldTemplateComponent;
     exports.UtilityHelperService = UtilityHelperService;
+    exports.ɵ0 = ɵ0;
     exports.ɵa = MaterialModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });