@eqproject/eqp-dynamic-module 0.0.6 → 0.0.7

package/src/lib/components/private/field-templates/image-field-template/image-field-template.component.ts

@@ -0,0 +1,203 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
+import { ImageField } from '../../../../models/fields/imageField.model';
+import { AvailableImageExtensions } from '../../../../models/fields/attachmentField.model';
+import { Record } from '../../../../models/record.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { FormGroup } from '@angular/forms';
+import { I18nInterface } from '@eqproject/eqp-img-drawing';
+
+/**
+ * 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<string>((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => resolve(reader.result.toString());
+  reader.onerror = error => reject(error);
+});
+
+@Component({
+  selector: 'image-field-template',
+  templateUrl: './image-field-template.component.html',
+  styleUrls: ['./image-field-template.component.scss']
+})
+export class ImageFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() record: Record;
+  @Input() field: ImageField;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  preLoadedImageMetadataFormGroup: FormGroup;
+
+  //#region Proprietà per configurare il componente ngx-image-drawing e aprire il relativo dialog.
+  public width = null;
+  public height = null;
+  public i18n: I18nInterface = {
+    saveBtn: 'Salva modifiche',
+    cancelBtn: 'Ricarica originale'
+  };
+  dialogImageDrowingRef: MatDialogRef<TemplateRef<any>>;
+  @ViewChild("dialogImageDrowing", { static: true }) dialogImageDrowing: TemplateRef<any>;
+  //#endregion
+
+  constructor(
+    private dialog: MatDialog,
+    public utilityService: UtilityHelperService
+  ) { }
+
+  ngOnInit(): void {
+    this.field.AttachDefinition.FormFormGroup = this.field.FormFormGroup;
+
+    if (!this.field.AttachDefinition.AllowedExtensions) {
+      this.field.AttachDefinition.AllowedExtensions = AvailableImageExtensions.map(ext => ext.key);
+    }
+
+    this.field.AttachDefinition.Name = this.field.Name;
+    this.field.AttachDefinition.Label = this.field.Label;
+    this.field.AttachDefinition.Description = this.field.Description;
+    this.field.AttachDefinition.Required = this.field.Required;
+    this.field.AttachDefinition.Formula = this.field.Formula;
+    this.field.AttachDefinition.FieldValue = this.field.FieldValue;
+
+    // Se il campo prevede un'immagine pre-caricata (ImageIsContextualAttachment == true) sulla quale 
+    // l'utente può disegnare (EnableDrawing == true) e non sono in modifica di un record (ovvero nel record
+    // non ho un'immagine già salvata) allora imposta l'immagine pre caricata come valore iniziale
+    // nel record corrente e ne recupera le dimensioni per visualizzare correttamente l'area in cui  
+    // l'utente può disegnare. Se non effettua modifiche o non salva i disegni fatti viene salvata
+    // l'immagine originale.
+    if (this.field.ImageIsContextualAttachment && this.field.ContextualAttachment) {
+      if (!this.record[this.field.Name] || !Array.isArray(this.record[this.field.Name]) || !(this.record[this.field.Name].length > 0)) {
+        this.record[this.field.Name] = [JSON.parse(JSON.stringify(this.field.ContextualAttachment))];
+      }
+      this.preLoadedImageMetadataFormGroup = this.utilityService.CreateFormFormGroup(this.field.AttachDefinition.MetadataFields, this.record[this.field.Name][0]);
+      this.getImageDimensions();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+
+  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.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      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.
+   */
+  async saveDrowning(drawnPicture: Blob) {
+    let base64File = await 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. 
+   */
+  private getImageDimensions() {
+    var blob: Blob = this.getBlobFromBase64();
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      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.
+   */
+  private 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.
+   */
+  private onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+}

package/src/lib/components/private/field-templates/list-value-field-template/list-value-field-template.component.html

@@ -0,0 +1,46 @@
+<eqp-select *ngIf="field.PresentationMode == ListPresentationEnum['Combo box']" [arrayData]="arrayData"
+    [arrayKeyProperty]="'Value'" [showCancelButton]="!field.Required" [arrayValueProperty]="'Key'"
+    [formGroupInput]="field.FormFormGroup" [formControlNameInput]="field.Name" [placeholder]="field.Label"
+    [includeFullObject]="false" [isRequired]="field.Required" [isDisabled]="field.FormFormGroup.disabled"
+    [(ngModelInput)]="record[field.Name]" [isMultiSelect]="field.IsMultiChoiche"
+    (ngModelInputChange)="onRecordValueChange()">
+</eqp-select>
+
+<div *ngIf="field.PresentationMode != ListPresentationEnum['Combo box']" [formGroup]="field.FormFormGroup">
+
+    <mat-label class="mr-3"> {{field.Label + (field.Required ? " *" : "")}} </mat-label>
+
+    <!-- VISUALIZZAZIONE A RADIO BUTTON (SENZA SELEZIONE MULTIPLA) -->
+    <mat-radio-group *ngIf="field.PresentationMode == ListPresentationEnum['Radio button'] && !field.IsMultiChoiche"
+        [formControlName]="field.Name" [disabled]="field.FormFormGroup.disabled" [required]="field.Required"
+        [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
+        <mat-radio-button class="mr-2" *ngFor="let data of arrayData" [value]="data.Value" color="primary">
+            {{data.Key}}
+        </mat-radio-button>
+    </mat-radio-group>
+
+    <!-- VISUALIZZAZIONE A CHECKBOX (SELEZIONE MULTIPLA) -->
+    <div class="d-inline-block"
+        *ngIf="field.PresentationMode == ListPresentationEnum['Radio button'] && field.IsMultiChoiche">
+        <mat-checkbox class="mr-2" *ngFor="let data of arrayData" [disabled]="field.FormFormGroup.disabled"
+            [formControlName]="field.Name" [(ngModel)]="data.Selected" (ngModelChange)="updateSelected()">
+            {{data.Key}}
+        </mat-checkbox>
+    </div>
+
+    <!-- VISUALIZZAZIONE A PULSANTI (CON TESTO O IMMAGINI) -->
+    <div class="d-inline-block"
+        *ngIf="[ListPresentationEnum['Pulsante con testo'], ListPresentationEnum.Immagini].includes(field.PresentationMode)">
+        <button mat-raised-button color="primary" class="btn btn-primary m-1 data-button" *ngFor="let data of arrayData"
+            [ngClass]="{'selected-button': data.Selected == true, 'p-0': field.PresentationMode == ListPresentationEnum.Immagini}"
+            (click)="buttonSelectClick(data)" [disabled]="field.FormFormGroup.disabled">
+
+            <!-- TESTO DEL PULSANTE -->
+            <span *ngIf="field.PresentationMode == ListPresentationEnum['Pulsante con testo']"> {{data.Key}}</span>
+
+            <!-- IMMAGINE DEL PULSANTE -->
+            <img *ngIf="field.PresentationMode == ListPresentationEnum.Immagini" [src]="data.ImgUrl">
+        </button>
+    </div>
+
+</div>

package/src/lib/components/private/field-templates/list-value-field-template/list-value-field-template.component.scss

@@ -0,0 +1,13 @@
+.selected-button {
+    opacity: 0.7;
+}
+.selected-button:disabled {
+    background-color: var(--primary) !important;
+    opacity: 0.3;
+    color: white;
+}
+
+.data-button img {
+    max-height: 300px;
+    max-width: 300px;
+}

package/src/lib/components/private/field-templates/list-value-field-template/list-value-field-template.component.ts

@@ -0,0 +1,114 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Record } from '../../../../models/record.model';
+import { ListPresentationEnum, ListValueField } from '../../../../models/fields/listValueField.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+
+@Component({
+  selector: 'list-value-field-template',
+  templateUrl: './list-value-field-template.component.html',
+  styleUrls: ['./list-value-field-template.component.scss']
+})
+export class ListValueFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() field: ListValueField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  ListPresentationEnum = ListPresentationEnum;
+  arrayData: { Key: string, Value: any, Selected?: boolean, ImgUrl?: string }[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.setArrayData();
+    if (this.field.IsMultiChoiche && !this.record[this.field.Name]) {
+      this.record[this.field.Name] = [];
+    }
+    // Nel caso in cui sono in modifica di un Record aggiorno il valore
+    // e il validator del FormControl. Se non viene eseguita questa riga
+    // l'utente deve modificare la selezione fatta per aggiornare la form.
+    this.setFormControlValue();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo invocato quando viene selezionata un'opzione nella visualizzazione a button
+   * @param data Rappresenta l'oggetto selezionato
+   */
+  buttonSelectClick(data: { Key: string, Value: any, Selected?: boolean, ImgUrl?: string }) {
+    data.Selected = !data.Selected;
+    if (this.field.IsMultiChoiche) {
+      this.updateSelected(false);
+    } else {
+      this.arrayData.filter(d => d.Key != data.Key && d.Value != data.Value).forEach(d => d.Selected = false);
+      this.record[this.field.Name] = data.Value;
+    }
+    this.onRecordValueChange();
+  }
+
+  /**
+   * Metodo per aggiornare il/i valore/i selezionato/i dall'utente.
+   * @param emitChange Se true scatena l'evento di output della modifica del valore di record
+   */
+  updateSelected(emitChange: boolean = true) {
+    this.record[this.field.Name] = this.arrayData.filter(data => data.Selected).map(data => data.Value);
+    this.setFormControlValue();
+    if (emitChange) {
+      this.onRecordValueChange();
+    }
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+
+  /**
+   * Metodo per creare un array di oggetti del tipo { Key: string, Value: any } da usare come sorgente dati per la eqp-select.
+   */
+  private setArrayData() {
+    if (this.field.PresentationMode != ListPresentationEnum.Immagini) {
+      Object.keys(this.field.ValuePairs).forEach(k => { this.createArrayDataElement(k, this.field.ValuePairs[k]); });
+    } else {
+      this.field.ButtonImageList.forEach(i => { this.createArrayDataElement(i.ButtonKey, i.ButtonValue, 'data:' + i.FileContentType + ';base64,' + i.FileDataBase64); });
+    }
+  }
+
+  private createArrayDataElement(key: string, value: string, imgUrl: string = null) {
+    var isOptionSelected: boolean;
+    if (this.field.IsMultiChoiche && this.record[this.field.Name] && this.record[this.field.Name].length > 0) {
+      isOptionSelected = !!this.record[this.field.Name].find(v => v == value);
+    } else {
+      isOptionSelected = this.record[this.field.Name] === value;
+    }
+    this.arrayData.push({ Key: key, Value: value, Selected: isOptionSelected, ImgUrl: imgUrl });
+  }
+
+  /**
+   * Metodo per aggiornare il valore e il validator del FormControl associato al campo.
+   */
+  private setFormControlValue() {
+    this.field.FormFormGroup.controls[this.field.Name].setValue(this.record[this.field.Name]);
+  }
+}

package/src/lib/components/private/field-templates/numeric-field-template/numeric-field-template.component.html

@@ -0,0 +1,6 @@
+<mat-form-field [formGroup]="field.FormFormGroup">
+    <mat-label> {{field.Label}} </mat-label>
+    <input matInput eqpNumericMask [formControlName]="field.Name" [disabled]="field.FormFormGroup.disabled"
+        [required]="field.Required" [(ngModel)]="record[field.Name]" [options]="eqpNumericOptions"
+        [step]="field.IsInteger ? 1 : null" (ngModelChange)="onRecordValueChange()" />
+</mat-form-field>

package/src/lib/components/private/field-templates/numeric-field-template/numeric-field-template.component.ts

@@ -0,0 +1,70 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { EqpNumericInputMode, NumericMaskConfig } from '@eqproject/eqp-numeric';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+import { Record } from '../../../../models/record.model';
+import { NumericField } from '../../../../models/fields/numericField.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+
+@Component({
+  selector: 'numeric-field-template',
+  templateUrl: './numeric-field-template.component.html',
+  styleUrls: ['./numeric-field-template.component.scss']
+})
+export class NumericFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() field: NumericField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  eqpNumericOptions: Partial<NumericMaskConfig> = {};
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.configureEqpNumericOptions();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+
+  /**
+   * Metodo per configurare eqp-numeric
+   */
+  private configureEqpNumericOptions() {
+    this.eqpNumericOptions.prefix = this.field.CurrencySymbol ? this.field.CurrencySymbol : "";
+    this.eqpNumericOptions.inputMode = this.field.CurrencySymbol ? EqpNumericInputMode.FINANCIAL : EqpNumericInputMode.NATURAL;
+    if (this.field.MinValue != null && this.field.MinValue != undefined)
+      this.eqpNumericOptions.min = this.field.MinValue;
+    if (this.field.MaxValue != null && this.field.MaxValue != undefined)
+      this.eqpNumericOptions.max = this.field.MaxValue;
+    if (this.field.DecimalSeparator != null && this.field.DecimalSeparator != undefined)
+      this.eqpNumericOptions.decimal = this.field.DecimalSeparator;
+    if (this.field.ThousandsSeparator != null && this.field.ThousandsSeparator != undefined)
+      this.eqpNumericOptions.thousands = this.field.ThousandsSeparator;
+    if (this.field.DecimalPrecision != null && this.field.DecimalPrecision != undefined)
+      this.eqpNumericOptions.precision = this.field.DecimalPrecision;
+  }
+}

package/src/lib/components/private/field-templates/text-field-template/text-field-template.component.html

@@ -0,0 +1,5 @@
+<mat-form-field [formGroup]="field.FormFormGroup">
+    <mat-label> {{field.Label}} </mat-label>
+    <input matInput [type]="getInputType()" [formControlName]="field.Name" [disabled]="field.FormFormGroup.disabled"
+        [required]="field.Required" [(ngModel)]="record[field.Name]" (ngModelChange)="onRecordValueChange()">
+</mat-form-field>

package/src/lib/components/private/field-templates/text-field-template/text-field-template.component.ts

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Record } from '../../../../models/record.model';
+import { TextMaskEnum, TextField } from '../../../../models/fields/textField.model';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+
+@Component({
+  selector: 'text-field-template',
+  templateUrl: './text-field-template.component.html',
+  styleUrls: ['./text-field-template.component.scss']
+})
+export class TextFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() field: TextField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  InputMaskEnum = TextMaskEnum;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  getInputType() {
+    switch (this.field.TextMask) {
+      case TextMaskEnum.Email:
+        return 'email';
+      case TextMaskEnum.Password:
+        return 'password';
+      case TextMaskEnum.Telefono:
+        return 'tel';
+      case TextMaskEnum.Url:
+        return 'url'
+      default:
+        return 'text';
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+}

package/src/lib/components/private/field-templates/textarea-field-template/textarea-field-template.component.html

@@ -0,0 +1,5 @@
+<mat-form-field [formGroup]="field.FormFormGroup">
+    <textarea matInput [placeholder]="field.Label" [rows]="field.Rows" [formControlName]="field.Name"
+        [disabled]="field.FormFormGroup.disabled" [required]="field.Required" [(ngModel)]="record[field.Name]"
+        (ngModelChange)="onRecordValueChange()"></textarea>
+</mat-form-field>

package/src/lib/components/private/field-templates/textarea-field-template/textarea-field-template.component.ts

@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { IBaseFieldComponent } from '../../../../interfaces/iBaseFieldComponent.interface';
+import { UtilityHelperService } from '../../../../services/utilityHelper.services';
+import { Record } from '../../../../models/record.model';
+import { TextareaField } from '../../../../models/fields/testareaField.model';
+
+@Component({
+  selector: 'textarea-field-template',
+  templateUrl: './textarea-field-template.component.html',
+  styleUrls: ['./textarea-field-template.component.scss']
+})
+export class TextareaFieldTemplateComponent implements OnInit, OnChanges, IBaseFieldComponent {
+
+  @Input() field: TextareaField;
+  @Input() record: Record;
+  @Output() recordChange: EventEmitter<Record> = new EventEmitter<Record>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Se viene modificato il valore di "ngModelInput" allora aggiorna l'input
+    if (changes['record'] != undefined && changes['record'].firstChange == false && JSON.stringify(changes['record'].currentValue) != JSON.stringify(changes['record'].previousValue)) {
+      this.record = changes['record'].currentValue;
+      this.updateField();
+    }
+  }
+
+  /**
+   * Metodo per aggiornare il valore del campo quando questo è rappresentato da una formula.
+   */
+  updateField() {
+    if (this.field.Formula) {
+      this.record[this.field.Name] = UtilityHelperService.EvaluateFieldFormula(this.field.Formula, this.record, null);
+    }
+  }
+
+  /**
+   * Metodo per emettere l'evento che il valore del record è cambiato.
+   */
+  onRecordValueChange() {
+    if (!this.field.Formula) {
+      this.recordChange.emit(this.record);
+    }
+  }
+}

