ng-inail-common 2.0.30-beta.7 → 2.0.31-beta.0

package/bundles/ng-inail-common.umd.js

@@ -2962,7 +2962,7 @@
         __extends(FormElementComponent, _super);
         function FormElementComponent(formElementCdr, formElementLibConfig) {
             var _this = this;
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             _this = _super.call(this, formElementCdr, formElementLibConfig) || this;
             _this.formElementCdr = formElementCdr;
             _this.formElementLibConfig = formElementLibConfig;
@@ -2977,6 +2977,7 @@
             _this.errorChange = new core.EventEmitter();
             _this.enterUp = new core.EventEmitter();
             _this.popover = false;
+            _this.cleanErrorOnChange = getConfigValue((_f = (_e = _this.formElementLibConfig) === null || _e === void 0 ? void 0 : _e.formElementComponent) === null || _f === void 0 ? void 0 : _f.cleanErrorOnChange, true);
             _this.getLabel = function () { return "" + ((_this.required && _this.requiredSimbolPosition === 'left') ? _this.requiredSimbol + " " : '') + _this.label + ((_this.required && _this.requiredSimbolPosition === 'right') ? " " + _this.requiredSimbol : ''); };
             _this.isThereError = function () { return _this.hasError || isNotBlankOrNull(_this.error); };
             _this.showError = function () { return _this.isThereError() && isNotBlankOrNull(_this.error); };
@@ -2991,6 +2992,7 @@
                 _super.prototype.overrideConfig.call(this, config);
                 this.requiredSimbol = getConfigValue(config.requiredSimbol, this.requiredSimbol);
                 this.requiredSimbolPosition = getConfigValue(config.requiredSimbolPosition, this.requiredSimbolPosition);
+                this.cleanErrorOnChange = getConfigValue(config.cleanErrorOnChange, this.cleanErrorOnChange);
             }
         };
         FormElementComponent.prototype.ngOnChanges = function (changes) {
@@ -3082,7 +3084,8 @@
         popoverButtonIcon: [{ type: core.Input }],
         popoverButtonTitle: [{ type: core.Input }],
         popoverHeader: [{ type: core.Input }],
-        popoverContent: [{ type: core.Input }]
+        popoverContent: [{ type: core.Input }],
+        cleanErrorOnChange: [{ type: core.Input }]
     };
 
     /**
@@ -3237,7 +3240,9 @@
                 this.cdr.detectChanges();
                 this.emitDebug("this.valueChange.emit(" + value + ")");
                 this.valueChange.emit(value);
-                this.cleanError();
+                if (this.cleanErrorOnChange) {
+                    this.cleanError();
+                }
                 if (this.onChange) {
                     this.onChange(value);
                 }
@@ -3354,7 +3359,9 @@
                     _this.emitDebug("this.valueChange.emit(" + _this.selectedValue + ")");
                     _this.valueChange.emit(_this.selectedValue);
                     _this.select.emit(_this.options.find(function (opt) { return (opt === null || opt === void 0 ? void 0 : opt.value) === _this.selectedValue; }));
-                    _this.cleanError();
+                    if (_this.cleanErrorOnChange) {
+                        _this.cleanError();
+                    }
                     if (_this.onChange) {
                         _this.onChange(_this.selectedValue);
                     }
@@ -4070,7 +4077,9 @@
                 this.cdr.detectChanges();
                 this.emitDebug("this.valueChange.emit(" + value + ")");
                 this.valueChange.emit(value);
-                this.cleanError();
+                if (this.cleanErrorOnChange) {
+                    this.cleanError();
+                }
                 if (this.onChange) {
                     this.onChange(value);
                 }
@@ -4121,11 +4130,12 @@
     var ɵ0$3 = isValidInputModel;
     var isLongTime = function (o) { return o && (typeof o === 'number'); };
     var ɵ1$2 = isLongTime;
+    var ACCEPTED_INPUTS = ['/', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', "Tab", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
     var InputDateComponent = /** @class */ (function (_super) {
         __extends(InputDateComponent, _super);
         function InputDateComponent(cdr, libConfig) {
             var _this = this;
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             _this = _super.call(this, cdr, libConfig) || this;
             _this.cdr = cdr;
             _this.libConfig = libConfig;
@@ -4134,10 +4144,12 @@
             // modelFormat: DateFormat;
             // https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
             _this.options = getConfigValue((_b = (_a = _this.libConfig) === null || _a === void 0 ? void 0 : _a.inputDateComponent) === null || _b === void 0 ? void 0 : _b.options, undefined);
+            _this.selfValidation = getConfigValue((_d = (_c = _this.libConfig) === null || _c === void 0 ? void 0 : _c.inputDateComponent) === null || _d === void 0 ? void 0 : _d.selfValidation, true);
+            _this.selfValidationError = getConfigValue((_f = (_e = _this.libConfig) === null || _e === void 0 ? void 0 : _e.inputDateComponent) === null || _f === void 0 ? void 0 : _f.selfValidationError, 'La data inserita non è valida');
             _this.isValidInputValue = function () { return isBlankOrNull(_this.visibleData) || isInItalianFormat(_this.visibleData); };
-            _this.isThereDataError = function () { return _this.isThereError() || !_this.isValidInputValue(); };
+            _this.isThereDataError = function () { return _this.isThereError() || (!_this.isValidInputValue() && _this.selfValidation); };
             _this.showDataError = function () { return _this.isThereDataError() && isNotBlankOrNull(_this.getDescError()); };
-            _this.getDescError = function () { return (isBlankOrNull(_this.error) && !_this.isValidInputValue()) ? "La data inserita non è valida" : _this.error; };
+            _this.getDescError = function () { return (_this.selfValidation && isBlankOrNull(_this.error) && !_this.isValidInputValue()) ? _this.selfValidationError : _this.error; };
             _this.isEnabledDate = function (date) {
                 var dateString = dateToString(date, 'ISO8061');
                 return _this.isDataAbilitata(dateString) && !_this.isDataDisabilitata(dateString);
@@ -4145,6 +4157,9 @@
             _this.isDataAbilitata = function (data) { return _this.enabledDates == undefined || !_this.enabledDates.length || _this.enabledDates.some(function (regex) { return _this.match(data, regex) != undefined; }); };
             _this.isDataDisabilitata = function (data) { return _this.disabledDates != undefined && _this.disabledDates.some(function (regex) { return _this.match(data, regex) != undefined; }); };
             _this.match = function (date, regex) { return date != undefined && date.match(new RegExp('^'.concat(regex).concat('$'), 'i')); };
+            _this.isFirstDigitSlash = function (ev) { return ev.key == '/' && _this.visibleData == undefined; };
+            _this.isDoubleSlash = function (ev) { return ev.key == '/' && ev.key == _this.previousDigit; };
+            _this.isWrongDigit = function (ev) { return _this.isFirstDigitSlash(ev) || _this.isDoubleSlash(ev); };
             _this.logPrefix = "[inail-input-date]";
             _super.prototype.overrideConfig.call(_this, libConfig === null || libConfig === void 0 ? void 0 : libConfig.inputDateComponent);
             _this.detach();
@@ -4152,12 +4167,10 @@
         }
         InputDateComponent.prototype.ngOnChanges = function (changes) {
             _super.prototype.ngOnChanges.call(this, changes);
-            if (changes.value && !changes.value.firstChange) {
-                this.hasError = false;
-                this.error = undefined;
-                this.hasErrorChange.emit(this.hasError);
-                this.errorChange.emit(this.error);
-            }
+            // if (changes.value && !changes.value.firstChange && this.cleanErrorOnChange) {
+            //
+            //   this.cleanError();
+            // }
             // Se cambiano le options o gli array delle date abilitate/disabilitate
             // reinizializzo il componente
             if ((changes.options && !changes.options.firstChange)
@@ -4274,7 +4287,9 @@
                     _this.setDatepickerDate(_this.visibleData);
                 }
             });
-            this.cleanError();
+            if (this.cleanErrorOnChange) {
+                this.cleanError();
+            }
             this.cdr.detectChanges();
             if (this.onChange) {
                 this.onChange(value);
@@ -4287,12 +4302,22 @@
         InputDateComponent.prototype.setDatepickerDate = function (date) {
             window['$'](this.formControlElement.nativeElement).datepicker('setDate', date);
         };
+        InputDateComponent.prototype.onKeyDown = function (ev) {
+            // console.warn(ev)
+            // console.warn(this.visibleData, `${this.visibleData}`)
+            if ((!ACCEPTED_INPUTS.some(function (v) { return v === ev.key; }) || this.isWrongDigit(ev)) && ev.ctrlKey == false) {
+                ev.preventDefault();
+            }
+            else {
+                this.previousDigit = ev.key;
+            }
+        };
         return InputDateComponent;
     }(FormElementComponent));
     InputDateComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-input-date',
-                    template: "<div class=\"date datePicker {{getResponsiveClass()}} noPaddingLeft {{class}}\"\n     [ngClass]=\"{'has-error': isThereDataError()}\">\n  <div class=\"form-group\">\n    <div class=\"input-relative\">\n      <label *ngIf=\"label\"\n             [ngClass]=\"{'sr-only': hiddenLabel}\"\n             class=\"control-label {{labelClass}}\"\n             title=\"{{labelTitle}}\"\n             for=\"{{id}}\" [innerHTML]=\"getLabel()\"></label>\n      <span *ngIf=\"showPopover()\"\n            [style.padding-left.px]=\"5\">\n        <inail-popover [iconClass]=\"popoverButtonIcon\"\n                       [buttonTitle]=\"popoverButtonTitle\"\n                       [header]=\"popoverHeader\"\n                       [content]=\"popoverContent\">\n        </inail-popover>\n      </span>\n      <input id=\"{{id}}\"\n             #formControl\n             class=\"form-control\"\n             [ngClass]=\"inputClass\"\n             title=\"GG/MM/AAAA\"\n             placeholder=\"GG/MM/AAAA\"\n             type=\"text\"\n             (change)=\"onChangeHandler($event)\"\n             (paste)=\"onChangeHandler($event)\"\n             (keyup)=\"onChangeHandler($event)\"\n             [disabled]=\"this.disabled\"\n             [readonly]=\"this.readonly\"\n             [attr.aria-required]=\"required === true ? true : undefined\"\n             [attr.aria-invalid]=\"isThereDataError() === true ? true : undefined\"\n             [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n             (keyup.enter)=\"enterUp.emit()\"\n             [(ngModel)]=\"this.visibleData\">\n      <em class=\"fa fa-calendar\"\n          title=\"Calendario\"\n          (click)=\"formControl.focus()\"></em>\n    </div>\n    <div *ngIf=\"showDataError()\" [id]=\"id+'-description'\">\n      <div class=\"msg msg-errore\">\n        <strong [innerHTML]=\"'ERRORE: '+getDescError()\"></strong>\n      </div>\n      <div *ngIf=\"description\" [innerHTML]=\"description\"></div>\n    </div>\n    <div *ngIf=\"description && !showDataError()\"\n         [id]=\"id+'-description'\"\n         [innerHTML]=\"this.description\">\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"date datePicker {{getResponsiveClass()}} noPaddingLeft {{class}}\"\n     [ngClass]=\"{'has-error': isThereDataError()}\">\n  <div class=\"form-group\">\n    <div class=\"input-relative\">\n      <label *ngIf=\"label\"\n             [ngClass]=\"{'sr-only': hiddenLabel}\"\n             class=\"control-label {{labelClass}}\"\n             title=\"{{labelTitle}}\"\n             for=\"{{id}}\" [innerHTML]=\"getLabel()\"></label>\n      <span *ngIf=\"showPopover()\"\n            [style.padding-left.px]=\"5\">\n        <inail-popover [iconClass]=\"popoverButtonIcon\"\n                       [buttonTitle]=\"popoverButtonTitle\"\n                       [header]=\"popoverHeader\"\n                       [content]=\"popoverContent\">\n        </inail-popover>\n      </span>\n      <input id=\"{{id}}\"\n             #formControl\n             class=\"form-control\"\n             [ngClass]=\"inputClass\"\n             title=\"GG/MM/AAAA\"\n             placeholder=\"GG/MM/AAAA\"\n             type=\"text\"\n             (change)=\"onChangeHandler($event)\"\n             (paste)=\"onChangeHandler($event)\"\n             (keyup)=\"onChangeHandler($event)\"\n             [disabled]=\"this.disabled\"\n             [readonly]=\"this.readonly\"\n             [attr.aria-required]=\"required === true ? true : undefined\"\n             [attr.aria-invalid]=\"isThereDataError() === true ? true : undefined\"\n             [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n             (keyup.enter)=\"enterUp.emit()\"\n             (keydown)=\"onKeyDown($event)\"\n             [(ngModel)]=\"this.visibleData\">\n      <em class=\"fa fa-calendar\"\n          title=\"Calendario\"\n          (click)=\"formControl.focus()\"></em>\n    </div>\n    <div *ngIf=\"showDataError()\" [id]=\"id+'-description'\">\n      <div class=\"msg msg-errore\">\n        <strong [innerHTML]=\"'ERRORE: '+getDescError()\"></strong>\n      </div>\n      <div *ngIf=\"description\" [innerHTML]=\"description\"></div>\n    </div>\n    <div *ngIf=\"description && !showDataError()\"\n         [id]=\"id+'-description'\"\n         [innerHTML]=\"this.description\">\n    </div>\n  </div>\n</div>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [
@@ -4313,214 +4338,13 @@
         formControlElement: [{ type: core.ViewChild, args: ['formControl', { static: true },] }],
         valueChange: [{ type: core.Output }],
         options: [{ type: core.Input }],
+        selfValidation: [{ type: core.Input }],
+        selfValidationError: [{ type: core.Input }],
         enabledDates: [{ type: core.Input }],
         disabledDates: [{ type: core.Input }],
         reinit: [{ type: core.Input }],
         value: [{ type: core.Input }]
     };
