@esfaenza/forms-and-validations 11.2.147 → 11.2.149-beta1

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

@@ -1,4 +1,4 @@
-import { Injectable, Inject, InjectionToken, Directive, Input, EventEmitter, ViewChild, Output, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injector, ChangeDetectorRef, ContentChild, Self, Host, NgModule } from '@angular/core';
+import { Injectable, Inject, InjectionToken, Directive, Input, EventEmitter, ChangeDetectorRef, ViewChild, Output, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injector, 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';
@@ -176,7 +176,9 @@ CustomRequiredDirective.propDecorators = {
  * Nota bene: I tooltip rallentano tantissimo la pagina perché il tizio che ha fatto ngx bootstrap non è capace
  */
 class BaseValidation {
-    constructor() {
+    /** @ignore Constructor */
+    constructor(cdr) {
+        this.cdr = cdr;
         /**
          * Variabile per tenere in memoria il fatto che il componente è forzato a invalido o no
          */
@@ -314,6 +316,7 @@ class BaseValidation {
                 this.baseInput.control.setErrors({ forcedtoinvalid: true });
                 this.baseInput.control.markAsTouched();
                 this.baseInput.control.markAsDirty();
+                this.cdr.detectChanges();
             });
         else
             setTimeout(() => {
@@ -347,8 +350,12 @@ class BaseValidation {
      * Helper che calcola il messaggio da mostrare nel tooltip che andrà ad aprire
      */
     showTooltipWithMessage(messageOverride = null) {
-        this.validationFailed = messageOverride || this.validationFailed || (this.InferErrorMessages ? this.inferMessage() : "");
-        if (this.validationFailed)
+        // Aggiorno il messaggio di validazione solo se il valore è diverso dall'ultimo valore ricevuto
+        if (this.valueOnLastValidation != this.baseInput.value) {
+            this.validationFailedBind = messageOverride || this.validationFailed || (this.InferErrorMessages ? this.inferMessage() : "");
+            this.valueOnLastValidation = this.baseInput.value;
+        }
+        if (this.validationFailedBind)
             this.tooltip.show();
     }
     /**
@@ -425,6 +432,9 @@ class BaseValidation {
 BaseValidation.decorators = [
     { type: Directive }
 ];
+BaseValidation.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 BaseValidation.propDecorators = {
     tooltip: [{ type: ViewChild, args: [TooltipDirective, { static: false },] }],
     tooltip_static: [{ type: ViewChild, args: [TooltipDirective, { static: true },] }],
@@ -484,20 +494,19 @@ class ValidationSelectComponent extends BaseValidation {
      * @ignore
      */
     constructor(_validators, _asyncValidators, injector, cdr, lc) {
-        super();
+        super(cdr);
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
-        this.cdr = cdr;
         this.lc = lc;
         /**
          * valore del campo vuoto della select
          */
-        this.emptyFieldValue = "-2";
+        this.emptyFieldValue = "-2000";
         /**
          * Valore del placeholder
          */
-        this.placeHolderValue = "-1";
+        this.placeHolderValue = "-1000";
         /**
          * Per i componenti non obbligatori indica se fornire un "valore vuoto"
          */
@@ -608,7 +617,7 @@ class ValidationSelectComponent extends BaseValidation {
 ValidationSelectComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-select",
-                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" 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            #htmlInput\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>",
+                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" 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            #htmlInput\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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -647,8 +656,7 @@ class ValidationDateComponent extends BaseValidation {
      * @ignore
      */
     constructor(cdr, _validators, _asyncValidators, injector, lc, dateExts) {
-        super();
-        this.cdr = cdr;
+        super(cdr);
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
@@ -778,7 +786,7 @@ class ValidationDateComponent extends BaseValidation {
 ValidationDateComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-date",
-                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input matInput\r\n           [matDatepicker]=\"datepicker\"\r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\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 ? (FloatingLabel ? undefined : placeholder) : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\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>",
+                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input matInput\r\n           [matDatepicker]=\"datepicker\"\r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\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 ? (FloatingLabel ? undefined : placeholder) : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -813,8 +821,7 @@ class ValidationInputComponent extends BaseValidation {
      * @ignore
      */
     constructor(cdr, _validators, _asyncValidators, injector, lc) {
-        super();
-        this.cdr = cdr;
+        super(cdr);
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
@@ -961,7 +968,7 @@ class ValidationInputComponent extends BaseValidation {
 ValidationInputComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-input",
-                template: "<mat-form-field floatLabel=\"never\" appearance=\"{{FieldAppearence}}\" 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 && FloatingLabel\">{{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    <!-- Bisogna fixare un po' l'uso di readonly, disabled, frozen cazzi e mazzi -->\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           #htmlInput\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           [readonly]=\"Frozen\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && 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<!-- Questo compoennte nascosto serve solamente per assicurarsi che angular carichi gli stili dei mat-button che altrimenti non caricherebbe... dunno why -->\r\n<div hidden><mat-datepicker-toggle></mat-datepicker-toggle></div>\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 floatLabel=\"never\" appearance=\"{{FieldAppearence}}\" 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 && FloatingLabel\">{{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    <!-- Bisogna fixare un po' l'uso di readonly, disabled, frozen cazzi e mazzi -->\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           #htmlInput\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           [readonly]=\"Frozen\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && 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<!-- Questo compoennte nascosto serve solamente per assicurarsi che angular carichi gli stili dei mat-button che altrimenti non caricherebbe... dunno why -->\r\n<div hidden><mat-datepicker-toggle></mat-datepicker-toggle></div>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -1023,7 +1030,7 @@ class ValidationCurrencyComponent extends ValidationInputComponent {
 ValidationCurrencyComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-currency",
-                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input #baseInput='ngModel'\r\n           #htmlInput\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           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && 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>",
+                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input #baseInput='ngModel'\r\n           #htmlInput\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           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && 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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -1082,7 +1089,7 @@ class ValidationTextAreaComponent extends ValidationInputComponent {
 ValidationTextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-textarea",
-                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <textarea matInput\r\n              #baseInput=\"ngModel\"\r\n              #htmlInput\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              [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n              placement=\"top\"\r\n              (click)=\"onFocus($event)\"\r\n              (focus)=\"checkTooltip();\"\r\n              (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && 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>",
+                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <textarea matInput\r\n              #baseInput=\"ngModel\"\r\n              #htmlInput\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              [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n              placement=\"top\"\r\n              (click)=\"onFocus($event)\"\r\n              (focus)=\"checkTooltip();\"\r\n              (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && 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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
                     {
@@ -1116,8 +1123,7 @@ class ValidationDateTimeComponent extends BaseValidation {
      * @ignore
      */
     constructor(cdr, _validators, _asyncValidators, injector, lc, dateExts) {
-        super();
-        this.cdr = cdr;
+        super(cdr);
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
@@ -1275,7 +1281,7 @@ class ValidationDateTimeComponent extends BaseValidation {
 ValidationDateTimeComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-datetime",
-                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n\r\n    <input matInput \r\n           [ngxMatDatetimePicker]=\"datepicker\" \r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\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           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\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); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\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>",
+                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n\r\n    <input matInput \r\n           [ngxMatDatetimePicker]=\"datepicker\" \r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\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           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\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); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
@@ -1307,8 +1313,8 @@ ValidationDateTimeComponent.propDecorators = {
  */
 class ValidationAutocompleteComponent extends BaseValidation {
     /** @ignore */
-    constructor(_validators, _asyncValidators, injector, lc) {
-        super();
+    constructor(cdr, _validators, _asyncValidators, injector, lc) {
+        super(cdr);
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
@@ -1398,7 +1404,7 @@ class ValidationAutocompleteComponent extends BaseValidation {
 ValidationAutocompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-autocomplete",
-                template: "<!-- Val-Model: {{value}} -->\r\n<mat-form-field appearance=\"{{FieldAppearence}}\" 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           #htmlInput\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 || $event.keyCode == 27) && 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>",
+                template: "<!-- Val-Model: {{value}} -->\r\n<mat-form-field appearance=\"{{FieldAppearence}}\" 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           #htmlInput\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 || $event.keyCode == 27) && 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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -1413,6 +1419,7 @@ ValidationAutocompleteComponent.decorators = [
             },] }
 ];
 ValidationAutocompleteComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
     { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NG_VALIDATORS,] }] },
     { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] },
     { type: Injector },
@@ -1431,8 +1438,8 @@ ValidationAutocompleteComponent.propDecorators = {
  */
 class ValidationAutocompleteMultiComponent extends BaseValidation {
     /** @ignore */
-    constructor(_validators, _asyncValidators, injector, lc) {
-        super();
+    constructor(cdr, _validators, _asyncValidators, injector, lc) {
+        super(cdr);
         this._validators = _validators;
         this._asyncValidators = _asyncValidators;
         this.injector = injector;
@@ -1574,7 +1581,7 @@ class ValidationAutocompleteMultiComponent extends BaseValidation {
 ValidationAutocompleteMultiComponent.decorators = [
     { type: Component, args: [{
                 selector: "val-autocomplete-multi",
-                template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-chip-list #chipList>\r\n        <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n            <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(select)\">\r\n                {{ select.description }}\r\n                <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n            </mat-chip>\r\n        </ng-container>\r\n\r\n        <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(null)\">\r\n            {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n            <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n        </mat-chip>\r\n\r\n        <input matInput\r\n            [matChipInputFor]=\"chipList\"\r\n            #htmlInput\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            [(ngModel)]=\"value\"\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            (blur)=\"closeTooltip();\">\r\n    </mat-chip-list>\r\n\r\n    <mat-autocomplete #auto=\"matAutocomplete\"  [displayWith]=\"displayFn\">\r\n        <mat-option *ngFor=\"let data of FilteredSource\">\r\n            <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n                <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n                  {{ data.description }}\r\n                </mat-checkbox>\r\n              </div>\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=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-chip-list #chipList>\r\n        <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n            <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(select)\">\r\n                {{ select.description }}\r\n                <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n            </mat-chip>\r\n        </ng-container>\r\n\r\n        <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(null)\">\r\n            {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n            <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n        </mat-chip>\r\n\r\n        <input matInput\r\n            [matChipInputFor]=\"chipList\"\r\n            #htmlInput\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            [(ngModel)]=\"value\"\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            (blur)=\"closeTooltip();\">\r\n    </mat-chip-list>\r\n\r\n    <mat-autocomplete #auto=\"matAutocomplete\"  [displayWith]=\"displayFn\">\r\n        <mat-option *ngFor=\"let data of FilteredSource\">\r\n            <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n                <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n                  {{ data.description }}\r\n                </mat-checkbox>\r\n              </div>\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>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 providers: [
                     { provide: LocalizationService, useClass: BaseValidationLoc },
@@ -1589,6 +1596,7 @@ ValidationAutocompleteMultiComponent.decorators = [
             },] }
 ];
 ValidationAutocompleteMultiComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
     { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NG_VALIDATORS,] }] },
     { type: Array, decorators: [{ type: Optional }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] }] },
     { type: Injector },
@@ -1713,6 +1721,11 @@ class BaseFormControl {
         this.BindCheckingGroups = [];
         /** Cache delle proprietà scritte tipo --> {prop} */
         this.BindProperties = [];
+        this.destroyed$ = new Subject();
+        /**
+         * Variabile per tenere in memoria il fatto che il componente è forzato a invalido o no
+         */
+        this._forceInvalid = false;
         if (ngControl == null) {
             if (!this.handleNullNgControl())
                 console.error("ngControl nullo per qualche motivo! Il 90% delle funzionalità di questo input saranno disabilitate");
@@ -1772,17 +1785,17 @@ class BaseFormControl {
         this.InputColWidth = parseInt(ratio[1]);
     }
     /**
-     * Query sull'elemento 'validationControl' che funziona in ambiente statico
+     * Query sull'elemento 'baseInput' che funziona in ambiente statico
      *
-     * @param {NgModel} comp Elemento HTML marcato con "#validationControl"
+     * @param {NgModel} comp Elemento HTML marcato con "#baseInput"
      */
-    set _validationControl(comp) { this.registerValComp(comp); }
+    set baseInput(comp) { this.registerBaseInput(comp); }
     /**
-     * Query sull'elemento 'validationControl' che funziona in ambiente dinamico
+     * Query sull'elemento 'baseInput' che funziona in ambiente dinamico
      *
-     * @param {NgModel} comp Elemento HTML marcato con "#validationControl"
+     * @param {NgModel} comp Elemento HTML marcato con "#baseInput"
      */
-    set validationControl_static(comp) { this.registerValComp(comp); }
+    set baseInput_static(comp) { this.registerBaseInput(comp); }
     ;
     /**
      * Effettua il Bind/Parse delle varie **Source** unendo le informazioni specificate in **Display**
@@ -1890,6 +1903,20 @@ class BaseFormControl {
                 return origFunc.apply(formOutsideRef);
             };
         }
+        if (this.SetValidationSubject) {
+            this.SetValidationSubject.pipe(takeUntil(this.destroyed$)).subscribe(v => {
+                if (v.fieldName + "_internal" == this.GeneratedName) {
+                    // Bisogna farlo su entrambi i Control per portare il ".valid" nel punto giusto
+                    // e per avere gli stili sull'input
+                    let control = this.Form.getControl(this.validationControl);
+                    control.setErrors({ forcedtoinvalid: true });
+                    control.markAsTouched();
+                    this.ngControl.control.setErrors({ forcedtoinvalid: true });
+                    this.ngControl.control.markAsTouched();
+                    this.cdr.markForCheck();
+                }
+            });
+        }
     }
     /**
      * Se sono in modalità detatched devo rimuovere manualmente questo controllo quando entro nella dispose, altrimenti se poi ne andassi a riaggiungere
@@ -1898,6 +1925,8 @@ class BaseFormControl {
     ngOnDestroy() {
         if (this.Form && this.validationControl && !!this.Form.getControl(this.validationControl))
             this.Form.removeControl(this.validationControl);
+        this.destroyed$.next();
+        this.destroyed$.complete();
     }
     /** Elabora i validatori iniettati e capisce se il valore è obbligatorio o meno */
     checkRequiredValidator() {
@@ -1954,7 +1983,7 @@ class BaseFormControl {
      *
      * @param {NgModel} comp Elemento HTML marcato con "#validationControl"
      */
-    registerValComp(comp) {
+    registerBaseInput(comp) {
         if (comp) {
             // È arrivato un nuovo validationContorl (succede solo nel form-select quando cambia la source da 0 elementi / null ad N elementi, quindi al massimo una volta) 
             if (this.validationControl && this.Form)
@@ -2034,6 +2063,63 @@ class BaseFormControl {
         if (this.FAV_DEBUG_MODE)
             console.log("@forms-and-validations: " + message);
     }
+    /**
+     * Imposta il componente come "submitted" scatenandone le validazioni ed eventualmente la visualizzazione del tooltip di errore
+     *
+     * @param {boolean} val **true** se si vuole impostare questo controllo come submitted, **false** altrimenti
+     */
+    set submitted(val) {
+        this._submitted = val;
+        if (!this.baseInput)
+            return;
+        if (val) {
+            this.baseInput.control.markAsTouched();
+        }
+        if (this.baseInput.control.status === "INVALID" && val) { /*this.showTooltipWithMessage();*/ }
+        else { /*this.tooltip.hide();*/ }
+    }
+    /**
+     * Imposta il componente come "invalid" a prescindere dai validatori
+     */
+    set forceInvalid(val) {
+        this._forceInvalid = val;
+        if (val)
+            setTimeout(() => {
+                this.baseInput.control.setErrors({ forcedtoinvalid: true });
+                this.baseInput.control.markAsTouched();
+                this.baseInput.control.markAsDirty();
+                this.cdr.detectChanges();
+            });
+        else
+            setTimeout(() => {
+                this.baseInput.control.setErrors({ forcedtoinvalid: null });
+                this.baseInput.control.updateValueAndValidity();
+            });
+    }
+    /**
+     * @ignore
+     */
+    setDisabledState(isDisabled) {
+        isDisabled ? this.baseInput.control.disable() : this.baseInput.control.enable();
+        this.Readonly = isDisabled;
+    }
+    /**
+     * Registra il Subject per ricevere le richieste di Focus dall'esterno
+     */
+    registerFocusRequest() {
+        if (!this.FocusSubject)
+            return;
+        this.observable = this.FocusSubject.subscribe(t => {
+            this.htmlInput.nativeElement.focus();
+        });
+    }
+    /**
+     * Deregistra il Subject delle richieste di focus
+     */
+    deregisterFocusRequest() {
+        if (this.observable)
+            this.observable.unsubscribe();
+    }
 }
 BaseFormControl.decorators = [
     { type: Directive }
@@ -2076,11 +2162,14 @@ BaseFormControl.propDecorators = {
     Display: [{ type: Input }],
     Readonly: [{ type: Input }],
     LabelInputRatio: [{ type: Input }],
-    _validationControl: [{ type: ViewChild, args: ["validationControl", { static: false },] }],
-    validationControl_static: [{ type: ViewChild, args: ["validationControl", { static: true },] }],
+    htmlInput: [{ type: ViewChild, args: ['htmlInput', { static: false },] }],
+    baseInput: [{ type: ViewChild, args: ["baseInput", { static: false },] }],
+    baseInput_static: [{ type: ViewChild, args: ["baseInput", { static: true },] }],
     inputChange: [{ type: Output }],
     inputFocus: [{ type: Output }],
-    inputFinalized: [{ type: Output }]
+    inputFinalized: [{ type: Output }],
+    submitted: [{ type: Input, args: ["submitted",] }],
+    forceInvalid: [{ type: Input }]
 };
 
 /**
@@ -2908,6 +2997,7 @@ class FormInputComponent extends BaseFormControl {
         this.HasSuffix = false;
         /** Indica la presenza o meno di un prefisso, si basa sulla "truthiness" della proiezione **prefix** */
         this.HasPrefix = false;
+        this.ShowPassword = false;
     }
     /** @ignore */
     writeValue(obj) {
@@ -2921,11 +3011,16 @@ class FormInputComponent extends BaseFormControl {
     }
     /** @ignore */
     onNotNullValueSet() { }
+    onShowHidePassword(event) {
+        this.Password = !this.Password;
+        this.ShowPassword = !this.ShowPassword;
+        event.preventDefault();
+    }
 }
 FormInputComponent.decorators = [
     { type: Component, args: [{
                 selector: "form-input",
-                template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\r\n<ng-template #controlTemplate>\r\n    <val-input [FocusSubject]=\"FocusSubject\" [SetValidationSubject]=\"SetValidationSubject\" [FieldAppearence]=\"FieldAppearence\"\r\n               [noValidate]=\"!Validation\"\r\n               [Frozen]=\"Frozen\"\r\n               [submitted]=\"Form?.submitted\"\r\n               [readonly]=\"Readonly\"\r\n               [forceInvalid]=\"ForcedError\" \r\n               [FloatingLabel]=\"FloatingLabel\"\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>",
+                template: "<!-- Uguale in tutti i componenti --------------------------------------------------------------------------->\r\n<ng-container *ngIf=\"!FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\">\r\n    <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">\r\n        <ng-container *ngIf=\"DisplayLayout == 'form'\">{{ EvaluatedModel }}</ng-container>\r\n        <div *ngIf=\"DisplayLayout == 'inline'\" class=\"app-inline\">{{ EvaluatedModel }}</div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n    <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n</ng-container>\r\n\r\n<div *ngIf=\"FormLayout && (!DisplayMode || (DisplayLayout != 'hidden' && DisplayCondition))\" class=\"{{FormGroupClass + (Last ? ' app-margin-bottom-0 app-margin-right-0 ' : '') + (DisplayLayout == 'inline' && DisplayMode ? (' app-inline-block ' + (!Last ? 'app-margin-right-10' : '')) : ' form-group row')}}\">\r\n    <label class=\"col-md-{{(DisplayMode && DisplayLayout == 'inline' ? 'none app-bold app-margin-bottom-0' : LabelColWidth) + (DisplayMode ? ' app-bold' : ' m-t-5') }}\">{{Label}}{{Required && !DisplayMode ? '*' : ''}}{{Label ? \":\" : \"\"}}</label>\r\n    <span *ngIf=\"DisplayMode && DisplayLayout == 'inline' && InlineSeparator != ''\">{{InlineSeparator}}</span>\r\n    <div class=\"col-md-{{DisplayMode && DisplayLayout == 'inline' ? 'none app-inline-block' : InputColWidth}}\">\r\n        <ng-container *ngIf=\"DisplayMode && !DisplayModeTemplate\">{{ EvaluatedModel }}</ng-container>\r\n        <ng-container *ngIf=\"DisplayMode && DisplayModeTemplate\"><ng-container *ngTemplateOutlet=\"DisplayModeTemplate, context: { $implicit: EvaluatedModel }\"></ng-container></ng-container>\r\n        <div [hidden]=\"DisplayMode\"><ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container></div>\r\n    </div>\r\n    <div class=\"clearfix\"></div>\r\n</div>\r\n<!----------------------------------------------------------------------------------------------------------->\r\n\r\n<ng-template #controlTemplate>\r\n    <mat-form-field floatLabel=\"never\" appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\">\r\n        <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"Placeholder && FloatingLabel\">{{Placeholder}}</mat-label>\r\n        <!--Prefisso-->\r\n        <ng-container *ngIf=\"HasPrefix\">\r\n            <button type=\"button\"\r\n                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-container>\r\n        <!--Input-->\r\n        <input matInput\r\n               #baseInput=\"ngModel\"\r\n               #htmlInput\r\n               [type]=\"Password ? 'password' : 'text'\"\r\n               triggers=\"\"\r\n               placement=\"top\"\r\n               autocomplete=\"off\"\r\n               name=\"base-input\"\r\n               class=\"form-control\"\r\n               id=\"{{GeneratedName}}\"\r\n               [class.app-margin-left-25]=\"HasPrefix\"\r\n               [class.mat-input-with-suffix]=\"HasSuffix || Password\"\r\n               [(ngModel)]=\"Model\"\r\n               [class.checking-field]=\"!Validation\"\r\n               [readonly]=\"Frozen\"\r\n               [disabled]=\"Readonly\"\r\n               [placeholder]=\"FloatingLabel ? undefined : Placeholder\"\r\n               (focus)=\"focused($event);\"\r\n               (ngModelChange)=\"changed()\"\r\n               (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && finalized();\"\r\n               (blur)=\"finalized();\"\r\n               >\r\n        <ng-container *ngIf=\"HasSuffix || Password\">\r\n            <ng-container *ngIf=\"!Password\">\r\n                <button type=\"button\"\r\n                    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-container>\r\n            <!--Password-->\r\n            <span class=\"form-input-suffix\" *ngIf=\"Password\">\r\n                <ng-container *ngIf=\"Password\" matSuffix>\r\n                    <a *ngIf=\"ShowPassword\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"onShowHidePassword($event)\"></a>\r\n                    <a *ngIf=\"!ShowPassword\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"onShowHidePassword($event)\"></a>\r\n                </ng-container>\r\n            </span>\r\n        </ng-container>\r\n    </mat-form-field>\r\n</ng-template>",
                 changeDetection: ChangeDetectionStrategy.OnPush
             },] }
 ];
@@ -2986,7 +3081,7 @@ class FormSelectComponent extends BaseFormControl {
          *
          * Si consiglia di mantenere il default
          */
-        this.EmptyFieldValue = '-2';
+        this.EmptyFieldValue = '-2000';
         /** Se **true** rimuove il simbolino di validazione (croce rossa o tick verde) */
         this.ShowValidationSymbol = true;
         /** Template per la visualizzazione delle opzioni */