@esfaenza/forms-and-validations 11.2.49 → 11.2.52

package/fesm2015/esfaenza-forms-and-validations.js

@@ -1,16 +1,16 @@
-import { InjectionToken, Directive, Input, Injectable, Inject, EventEmitter, ViewChild, Output, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injector, ChangeDetectorRef, ContentChild, Self, Host, NgModule } from '@angular/core';
+import { Injectable, Inject, InjectionToken, Directive, Input, EventEmitter, ViewChild, Output, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injector, ChangeDetectorRef, ContentChild, Self, Host, NgModule } from '@angular/core';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { DayJsDateAdapter, MatDayjsDateModule } from '@esfaenza/material-dayjs-adapter';
 import { CommonModule } from '@angular/common';
 import { NG_VALIDATORS, RequiredValidator, NgControl, NG_VALUE_ACCESSOR, NG_ASYNC_VALIDATORS, FormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { LocalizationService, LocalizationModule } from '@esfaenza/localizations';
-import { DayJsDateAdapter, MatDayjsDateModule } from '@esfaenza/material-dayjs-adapter';
 import { CurrencyMaskModule } from '@esfaenza/ngx-currency-mask';
 import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
 import { NgxMatDateAdapter, NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
 import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
-import { MAT_DATE_LOCALE } from '@angular/material/core';
 import { DateService, UtilityService } from '@esfaenza/extensions';
 import { AccessControlService, ComponentContext } from '@esfaenza/access-control';
 import { __awaiter } from 'tslib';
@@ -35,48 +35,6 @@ class AppFile {
 class FormsAndValidationsModuleConfig {
 }
 
-/**
- * Token che indica la lingua da utilizzare, sono supportate "it-IT" ed "en-US"
- */
-const FAV_LOCALE = new InjectionToken('FAV_LOCALE');
-/**
- * Chiave che indica il prefisso dei Contesti Applicativi per permettere l'abilitazione/disabilitazione di input in maniera contestuale
- */
-const ACO_CUSTOMKEY = new InjectionToken('ACO_CUSTOMKEY');
-
-// Angular
-/**
- * Direttiva utilizzata per validazioni "required" custom, in modo da poter dire che anche se c'è un valore selezionato, ma quel valore lo considero null
- * allora la validazione fallisce. Attualmente usato nell'unico punto sensato: validation-select
- */
-class CustomRequiredDirective {
-    constructor() {
-        /**
-         * Lista di valori che vengono considerati "vuoti" seppur presenti
-         */
-        this.NullValues = [];
-    }
-    /**
-     * @ignore
-     */
-    validate(c) {
-        // Controllo solo per custom required a true, altrimenti qualsiasi valore mi va bene
-        if (this.customRequired != "true")
-            return null;
-        return !c.value || this.NullValues.includes(c.value) ? { required: true } : null;
-    }
-}
-CustomRequiredDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[customRequired]',
-                providers: [{ provide: NG_VALIDATORS, useExisting: CustomRequiredDirective, multi: true }]
-            },] }
-];
-CustomRequiredDirective.propDecorators = {
-    NullValues: [{ type: Input, args: ["CustomNullValues",] }],
-    customRequired: [{ type: Input, args: ['customRequired',] }]
-};
-
 //Angular
 /**
  * Espansione dell'adapter di default di DayJs già utilizzato per i bind base su Material.
@@ -157,6 +115,48 @@ NgxExpandedDayJsDateAdapter.ctorParameters = () => [
     { type: String, decorators: [{ type: Inject, args: [MAT_DATE_LOCALE,] }] }
 ];
 
+/**
+ * Token che indica la lingua da utilizzare, sono supportate "it-IT" ed "en-US"
+ */
+const FAV_LOCALE = new InjectionToken('FAV_LOCALE');
+/**
+ * Chiave che indica il prefisso dei Contesti Applicativi per permettere l'abilitazione/disabilitazione di input in maniera contestuale
+ */
+const ACO_CUSTOMKEY = new InjectionToken('ACO_CUSTOMKEY');
+
+// Angular
+/**
+ * Direttiva utilizzata per validazioni "required" custom, in modo da poter dire che anche se c'è un valore selezionato, ma quel valore lo considero null
+ * allora la validazione fallisce. Attualmente usato nell'unico punto sensato: validation-select
+ */
+class CustomRequiredDirective {
+    constructor() {
+        /**
+         * Lista di valori che vengono considerati "vuoti" seppur presenti
+         */
+        this.NullValues = [];
+    }
+    /**
+     * @ignore
+     */
+    validate(c) {
+        // Controllo solo per custom required a true, altrimenti qualsiasi valore mi va bene
+        if (this.customRequired != "true")
+            return null;
+        return !c.value || this.NullValues.includes(c.value) ? { required: true } : null;
+    }
+}
+CustomRequiredDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[customRequired]',
+                providers: [{ provide: NG_VALIDATORS, useExisting: CustomRequiredDirective, multi: true }]
+            },] }
+];
+CustomRequiredDirective.propDecorators = {
+    NullValues: [{ type: Input, args: ["CustomNullValues",] }],
+    customRequired: [{ type: Input, args: ['customRequired',] }]
+};
+
 // Angular
 /**
  * Classe astratta base che contiene le logiche / proprietà in comune a tutti i validatori
@@ -230,6 +230,14 @@ class BaseValidation {
          * Evento che sostituisce l'ngModelChange facendolo funzionare in maniera un po' più consistente
          */
         this.inputChange = new EventEmitter();
+        /**
+         * Evento che indica il focus avvenuto su un controllo
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Evento che indica la finalizzazione del valore avvenuta su un controllo
+         */
+        this.inputFinalized = new EventEmitter();
         /**
          * @ignore
          */
@@ -341,6 +349,20 @@ class BaseValidation {
         isDisabled ? this.baseInput.control.disable() : this.baseInput.control.enable();
         this.readonly = isDisabled;
     }