-    // export class InputDateComponent extends FormElementComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
-    //
-    //   @ViewChild('formControl', {static: true})
-    //   formControlElement: ElementRef<HTMLElement>;
-    //
-    //   visibleData: string;
-    //
-    //   changed: boolean;
-    //
-    //   @Output()
-    //   valueChange = new EventEmitter<string>();
-    //
-    //   // @Input()
-    //   // modelFormat: DateFormat;
-    //
-    //   @Input()
-    //   datepickerOptions: any;
-    //
-    //   @Input()
-    //   enabledDates: string[];
-    //
-    //   @Input()
-    //   disabledDates: string[];
-    //
-    //   constructor(private cdr: ChangeDetectorRef) {
-    //     super(cdr);
-    //     this.detach();
-    //   }
-    //
-    //   ngOnChanges(changes: DatePickerChanges) {
-    //
-    //     super.ngOnChanges(changes);
-    //     this.emitDebug(`ngOnChanges:`);
-    //     this.emitDebug(changes);
-    //
-    //     if (changes.value && !changes.value.firstChange) {
-    //
-    //       this.hasError = false;
-    //       this.error = undefined;
-    //     }
-    //
-    //     this.cdr.detectChanges();
-    //   }
-    //
-    //   ngOnInit() {
-    //
-    //     this.logPrefix = `[inail-input-date][${this.label}]`;
-    //     super.ngOnInit();
-    //
-    //     if (!this.datepickerOptions) {
-    //
-    //       this.datepickerOptions = {
-    //         autoclose: true,
-    //         format: 'dd/mm/yyyy',
-    //         weekStart: 1,
-    //         todayBtn: 'linked',
-    //         language: 'it',
-    //         todayHighlight: true,
-    //         orientation: 'auto top',
-    //         enableOnReadonly: false
-    //       };
-    //     }
-    //
-    //     if (this.disabledDates != undefined || this.enabledDates != undefined) {
-    //
-    //       this.datepickerOptions.beforeShowDay = this.isEnabledDate
-    //     }
-    //
-    //     this.cdr.detectChanges();
-    //   }
-    //
-    //   private isEnabledDate = (date) => {
-    //
-    //     // @ts-ignore
-    //     var dateString = $.datepicker.formatDate('yy-mm-dd', date);
-    //     return this.isDataAbilitata(dateString) && !this.isDataDisabilitata(dateString);
-    //   };
-    //
-    //   private isDataAbilitata = (data: string) => this.enabledDates == undefined || this.enabledDates.some(regex => this.match(data, regex) != undefined);
-    //   private isDataDisabilitata = (data: string) => this.disabledDates != undefined && this.disabledDates.some(regex => this.match(data, regex) != undefined);
-    //
-    //   match = (date: string, regex: string) => date != undefined && date.match(new RegExp('^'.concat(regex).concat('$'), 'i'));
-    //
-    //   ngAfterViewInit(): void {
-    //
-    //     this.emitDebug('ngAfterViewInit');
-    //     this.emitDebug('nativeElement');
-    //     this.emitDebug(this.formControlElement?.nativeElement);
-    //
-    //     // Inizializzazione della libreria datepicker
-    //     window['$'](this.formControlElement.nativeElement).datepicker(this.datepickerOptions);
-    //
-    //     if (this.visibleData && isDate(this.visibleData)) {
-    //
-    //       this.setDatepickerDate(this.visibleData)
-    //     }
-    //
-    //     setTimeout(() => {
-    //
-    //       // @ts-ignore
-    //       $('#' + this.id).on("change", () => {
-    //
-    //         this.emitDebug('onChange');
-    //         this.emitDebug(`visibleData: ${this.visibleData}`);
-    //
-    //         // @ts-ignore
-    //         let elem = $('#' + this.id)[0]
-    //
-    //         this.emitDebug(`nativeElement value: ${elem?.value}`);
-    //
-    //         if (elem != undefined && elem.value != this.visibleData) {
-    //
-    //           this.emitDebug(`update value: ${this.value} -> ${elem.value}`);
-    //           this.value = elem.value;
-    //         }
-    //
-    //         this.cdr.detectChanges();
-    //       });
-    //     });
-    //
-    //     if (this.showPopover()) {
-    //
-    //       // @ts-ignore
-    //       $(`#${this.id}-popover`).popover();
-    //     }
-    //
-    //     this.cdr.detectChanges();
-    //   }
-    //
-    //   ngOnDestroy(): void {
-    //
-    //     super.ngOnDestroy();
-    //   }
-    //
-    //   @Input()
-    //   set value(val) {
-    //
-    //     // console.warn('val', val, this.visibleData)
-    //
-    //     let validFormat = isValidInputFormat(val);
-    //
-    //     // console.warn('validFormat', validFormat)
-    //
-    //     if (isNotBlankOrNull(val)) {
-    //
-    //       this.visibleData = validFormat ? toItalianFormat(val) : val;
-    //     } else {
-    //
-    //       this.visibleData = undefined
-    //     }
-    //
-    //     // console.warn('visibleData', this.visibleData)
-    //
-    //     setTimeout(() => {
-    //
-    //       let vChange = validFormat ? toISO8601Format(this.visibleData) : this.visibleData
-    //
-    //       // console.warn('vChange', vChange)
-    //
-    //       this.valueChange.emit(validFormat ? toISO8601Format(this.visibleData) : this.visibleData);
-    //
-    //       if (validFormat) {
-    //
-    //         // console.warn(this.visibleData)
-    //         this.setDatepickerDate(this.visibleData);
-    //       }
-    //     });
-    //   }
-    //
-    //   get isValid(): boolean {
-    //
-    //     return isBlankOrNull(this.visibleData) || isInItalianFormat(this.visibleData);
-    //   }
-    //
-    //   checkDescError(): boolean {
-    //
-    //     let descError: string = this.getDescError();
-    //     return this.checkError() && isNotBlankOrNull(descError);
-    //   }
-    //
-    //   checkError(): boolean {
-    //
-    //     return !this.isValid || this.hasError || isNotBlankOrNull(this.error);
-    //   }
-    //
-    //   getDescError(): string {
-    //
-    //     return (isNotBlankOrNull(this.error) && !this.isValid)
-    //       ? 'La data inserita non &egrave; valida'
-    //       : this.error;
-    //   }
-    //
-    //   onChangeHandler($event: any) {
-    //
-    //     // console.info('onChange', $event.target.value)
-    //     this.value = $event.target.value;
-    //   }
-    //
-    //   private setDatepickerDate(date: string) {
-    //
-    //     window['$'](this.formControlElement.nativeElement).datepicker('setDate', date);
-    //   }
-    // }
 
     var clone$1 = function (obj) { return obj ? JSON.parse(JSON.stringify(obj)) : obj; };
     var ɵ0$4 = clone$1;
