@jooler/inputs 0.0.57 → 0.0.59

package/fesm2022/inputs.mjs

@@ -2045,10 +2045,11 @@ class FormControlValidationMsgDirectiveForInput {
     control;
     errorMessage;
     errorNgSelectMessage;
-    showBoxError = true;
+    showDot;
     errorDivId;
+    showBoxError = true;
     beforeBegin = false;
-    afterEnd = false;
+    afterEnd = true;
     validationError = ValidationError;
     statusChangeSubscription;
     constructor(elRef, control) {
@@ -2056,26 +2057,27 @@ class FormControlValidationMsgDirectiveForInput {
         this.control = control;
     }
     ngOnInit() {
-        this.statusChangeSubscription = this.control.statusChanges.subscribe((status) => {
-            if (status == 'INVALID') {
+        if (!this.errorDivId) {
+            this.errorDivId = this.control.name;
+        }
+        this.statusChangeSubscription = this.control.statusChanges.subscribe(status => {
+            // We don't want to show errors on status changed when the user never touched the input to begin with. So we add this.control.touched.
+            if (status == 'INVALID' && this.control.touched) {
                 this.showError();
             }
             else {
                 this.removeError();
             }
         });
-        this.control.valueChanges.subscribe({
-            next: (response) => {
-                if (this.control.errors) {
-                    this.showError();
-                }
-            }
-        });
     }
     ngOnDestroy() {
         this.statusChangeSubscription.unsubscribe();
     }
-    handleBlurEvent(event) {
+    handleBlurEvent() {
+        if (this.control.value === '' ||
+            (this.control.value && !String(this.control.value).trim().length)) {
+            this.control.control.setValue(null, { emitEvent: false });
+        }
         if (this.control.errors) {
             this.showError();
         }
@@ -2086,81 +2088,211 @@ class FormControlValidationMsgDirectiveForInput {
     showError() {
         this.removeError();
         const valErrors = this.control.errors;
+        if (this.control.errors.length > 1 || Object.entries(this.control.errors).length > 1) {
+            this.showDot = true;
+        }
+        else {
+            this.showDot = false;
+        }
         const keys = Object.keys(valErrors);
         for (let i = 0; i < keys.length; i++) {
             switch (keys[i]) {
-                case 'minlength': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors.minlength.requiredLength);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    break;
-                }
                 case 'required': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'required': true, 'message': message }, { emitEvent: false });
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ required: true, message: message }, { emitEvent: false });
+                    break;
+                }
+                case 'minlength': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.minlength.requiredLength);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
                     break;
                 }
                 case 'maxlength': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors.maxlength.requiredLength);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'maxlength': { 'requiredLength': valErrors.maxlength.requiredLength }, 'message': message }, { emitEvent: false });
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ maxlength: { requiredLength: valErrors.maxlength.requiredLength }, message: message }, { emitEvent: false });
                     break;
                 }
                 case 'max': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors.max.max);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'message': message, 'max': { 'max': valErrors.max.max } }, { emitEvent: false });
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ message: message, max: { max: valErrors.max.max } }, { emitEvent: false });
                     break;
                 }
                 case 'min': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors.min.min);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ message: message, min: { min: valErrors.min.min } }, { emitEvent: false });
