ng-inail-common 2.0.30-beta.5 → 2.0.30-beta.9

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

@@ -4121,6 +4121,7 @@
     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) {
@@ -4145,6 +4146,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();
@@ -4287,12 +4291,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: [
@@ -4318,209 +4332,6 @@
         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;
@@ -6076,6 +5887,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 +5902,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();
@@ -6191,12 +6006,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: [
@@ -6760,7 +6585,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) {
@@ -6769,9 +6594,9 @@
             _this = _super.call(this, cdr, libConfig) || this;
             _this.cdr = cdr;
             _this.libConfig = libConfig;
-            _this.timeHMRegex = new RegExp(/^((([01][0-9])|([2][0-3]))[:]([0-5][0-9])$)/gm);
-            _this.timeHMSRegex = new RegExp(/^((([01][0-9])|([2][0-3]))[:]([0-5][0-9])[:]([0-5][0-9])$)/gm);
-            _this.validInputRegx = new RegExp(/^([0-9]+[0-9:]*)$/gm);
+            _this.timeHMRegex = new RegExp(/^((([01]\d)|([2][0-3]))[:]([0-5]\d)$)/);
+            _this.timeHMSRegex = new RegExp(/^((([01]\d)|([2][0-3]))[:]([0-5]\d)[:]([0-5]\d)$)/);
+            _this.validInputRegx = new RegExp(/^([0-9]+[0-9:]*)$/);
             _this.nativeInputTypeTime = getConfigValue((_b = (_a = _this.libConfig) === null || _a === void 0 ? void 0 : _a.inputTimeComponent) === null || _b === void 0 ? void 0 : _b.nativeInputTypeTime, false);
             _this.withSeconds = getConfigValue((_d = (_c = _this.libConfig) === null || _c === void 0 ? void 0 : _c.inputTimeComponent) === null || _d === void 0 ? void 0 : _d.withSeconds, false);
             _this.selfValidation = getConfigValue((_f = (_e = _this.libConfig) === null || _e === void 0 ? void 0 : _e.inputTimeComponent) === null || _f === void 0 ? void 0 : _f.selfValidation, true);
@@ -6796,22 +6621,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 () {
         };
@@ -6838,6 +6667,7 @@
                     value = this.bonificaValore(value);
                     this.inputValue = this.isBefore2Points(value) ? value + ":" : value;
                     if (isNotBlankOrNull(this.inputValue) && this.selfValidation && !this.isValidValue(this.inputValue)) {
+                        // console.warn(this.inputValue, this.selfValidation, !this.isValidValue(this.inputValue))
                         this.setDescError(this.selfValidationError);
                     }
                     else {
@@ -6879,7 +6709,7 @@
             }
         };
         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();
             }
         };
@@ -6891,7 +6721,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           (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: [
@@ -6901,7 +6731,7 @@
                             multi: true
                         }
                     ],
-                    styles: [".inail-input-time .form-control-wrapper:after{font-family:FontAwesome;content:\"\\f017\";right:30px;position:absolute;top:30px;background-color:#fff;font-size:17px}.inail-input-time input[type=time]{padding-right:33px}.inail-input-time .form-control-wrapper.no-label:after{top:11px}"]
+                    styles: [".inail-input-time .form-control-wrapper:after{font-family:FontAwesome;content:\"\\f017\";right:30px;position:absolute;top:30px;font-size:17px}.inail-input-time input[type=time]{padding-right:33px}.inail-input-time .form-control-wrapper.no-label:after{top:11px}"]
                 },] }
     ];
     InputTimeComponent.ctorParameters = function () { return [