@@ -4599,7 +4423,9 @@
                     _this.emitDebug("this.valueChange.emit(" + _this.selectedValue + ")");
                     _this.valueChange.emit(_this.selectedValue);
                     _this.select.emit(_this.options.find(function (opt) { return (opt === null || opt === void 0 ? void 0 : opt.value) === _this.selectedValue; }));
-                    _this.cleanError();
+                    if (_this.cleanErrorOnChange) {
+                        _this.cleanError();
+                    }
                     if (_this.onChange) {
                         _this.onChange(_this.selectedValue);
                     }
@@ -4721,7 +4547,9 @@
                     this.emitDebug("this.checkedChange.emit(" + value + ")");
                     this.checkedChange.emit(value);
                     this.emitState();
-                    this.cleanError();
+                    if (this.cleanErrorOnChange) {
+                        this.cleanError();
+                    }
                     if (this.onChange) {
                         this.onChange(value);
                     }
@@ -6043,7 +5871,9 @@
             if (!this.addButton) {
                 this.fileChange.emit(this.fileModel);
             }
-            this.cleanError();
+            if (this.cleanErrorOnChange) {
+                this.cleanError();
+            }
             this.cdr.detectChanges();
         };
         InputFileComponent.prototype.reset = function () {
@@ -6076,6 +5906,7 @@
         inputText: [{ type: core.ViewChild, args: ['inputText', { static: true },] }]
     };
 