+    /**
+     * L'emit del focus dell'elemento
+     *
+     * @param {any} toEmit valore da propagare all'esterno
+     */
+    onFocus(toEmit) {
+        this.inputFocus.emit(toEmit);
+    }
+    /**
+     * Finalizzazione Input
+     */
+    onFinalize() {
+        this.inputFinalized.emit();
+    }
 }
 BaseValidation.decorators = [
     { type: Directive }
@@ -363,6 +385,8 @@ BaseValidation.propDecorators = {
     autocomplete: [{ type: Input }],
     id: [{ type: Input }],
     inputChange: [{ type: Output }],
+    inputFocus: [{ type: Output }],
+    inputFinalized: [{ type: Output }],
     submitted: [{ type: Input, args: ["submitted",] }],
     forceInvalid: [{ type: Input }]
 };
@@ -516,7 +540,7 @@ class ValidationSelectComponent extends BaseValidation {
 ValidationSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-select",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <select matNativeControl\r\n            #baseInput=\"ngModel\"\r\n            name=\"val-select\"\r\n            class=\"form-control\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            id=\"{{id}}\"\r\n            [customRequired]=\"required ? 'true' : 'false'\"\r\n            [CustomNullValues]=\"[placeHolderValue,emptyFieldValue]\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [class.checking-combo]=\"!noValidate\"\r\n            [class.app-option-placeholder]=\"baseInput.value === placeHolderValue\"\r\n            [class.no-bg-img]=\"!showValidationSymbol\"\r\n            [disabled]=\"readonly\"\r\n            (focus)=\"checkTooltip()\"\r\n            (blur)=\"closeTooltip(); onBlur.emit(true);\"\r\n            (ngModelChange)=\"onModelChange($event)\">\r\n\r\n        <option *ngIf=\"placeholder\" [value]=\"placeHolderValue\" disabled selected hidden>{{placeholder}}</option>\r\n        <option *ngIf=\"required == false && emptyValue\" [value]=\"emptyFieldValue\"></option>\r\n        <ng-content></ng-content>\r\n    </select>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <select matNativeControl\r\n            #baseInput=\"ngModel\"\r\n            name=\"val-select\"\r\n            class=\"form-control\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            id=\"{{id}}\"\r\n            [customRequired]=\"required ? 'true' : 'false'\"\r\n            [CustomNullValues]=\"[placeHolderValue,emptyFieldValue]\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [class.checking-combo]=\"!noValidate\"\r\n            [class.app-option-placeholder]=\"baseInput.value === placeHolderValue\"\r\n            [class.no-bg-img]=\"!showValidationSymbol\"\r\n            [disabled]=\"readonly\"\r\n            (click)=\"onFocus($event)\"\r\n            (focus)=\"checkTooltip();\"\r\n            (blur)=\"closeTooltip(); onBlur.emit(true);\"\r\n            (ngModelChange)=\"onModelChange($event); onFinalize()\">\r\n\r\n        <option *ngIf=\"placeholder\" [value]=\"placeHolderValue\" disabled selected hidden>{{placeholder}}</option>\r\n        <option *ngIf=\"required == false && emptyValue\" [value]=\"emptyFieldValue\"></option>\r\n        <ng-content></ng-content>\r\n    </select>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -677,7 +701,7 @@ class ValidationDateComponent extends BaseValidation {
 ValidationDateComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-date",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <input matInput\r\n           [matDatepicker]=\"datepicker\"\r\n           #baseInput=\"ngModel\"\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           id=\"{{id}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? '' : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event)\" />\r\n    <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #datepicker></mat-datepicker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <input matInput\r\n           [matDatepicker]=\"datepicker\"\r\n           #baseInput=\"ngModel\"\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? '' : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event)\" \r\n           (keyup)=\"$event.keyCode == 13 && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           />\r\n    <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #datepicker></mat-datepicker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -851,7 +875,7 @@ class ValidationInputComponent extends BaseValidation {
 ValidationInputComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-input",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <ng-container *ngIf=\"HasPrefix\">\r\n        <ng-container *ngTemplateOutlet=\"prefix_internal\"></ng-container>\r\n    </ng-container>\r\n\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           type=\"{{type}}\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           name=\"val-input\"\r\n           class=\"form-control {{class}}\"\r\n           id=\"{{id}}\"\r\n           [class.app-margin-left-25]=\"HasPrefix\"\r\n           [class.mat-input-with-suffix]=\"HasSuffix || Password || showWarning\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate && !showWarning\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [disabled]=\"readonly || disabled\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (blur)=\"closeTooltip();\">\r\n    <ng-container *ngIf=\"HasSuffix || Password || showWarning\">\r\n        <ng-container *ngIf=\"!Password && !showWarning\">\r\n            <ng-container *ngTemplateOutlet=\"suffix_internal\"></ng-container>\r\n        </ng-container>\r\n\r\n        <span class=\"form-input-suffix\" *ngIf=\"Password || showWarning\">\r\n            <ng-container *ngIf=\"Password\" matSuffix>\r\n                <a *ngIf=\"passShown\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"type = 'password'; passShown = !passShown; $event.preventDefault()\"></a>\r\n                <a *ngIf=\"!passShown\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"type = 'text'; passShown = !passShown; $event.preventDefault()\"></a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showWarning\" matSuffix>\r\n                <span title=\"{{warningTitle}}\" class=\"{{warningClass}} text-warning app-fs-16\"></span>\r\n            </ng-container>\r\n        </span>\r\n    </ng-container>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <ng-container *ngIf=\"HasPrefix\">\r\n        <ng-container *ngTemplateOutlet=\"prefix_internal\"></ng-container>\r\n    </ng-container>\r\n\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           type=\"{{type}}\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           name=\"val-input\"\r\n           class=\"form-control {{class}}\"\r\n           id=\"{{id}}\"\r\n           [class.app-margin-left-25]=\"HasPrefix\"\r\n           [class.mat-input-with-suffix]=\"HasSuffix || Password || showWarning\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate && !showWarning\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [disabled]=\"readonly || disabled\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"$event.keyCode == 13 && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           >\r\n    <ng-container *ngIf=\"HasSuffix || Password || showWarning\">\r\n        <ng-container *ngIf=\"!Password && !showWarning\">\r\n            <ng-container *ngTemplateOutlet=\"suffix_internal\"></ng-container>\r\n        </ng-container>\r\n\r\n        <span class=\"form-input-suffix\" *ngIf=\"Password || showWarning\">\r\n            <ng-container *ngIf=\"Password\" matSuffix>\r\n                <a *ngIf=\"passShown\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"type = 'password'; passShown = !passShown; $event.preventDefault()\"></a>\r\n                <a *ngIf=\"!passShown\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"type = 'text'; passShown = !passShown; $event.preventDefault()\"></a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showWarning\" matSuffix>\r\n                <span title=\"{{warningTitle}}\" class=\"{{warningClass}} text-warning app-fs-16\"></span>\r\n            </ng-container>\r\n        </span>\r\n    </ng-container>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -898,7 +922,7 @@ class ValidationCurrencyComponent extends ValidationInputComponent {
 ValidationCurrencyComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-currency",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <input #baseInput='ngModel'\r\n           currencyMask\r\n           matInput\r\n           [readonly]=\"readonly\"\r\n           [options]='CurrencyOptions'\r\n           [(ngModel)]=\"value\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           (focus)=\"checkTooltip()\"\r\n           (blur)=\"closeTooltip()\"\r\n           class=\"form-control {{class}}\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           type=\"{{type}}\"\r\n           [tooltip]=\"tolTemplate\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\" />\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div>\r\n        <span class=\"close-button pull-right\" (click)=\"closeTooltip()\" aria-label=\"Close\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </span>\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <input #baseInput='ngModel'\r\n           currencyMask\r\n           matInput\r\n           [readonly]=\"readonly\"\r\n           [options]='CurrencyOptions'\r\n           [(ngModel)]=\"value\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"$event.keyCode == 13 && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           class=\"form-control {{class}}\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           type=\"{{type}}\"\r\n           [tooltip]=\"tolTemplate\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\" />\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div>\r\n        <span class=\"close-button pull-right\" (click)=\"closeTooltip()\" aria-label=\"Close\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </span>\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -943,7 +967,7 @@ class ValidationTextAreaComponent extends ValidationInputComponent {
 ValidationTextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-textarea",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <textarea #baseInput=\"ngModel\"\r\n              matInput\r\n              [(ngModel)]=\"value\"\r\n              name=\"val-textarea\"\r\n              triggers=\"\"\r\n              class=\"app-no-resize form-control {{class}}\"\r\n              id=\"{{id}}\"\r\n              [class.checking-field]=\"!noValidate\"\r\n              rows=\"{{rows}}\"\r\n              [tooltip]=\"tolTemplate\"\r\n              placement=\"top\"\r\n              (focus)=\"checkTooltip()\"\r\n              (blur)=\"closeTooltip()\"\r\n              (ngModelChange)=\"onModelChange($event)\">\r\n    </textarea>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n    <textarea #baseInput=\"ngModel\"\r\n              matInput\r\n              [(ngModel)]=\"value\"\r\n              name=\"val-textarea\"\r\n              triggers=\"\"\r\n              class=\"app-no-resize form-control {{class}}\"\r\n              id=\"{{id}}\"\r\n              [class.checking-field]=\"!noValidate\"\r\n              rows=\"{{rows}}\"\r\n              [tooltip]=\"tolTemplate\"\r\n              placement=\"top\"\r\n              (click)=\"onFocus($event)\"\r\n              (focus)=\"checkTooltip();\"\r\n              (keyup)=\"$event.keyCode == 13 && onFinalize();\"\r\n              (blur)=\"closeTooltip(); onFinalize();\"\r\n              (ngModelChange)=\"onModelChange($event)\">\r\n    </textarea>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
                     {
@@ -1127,7 +1151,7 @@ class ValidationDateTimeComponent extends BaseValidation {
 ValidationDateTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-datetime",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n\r\n    <input matInput \r\n           [ngxMatDatetimePicker]=\"datepicker\" \r\n           #baseInput=\"ngModel\"\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           id=\"{{id}}\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? '' : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event)\"/>\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n\r\n  <ngx-mat-datetime-picker #datepicker \r\n            [showSpinners]=\"showSpinners\" \r\n            [showSeconds]=\"showSeconds\" \r\n            [stepHour]=\"stepHour\" \r\n            [stepMinute]=\"stepMinute\" \r\n            [stepSecond]=\"stepSecond\" \r\n            [touchUi]=\"false\" \r\n            [color]=\"'primary'\">\r\n  </ngx-mat-datetime-picker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n\r\n    <input matInput \r\n           [ngxMatDatetimePicker]=\"datepicker\" \r\n           #baseInput=\"ngModel\"\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? '' : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event)\"\r\n           (keyup)=\"$event.keyCode == 13 && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           />\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n\r\n  <ngx-mat-datetime-picker #datepicker \r\n            [showSpinners]=\"showSpinners\" \r\n            [showSeconds]=\"showSeconds\" \r\n            [stepHour]=\"stepHour\" \r\n            [stepMinute]=\"stepMinute\" \r\n            [stepSecond]=\"stepSecond\" \r\n            [touchUi]=\"false\" \r\n            [color]=\"'primary'\">\r\n  </ngx-mat-datetime-picker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -1269,7 +1293,7 @@ class ValidationAutocompleteComponent extends BaseValidation {
 ValidationAutocompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-autocomplete",
-                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           placeholder=\"{{placeholder}}\"\r\n           [matAutocomplete]=\"auto\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           class=\"form-control {{class}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [disabled]=\"readonly || disabled\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (blur)=\"closeTooltip();\">\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of FilteredSource\" [value]=\"option.id\">\r\n            {{option.description}}\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                template: "<mat-form-field appearance=\"outline\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           placeholder=\"{{placeholder}}\"\r\n           [matAutocomplete]=\"auto\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           class=\"form-control {{class}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [disabled]=\"readonly || disabled\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"$event.keyCode == 13 && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           >\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of FilteredSource\" [value]=\"option.id\">\r\n            {{option.description}}\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -1358,6 +1382,10 @@ class BaseFormControl {
          * Utilizza o meno il Layout di un form (Label con input di fianco), se false mostra solo l'input
          */
         this.FormLayout = true;
+        /**
+         * Definisce se richiamare l'EventEmitter **inputChange** in maniera classica (true) o solo per la change considerate definitive come tasto invio / blur / ecc... (false)
+         */
+        this.EmitPendingChanges = true;
         /**
          * Attiva o disattiva la validazione per questo componente
          */
@@ -1421,6 +1449,14 @@ class BaseFormControl {
          * Evento chiamato alla modifica del valore collegato a questo campo
          */
         this.inputChange = new EventEmitter();
+        /**
+         * Evento chiamato al focus del campo di testo/combo/quelcheè, riemitta l'evento originale Javascript
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Evento chiamato al finalize del campo di testo/combo/quelcheè
+         */
+        this.inputFinalized = new EventEmitter();
         /**
          * Cache delle condizioni scritte tipo :prop?(Roba con {prop})
          */
@@ -1725,6 +1761,26 @@ class BaseFormControl {
         if (markForCheck)
             this.cdr.markForCheck();
     }
+    /**
+     * @ignore
+     * Classico "spara fuori" sul focus. Mantengo lo stesso nome dell'evento dei <val-*> (inputChange) per retrocompatibilità.
+     *
+     * Non posso tenerlo protected altrimenti posso eseguirlo solo dal .ts e non dall' .html
+     */
+    focused(event) {
+        this.inputFocus.emit(event);
+        console.log("Control Focused: " + this.GeneratedName);
+    }
+    /**
+     * @ignore
+     * Classico "spara fuori" sulla finalizzazione del valore dell'input (blur / tasto invio, ecc...). Mantengo lo stesso nome dell'evento dei <val-*> (inputChange) per retrocompatibilità.
+     *
+     * Non posso tenerlo protected altrimenti posso eseguirlo solo dal .ts e non dall' .html
+     */
+    finalized() {
+        this.inputFinalized.emit();
+        console.log("Control Value Finalized: " + this.GeneratedName);
+    }
 }
 BaseFormControl.decorators = [
     { type: Directive }
@@ -1740,6 +1796,7 @@ BaseFormControl.ctorParameters = () => [
 ];
 BaseFormControl.propDecorators = {
     FormLayout: [{ type: Input }],
+    EmitPendingChanges: [{ type: Input }],
     Validation: [{ type: Input }],
     Placeholder: [{ type: Input }],
     FormGroupClass: [{ type: Input }],
@@ -1757,7 +1814,9 @@ BaseFormControl.propDecorators = {
     LabelInputRatio: [{ type: Input }],
     _validationControl: [{ type: ViewChild, args: ["validationControl", { static: false },] }],
     validationControl_static: [{ type: ViewChild, args: ["validationControl", { static: true },] }],
-    inputChange: [{ type: Output }]
+    inputChange: [{ type: Output }],
+    inputFocus: [{ type: Output }],
+    inputFinalized: [{ type: Output }]
 };
 
 /**
@@ -1901,7 +1960,7 @@ class FormDateTimeComponent extends BaseFormControl {
 FormDateTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-datetime",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-datetime  [noValidate]=\"!Validation\"\r\n                   [submitted]=\"Form?.submitted\"\r\n                   [forceInvalid]=\"ForcedError\"\r\n                   [readonly]=\"Readonly\"\r\n                   [id]=\"GeneratedName\"\r\n                   [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n                   [useJsDates]=\"JsDates\"\r\n                   [(ngModel)]=\"Model\"\r\n                   name=\"{{GeneratedName}}\"\r\n                   #validationControl=\"ngModel\"\r\n                   (inputChange)=\"changed();\"\r\n                   [placeholder]=\"Placeholder\"\r\n                   [validationFailed]=\"FailedValidationMessage\">\r\n    </val-datetime>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-datetime  [noValidate]=\"!Validation\"\r\n                   [submitted]=\"Form?.submitted\"\r\n                   [forceInvalid]=\"ForcedError\"\r\n                   [readonly]=\"Readonly\"\r\n                   [id]=\"GeneratedName\"\r\n                   [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n                   [useJsDates]=\"JsDates\"\r\n                   [(ngModel)]=\"Model\"\r\n                   name=\"{{GeneratedName}}\"\r\n                   #validationControl=\"ngModel\"\r\n                   (inputChange)=\"changed();\"\r\n                   (inputFocus)=\"focused($event);\"\r\n                   (inputFinalized)=\"finalized()\"\r\n                   [placeholder]=\"Placeholder\"\r\n                   [validationFailed]=\"FailedValidationMessage\">\r\n    </val-datetime>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2108,6 +2167,25 @@ class FormAdaptiveComponent extends BaseFormControl {
      * Metodo richiamato quando viene modificato il modello del campo di input
      */
     changed() {
+        var toEmit = this.getModelToEmit();
+        if (this.Type == "autocomplete")
+            this.ignoreNextWriteValue = true;
+        if (this.EmitPendingChanges)
+            super.changed(toEmit);
+    }
+    finalized() {
+        super.finalized();
+    }
+    /**
+     * Metodo richiamato quando viene selezionato il campo col mouse
+     */
+    focused(event) {
+        super.focused(event);
+    }
+    /**
+     * Effettua gli aggiustamenti dati del caso ed emette il modello corretto
+     */
+    getModelToEmit() {
         var toEmit = this.Model ? JSON.parse(JSON.stringify(this.Model)) : null;
         if ((this.Type == "float" || this.Type == "number") && toEmit)
             toEmit = toEmit.replace(".", "").replace(",", ".");
@@ -2117,9 +2195,7 @@ class FormAdaptiveComponent extends BaseFormControl {
             var toEmit = this.dateAdapter.clone(this.Model);
             toEmit = toEmit.format("HH:mm:ss");
         }
-        if (this.Type == "autocomplete")
-            this.ignoreNextWriteValue = true;
-        super.changed(toEmit);
+        return toEmit;
     }
     /**
      * Helper per gestire la modifica del file attualmente bindato. Ovviamente funziona solo qualora il **Type** fosse **file**
@@ -2170,7 +2246,7 @@ FormAdaptiveComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-adaptive",
                 providers: [{ provide: LocalizationService, useClass: FormAdaptiveComponentLoc }],
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <div *ngIf=\"!Type\" class=\"app-margin-top-5\">\r\n        <em>{{TypeMissingMessage}}</em>\r\n    </div>\r\n   \r\n     <!--Se currency-->\r\n     <div *ngIf=\"Type == 'currency'\">\r\n        <val-currency [forceInvalid]=\"ForcedError\"\r\n        [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n        #validationControl=\"ngModel\" type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-currency>\r\n    </div>\r\n    <!--Se data-->\r\n    <div *ngIf=\"Type == 'date'\">\r\n        <val-date #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-date>\r\n    </div>\r\n    <!--Se stringa-->\r\n    <div *ngIf=\"Type == 'string'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se numero-->\r\n    <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^([0-9]*[,])?[0-9]+$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se numero intero-->\r\n    <div *ngIf=\"Type == 'int'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^[0-9]\\\\d*$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-input>\r\n    </div>\r\n    <!--Se boolean-->\r\n    <div class=\"m-t-5\" *ngIf=\"Type == 'boolean'\">\r\n        <input #validationControl=\"ngModel\" [readonly]=\"Readonly\" type=\"checkbox\" class=\"app-pointer\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed();\" />\r\n    </div>\r\n    <!--Se enum-->\r\n    <div *ngIf=\"Type == 'enum'\">\r\n        <val-select #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\">\r\n            <option *ngFor=\"let val of BoundSource\" [value]=\"val.id\">{{val.description}}</option>\r\n        </val-select>\r\n    </div>\r\n    <!--Se autocomplete-->\r\n    <div *ngIf=\"Type == 'autocomplete'\">\r\n        <val-autocomplete #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" [FilteredSource]=\"FilteredBoundSource\" (inputChange)=\"filterSource($event); changed();\"></val-autocomplete>\r\n    </div>\r\n    <!--Se date time-->\r\n    <div *ngIf=\"Type == 'datetime'\">\r\n        <val-datetime #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\"></val-datetime>\r\n    </div>\r\n    <!--Se time-->\r\n    <div *ngIf=\"Type == 'time'\">\r\n        <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n        [showSpinners]=\"false\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"30\"\r\n        [showSeconds]=\"true\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n        </ngx-mat-timepicker>\r\n    </div>\r\n    <!--Se file-->\r\n    <div *ngIf=\"Type == 'file'\">\r\n        <div class=\"input-group file-upload\">\r\n            <input type=\"file\" (change)=\"fileChange()\" #fileInput id=\"{{GeneratedName}}\" class=\"file-upload-btn app-pointer\" [multiple]=\"null\"/>\r\n            <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"ModelFile.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required\"/>\r\n    \r\n            <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n            <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"ModelFile.filename\"></i>\r\n            <span class=\"input-group-btn\">\r\n                <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <div *ngIf=\"!Type\" class=\"app-margin-top-5\">\r\n        <em>{{TypeMissingMessage}}</em>\r\n    </div>\r\n   \r\n     <!--Se currency-->\r\n     <div *ngIf=\"Type == 'currency'\">\r\n        <val-currency [forceInvalid]=\"ForcedError\"\r\n        [CurrencyOptions]=\"{ prefix: '', thousands: '.', decimal: ',', precision: Precision, align: Alignment }\" [noValidate]=\"!Validation\"\r\n        #validationControl=\"ngModel\" type=\"text\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-currency>\r\n    </div>\r\n    <!--Se data-->\r\n    <div *ngIf=\"Type == 'date'\">\r\n        <val-date #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-date>\r\n    </div>\r\n    <!--Se stringa-->\r\n    <div *ngIf=\"Type == 'string'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || ''}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-input>\r\n    </div>\r\n    <!--Se numero-->\r\n    <div *ngIf=\"Type == 'float' || Type == 'number'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^([0-9]*[,])?[0-9]+$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-input>\r\n    </div>\r\n    <!--Se numero intero-->\r\n    <div *ngIf=\"Type == 'int'\">\r\n        <val-input #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" type=\"text\" pattern=\"{{Pattern || '^[0-9]\\\\d*$'}}\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-input>\r\n    </div>\r\n    <!--Se boolean-->\r\n    <div class=\"m-t-5\" *ngIf=\"Type == 'boolean'\">\r\n        <input #validationControl=\"ngModel\" [readonly]=\"Readonly\" type=\"checkbox\" class=\"app-pointer\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" (ngModelChange)=\"changed(); finalized();\" (click)=\"focused($event);\" />\r\n    </div>\r\n    <!--Se enum-->\r\n    <div *ngIf=\"Type == 'enum'\">\r\n        <val-select #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [placeHolderValue]=\"''\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [required]=\"Required\" [(ngModel)]=\"Model\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\">\r\n            <option *ngFor=\"let val of BoundSource\" [value]=\"val.id\">{{val.description}}</option>\r\n        </val-select>\r\n    </div>\r\n    <!--Se autocomplete-->\r\n    <div *ngIf=\"Type == 'autocomplete'\">\r\n        <val-autocomplete #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [placeholder]=\"Required ? ('Select' | localize : lc) + '...' : Placeholder\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" [FilteredSource]=\"FilteredBoundSource\" (inputChange)=\"filterSource($event); changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-autocomplete>\r\n    </div>\r\n    <!--Se date time-->\r\n    <div *ngIf=\"Type == 'datetime'\">\r\n        <val-datetime #validationControl=\"ngModel\" [forceInvalid]=\"ForcedError\" [noValidate]=\"!Validation\" [readonly]=\"Readonly\" [submitted]=\"Form?.submitted\" [required]=\"Required\" [(ngModel)]=\"Model\" [id]=\"GeneratedName\" name=\"{{GeneratedName}}\" autocomplete=\"off\" (inputChange)=\"changed();\" (inputFocus)=\"focused($event);\" (inputFinalized)=\"finalized()\"></val-datetime>\r\n    </div>\r\n    <!--Se time-->\r\n    <div *ngIf=\"Type == 'time'\">\r\n        <ngx-mat-timepicker name=\"val-time\" #elementRef #baseInput=\"ngModel\" [(ngModel)]=\"Model\" [disabled]=\"Readonly\"\r\n        [showSpinners]=\"false\" [stepHour]=\"2\" [stepMinute]=\"5\" [stepSecond]=\"30\"\r\n        [showSeconds]=\"true\" (ngModelChange)=\"changed()\" #validationControl=\"ngModel\">\r\n        </ngx-mat-timepicker>\r\n    </div>\r\n    <!--Se file-->\r\n    <div *ngIf=\"Type == 'file'\">\r\n        <div class=\"input-group file-upload\">\r\n            <input type=\"file\" (change)=\"fileChange()\" #fileInput id=\"{{GeneratedName}}\" class=\"file-upload-btn app-pointer\" [multiple]=\"null\"/>\r\n            <input type=\"text\" [class.frm-padding-left-22]=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" class=\"form-control checking-field\" placeholder=\"{{'Select a file' | localize : lc}}...\" [(ngModel)]=\"ModelFile.filename\" name=\"dsfile\" #validationControl=\"ngModel\" [required]=\"Required\"/>\r\n    \r\n            <a class=\"fa fa-download app-pointer app-input-icon\" *ngIf=\"AllowDownload && ModelFile.filename && ModelFile.fileb64\" (click)=\"downloadAttachment()\"></a>\r\n            <i class=\"fa fa-times delete-file\" (click)=\"fileChange(true)\" *ngIf=\"ModelFile.filename\"></i>\r\n            <span class=\"input-group-btn\">\r\n                <button class=\"btn btn-primary btn-file-upload\" type=\"button\"><i class=\"fa fa-upload\"></i></button>\r\n            </span>\r\n        </div>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".frm-padding-left-22{padding-left:22px}"]
             },] }
@@ -2412,7 +2488,7 @@ class FormCheckboxComponent extends BaseFormControl {
 FormCheckboxComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-checkbox",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}} m-t-5\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <input class=\"app-pointer\" [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed();\" />\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}} m-t-5\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <input class=\"app-pointer\" [disabled]=\"Readonly ? true : null\" type=\"checkbox\" [(ngModel)]=\"Model\" id=\"{{GeneratedName}}\" name=\"{{GeneratedName}}\" #validationControl=\"ngModel\" (ngModelChange)=\"changed(); finalized()\" (click)=\"focused($event)\" />\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2450,7 +2526,7 @@ class FormDateComponent extends BaseFormControl {
 FormDateComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-date",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-date [noValidate]=\"!Validation\"\r\n              [submitted]=\"Form?.submitted\"\r\n              [forceInvalid]=\"ForcedError\"\r\n              [id]=\"GeneratedName\"\r\n              [readonly]=\"Readonly\"\r\n              [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n              [useJsDates]=\"JsDates\"\r\n              [(ngModel)]=\"Model\"\r\n              name=\"{{GeneratedName}}\"\r\n              #validationControl=\"ngModel\"\r\n              (inputChange)=\"changed();\"\r\n              [placeholder]=\"Placeholder\"\r\n              [validationFailed]=\"FailedValidationMessage\">\r\n    </val-date>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-date [noValidate]=\"!Validation\"\r\n              [submitted]=\"Form?.submitted\"\r\n              [forceInvalid]=\"ForcedError\"\r\n              [id]=\"GeneratedName\"\r\n              [readonly]=\"Readonly\"\r\n              [class]=\"Readonly ? 'app-bg-lightgrey' : ''\"\r\n              [useJsDates]=\"JsDates\"\r\n              [(ngModel)]=\"Model\"\r\n              name=\"{{GeneratedName}}\"\r\n              #validationControl=\"ngModel\"\r\n              (inputChange)=\"changed();\"\r\n              (inputFocus)=\"focused($event);\"\r\n              (inputFinalized)=\"finalized()\"\r\n              [placeholder]=\"Placeholder\"\r\n              [validationFailed]=\"FailedValidationMessage\">\r\n    </val-date>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2514,7 +2590,7 @@ class FormInputComponent extends BaseFormControl {
 FormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-input",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-input [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [readonly]=\"Readonly\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               type=\"text\"\r\n               [(ngModel)]=\"Model\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               autocomplete=\"off\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"changed();\"\r\n               [placeholder]=\"Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [Password]=\"Password\">\r\n        <ng-container *ngIf=\"HasSuffix\">\r\n            <ng-template #suffix_internal>\r\n                <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-suffix\"\r\n                        matSuffix (click)=\"onSuffixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n                    <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\r\n                </button>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"HasPrefix\">\r\n            <ng-template #prefix_internal>\r\n                <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-prefix\"\r\n                        matPrefix (click)=\"onPrefixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n                    <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\r\n                </button>\r\n            </ng-template>\r\n        </ng-container>\r\n    </val-input>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-input [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [readonly]=\"Readonly\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               type=\"text\"\r\n               [(ngModel)]=\"Model\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               autocomplete=\"off\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"changed();\"\r\n               (inputFocus)=\"focused($event);\"\r\n               (inputFinalized)=\"finalized()\"\r\n               [placeholder]=\"Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [Password]=\"Password\">\r\n        <ng-container *ngIf=\"HasSuffix\">\r\n            <ng-template #suffix_internal>\r\n                <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-suffix\"\r\n                        matSuffix (click)=\"onSuffixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n                    <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\r\n                </button>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"HasPrefix\">\r\n            <ng-template #prefix_internal>\r\n                <button type=\"button\" class=\"mat-button mat-icon-button mat-button-base mat-icon-button-override mat-icon-button-override-prefix\"\r\n                        matPrefix (click)=\"onPrefixAction.emit(); $event.stopPropagation(); $event.preventDefault();\">\r\n                    <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\r\n                </button>\r\n            </ng-template>\r\n        </ng-container>\r\n    </val-input>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2636,7 +2712,7 @@ FormSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-select",
                 providers: [{ provide: LocalizationService, useClass: FormSelectComponentLoc }],
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n\r\n    <!-- Select vuota per quando non ho Sorgenti dati da cui selezionare. Uguale identica alla piena ma senza option\r\n    Purtroppo devono essere due componenti distinti perch\u00E9 una select una volta creata non riesce pi\u00F9 ad adattarsi ai cambi di options -->\r\n    <val-select *ngIf=\"!BoundSource || BoundSource.length == 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...'))  : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                #validationControl=\"ngModel\">\r\n    </val-select>\r\n\r\n    <!-- Select vera e propria per quando arrivano i dati -->\r\n    <val-select *ngIf=\"BoundSource && BoundSource.length > 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                #validationControl=\"ngModel\">\r\n        <option *ngFor=\"let obj of BoundSource\" [value]=\"obj.id\">{{obj.description}}</option>\r\n    </val-select>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n\r\n    <!-- Select vuota per quando non ho Sorgenti dati da cui selezionare. Uguale identica alla piena ma senza option\r\n    Purtroppo devono essere due componenti distinti perch\u00E9 una select una volta creata non riesce pi\u00F9 ad adattarsi ai cambi di options -->\r\n    <val-select *ngIf=\"!BoundSource || BoundSource.length == 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...'))  : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                (inputFocus)=\"focused($event);\"\r\n                #validationControl=\"ngModel\">\r\n    </val-select>\r\n\r\n    <!-- Select vera e propria per quando arrivano i dati -->\r\n    <val-select *ngIf=\"BoundSource && BoundSource.length > 0\"\r\n                [required]=\"Required ? 'required' : null\"\r\n                [noValidate]=\"!Validation\"\r\n                [readonly]=\"Readonly\"\r\n                [forceInvalid]=\"ForcedError\"\r\n                [label]=\"SelectLabel\"\r\n                [validationFailed]=\"FailedValidationMessage\"\r\n                [showValidationSymbol]=\"ShowValidationSymbol\"\r\n                [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n                [placeHolderValue]=\"PlaceholderValue\"\r\n                [submitted]=\"Form?.submitted\"\r\n                [emptyFieldValue]=\"Required || Placeholder || SelectLabel ? EmptyFieldValue : ''\"\r\n                [(ngModel)]=\"Model\"\r\n                [id]=\"GeneratedName\"\r\n                name=\"{{GeneratedName}}\"\r\n                (inputChange)=\"Model = $event == EmptyFieldValue ? (Required? PlaceholderValue : '') : $event; changed();\"\r\n                (inputFocus)=\"focused($event);\"\r\n                (inputFinalized)=\"finalized()\"\r\n                #validationControl=\"ngModel\">\r\n        <option *ngFor=\"let obj of BoundSource\" [value]=\"obj.id\">{{obj.description}}</option>\r\n    </val-select>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2794,13 +2870,14 @@ class FormMultiSelectComponent extends BaseFormControl {
         else
             toEmit = this.Model.map(m => ({ id: m.id, description: m.itemName }));
         super.changed(toEmit);
+        super.finalized();
     }
 }
 FormMultiSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-multiselect",
                 viewProviders: [{ provide: LocalizationService, useClass: FormMultiSelectComponentLoc }],
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <div [class.ms-placeholder]=\"!Model || Model.length == 0\">\r\n        <angular2-multiselect #validationControl=\"ngModel\" type=\"text\"\r\n            [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\"\r\n            [settings]=\"Settings\" [data]=\"BoundSource\"\r\n            (onSelect)=\"changed();\" \r\n            (onDeSelect)=\"changed();\" \r\n            (onSelectAll)=\"changed();\"\r\n            (onDeSelectAll)=\"changed();\" \r\n            (onDeSelectAll)=\"Model = []; changed();\">\r\n        </angular2-multiselect>\r\n    </div>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <div [class.ms-placeholder]=\"!Model || Model.length == 0\" (click)=\"focused($event)\">\r\n        <angular2-multiselect #validationControl=\"ngModel\" type=\"text\"\r\n            [(ngModel)]=\"Model\" name=\"{{GeneratedName}}\"\r\n            [settings]=\"Settings\" [data]=\"BoundSource\"\r\n            (onSelect)=\"changed();\" \r\n            (onDeSelect)=\"changed();\" \r\n            (onSelectAll)=\"changed();\"\r\n            (onDeSelectAll)=\"changed();\" \r\n            (onDeSelectAll)=\"Model = []; changed();\">\r\n        </angular2-multiselect>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.Default,
                 styles: [".c-btn{background:#fff;border:1px solid #ccc;color:#333}.selected-list .c-list .c-token{background:#415269}.selected-list .c-list .c-token .c-label{color:#fff}.selected-list .c-list .c-token .c-remove svg{fill:#fff}.selected-list .c-angle-down svg,.selected-list .c-angle-up svg{fill:#333}.dropdown-list ul li:hover{background:#f5f5f5}.arrow-down,.arrow-up{border-bottom:15px solid #fff}.arrow-2{border-bottom:15px solid #ccc}.list-area{border:1px solid #ccc;background:#fff;box-shadow:0 1px 5px #959595}.list-filter,.select-all{border-bottom:1px solid #ccc}.list-filter .c-clear svg,.list-filter .c-search svg{fill:#888}.pure-checkbox input[type=checkbox]:focus+label:before,.pure-checkbox input[type=checkbox]:hover+label:before{border-color:#415269;background-color:#f2f2f2}.pure-checkbox input[type=checkbox]+label{color:#000}.pure-checkbox input[type=checkbox]+label:before{color:#415269;border:1px solid #415269}.pure-checkbox input[type=checkbox]+label:after{background-color:#415269}.pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.pure-checkbox input[type=checkbox]+label:after{border-color:#fff}.pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.pure-checkbox input[type=checkbox]:checked+label:before{background:#415269}.single-select-mode .pure-checkbox input[type=checkbox]:focus+label:before,.single-select-mode .pure-checkbox input[type=checkbox]:hover+label:before{border-color:#415269;background-color:#f2f2f2}.single-select-mode .pure-checkbox input[type=checkbox]+label{color:#000}.single-select-mode .pure-checkbox input[type=checkbox]+label:before{color:transparent!important;border:0 solid #415269}.single-select-mode .pure-checkbox input[type=checkbox]+label:after{background-color:transparent!important}.single-select-mode .pure-checkbox input[type=checkbox]:disabled+label:before{border-color:#ccc}.single-select-mode .pure-checkbox input[type=checkbox]:disabled:checked+label:before{background-color:#ccc}.single-select-mode .pure-checkbox input[type=checkbox]+label:after{border-color:#415269}.single-select-mode .pure-checkbox input[type=radio]:checked+label:before{background-color:#fff}.single-select-mode .pure-checkbox input[type=checkbox]:checked+label:before{background:none!important}.selected-item{background:#e9f4ff}.btn-iceblue{background:#415269;border:1px solid #ccc;color:#fff}.cuppa-dropdown{margin-top:2px;min-width:200px}.cuppa-dropdown .c-btn{min-height:34px}.cuppa-dropdown .c-angle-down,.cuppa-dropdown .c-angle-up{margin-top:-2px}.selected-list .c-list{width:auto!important;padding-right:35px!important;margin-top:-2px!important}.selected-list .c-list .c-token{padding:3px 22px 3px 8px!important}.ms-placeholder .cuppa-dropdown .selected-list>div>span{color:#aaa}"]
@@ -2841,7 +2918,7 @@ class FormTextareaComponent extends BaseFormControl {
 FormTextareaComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-textarea",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-textarea \r\n        [noValidate]=\"!Validation\" \r\n        [submitted]=\"Form?.submitted\" \r\n        [forceInvalid]=\"ForcedError\"\r\n        [id]=\"GeneratedName\" \r\n        [rows]=\"Rows\" \r\n        [readonly]=\"Readonly\"\r\n        [class]=\"Readonly ? 'app-bg-lightgrey app-no-resize' : 'app-no-resize'\" \r\n        [(ngModel)]=\"Model\"\r\n        name=\"{{GeneratedName}}\" \r\n        autocomplete=\"off\" \r\n        [placeholder]=\"Placeholder\"\r\n        [validationFailed]=\"FailedValidationMessage\" \r\n        #validationControl=\"ngModel\" \r\n        (inputChange)=\"changed();\">\r\n    </val-textarea>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && BoundSource\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-textarea \r\n        [noValidate]=\"!Validation\" \r\n        [submitted]=\"Form?.submitted\" \r\n        [forceInvalid]=\"ForcedError\"\r\n        [id]=\"GeneratedName\" \r\n        [rows]=\"Rows\" \r\n        [readonly]=\"Readonly\"\r\n        [class]=\"Readonly ? 'app-bg-lightgrey app-no-resize' : 'app-no-resize'\" \r\n        [(ngModel)]=\"Model\"\r\n        name=\"{{GeneratedName}}\" \r\n        autocomplete=\"off\" \r\n        [placeholder]=\"Placeholder\"\r\n        [validationFailed]=\"FailedValidationMessage\" \r\n        #validationControl=\"ngModel\" \r\n        (inputChange)=\"changed();\"\r\n        (inputFocus)=\"focused($event);\"\r\n        (inputFinalized)=\"finalized()\"\r\n        >\r\n    </val-textarea>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -3030,7 +3107,7 @@ class FormAutocompleteComponent extends BaseFormControl {
 FormAutocompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-autocomplete",
-                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-autocomplete [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               [readonly]=\"Readonly\"\r\n               [label]=\"SelectLabel\"\r\n               type=\"text\"\r\n               [(ngModel)]=\"Model\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\r\n               (optionChange)=\"changed($event);\"\r\n               [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [FilteredSource]=\"FilteredBoundSource\"\r\n               >\r\n    </val-autocomplete>\r\n</ng-template>",
+                template: "<ng-container *ngIf=\"!FormLayout\">\r\n    <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout\" class=\"form-group row {{FormGroupClass}}\" [class.app-margin-bottom-0]=\"Last\">\r\n    <label class=\"col-md-{{LabelColWidth}} m-t-5\">{{Label}}{{Required ? '*' : ''}}:</label>\r\n    <div class=\"col-md-{{InputColWidth}}\">\r\n        <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n\r\n<ng-template #controlTemplate>\r\n    <val-autocomplete [noValidate]=\"!Validation\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [forceInvalid]=\"ForcedError\"\r\n               [readonly]=\"Readonly\"\r\n               [label]=\"SelectLabel\"\r\n               type=\"text\"\r\n               [(ngModel)]=\"Model\"\r\n               [id]=\"GeneratedName\"\r\n               name=\"{{GeneratedName}}\"\r\n               #validationControl=\"ngModel\"\r\n               (inputChange)=\"filterSource($event);\"\r\n               (inputFocus)=\"focused($event);\"\r\n               (inputFinalized)=\"finalized()\"\r\n               (optionChange)=\"changed($event);\"\r\n               [placeholder]=\"Required ? ((RequiredPlaceholder != null ? RequiredPlaceholder : ('Select' | localize : lc) + '...')) : Placeholder\"\r\n               [validationFailed]=\"FailedValidationMessage\"\r\n               [FilteredSource]=\"FilteredBoundSource\"\r\n               >\r\n    </val-autocomplete>\r\n</ng-template>",
                 providers: [{ provide: LocalizationService, useClass: FormAutocompleteComponentLoc }],
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
@@ -3255,5 +3332,5 @@ FormsAndValidationsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AppFile, FormAdaptiveComponent, FormAutocompleteComponent, FormCheckboxComponent, FormDateComponent, FormDateTimeComponent, FormEmptyComponent, FormErrorComponent, FormFileComponent, FormInfoComponent, FormInputComponent, FormSelectComponent, FormTemplateComponent, FormTextareaComponent, FormTimeComponent, FormsAndValidationsModule, FormsAndValidationsModuleConfig, ValidationAutocompleteComponent, ValidationCurrencyComponent, ValidationDateComponent, ValidationDateTimeComponent, ValidationInputComponent, ValidationSelectComponent, ValidationTextAreaComponent, BaseValidation as ɵa, BaseValidationLoc as ɵb, FAV_LOCALE as ɵc, ACO_CUSTOMKEY as ɵd, CustomRequiredDirective as ɵe, BaseFormControl as ɵf, FormSelectComponentLoc as ɵg, FormAdaptiveComponentLoc as ɵh, FormMultiSelectComponent as ɵi, FormMultiSelectComponentLoc as ɵj, FormFileComponentLoc as ɵk, FormAutocompleteComponentLoc as ɵl, NgxExpandedDayJsDateAdapter as ɵm };
+export { AppFile, FormAdaptiveComponent, FormAutocompleteComponent, FormCheckboxComponent, FormDateComponent, FormDateTimeComponent, FormEmptyComponent, FormErrorComponent, FormFileComponent, FormInfoComponent, FormInputComponent, FormSelectComponent, FormTemplateComponent, FormTextareaComponent, FormTimeComponent, FormsAndValidationsModule, FormsAndValidationsModuleConfig, NgxExpandedDayJsDateAdapter, ValidationAutocompleteComponent, ValidationCurrencyComponent, ValidationDateComponent, ValidationDateTimeComponent, ValidationInputComponent, ValidationSelectComponent, ValidationTextAreaComponent, BaseValidation as ɵa, BaseValidationLoc as ɵb, FAV_LOCALE as ɵc, ACO_CUSTOMKEY as ɵd, CustomRequiredDirective as ɵe, BaseFormControl as ɵf, FormSelectComponentLoc as ɵg, FormAdaptiveComponentLoc as ɵh, FormMultiSelectComponent as ɵi, FormMultiSelectComponentLoc as ɵj, FormFileComponentLoc as ɵk, FormAutocompleteComponentLoc as ɵl };
 //# sourceMappingURL=esfaenza-forms-and-validations.js.map