ng-inail-common 2.0.30-beta.9 → 2.0.31-beta.2

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);
                 }
@@ -4126,7 +4135,7 @@
         __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;
@@ -4135,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);
@@ -4156,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)
@@ -4278,7 +4287,9 @@
                     _this.setDatepickerDate(_this.visibleData);
                 }
             });
-            this.cleanError();
+            if (this.cleanErrorOnChange) {
+                this.cleanError();
+            }
             this.cdr.detectChanges();
             if (this.onChange) {
                 this.onChange(value);
@@ -4327,6 +4338,8 @@
         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 }],
@@ -4410,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);
                     }
@@ -4532,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);
                     }
@@ -5247,7 +5264,7 @@
         __extends(TableComponent, _super);
         function TableComponent(cdr, renderer, libConfig) {
             var _this = this;
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
             _this = _super.call(this, cdr, libConfig) || this;
             _this.cdr = cdr;
             _this.renderer = renderer;
@@ -5267,7 +5284,9 @@
             _this.pagination = new core.EventEmitter();
             _this.tallRows = getConfigValue((_h = (_g = _this.libConfig) === null || _g === void 0 ? void 0 : _g.tableComponent) === null || _h === void 0 ? void 0 : _h.tallRows, false);
             _this.captionHidden = getConfigValue((_k = (_j = _this.libConfig) === null || _j === void 0 ? void 0 : _j.tableComponent) === null || _k === void 0 ? void 0 : _k.captionHidden, false);
-            _this.bgWhite = getConfigValue((_m = (_l = _this.libConfig) === null || _l === void 0 ? void 0 : _l.tableComponent) === null || _m === void 0 ? void 0 : _m.bgWhite, true);
+            _this.showFullListSize = getConfigValue((_m = (_l = _this.libConfig) === null || _l === void 0 ? void 0 : _l.tableComponent) === null || _m === void 0 ? void 0 : _m.showFullListSize, false);
+            _this.fullListSizeText = getConfigValue((_p = (_o = _this.libConfig) === null || _o === void 0 ? void 0 : _o.tableComponent) === null || _p === void 0 ? void 0 : _p.fullListSizeText, "Elementi totali:");
+            _this.bgWhite = getConfigValue((_r = (_q = _this.libConfig) === null || _q === void 0 ? void 0 : _q.tableComponent) === null || _r === void 0 ? void 0 : _r.bgWhite, true);
             _this.detailsClick = new core.EventEmitter();
             _this.checkedRowsChange = new core.EventEmitter();
             _this.visualizzaBaseFooter = true;
@@ -5280,6 +5299,7 @@
             _this.getPageSize = function () { return _this.externalPaginationSorting ? _this.paginationState.pageSize : _this.tableLength; };
             _this.getListSize = function () { return _this.externalPaginationSorting ? _this.paginationState.fullListSize : _this.dataSource.length; };
             _this.getCurrentPage = function () { return _this.externalPaginationSorting && _this.paginationState ? _this.paginationState.pageNumber : _this.currentPage; };
+            _this.getFullListSize = function () { var _a, _b; return _this.externalPaginationSorting ? (_a = _this.paginationState) === null || _a === void 0 ? void 0 : _a.fullListSize : (_b = _this.dataSource) === null || _b === void 0 ? void 0 : _b.length; };
             // Operatori per gestione selezione righe
             _this.isChecked = function (trcbValue) { return _this.righeSelezionate.some(function (value) { return value == trcbValue; }); };
             _this.isAllChecked = function () { return _this.righeSelezionabili.length > 0 && _this.righeSelezionabili.every(_this.isChecked); };
@@ -5760,10 +5780,10 @@
     TableComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'inail-table',
-                    template: "<div class=\"tabella table-responsive inail-table {{getResponsiveClass()}} noPaddingLeft {{class}} noPaddingRight\">\n\n  <h3 *ngIf=\"title\"\n      class=\"col-xs-9 table-title pull-left noPaddingLeft {{titleClass}}\"\n      [innerHTML]=\"title\">\n  </h3>\n\n  <a *ngIf=\"detailsLink\"\n     href=\"javascript:void(0)\"\n     (click)=\"detailsClick.emit()\"\n     class=\"col-xs-3 col-sm-2 linkDettagli pull-right\"\n     [innerHTML]=\"detailsLink\">\n  </a>\n\n  <div *ngIf=\"description\"\n       class=\"col-xs-12 caption marginBottom noPaddingLeft\"\n       [innerHTML]=\"description\">\n  </div>\n\n  <inail-table-page-length-selector *ngIf=\"visualizzaPaginazione()\"\n                                    [value]=\"getPageSize()\"\n                                    [tableId]=\"id\"\n                                    [options]=\"elementsPerPageOptions\"\n                                    (valueChange)=\"lengthOnChange($event)\"\n                                    [logOnConsole]=\"logOnConsole\"\n                                    (log)=\"log.emit($event)\">\n  </inail-table-page-length-selector>\n\n  <ng-container *ngIf=\"true\">\n\n    <table id=\"{{id}}\"\n           class=\"table display dataTable {{tableClass}}\"\n           [ngClass]=\"{'tabella-base': !tallRows, 'bg-white': bgWhite, 'bg-transparent': !bgWhite}\">\n\n      <caption *ngIf=\"caption\"\n               [ngClass]=\"{'sr-only': captionHidden}\"\n               [innerHTML]=\"caption\">\n      </caption>\n\n      <ng-content select=\"thead\"></ng-content>\n\n      <ng-container *ngIf=\"!noDataFound\">\n        <ng-content select=\"tbody\"></ng-content>\n      </ng-container>\n\n      <tbody *ngIf=\"noDataFound\">\n      <tr role=\"row\">\n        <td class=\"content-text\"\n            style=\"padding: 30px; text-align: center\"\n            [colSpan]=\"numeroColonne\"\n            [innerHTML]=\"noDataFoundText\">\n        </td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div #baseFooter\n         class=\"col-xs-12 baseFooter noPaddingLeft\"\n         *ngIf=\"visualizzaBaseFooter\">\n      <ng-content select=\"[baseFooter]\"></ng-content>\n    </div>\n\n  </ng-container>\n\n  <inail-table-page-selector *ngIf=\"visualizzaPaginazione() && !this.noDataFound\"\n                             [listSize]=\"getListSize()\"\n                             [pageSize]=\"getPageSize()\"\n                             [currentPage]=\"getCurrentPage()\"\n                             [tableId]=\"id\"\n                             (select)=\"pageOnChange($event)\"\n                             [logOnConsole]=\"logOnConsole\"\n                             (log)=\"log.emit($event)\">\n  </inail-table-page-selector>\n\n</div>\n",
+                    template: "<div class=\"tabella table-responsive inail-table {{getResponsiveClass()}} noPaddingLeft {{class}} noPaddingRight\">\n\n  <h3 *ngIf=\"title\"\n      class=\"col-xs-9 table-title pull-left noPaddingLeft {{titleClass}}\"\n      [innerHTML]=\"title\">\n  </h3>\n\n  <a *ngIf=\"detailsLink\"\n     href=\"javascript:void(0)\"\n     (click)=\"detailsClick.emit()\"\n     class=\"col-xs-3 col-sm-2 linkDettagli pull-right\"\n     [innerHTML]=\"detailsLink\">\n  </a>\n\n  <div *ngIf=\"description\"\n       class=\"col-xs-12 caption marginBottom noPaddingLeft\"\n       [innerHTML]=\"description\">\n  </div>\n\n\n  <div *ngIf=\"showFullListSize\"\n       class=\"total-elements\">\n    <span [innerHTML]=\"fullListSizeText\"></span> {{getFullListSize() || 0}}\n  </div>\n\n  <inail-table-page-length-selector *ngIf=\"visualizzaPaginazione()\"\n                                    [value]=\"getPageSize()\"\n                                    [tableId]=\"id\"\n                                    [options]=\"elementsPerPageOptions\"\n                                    (valueChange)=\"lengthOnChange($event)\"\n                                    [logOnConsole]=\"logOnConsole\"\n                                    (log)=\"log.emit($event)\">\n  </inail-table-page-length-selector>\n\n  <ng-container *ngIf=\"true\">\n\n    <table id=\"{{id}}\"\n           class=\"table display dataTable {{tableClass}}\"\n           [ngClass]=\"{'tabella-base': !tallRows, 'bg-white': bgWhite, 'bg-transparent': !bgWhite}\">\n\n      <caption *ngIf=\"caption\"\n               [ngClass]=\"{'sr-only': captionHidden}\"\n               [innerHTML]=\"caption\">\n      </caption>\n\n      <ng-content select=\"thead\"></ng-content>\n\n      <ng-container *ngIf=\"!noDataFound\">\n        <ng-content select=\"tbody\"></ng-content>\n      </ng-container>\n\n      <tbody *ngIf=\"noDataFound\">\n      <tr role=\"row\">\n        <td class=\"content-text\"\n            style=\"padding: 30px; text-align: center\"\n            [colSpan]=\"numeroColonne\"\n            [innerHTML]=\"noDataFoundText\">\n        </td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div #baseFooter\n         class=\"col-xs-12 baseFooter noPaddingLeft\"\n         *ngIf=\"visualizzaBaseFooter\">\n      <ng-content select=\"[baseFooter]\"></ng-content>\n    </div>\n\n  </ng-container>\n\n  <inail-table-page-selector *ngIf=\"visualizzaPaginazione() && !this.noDataFound\"\n                             [listSize]=\"getListSize()\"\n                             [pageSize]=\"getPageSize()\"\n                             [currentPage]=\"getCurrentPage()\"\n                             [tableId]=\"id\"\n                             (select)=\"pageOnChange($event)\"\n                             [logOnConsole]=\"logOnConsole\"\n                             (log)=\"log.emit($event)\">\n  </inail-table-page-selector>\n\n</div>\n",
                     changeDetection: CHANGE_DETECTION_STRATEGY,
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [".inail-table a.linkDettagli{color:#106cdb;-webkit-text-decoration-line:none;text-decoration-line:none}.inail-table a.linkDettagli:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.inail-table table.table.dataTable.bg-white>tbody>tr:not(:hover){background-color:#fff}.inail-table table.table.dataTable.bg-transparent>tbody>tr:not(:hover){background-color:initial}"]
+                    styles: [".inail-table a.linkDettagli{color:#106cdb;-webkit-text-decoration-line:none;text-decoration-line:none}.inail-table a.linkDettagli:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.inail-table table.table.dataTable.bg-white>tbody>tr:not(:hover){background-color:#fff}.inail-table table.table.dataTable.bg-transparent>tbody>tr:not(:hover){background-color:initial}.inail-table .total-elements{float:left;padding-top:12px}"]
                 },] }
     ];
     TableComponent.ctorParameters = function () { return [
@@ -5787,6 +5807,8 @@
         tallRows: [{ type: core.Input }],
         caption: [{ type: core.Input }],
         captionHidden: [{ type: core.Input }],
+        showFullListSize: [{ type: core.Input }],
+        fullListSizeText: [{ type: core.Input }],
         bgWhite: [{ type: core.Input }],
         description: [{ type: core.Input }],
         tableClass: [{ type: core.Input }],
@@ -5854,7 +5876,9 @@
             if (!this.addButton) {
                 this.fileChange.emit(this.fileModel);
             }
-            this.cleanError();
+            if (this.cleanErrorOnChange) {
+                this.cleanError();
+            }
             this.cdr.detectChanges();
         };
         InputFileComponent.prototype.reset = function () {
@@ -5915,10 +5939,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();
         };
@@ -5962,7 +5986,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);
                 }
@@ -6546,11 +6572,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();
@@ -6671,12 +6701,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 + ")");
@@ -6713,6 +6747,34 @@
                 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);
         };
@@ -6721,7 +6783,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]=\"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",
+                    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: [