+                    break;
+                }
+                case 'invalidMaxBudgetRange': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.lowScoreReq);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${'\u25CF ' + message}`;
+                    break;
+                }
+                case 'invalidMinBudgetRange': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.highScoreReq);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${'\u25CF ' + message}`;
                     break;
                 }
                 case 'pattern': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors.pattern.requiredPattern);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
                     break;
                 }
                 case 'email': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
                     break;
                 }
                 case 'invalidIntegerNumber': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ invalidIntegerNumber: true, message: message }, { emitEvent: false });
                     break;
                 }
                 case 'invalidPositiveInteger': {
                     let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'invalidPositiveInteger': true, 'message': message }, { emitEvent: false });
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ invalidPositiveInteger: true, message: message }, { emitEvent: false });
+                    break;
+                }
+                case 'invalidPositiveDecimal': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ invalidPositiveDecimal: true, message: message }, { emitEvent: false });
+                    break;
+                }
+                case 'nonPositiveNumber': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ nonPositiveNumber: true, message: message }, { emitEvent: false });
+                    break;
+                }
+                case 'nonStrictlyPositiveNumber': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ nonStrictlyPositiveNumber: true, message: message }, { emitEvent: false });
+                    break;
+                }
+                case 'notUnique': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    break;
+                }
+                case 'hexColorInvalid': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    break;
+                }
+                case 'greaterThanAndLessThanOrEqualValue': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({
+                        greaterThanAndLessThanOrEqualValue: {
+                            min: valErrors.greaterThanAndLessThanOrEqualValue.min,
+                            max: valErrors.greaterThanAndLessThanOrEqualValue.max,
+                        },
+                        message: message,
+                    }, { emitEvent: false });
+                    break;
+                }
+                case 'greaterThanOrEqualAndLessThanValue': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({
+                        greaterThanOrEqualAndLessThanValue: {
+                            min: valErrors.greaterThanOrEqualAndLessThanValue.min,
+                            max: valErrors.greaterThanOrEqualAndLessThanValue.max,
+                        },
+                        message: message,
+                    }, { emitEvent: false });
+                    break;
+                }
+                case 'greaterThanOrEqualAndLessThanOrEqualValue': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({
+                        greaterThanOrEqualAndLessThanOrEqualValue: {
+                            min: valErrors.greaterThanOrEqualAndLessThanOrEqualValue.min,
+                            max: valErrors.greaterThanOrEqualAndLessThanOrEqualValue.max,
+                        },
+                        message: message,
+                    }, { emitEvent: false });
+                    break;
+                }
+                case 'invalidUrl': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    break;
+                }
+                case 'checkboxChecked': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    break;
+                }
+                case 'customMessage': {
+                    let message = valErrors.message;
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    break;
+                }
+                case 'checkboxChecked': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    break;
+                }
+                case 'maxDecimalPlaces': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ maxDecimalPlaces: valErrors.maxDecimalPlaces, message: message }, { emitEvent: false });
+                    break;
+                }
+                case 'maxDigits': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    this.control.control.setErrors({ maxDigits: valErrors.maxDigits, message: message }, { emitEvent: false });
                     break;
                 }
             }
         }
