@esfaenza/forms-and-validations 13.1.4 → 13.1.5

package/esm2020/lib/validations/validation-autocomplete/validation-autocomplete.component.mjs

@@ -135,7 +135,7 @@ ValidationAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useExisting: forwardRef(() => ValidationAutocompleteComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-autocomplete", changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/lib/validations/validation-currency/validation-currency.component.mjs

@@ -34,7 +34,7 @@ ValidationCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationCurrencyComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-currency", changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/lib/validations/validation-date/validation-date.component.mjs

@@ -150,7 +150,7 @@ ValidationDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => ValidationDateComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-date", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/lib/validations/validation-datetime/validation-datetime.component.mjs

@@ -179,7 +179,7 @@ ValidationDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationDateTimeComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i5.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i5.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i3.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-datetime", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/lib/validations/validation-input/validation-input.component.mjs

@@ -165,7 +165,7 @@ ValidationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => ValidationInputComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationInputComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-input", changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/lib/validations/validation-select/validation-select.component.mjs

@@ -147,7 +147,7 @@ ValidationSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => ValidationSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-select", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/lib/validations/validation-text-area/validation-text-area.component.mjs

@@ -37,7 +37,7 @@ ValidationTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationTextAreaComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationTextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-textarea", providers: [

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

@@ -573,7 +573,7 @@ ValidationSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => ValidationSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-select", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -746,7 +746,7 @@ ValidationDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => ValidationDateComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-date", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -926,7 +926,7 @@ ValidationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => ValidationInputComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationInputComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-input", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -989,7 +989,7 @@ ValidationCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationCurrencyComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-currency", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1041,7 +1041,7 @@ ValidationTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationTextAreaComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationTextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-textarea", providers: [
@@ -1232,7 +1232,7 @@ ValidationDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationDateTimeComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-datetime", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1380,7 +1380,7 @@ ValidationAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useExisting: forwardRef(() => ValidationAutocompleteComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-autocomplete", changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/fesm2020/esfaenza-forms-and-validations.mjs

@@ -568,7 +568,7 @@ ValidationSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => ValidationSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: CustomRequiredDirective, selector: "[customRequired]", inputs: ["CustomNullValues", "customRequired"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-select", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -739,7 +739,7 @@ ValidationDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => ValidationDateComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-date", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -917,7 +917,7 @@ ValidationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => ValidationInputComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "suffix_internal", first: true, predicate: ["suffix_internal"], descendants: true }, { propertyName: "prefix_internal", first: true, predicate: ["prefix_internal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationInputComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-input", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -978,7 +978,7 @@ ValidationCurrencyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationCurrencyComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n", "val-currency .mat-form-field-wrapper .form-control.checking-field.ng-touched{padding-right:25px;margin-left:-25px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.CurrencyMaskDirective, selector: "[currencyMask]", inputs: ["max", "min", "options"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationCurrencyComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-currency", changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1028,7 +1028,7 @@ ValidationTextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationTextAreaComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationTextAreaComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-textarea", providers: [
@@ -1217,7 +1217,7 @@ ValidationDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             useExisting: forwardRef(() => ValidationDateTimeComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$3.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-datetime", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -1363,7 +1363,7 @@ ValidationAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
             useExisting: forwardRef(() => ValidationAutocompleteComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "placement", "triggers", "containerClass", "isDisabled", "delay", "tooltipAnimation", "tooltipFadeDuration", "isOpen", "tooltipHtml", "tooltip", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "container", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipTrigger", "boundariesElement"], outputs: ["tooltipChange", "tooltipStateChanged", "onShown", "onHidden"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], usesInheritance: true, ngImport: i0, 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>", styles: [".tooltip-inner{background-color:#842a30;color:#fff;font-size:12px;width:max-content}.tooltip{margin:auto auto auto 20%!important}.tooltip-inner{background-color:#842a30!important;color:#fff}.tooltip.top .tooltip-arrow:before,.tooltip.top .tooltip-arrow{border-top-color:#842a30}.close-button{position:absolute;right:0em;top:-.2em;float:right;font-size:16px;font-weight:700;color:inherit;text-shadow:0 1px 0 #fff;opacity:.5}.close-button:hover,.close-button:focus{text-decoration:none;cursor:pointer;opacity:.75}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValidationAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: "val-autocomplete", changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esfaenza/forms-and-validations",
-  "version": "13.1.4",
+  "version": "13.1.5",
   "private": false,
   "dependencies": {
     "tslib": "^2.0.0"
@@ -18,7 +18,7 @@
     "angular2-multiselect-dropdown": "5.0.4",
     "@angular-material-components/datetime-picker": "7.0.1",
     "ngx-toastr": "14.2.1",
-    "ngx-bootstrap": "7.0.0",
+    "ngx-bootstrap": "8.0.0",
     "dayjs": "1.10.7",
     "cerialize": "0.1.18",
     "sweetalert2": "11.3.3"