package/src/lib/components/private/form-records/add-form-record/add-form-record.component.html

@@ -0,0 +1,74 @@
+<div class="row eqp-dynamic-module-title" *ngIf="showTitle">
+    <div class="col-md-12">
+        <h4><b>{{form.Name}}</b></h4>
+    </div>
+</div>
+
+<form [formGroup]="formForm">
+
+    <!-- VISUALIZZAZIONE SEMPLICE -->
+    <ng-container *ngIf="form.FormScalarType == FormScalarTypeEnum.Semplice" [ngTemplateOutlet]="fieldTemplates"
+        [ngTemplateOutletContext]="{ fields: form.Fields }">
+    </ng-container>
+
+    <!-- VISUALIZZAZIONE A STEPPER -->
+    <mat-horizontal-stepper linear *ngIf="form.FormScalarType == FormScalarTypeEnum['A step']">
+        <mat-step *ngFor="let group of form.FormFieldsGroups">
+            <ng-template matStepLabel>
+                {{group.Name}}
+            </ng-template>
+
+            <ng-container [ngTemplateOutlet]="fieldTemplates"
+                [ngTemplateOutletContext]="{ fields: fieldGroups[group.Name] }">
+            </ng-container>
+        </mat-step>
+    </mat-horizontal-stepper>
+
+    <!-- VISUALIZZAZIONE A TAB -->
+    <mat-tab-group *ngIf="form.FormScalarType == FormScalarTypeEnum['In tab']">
+        <mat-tab *ngFor="let group of form.FormFieldsGroups" [label]="group.Name">
+            <div class="mt-3">
+                <ng-container [ngTemplateOutlet]="fieldTemplates"
+                    [ngTemplateOutletContext]="{ fields: fieldGroups[group.Name] }">
+                </ng-container>
+            </div>
+        </mat-tab>
+    </mat-tab-group>
+
+    <!-- VISUALIZZAZIONE AD ACCORDION -->
+    <mat-accordion multi *ngIf="form.FormScalarType == FormScalarTypeEnum['In accordion']">
+        <mat-expansion-panel *ngFor="let group of form.FormFieldsGroups">
+            <mat-expansion-panel-header>
+                <mat-panel-title>
+                    {{group.Name}}
+                </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <ng-container [ngTemplateOutlet]="fieldTemplates"
+                [ngTemplateOutletContext]="{ fields: fieldGroups[group.Name] }">
+            </ng-container>
+        </mat-expansion-panel>
+    </mat-accordion>
+</form>
+
+<div class="row mt-2" *ngIf="showButtons">
+    <div class="col-sm-12 text-right">
+        <button class="mr-2" mat-raised-button (click)="saveOrExitForm(true)" type="button">
+            Annulla
+        </button>
+        <button class="mr-2" mat-raised-button color="primary" (click)="saveOrExitForm(false)"
+            [disabled]="formForm.invalid || formForm.disabled" type="button">
+            Salva
+        </button>
+    </div>
+</div>
+
+<!-- TEMPLATE PER LA VISUALIZZAZIONE DEI CAMPI DELLA FORM -->
+<ng-template #fieldTemplates let-fields='fields'>
+    <div class="row">
+        <div class="mt-2" *ngFor="let field of fields" [ngClass]="utilityService.getFieldSyleClass(field)">
+            <dynamic-module-field #fieldTemplate [field]="field" [form]="form" [record]="record"
+                (recordChange)="onRecordChange()"></dynamic-module-field>
+        </div>
+    </div>
+</ng-template>