-        if (this.showBoxError) {
-            const errDiv = '<div style="color:#C34243; width=100%; background-color: #FFDBDB; padding: 1rem; border-radius: .5rem; border: .1rem solid #A80002 ;border-left: .75rem solid #A80002;  margin-top:.5rem;  font-size: 1.2rem; " id="' + this.errorDivId + '">' + '<h3   style= " font-size: 1.3rem;  margin-bottom:.5rem; margin:0;  color: #A80002; font-weight: 700; line-height: 1.6rem;">' + 'Please Complete all details' + '</h3>' + this.errorMessage + '</div>';
+        if (this.showBoxError && this.errorMessage) {
+            const errDiv = `<div style="color:${PrimaryColors.$primaryRedColor}; 
+  box-sizing: border-box; 
+  width: ${this.elRef.nativeElement.offsetWidth}px; 
+  background-color: ${PrimaryColors.$primaryLightRedColor}; 
+  padding: .5rem; 
+  border-radius: .5rem; 
+  border: .1rem solid ${PrimaryColors.$primaryRedColor}; 
+  border-left: .75rem solid ${PrimaryColors.$primaryRedColor}; 
+  margin-top:.5rem; 
+  font-size: 1.2rem; 
+  display: block;" id="${this.errorDivId}">` +
+                `<h3 style="font-size: 1.3rem; margin:0 0 .25rem 0; color: ${PrimaryColors.$primaryRedColor}; font-weight: 700; line-height: 1.6rem;">` +
+                'Field contains errors:' +
+                '</h3>' +
+                this.errorMessage +
+                '</div>';
             if (!this.beforeBegin && !this.afterEnd)
                 this.elRef.nativeElement.parentElement.parentElement.parentElement.parentElement.insertAdjacentHTML('afterend', errDiv);
             else if (this.beforeBegin)
                 this.elRef.nativeElement.insertAdjacentHTML('beforebegin', errDiv);
-            else if (this.afterEnd)
+            else if (this.afterEnd) {
                 this.elRef.nativeElement.insertAdjacentHTML('afterend', errDiv);
+            }
             else
-                throw Error("Adjustment not specified ");
+                throw Error('Adjustment not specified ');
         }
     }
     removeError() {
-        this.errorMessage = "";
+        this.errorMessage = '';
         const errorElement = document.getElementById(this.errorDivId);
         if (errorElement) {
             errorElement.remove();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: { showBoxError: "showBoxError", errorDivId: "errorDivId", beforeBegin: "beforeBegin", afterEnd: "afterEnd" }, host: { listeners: { "blur": "handleBlurEvent($event)" } }, providers: [NgModel], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: { showBoxError: "showBoxError", beforeBegin: "beforeBegin", afterEnd: "afterEnd" }, host: { listeners: { "blur": "handleBlurEvent()" } }, providers: [NgModel], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, decorators: [{
             type: Directive,
@@ -2171,9 +2303,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.NgControl }]; }, propDecorators: { showBoxError: [{
                 type: Input,
                 args: ['showBoxError']
-            }], errorDivId: [{
-                type: Input,
-                args: ['errorDivId']
             }], beforeBegin: [{
                 type: Input,
                 args: ['beforeBegin']
@@ -2182,7 +2311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['afterEnd']
             }], handleBlurEvent: [{
                 type: HostListener,
-                args: ['blur', ["$event"]]
+                args: ['blur']
             }] } });
 
 class GeneralInputRendererComponent {
@@ -2235,7 +2364,7 @@ class GeneralInputRendererComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeneralInputRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeneralInputRendererComponent, selector: "general-input-renderer-test", ngImport: i0, template: "<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n    <div [ngClass]=\"{ 'ag-description': params.isTypeTextArea }\" *ngIf=\"!isEdit\">\r\n        <span>{{ formGroup.get(key).value }}</span>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"params.isTypeTextArea\">\r\n        <div *ngIf=\"isEdit\" class=\"input-wrapper\">\r\n            <textarea [readonly]=\"readonly\" appFormControlValidationMsgForInputs\r\n                [showBoxError]=\"false\"\r\n                [style.width.px]=\"params.column.getActualWidth() - 20\"\r\n                [style.height.px]=\" params.node.rowHeight - 20\"\r\n                (change)=\"onCellDataChanged($event)\" [placeholder]=\"params.placeholder\"\r\n                [formControlName]=\"key\"></textarea>\r\n            <tooltip-msg-error [control]=\"formGroup.get(this.key)\" *ngIf=\"\r\n          formGroup.get(this.key).errors && formGroup.get(this.key).touched\r\n        \"></tooltip-msg-error>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"params.isTypeText && isEdit\" class=\"cont\">\r\n        <input [readonly]=\"readonly\" [placeholder]=\"params.placeholder\"\r\n            appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n        <span *ngIf=\"params.showSymbol\" style=\"margin-left: -2.2rem\">{{ params.symbol\r\n            }}</span>\r\n        <tooltip-msg-error\r\n            *ngIf=\"formGroup.get(key).errors && formGroup.get(key) && formGroup.get(key).touched\"\r\n            [message]=\"formGroup.get(key).errors.message\"></tooltip-msg-error>\r\n    </div>\r\n\r\n    <div *ngIf=\"params.isTypeNumber && isEdit\" class=\"input-wrapper\">\r\n        <div class=\"input-symbol-group\">\r\n            <input [readonly]=\"readonly\" appFormControlValidationMsgForInputs\r\n                [showBoxError]=\"false\" [placeholder]=\"params.placeholder\"\r\n                (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\"\r\n                type=\"number\" />\r\n            <span class=\"symbol\" *ngIf=\"params.showSymbol\">{{ params.symbol }}</span>\r\n        </div>\r\n\r\n        <tooltip-msg-error\r\n            *ngIf=\"formGroup.get(key)?.errors && formGroup.get(key)?.touched\"\r\n            [message]=\"formGroup.get(key)?.errors.message\"></tooltip-msg-error>\r\n    </div>\r\n    <div *ngIf=\"params.isTypeIntegerNumber && isEdit\" class=\"cont\">\r\n        <input [readonly]=\"readonly\" appFormControlValidationMsgForInputs\r\n            [showBoxError]=\"false\" [placeholder]=\"params.placeholder\"\r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" type=\"number\" />\r\n        <span class=\"symbol\" *ngIf=\"params.showSymbol\" style=\"margin-left: -2.2rem\">{{\r\n            params.symbol\r\n            }}</span>\r\n        <tooltip-msg-error *ngIf=\"formGroup.get(key).errors && formGroup.get(key).touched\"\r\n            [message]=\"formGroup.get(key).errors.message\"></tooltip-msg-error>\r\n    </div>\r\n</ng-container>", styles: [".symbol{color:#155ed4}textarea{height:98%}.cont{display:flex;align-items:center;gap:.5rem}.input-wrapper{display:flex;align-items:center;gap:.25rem}.input-symbol-group{display:flex;align-items:center;position:relative}.input-symbol-group input{padding-right:1.5rem}.symbol{position:absolute;right:1rem;pointer-events:none;color:#155ed4;z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: ["showBoxError", "errorDivId", "beforeBegin", "afterEnd"] }, { kind: "component", type: TooltipMsgError, selector: "tooltip-msg-error", inputs: ["width", "control", "messageType", "message"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeneralInputRendererComponent, selector: "general-input-renderer-test", ngImport: i0, template: "<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n    <div [ngClass]=\"{ 'ag-description': params.isTypeTextArea }\" *ngIf=\"!isEdit\">\r\n        <span>{{ formGroup.get(key).value }}</span>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"params.isTypeTextArea\">\r\n        <div *ngIf=\"isEdit\" class=\"input-wrapper\">\r\n            <textarea [readonly]=\"readonly\" appFormControlValidationMsgForInputs\r\n                [showBoxError]=\"false\"\r\n                [style.width.px]=\"params.column.getActualWidth() - 20\"\r\n                [style.height.px]=\" params.node.rowHeight - 20\"\r\n                (change)=\"onCellDataChanged($event)\" [placeholder]=\"params.placeholder\"\r\n                [formControlName]=\"key\"></textarea>\r\n            <tooltip-msg-error [control]=\"formGroup.get(this.key)\" *ngIf=\"\r\n          formGroup.get(this.key).errors && formGroup.get(this.key).touched\r\n        \"></tooltip-msg-error>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"params.isTypeText && isEdit\" class=\"cont\">\r\n        <input [readonly]=\"readonly\" [placeholder]=\"params.placeholder\"\r\n            appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n        <span *ngIf=\"params.showSymbol\" style=\"margin-left: -2.2rem\">{{ params.symbol\r\n            }}</span>\r\n        <tooltip-msg-error\r\n            *ngIf=\"formGroup.get(key).errors && formGroup.get(key) && formGroup.get(key).touched\"\r\n            [message]=\"formGroup.get(key).errors.message\"></tooltip-msg-error>\r\n    </div>\r\n\r\n    <div *ngIf=\"params.isTypeNumber && isEdit\" class=\"input-wrapper\">\r\n        <div class=\"input-symbol-group\">\r\n            <input [readonly]=\"readonly\" appFormControlValidationMsgForInputs\r\n                [showBoxError]=\"false\" [placeholder]=\"params.placeholder\"\r\n                (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\"\r\n                type=\"number\" />\r\n            <span class=\"symbol\" *ngIf=\"params.showSymbol\">{{ params.symbol }}</span>\r\n        </div>\r\n\r\n        <tooltip-msg-error\r\n            *ngIf=\"formGroup.get(key)?.errors && formGroup.get(key)?.touched\"\r\n            [message]=\"formGroup.get(key)?.errors.message\"></tooltip-msg-error>\r\n    </div>\r\n    <div *ngIf=\"params.isTypeIntegerNumber && isEdit\" class=\"cont\">\r\n        <input [readonly]=\"readonly\" appFormControlValidationMsgForInputs\r\n            [showBoxError]=\"false\" [placeholder]=\"params.placeholder\"\r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" type=\"number\" />\r\n        <span class=\"symbol\" *ngIf=\"params.showSymbol\" style=\"margin-left: -2.2rem\">{{\r\n            params.symbol\r\n            }}</span>\r\n        <tooltip-msg-error *ngIf=\"formGroup.get(key).errors && formGroup.get(key).touched\"\r\n            [message]=\"formGroup.get(key).errors.message\"></tooltip-msg-error>\r\n    </div>\r\n</ng-container>", styles: [".symbol{color:#155ed4}textarea{height:98%}.cont{display:flex;align-items:center;gap:.5rem}.input-wrapper{display:flex;align-items:center;gap:.25rem}.input-symbol-group{display:flex;align-items:center;position:relative}.input-symbol-group input{padding-right:1.5rem}.symbol{position:absolute;right:1rem;pointer-events:none;color:#155ed4;z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: ["showBoxError", "beforeBegin", "afterEnd"] }, { kind: "component", type: TooltipMsgError, selector: "tooltip-msg-error", inputs: ["width", "control", "messageType", "message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeneralInputRendererComponent, decorators: [{
             type: Component,
@@ -2346,7 +2475,8 @@ class InputsModule {
             EditableSavableInputComponent,
             DropdownActionsComponent,
             DynamicPipe,
-            AddAsteriskDirective] });
+            AddAsteriskDirective,
+            TooltipMsgError] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [CommonModule,
             NgSelectModule,
             FormsModule,
@@ -2397,7 +2527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         EditableSavableInputComponent,
                         DropdownActionsComponent,
                         DynamicPipe,
-                        AddAsteriskDirective
+                        AddAsteriskDirective,
+                        TooltipMsgError
                     ]
                 }]
         }] });