+    var ACCEPTED_INPUTS$1 = [',', '-', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', "Tab", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
     var InputNumberComponent = /** @class */ (function (_super) {
         __extends(InputNumberComponent, _super);
         function InputNumberComponent(cdr, libConfig) {
@@ -6090,6 +5921,9 @@
             _this.numberOfDecimals = getConfigValue((_h = (_g = _this.libConfig) === null || _g === void 0 ? void 0 : _g.inputNumberComponent) === null || _h === void 0 ? void 0 : _h.numberOfDecimals, undefined);
             _this.hideArrows = getConfigValue((_k = (_j = _this.libConfig) === null || _j === void 0 ? void 0 : _j.inputNumberComponent) === null || _k === void 0 ? void 0 : _k.hideArrows, false);
             _this.valueChange = new core.EventEmitter();
+            _this.isFirstDigitComma = function (ev) { return ev.key == ',' && _this.inputValue == undefined; };
+            _this.isWrongMinus = function (ev) { return ev.key == '-' && ev.key == _this.previousDigit; };
+            _this.isWrongDigit = function (ev) { return _this.isFirstDigitComma(ev) || _this.isWrongMinus(ev); };
             _this.logPrefix = "[inail-input-number]";
             _super.prototype.overrideConfig.call(_this, libConfig === null || libConfig === void 0 ? void 0 : libConfig.inputNumberComponent);
             _this.detach();
@@ -6100,10 +5934,10 @@
             if (changes.value) {
                 this.previousValue = changes.value.previousValue;
                 this.normalizzaValore();
-                if (!changes.value.firstChange) {
-                    this.hasError = false;
-                    this.error = undefined;
-                }
+                // if (!changes.value.firstChange) {
+                //
+                //   this.cleanError()
+                // }
             }
             this.cdr.detectChanges();
         };
@@ -6147,7 +5981,9 @@
                 this.cdr.detectChanges();
                 this.emitDebug("this.valueChange.emit(" + value + ")");
                 this.valueChange.emit(value);
-                this.cleanError();
+                if (this.cleanErrorOnChange) {
+                    this.cleanError();
+                }
                 if (this.onChange) {
                     this.onChange(value);
                 }
@@ -6191,12 +6027,22 @@
             }
             return true;
         };
+        InputNumberComponent.prototype.onKeyDown = function (ev) {
+            // console.warn(ev)
+            // console.warn(`${this.inputValue}`)
+            if ((!ACCEPTED_INPUTS$1.some(function (v) { return v === ev.key; }) || this.isWrongDigit(ev)) && ev.ctrlKey == false) {
+                ev.preventDefault();
+            }
+            else {
+                this.previousDigit = ev.key;
+            }
+        };
         return InputNumberComponent;
     }(FormElementComponent));
     InputNumberComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-input-number',
-                    template: "<div class=\"form-group {{getResponsiveClass()}} noPaddingLeft {{class}} inail-input-number\"\n     [ngClass]=\"{'has-error': isThereError(), 'no-arrows': hideArrows}\">\n  <label *ngIf=\"label\"\n         class=\"control-label {{labelClass}}\"\n         [ngClass]=\"{'sr-only': hiddenLabel}\"\n         [attr.title]=\"labelTitle\"\n         [for]=\"id\"\n         [innerHTML]=\"getLabel()\"></label>\n  <span *ngIf=\"showPopover()\"\n        [style.padding-left.px]=\"5\">\n    <inail-popover [iconClass]=\"popoverButtonIcon\"\n                   [buttonTitle]=\"popoverButtonTitle\"\n                   [header]=\"popoverHeader\"\n                   [content]=\"popoverContent\">\n    </inail-popover>\n  </span>\n  <input #formControl\n         type=\"number\"\n         [id]=\"id\"\n         class=\"form-control {{inputClass}}\"\n         [ngClass]=\"{'disabled': disabled}\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.name]=\"name\"\n         [attr.title]=\"title\"\n         [attr.max]=\"max\"\n         [attr.min]=\"min\"\n         [attr.step]=\"step\"\n         [attr.aria-required]=\"required === true ? true : undefined\"\n         [attr.aria-invalid]=\"isThereError() === true ? true : undefined\"\n         [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n         (keyup)=\"onKeyUp()\"\n         (blur)=\"onBlur()\"\n         (keyup.enter)=\"enterUp.emit()\"\n         [value]=\"inputValue\"\n         [(ngModel)]='value'>\n  <!--<input type=\"text\"\n         *ngIf=\"disabled\"\n         [id]=\"id\"\n         class=\"form-control disabled {{inputClass}}\"\n         [attr.name]=\"name\"\n         [attr.title]=\"title\"\n         [disabled]=\"disabled\"\n         [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n         [ngModel]='value'>-->\n  <div *ngIf=\"showError()\" [id]=\"id+'-description'\">\n    <div class=\"msg msg-errore\">\n      <strong [innerHTML]=\"'ERRORE: '+this.error\"></strong>\n    </div>\n    <div *ngIf=\"description\" [innerHTML]=\"this.description\"></div>\n  </div>\n  <div *ngIf=\"description && !showError()\"\n       [id]=\"id+'-description'\"\n       [innerHTML]=\"this.description\">\n  </div>\n</div>\n",
+                    template: "<div class=\"form-group {{getResponsiveClass()}} noPaddingLeft {{class}} inail-input-number\"\n     [ngClass]=\"{'has-error': isThereError(), 'no-arrows': hideArrows}\">\n  <label *ngIf=\"label\"\n         class=\"control-label {{labelClass}}\"\n         [ngClass]=\"{'sr-only': hiddenLabel}\"\n         [attr.title]=\"labelTitle\"\n         [for]=\"id\"\n         [innerHTML]=\"getLabel()\"></label>\n  <span *ngIf=\"showPopover()\"\n        [style.padding-left.px]=\"5\">\n    <inail-popover [iconClass]=\"popoverButtonIcon\"\n                   [buttonTitle]=\"popoverButtonTitle\"\n                   [header]=\"popoverHeader\"\n                   [content]=\"popoverContent\">\n    </inail-popover>\n  </span>\n  <input #formControl\n         type=\"number\"\n         [id]=\"id\"\n         class=\"form-control {{inputClass}}\"\n         [ngClass]=\"{'disabled': disabled}\"\n         [disabled]=\"disabled\"\n         [readonly]=\"readonly\"\n         [attr.name]=\"name\"\n         [attr.title]=\"title\"\n         [attr.max]=\"max\"\n         [attr.min]=\"min\"\n         [attr.step]=\"step\"\n         [attr.aria-required]=\"required === true ? true : undefined\"\n         [attr.aria-invalid]=\"isThereError() === true ? true : undefined\"\n         [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n         (keyup)=\"onKeyUp()\"\n         (blur)=\"onBlur()\"\n         (keydown)=\"onKeyDown($event)\"\n         (keyup.enter)=\"enterUp.emit()\"\n         [value]=\"inputValue\"\n         [(ngModel)]='value'>\n  <!--<input type=\"text\"\n         *ngIf=\"disabled\"\n         [id]=\"id\"\n         class=\"form-control disabled {{inputClass}}\"\n         [attr.name]=\"name\"\n         [attr.title]=\"title\"\n         [disabled]=\"disabled\"\n         [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n         [ngModel]='value'>-->\n  <div *ngIf=\"showError()\" [id]=\"id+'-description'\">\n    <div class=\"msg msg-errore\">\n      <strong [innerHTML]=\"'ERRORE: '+this.error\"></strong>\n    </div>\n    <div *ngIf=\"description\" [innerHTML]=\"this.description\"></div>\n  </div>\n  <div *ngIf=\"description && !showError()\"\n       [id]=\"id+'-description'\"\n       [innerHTML]=\"this.description\">\n  </div>\n</div>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [
@@ -6721,11 +6567,15 @@
             if (!cb.firstChange) {
                 if (cb.checked && !this.isChecked(cb.value)) {
                     this.pushValue(cb.value);
-                    this.cleanError();
+                    if (this.cleanErrorOnChange) {
+                        this.cleanError();
+                    }
                 }
                 else if (!cb.checked && this.isChecked(cb.value)) {
                     this.values = this.values.filter(function (value) { return value != cb.value; });
-                    this.cleanError();
+                    if (this.cleanErrorOnChange) {
+                        this.cleanError();
+                    }
                 }
                 this.valuesChange.emit(this.values);
                 this.inputTextValue = this.getInputTextValue();
@@ -6760,7 +6610,7 @@
 
     var HM_PLACEHOLDER = 'HH:MM';
     var HMS_PLACEHOLDER = 'HH:MM:SS';
-    var ACCEPTED_INPUTS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete'];
+    var ACCEPTED_INPUTS$2 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', "Tab", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
     var InputTimeComponent = /** @class */ (function (_super) {
         __extends(InputTimeComponent, _super);
         function InputTimeComponent(cdr, libConfig) {
@@ -6796,22 +6646,26 @@
             var _a, _b, _c;
             _super.prototype.ngOnChanges.call(this, changes);
             if (((_a = changes === null || changes === void 0 ? void 0 : changes.withSeconds) === null || _a === void 0 ? void 0 : _a.currentValue) != undefined) {
-                this.placeholder = getConfigValue((_c = (_b = this.libConfig) === null || _b === void 0 ? void 0 : _b.inputTimeComponent) === null || _c === void 0 ? void 0 : _c.placeholder, this.withSeconds ? HMS_PLACEHOLDER : HM_PLACEHOLDER);
+                this.defaultPlaceholder = getConfigValue((_c = (_b = this.libConfig) === null || _b === void 0 ? void 0 : _b.inputTimeComponent) === null || _c === void 0 ? void 0 : _c.placeholder, this.withSeconds ? HMS_PLACEHOLDER : HM_PLACEHOLDER);
             }
-            this.placeholder = this.getNotBlankValue(this.placeholder);
+            this.placeholderVisualizzato = this.getNotBlankValue(this.placeholder) || this.defaultPlaceholder;
             this.cdr.detectChanges();
         };
         InputTimeComponent.prototype.ngOnInit = function () {
             var _this = this;
+            var _a, _b;
             _super.prototype.ngOnInit.call(this);
             this.emitDebug("@ViewChild('formControl')");
             this.emitDebug(this.formControlElement);
+            this.defaultPlaceholder = getConfigValue((_b = (_a = this.libConfig) === null || _a === void 0 ? void 0 : _a.inputTimeComponent) === null || _b === void 0 ? void 0 : _b.placeholder, this.withSeconds ? HMS_PLACEHOLDER : HM_PLACEHOLDER);
+            this.placeholderVisualizzato = this.getNotBlankValue(this.placeholder) || this.defaultPlaceholder;
             if (this.focus) {
                 this.push(this.focus.subscribe(function (scroll) {
                     _this.emitDebug("Catch focus!");
                     setFocus(_this.formControlElement.nativeElement, scroll);
                 }));
             }
+            this.cdr.detectChanges();
         };
         InputTimeComponent.prototype.ngAfterViewInit = function () {
         };
@@ -6842,12 +6696,16 @@
                         this.setDescError(this.selfValidationError);
                     }
                     else {
-                        this.cleanError();
+                        if (this.cleanErrorOnChange) {
+                            this.cleanError();
+                        }
                     }
                 }
                 else {
                     this.inputValue = value;
-                    this.cleanError();
+                    if (this.cleanErrorOnChange) {
+                        this.cleanError();
+                    }
                 }
                 this.cdr.detectChanges();
                 this.emitDebug("this.valueChange.emit(" + this.inputValue + ")");
@@ -6880,10 +6738,38 @@
             }
         };
         InputTimeComponent.prototype.onKeyDown = function (ev) {
-            if (!ACCEPTED_INPUTS.some(function (v) { return v === ev.key; }) && ev.ctrlKey == false) {
+            if (!ACCEPTED_INPUTS$2.some(function (v) { return v === ev.key; }) && ev.ctrlKey == false) {
                 ev.preventDefault();
             }
         };
+        InputTimeComponent.prototype.onFocusOut = function () {
+            this.completaValoreInInput();
+        };
+        InputTimeComponent.prototype.completaParteOrario = function (value) {
+            if (isBlankOrNull(value)) {
+                value = '00';
+            }
+            else if (value.length == 1) {
+                value = "0" + value;
+            }
+            return value;
+        };
+        InputTimeComponent.prototype.completaValoreInInput = function () {
+            if (isNotBlankOrNull(this.inputValue) && (this.inputValue.length < 5 || (this.withSeconds && this.inputValue.length < 8))) {
+                var partiOrario = this.inputValue.split(':');
+                var numeroParti = this.withSeconds ? 3 : 2;
+                for (var i = 0; i < numeroParti; i++) {
+                    partiOrario[i] = this.completaParteOrario(partiOrario[i]);
+                }
+                var value = partiOrario[0] + ":" + partiOrario[1];
+                if (partiOrario[2]) {
+                    value = value + ":" + partiOrario[2];
+                }
+                if (value && this.isValidValue(value)) {
+                    this.setValue(value);
+                }
+            }
+        };
         InputTimeComponent.prototype.ngOnDestroy = function () {
             _super.prototype.ngOnDestroy.call(this);
         };
@@ -6892,7 +6778,7 @@
     InputTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-input-time',
-                    template: "<div class=\"form-group {{getResponsiveClass()}} noPaddingLeft {{class}} inail-input-time\"\n     [ngClass]=\"{'has-error': isThereError()}\">\n  <label *ngIf=\"label\"\n         class=\"control-label {{labelClass}}\"\n         [ngClass]=\"{'sr-only': hiddenLabel}\"\n         [attr.title]=\"labelTitle\"\n         [for]=\"id\"\n         [innerHTML]=\"getLabel()\"></label>\n  <span *ngIf=\"showPopover()\"\n        [style.padding-left.px]=\"5\">\n    <inail-popover [iconClass]=\"popoverButtonIcon\"\n                   [buttonTitle]=\"popoverButtonTitle\"\n                   [header]=\"popoverHeader\"\n                   [content]=\"popoverContent\">\n    </inail-popover>\n  </span>\n  <div class=\"form-control-wrapper\"\n       [ngClass]=\"{'no-label' : hiddenLabel || !label}\">\n    <input #formControl\n           [id]=\"id\"\n           [attr.type]=\"getType()\"\n           [attr.step]=\"getStep()\"\n           class=\"form-control {{inputClass}}\"\n           [ngClass]=\"{'disabled': disabled}\"\n           [attr.name]=\"name\"\n           [attr.title]=\"title\"\n           [attr.maxlength]=\"getMaxLength()\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [attr.placeholder]=\"placeholder\"\n           [attr.aria-required]=\"required === true ? true : undefined\"\n           [attr.aria-invalid]=\"isThereError() === true ? true : undefined\"\n           [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n           (blur)=\"onBlur()\"\n           (keydown)=\"onKeyDown($event)\"\n           (paste)=\"onPaste($event)\"\n           (keyup.enter)=\"enterUp.emit()\"\n           [(ngModel)]=\"value\">\n  </div>\n  <div *ngIf=\"showError()\" [id]=\"id+'-description'\">\n    <div class=\"msg msg-errore\">\n      <strong [innerHTML]=\"'ERRORE: '+this.error\"></strong>\n    </div>\n    <div *ngIf=\"description\" [innerHTML]=\"this.description\"></div>\n  </div>\n  <div *ngIf=\"description && !showError()\"\n       [id]=\"id+'-description'\"\n       [innerHTML]=\"this.description\">\n  </div>\n  <debug-pre *ngIf=\"showState\">\n    <state-propertie [label]=\"'id'\" [propertie]=\"id\"></state-propertie>\n    <state-propertie [label]=\"'label'\" [propertie]=\"label\"></state-propertie>\n    <state-propertie [label]=\"'inputValue'\" [propertie]=\"inputValue\"></state-propertie>\n    <state-propertie [label]=\"'placeholder'\" [propertie]=\"placeholder\" [hideIfNull]=\"false\"></state-propertie>\n    <inail-form-element-state-properties [formElement]=\"this\"></inail-form-element-state-properties>\n  </debug-pre>\n</div>\n",
+                    template: "<div class=\"form-group {{getResponsiveClass()}} noPaddingLeft {{class}} inail-input-time\"\n     [ngClass]=\"{'has-error': isThereError()}\">\n  <label *ngIf=\"label\"\n         class=\"control-label {{labelClass}}\"\n         [ngClass]=\"{'sr-only': hiddenLabel}\"\n         [attr.title]=\"labelTitle\"\n         [for]=\"id\"\n         [innerHTML]=\"getLabel()\"></label>\n  <span *ngIf=\"showPopover()\"\n        [style.padding-left.px]=\"5\">\n    <inail-popover [iconClass]=\"popoverButtonIcon\"\n                   [buttonTitle]=\"popoverButtonTitle\"\n                   [header]=\"popoverHeader\"\n                   [content]=\"popoverContent\">\n    </inail-popover>\n  </span>\n  <div class=\"form-control-wrapper\"\n       [ngClass]=\"{'no-label' : hiddenLabel || !label}\">\n    <input #formControl\n           [id]=\"id\"\n           [attr.type]=\"getType()\"\n           [attr.step]=\"getStep()\"\n           class=\"form-control {{inputClass}}\"\n           [ngClass]=\"{'disabled': disabled}\"\n           [attr.name]=\"name\"\n           [attr.title]=\"title\"\n           [attr.maxlength]=\"getMaxLength()\"\n           [disabled]=\"disabled\"\n           [readonly]=\"readonly\"\n           [attr.placeholder]=\"placeholderVisualizzato\"\n           [attr.aria-required]=\"required === true ? true : undefined\"\n           [attr.aria-invalid]=\"isThereError() === true ? true : undefined\"\n           [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n           (blur)=\"onBlur()\"\n           (focusout)=\"onFocusOut()\"\n           (keydown)=\"onKeyDown($event)\"\n           (paste)=\"onPaste($event)\"\n           (keyup.enter)=\"enterUp.emit()\"\n           [(ngModel)]=\"value\">\n  </div>\n  <div *ngIf=\"showError()\" [id]=\"id+'-description'\">\n    <div class=\"msg msg-errore\">\n      <strong [innerHTML]=\"'ERRORE: '+this.error\"></strong>\n    </div>\n    <div *ngIf=\"description\" [innerHTML]=\"this.description\"></div>\n  </div>\n  <div *ngIf=\"description && !showError()\"\n       [id]=\"id+'-description'\"\n       [innerHTML]=\"this.description\">\n  </div>\n  <debug-pre *ngIf=\"showState\">\n    <state-propertie [label]=\"'id'\" [propertie]=\"id\"></state-propertie>\n    <state-propertie [label]=\"'label'\" [propertie]=\"label\"></state-propertie>\n    <state-propertie [label]=\"'inputValue'\" [propertie]=\"inputValue\"></state-propertie>\n    <state-propertie [label]=\"'placeholder'\" [propertie]=\"placeholder\"></state-propertie>\n    <state-propertie [label]=\"'defaultPlaceholder'\" [propertie]=\"defaultPlaceholder\"></state-propertie>\n    <inail-form-element-state-properties [formElement]=\"this\"></inail-form-element-state-properties>\n  </debug-pre>\n</div>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
                     providers: [