@bnsights/bbsf-controls 1.0.32 → 1.0.35

package/fesm2015/bnsights-bbsf-controls.js

@@ -4,7 +4,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 import interactionPlugin from '@fullcalendar/interaction';
 import * as i0 from '@angular/core';
-import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, Directive, TemplateRef, ViewChildren, ComponentFactoryResolver, ViewContainerRef, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
+import { Injectable, Optional, EventEmitter, Component, Input, Output, ViewChild, NgZone, Directive, TemplateRef, ViewChildren, ComponentFactoryResolver, ViewContainerRef, Pipe, NgModule, NO_ERRORS_SCHEMA, Injector } from '@angular/core';
 import { BlockUIModule } from 'ng-block-ui';
 import { ControlContainer, Validators, FormControl, FormGroupDirective, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { Http, HttpModule } from '@angular/http';
@@ -107,6 +107,12 @@ class ErrorMassageValidation {
             case "max":
                 result = this.utilityService.getResourceValue("MaxValueValidationKey") + " " + error.value.max;
                 break;
+            case "IntegerNumberValidationKey":
+                result = this.utilityService.getResourceValue("IntegerNumberValidationKey");
+                break;
+            case "PositiveNumberValidationKey":
+                result = this.utilityService.getResourceValue("PositiveNumberValidationKey");
+                break;
             case "validatePhoneNumber":
                 result = this.utilityService.getResourceValue("PhoneNumberValidationKey");
                 break;
@@ -122,6 +128,9 @@ class ErrorMassageValidation {
             case "EnglishLetterOnly":
                 result = this.utilityService.getResourceValue("EnglishLetterOnly");
                 break;
+            case "ArabicIsRequiredAndOnly50CharactersEnglish":
+                result = this.utilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
+                break;
             case "PasswordComplexityHasCapitalLetter":
                 result = this.utilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
                 break;
@@ -152,6 +161,12 @@ class ErrorMassageValidation {
             case "ToolTipTypeError":
                 result = this.utilityService.getResourceValue("ToolTipTypeError") + " " + error.value;
                 break;
+            case "InvalidEndDate":
+                result = this.utilityService.getResourceValue("InvalidEndDate");
+                break;
+            case "InvalidStartDate":
+                result = this.utilityService.getResourceValue("InvalidStartDate");
+                break;
             default:
                 break;
         }
@@ -178,9 +193,10 @@ var InputType;
 })(InputType || (InputType = {}));
 
 class ControlUtility {
-    constructor(ErrorHandler, controlValidationService) {
+    constructor(ErrorHandler, controlValidationService, utilityService) {
         this.ErrorHandler = ErrorHandler;
         this.controlValidationService = controlValidationService;
+        this.utilityService = utilityService;
     }
     getErrorValidation(Errorsitem, CustomValidation) {
         let resulte = '';
@@ -212,6 +228,40 @@ class ControlUtility {
             return valid ? null : error;
         };
     }
+    patchControlValue(originalValue, PatchFunction, PatchPath) {
+        var patchOp = [{
+                op: "replace",
+                path: PatchPath,
+                value: originalValue
+            }];
+        var patchService = PatchFunction.call(null, patchOp);
+        patchService.subscribe(r => console.log(r), erorr => this.utilityService.notifyErrorMessage(erorr));
+    }
+    arabicValidator(error) {
+        return (control) => {
+            if (!control.value)
+                return null;
+            if (control.value.match('[\u0600-\u06FF]')) {
+                if (control.value.match('[A-Za-z]') != null) {
+                    //FOUND ENGLISH CHARS
+                    var length = control.value.replace(/\W/g, '').replace(/[0-9]/g, '').length;
+                    if (length > 50) {
+                        return error;
+                    }
+                    else {
+                        return null;
+                    }
+                }
+                else {
+                    //NO ENGLISH CHARACTERS AT ALL
+                    return null;
+                }
+            }
+            else {
+                return error;
+            }
+        };
+    }
     getInputType(type) {
         return InputType[type];
     }
@@ -297,7 +347,8 @@ ControlUtility.decorators = [
 ];
 ControlUtility.ctorParameters = () => [
     { type: ErrorMassageValidation },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: UtilityService }
 ];
 
 var PickerType;
@@ -356,9 +407,37 @@ class DateInputComponent {
         this.markAllAsTouched = false;
         this.validationRules = [];
         this.validationRulesasync = [];
+        this.comparedControl = null;
+        this.dateError = false;
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
+        this.checkIfEndDateAfterStartDate = () => {
+            if (!this.comparedControl.value || !this.group.get(this.options.Name).value) {
+                return null;
+            }
+            if (new Date(this.comparedControl.value) < new Date(this.group.get(this.options.Name).value)) {
+                this.comparedControl.setErrors(null);
+                return null;
+            }
+            else {
+                this.comparedControl.setErrors(null);
+                return { InvalidEndDate: true };
+            }
+        };
+        this.checkIfStartDateBeForEndDate = () => {
+            if (!this.comparedControl.value || !this.group.get(this.options.Name).value) {
+                return null;
+            }
+            if (new Date(this.comparedControl.value) < new Date(this.group.get(this.options.Name).value)) {
+                this.group.get(this.options.Name).setErrors(null);
+                return null;
+            }
+            else {
+                this.group.get(this.options.Name).setErrors(null);
+                return { InvalidStartDate: true };
+            }
+        };
         //External Method
         this.RemoveRequiredValidation = () => {
             this.controlUtility.RemoveRequiredValidation(this.DatePickerFormControl, this.validationRules, this.options);
@@ -400,11 +479,17 @@ class DateInputComponent {
         }
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
-        this.DatePickerFormControl.setValidators(this.validationRules);
-        this.DatePickerFormControl.setAsyncValidators(this.validationRulesasync);
         if (this.options.IsDisabled) {
             this.DatePickerFormControl.disable();
         }
+        if (this.options.StartControlToCompareWith) {
+            if (this.group.get(this.options.StartControlToCompareWith)) {
+                this.comparedControl = this.group.get(this.options.StartControlToCompareWith);
+                this.subscribeDateChanges();
+            }
+        }
+        this.DatePickerFormControl.setValidators(this.validationRules);
+        this.DatePickerFormControl.setAsyncValidators(this.validationRulesasync);
         this.DateInputControlHost.ngSubmit.subscribe((value) => {
             this.group.markAllAsTouched();
             this.markAllAsTouched = true;
@@ -456,7 +541,23 @@ class DateInputComponent {
         }
         this.DatePickerFormControl.setValue(DateValue);
         this.onChangeService.ChangeValue(this.options.Name);
-        this.OnChange.emit(DateValue);
+        let originalValue = DateValue;
+        if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+        this.OnChange.emit(originalValue);
+    }
+    subscribeDateChanges() {
+        const startDateChanges = this.comparedControl.valueChanges;
+        const endDateChanges = this.group.get(this.options.Name).valueChanges;
+        startDateChanges.subscribe(start => {
+            this.comparedControl.addValidators(this.checkIfStartDateBeForEndDate);
+            this.comparedControl.updateValueAndValidity();
+        });
+        endDateChanges.subscribe(end => {
+            this.DatePickerFormControl.addValidators(this.checkIfEndDateAfterStartDate);
+            this.DatePickerFormControl.updateValueAndValidity();
+        });
     }
 }
 DateInputComponent.controlContainerstatic = null;
@@ -523,6 +624,14 @@ class GlobalSettings {
         /**To Set LanguageMode To MultipleLanguageText */
         this.LanguageMode = LanguageMode.Both_Languages_are_visible;
         this.HideAstericsWhenRequired = false;
+        //**To set maxlength warning message when equals limit
+        this.MaxLengthWarningLimit = 10;
+        //**Set any texbox maxlength default value
+        this.MaxLengthTextBox = 255;
+        //**Set any textArea maxlength default value
+        this.MaxLengthTextArea = 1000;
+        //**Set default image source
+        this.DefaultImageSrc = "./src/assets/images/uploadimg.png";
     }
 }
 GlobalSettings.ɵprov = i0.ɵɵdefineInjectable({ factory: function GlobalSettings_Factory() { return new GlobalSettings(); }, token: GlobalSettings, providedIn: "root" });
@@ -740,7 +849,6 @@ class FileUploadComponent {
                     this.uploader.queue = [];
                     return;
                 }
-                debugger;
                 let reader = new FileReader();
                 let fileObject = file.rawFile;
                 reader.readAsDataURL(fileObject);
@@ -770,12 +878,15 @@ class FileUploadComponent {
                         this.group.get(this.options.Name).setValue(this.multipleFileUploadModel);
                     }
                 };
-                this.OnChange.emit(this.group.get(this.options.Name).value);
+                let originalValue = this.group.get(this.options.Name).value;
+                if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+                    this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                }
+                this.OnChange.emit(originalValue);
             }
         }
     }
     removeFromControlValue(item) {
-        debugger;
         if (this.options.IsMultipleFile == false) {
             this.fileUploadModel = null;
             if (this.options.IsRequired == true) {
@@ -878,6 +989,16 @@ class MultiLingualTextBoxComponent {
         this.markAllAsTouched = false;
         this.ArabicLetterOnly = "";
         this.EnglishLetterOnly = "";
+        //For Show warning message of max length limit
+        this.minCharsLimit = -1; //To disable chars limit feature by default
+        this.englishCurrentCharsCount = 0;
+        this.arabicCurrentCharsCount = 0;
+        this.showEnglishCharsLimitMsg = false;
+        this.showArabicCharsLimitMsg = false;
+        this.hasEnglishCharsLimitValidationError = false;
+        this.hasArabicCharsLimitValidationError = false;
+        this.englishMaxLimitWarningMsg = "";
+        this.arabicMaxLimitWarningMsg = "";
         //External Method
         this.RemoveRequiredValidation = () => {
             this.controlUtility.RemoveRequiredValidation(this.ArabicFormControl, this.EnglishValidationRules, this.options);
@@ -907,7 +1028,7 @@ class MultiLingualTextBoxComponent {
         this.CurrentLanguage = translate.currentLang != undefined ? translate.currentLang : translate.defaultLang;
     }
     getCustomErrorsMassages() {
-        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicLetterOnly");
+        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
         this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
     }
     ngOnInit() {
@@ -932,6 +1053,8 @@ class MultiLingualTextBoxComponent {
                 this.options.LanguageMode = this.globalSettings.LanguageMode;
             if (!this.options.MultiControlPlacementType)
                 this.options.MultiControlPlacementType = this.globalSettings.MultiControlPlacementType;
+            if (!this.options.MaxLength)
+                this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
             if (this.options.ArabicLabelKey != null && this.options.ArabicLabelKey != "")
                 this.options.ArabicLabelValue = this.UtilityService.getResourceValue(this.options.ArabicLabelKey);
             if (this.options.EnglishLabelKey != null && this.options.EnglishLabelKey != "")
@@ -944,14 +1067,6 @@ class MultiLingualTextBoxComponent {
                     this.ArabicValidationRules.push(Validation.functionBody);
                 }
             }
-            if (this.options.CustomValidation.length > 0) {
-                let Validations = this.options.CustomValidation;
-                for (let index = 0; index < Validations.length; index++) {
-                    const Validation = Validations[index];
-                    this.EnglishValidationRules.push(Validation.functionBody);
-                    this.ArabicValidationRules.push(Validation.functionBody);
-                }
-            }
             if (this.options.MinLength > 0) {
                 this.ArabicValidationRules.push(Validators.minLength(this.options.MinLength));
                 this.EnglishValidationRules.push(Validators.minLength(this.options.MinLength));
@@ -959,10 +1074,13 @@ class MultiLingualTextBoxComponent {
             if (this.options.MaxLength > 0) {
                 this.EnglishValidationRules.push(Validators.maxLength(this.options.MaxLength));
                 this.ArabicValidationRules.push(Validators.maxLength(this.options.MaxLength));
+                if (!this.options.MaxLengthWarningLimit)
+                    this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
+                this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
             }
             this.showInputUsingLanguageMode();
             this.ArabicValidationRules.push(Validators.compose([
-                this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
+                this.controlUtility.arabicValidator({ ArabicIsRequiredAndOnly50CharactersEnglish: this.ArabicLetterOnly }),
             ]));
             this.EnglishValidationRules.push(Validators.compose([
                 this.controlUtility.patternValidator(/^[\x00-\x7F]*$/, { EnglishLetterOnly: this.EnglishLetterOnly }),
@@ -1007,6 +1125,27 @@ class MultiLingualTextBoxComponent {
                     englishValue = this.EnglishFormControl.value;
                 }
             }
+            //Check for maxlength limit count
+            //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
+            if (this.options.MaxLength && this.minCharsLimit >= 0) {
+                this.englishCurrentCharsCount = this.EnglishFormControl.value.length;
+                if (this.englishCurrentCharsCount >= this.minCharsLimit) {
+                    this.showEnglishCharsLimitMsg = true;
+                    this.hasEnglishCharsLimitValidationError = true;
+                    if (this.englishCurrentCharsCount == this.options.MaxLength)
+                        this.englishCharsLimitMsgClass = "danger";
+                    else
+                        this.englishCharsLimitMsgClass = "warning";
+                }
+                else {
+                    this.showEnglishCharsLimitMsg = false;
+                    this.hasEnglishCharsLimitValidationError = false;
+                }
+                var max = this.options.MaxLength;
+                var current = this.englishCurrentCharsCount;
+                var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+                this.englishMaxLimitWarningMsg = eval('`' + resource + '`');
+            }
         }
         if (this.ArabicFormControl.value == "") {
             this.ArabicWordCountArray = 0;
@@ -1028,6 +1167,27 @@ class MultiLingualTextBoxComponent {
                     arabicValue = this.ArabicFormControl.value;
                 }
             }
+            //Check for maxlength limit count
+            //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
+            if (this.options.MaxLength && this.minCharsLimit >= 0) {
+                this.arabicCurrentCharsCount = this.ArabicFormControl.value.length;
+                if (this.arabicCurrentCharsCount >= this.minCharsLimit) {
+                    this.showArabicCharsLimitMsg = true;
+                    this.hasArabicCharsLimitValidationError = true;
+                    if (this.arabicCurrentCharsCount == this.options.MaxLength)
+                        this.arabicCharsLimitMsgClass = "danger";
+                    else
+                        this.arabicCharsLimitMsgClass = "warning";
+                }
+                else {
+                    this.showArabicCharsLimitMsg = false;
+                    this.hasArabicCharsLimitValidationError = false;
+                }
+                var max = this.options.MaxLength;
+                var current = this.arabicCurrentCharsCount;
+                var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+                this.arabicMaxLimitWarningMsg = eval('`' + resource + '`');
+            }
         }
         let mulitLangModel = new EnglishArabicDTO();
         mulitLangModel.Arabic = arabicValue;
@@ -1060,13 +1220,21 @@ class MultiLingualTextBoxComponent {
     trimControlValue(type) {
         const whitespace = ' ';
         if (type == "En") {
+            let originalValue = this.EnglishFormControl.value;
+            if (this.options.PatchFunction && this.options.PatchPath && this.EnglishFormControl.valid) {
+                this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+            }
             if (this.EnglishFormControl.value.startsWith(whitespace) || this.EnglishFormControl.value.endsWith(whitespace)) {
-                this.EnglishFormControl.patchValue(this.EnglishFormControl.value.trim());
+                this.EnglishFormControl.patchValue(originalValue);
             }
         }
         if (type == "Ar") {
+            let originalValue = this.ArabicFormControl.value;
+            if (this.options.PatchFunction && this.options.PatchPath && this.ArabicFormControl.valid) {
+                this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+            }
             if (this.ArabicFormControl.value.startsWith(whitespace) || this.ArabicFormControl.value.endsWith(whitespace)) {
-                this.ArabicFormControl.patchValue(this.ArabicFormControl.value.trim());
+                this.ArabicFormControl.patchValue(originalValue);
             }
         }
     }
@@ -1147,18 +1315,32 @@ class MultiLingualTextBoxComponent {
         this.ArabicFormControl.updateValueAndValidity();
         this.EnglishFormControl.updateValueAndValidity();
     }
-    showArabicWordCount(value) {
-        this.IsShowArabicWordCount = value;
+    onArabicFocus(isFocus) {
+        this.IsShowArabicWordCount = isFocus;
+        //onFocus
+        if (isFocus) {
+            if (this.hasArabicCharsLimitValidationError) //check if there was previous validation error
+                this.showArabicCharsLimitMsg = true;
+        }
+        else //onFocusOut
+            this.showArabicCharsLimitMsg = false;
     }
-    showEnglishWordCount(value) {
-        this.IsShowEnglishWordCount = value;
+    onEnglishFocus(isFocus) {
+        this.IsShowEnglishWordCount = isFocus;
+        //onFocus
+        if (isFocus) {
+            if (this.hasEnglishCharsLimitValidationError) //check if there was previous validation error
+                this.showEnglishCharsLimitMsg = true;
+        }
+        else //onFocusOut
+            this.showEnglishCharsLimitMsg = false;
     }
 }
 MultiLingualTextBoxComponent.controlContainerstatic = null;
 MultiLingualTextBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextBox',
-                template: "<div class=\"b-control b-multilangual-textbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\"\r\n                     (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                     aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                     [hidden]=\"options.IsHideEnglishFields\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                     [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                     placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                     (keyup)=\"onTextChange()\"\r\n                     (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                     #userinputEnglish>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n              {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n            </div>\r\n\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n              {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                     (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                     [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                     formControlName=\"Arabic\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                     [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                     placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                     (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                     (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n              {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n              {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-multilangual-textbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\"\r\n                     (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                     aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                     [hidden]=\"options.IsHideEnglishFields\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                     [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                     placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                     (keyup)=\"onTextChange()\"\r\n                     (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                     #userinputEnglish>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n              {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showEnglishCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n                {{englishMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n              {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                     (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                     [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                     formControlName=\"Arabic\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                     [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                     placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                     (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                     (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n              {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showArabicCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n                {{arabicMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n              {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -1192,6 +1374,12 @@ class TextAreaComponent {
         this.markAllAsTouched = false;
         this.validationRules = [];
         this.validationRulesasync = [];
+        //For Show warning message of max length limit
+        this.currentCharsCount = 0;
+        this.showCharsLimitMsg = false;
+        this.hasCharsLimitValidationError = false;
+        this.minCharsLimit = -1; //To disable chars limit feature by default
+        this.maxLimitWarningMsg = "";
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -1221,6 +1409,8 @@ class TextAreaComponent {
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.TextAreaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.MaxLength)
+            this.options.MaxLength = this.globalSettings.MaxLengthTextArea;
         if (!this.options.ViewType)
             this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.LabelKey != null && this.options.LabelKey != "")
@@ -1238,6 +1428,9 @@ class TextAreaComponent {
         }
         if (this.options.MaxLength > 0) {
             this.validationRules.push(Validators.maxLength(this.options.MaxLength));
+            if (!this.options.MaxLengthWarningLimit)
+                this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
+            this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
         }
         if (this.options.IsRequired) {
             this.validationRules.push(Validators.required);
@@ -1269,8 +1462,11 @@ class TextAreaComponent {
         return this.controlUtility.getInputType(type);
     }
     trimControlValue() {
-        let OrignalValue = this.controlUtility.trimControlValue(this.TextAreaFormControl.value);
-        this.TextAreaFormControl.patchValue(OrignalValue);
+        let originalValue = this.controlUtility.trimControlValue(this.TextAreaFormControl.value);
+        this.TextAreaFormControl.patchValue(originalValue);
+        if (this.options.PatchFunction && this.options.PatchPath && this.TextAreaFormControl.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
     }
     copyInputMessage(inputElement) {
         this.controlUtility.CopyInputMessage(inputElement);
@@ -1294,17 +1490,45 @@ class TextAreaComponent {
                 }
             }
         }
+        //Check for maxlength limit count
+        //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
+        if (this.options.MaxLength && this.minCharsLimit >= 0) {
+            this.currentCharsCount = this.TextAreaFormControl.value.length;
+            if (this.currentCharsCount >= this.minCharsLimit) {
+                this.showCharsLimitMsg = true;
+                this.hasCharsLimitValidationError = true;
+                if (this.currentCharsCount == this.options.MaxLength)
+                    this.charsLimitMsgClass = "danger";
+                else
+                    this.charsLimitMsgClass = "warning";
+            }
+            else {
+                this.showCharsLimitMsg = false;
+                this.hasCharsLimitValidationError = false;
+            }
+            var max = this.options.MaxLength;
+            var current = this.currentCharsCount;
+            var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+            this.maxLimitWarningMsg = eval('`' + resource + '`');
+        }
         this.OnChange.emit(this.TextAreaFormControl.value);
     }
-    showWordCount(value) {
-        this.IsShowWordCount = value;
+    onFocus(isFocus) {
+        this.IsShowWordCount = isFocus;
+        //onFocus
+        if (isFocus) {
+            if (this.hasCharsLimitValidationError) //check if there was previous validation error
+                this.showCharsLimitMsg = true;
+        }
+        else //onFocusOut
+            this.showCharsLimitMsg = false;
     }
 }
 TextAreaComponent.controlContainerstatic = null;
 TextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-TextArea',
-                template: "<div class=\"b-control b-textarea\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n          *ngIf=\"!options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n        </label>\r\n\r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n          <div class=\"input-group\">\r\n            <textarea class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n                      (focus)=\"showWordCount(true)\" (focusout)=\"showWordCount(false)\"\r\n                      dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n                      (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n                       maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #TextAreainput></textarea>\r\n            <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n              <span class=\"input-group-text\"  (click)=\"copyInputMessage(TextAreainput)\">\r\n                <i class=\"fas fa-copy\"></i>\r\n              </span>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} words</div>\r\n          </div>\r\n            <div class=\"text-danger Required-text\"\r\n                *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n                {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n                <div class=\"control-desc text-dark\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n            <!-- <div *ngIf=\"TextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-textarea\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n          *ngIf=\"!options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n        </label>\r\n\r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n          <div class=\"input-group\">\r\n            <textarea class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n                      (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                      dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n                      (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #TextAreainput></textarea>\r\n            <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n              <span class=\"input-group-text\" (click)=\"copyInputMessage(TextAreainput)\">\r\n                <i class=\"fas fa-copy\"></i>\r\n              </span>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} words</div>\r\n          </div>\r\n          <div class=\"text-danger Required-text\"\r\n               *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n            {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"showCharsLimitMsg\">\r\n            <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n              {{maxLimitWarningMsg}}\r\n            </span>\r\n          </div>\r\n          <div class=\"control-desc text-dark\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n          <!-- <div *ngIf=\"TextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n          <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
             },] }
 ];
@@ -1347,6 +1571,16 @@ class MultiLingualTextAreaComponent {
         this.markAllAsTouched = false;
         this.ArabicLetterOnly = "";
         this.EnglishLetterOnly = "";
+        //For Show warning message of max length limit
+        this.minCharsLimit = -1; //To disable chars limit feature by default
+        this.englishCurrentCharsCount = 0;
+        this.arabicCurrentCharsCount = 0;
+        this.showEnglishCharsLimitMsg = false;
+        this.showArabicCharsLimitMsg = false;
+        this.hasEnglishCharsLimitValidationError = false;
+        this.hasArabicCharsLimitValidationError = false;
+        this.englishMaxLimitWarningMsg = "";
+        this.arabicMaxLimitWarningMsg = "";
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -1378,7 +1612,7 @@ class MultiLingualTextAreaComponent {
         MultiLingualTextAreaComponent.controlContainerstatic = this.controlContainer;
     }
     getCustomErrorsMassages() {
-        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicLetterOnly");
+        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
         this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
     }
     ngOnInit() {
@@ -1395,6 +1629,8 @@ class MultiLingualTextAreaComponent {
                 this.options.LanguageMode = this.globalSettings.LanguageMode;
             if (!this.options.MultiControlPlacementType)
                 this.options.MultiControlPlacementType = this.globalSettings.MultiControlPlacementType;
+            if (!this.options.MaxLength)
+                this.options.MaxLength = this.globalSettings.MaxLengthTextArea;
             if (this.options.ArabicLabelKey != null && this.options.ArabicLabelKey != "")
                 this.options.ArabicLabelValue = this.UtilityService.getResourceValue(this.options.ArabicLabelKey);
             if (this.options.EnglishLabelKey != null && this.options.EnglishLabelKey != "")
@@ -1435,10 +1671,13 @@ class MultiLingualTextAreaComponent {
             if (this.options.MaxLength > 0) {
                 this.EnglishValidationRules.push(Validators.maxLength(this.options.MaxLength));
                 this.ArabicValidationRules.push(Validators.maxLength(this.options.MaxLength));
+                if (!this.options.MaxLengthWarningLimit)
+                    this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
+                this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
             }
             this.showInputUsingLanguageMode();
             this.ArabicValidationRules.push(Validators.compose([
-                this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
+                this.controlUtility.arabicValidator({ ArabicIsRequiredAndOnly50CharactersEnglish: this.ArabicLetterOnly }),
             ]));
             this.EnglishValidationRules.push(Validators.compose([
                 this.controlUtility.patternValidator(/^[\x00-\x7F]*$/, { EnglishLetterOnly: this.EnglishLetterOnly }),
@@ -1482,6 +1721,27 @@ class MultiLingualTextAreaComponent {
                     englishValue = this.EnglishTextAreaFormControl.value;
                 }
             }
+            //Check for maxlength limit count
+            //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
+            if (this.options.MaxLength && this.minCharsLimit >= 0) {
+                this.englishCurrentCharsCount = this.EnglishTextAreaFormControl.value.length;
+                if (this.englishCurrentCharsCount >= this.minCharsLimit) {
+                    this.showEnglishCharsLimitMsg = true;
+                    this.hasEnglishCharsLimitValidationError = true;
+                    if (this.englishCurrentCharsCount == this.options.MaxLength)
+                        this.englishCharsLimitMsgClass = "danger";
+                    else
+                        this.englishCharsLimitMsgClass = "warning";
+                }
+                else {
+                    this.showEnglishCharsLimitMsg = false;
+                    this.hasEnglishCharsLimitValidationError = false;
+                }
+                var max = this.options.MaxLength;
+                var current = this.englishCurrentCharsCount;
+                var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+                this.englishMaxLimitWarningMsg = eval('`' + resource + '`');
+            }
         }
         if (this.ArabicTextAreaFormControl.value == "") {
             this.ArabicWordCountArray = 0;
@@ -1503,6 +1763,27 @@ class MultiLingualTextAreaComponent {
                     arabicValue = this.ArabicTextAreaFormControl.value;
                 }
             }
+            //Check for maxlength limit count
+            //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
+            if (this.options.MaxLength && this.minCharsLimit >= 0) {
+                this.arabicCurrentCharsCount = this.ArabicTextAreaFormControl.value.length;
+                if (this.arabicCurrentCharsCount >= this.minCharsLimit) {
+                    this.showArabicCharsLimitMsg = true;
+                    this.hasArabicCharsLimitValidationError = true;
+                    if (this.arabicCurrentCharsCount == this.options.MaxLength)
+                        this.arabicCharsLimitMsgClass = "danger";
+                    else
+                        this.arabicCharsLimitMsgClass = "warning";
+                }
+                else {
+                    this.showArabicCharsLimitMsg = false;
+                    this.hasArabicCharsLimitValidationError = false;
+                }
+                var max = this.options.MaxLength;
+                var current = this.arabicCurrentCharsCount;
+                var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+                this.arabicMaxLimitWarningMsg = eval('`' + resource + '`');
+            }
         }
         let mulitLangModel = new EnglishArabicDTO();
         mulitLangModel.Arabic = arabicValue;
@@ -1526,13 +1807,21 @@ class MultiLingualTextAreaComponent {
     trimControlValue(type) {
         const whitespace = ' ';
         if (type == "En") {
+            let originalValue = this.EnglishTextAreaFormControl.value;
+            if (this.options.PatchFunction && this.options.PatchPath && this.EnglishTextAreaFormControl.valid) {
+                this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+            }
             if (this.EnglishTextAreaFormControl.value.startsWith(whitespace) || this.EnglishTextAreaFormControl.value.endsWith(whitespace)) {
-                this.EnglishTextAreaFormControl.patchValue(this.EnglishTextAreaFormControl.value.trim());
+                this.EnglishTextAreaFormControl.patchValue(originalValue);
             }
         }
         if (type == "Ar") {
+            let originalValue = this.ArabicTextAreaFormControl.value;
+            if (this.options.PatchFunction && this.options.PatchPath && this.ArabicTextAreaFormControl.valid) {
+                this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+            }
             if (this.ArabicTextAreaFormControl.value.startsWith(whitespace) || this.ArabicTextAreaFormControl.value.endsWith(whitespace)) {
-                this.ArabicTextAreaFormControl.patchValue(this.ArabicTextAreaFormControl.value.trim());
+                this.ArabicTextAreaFormControl.patchValue(originalValue);
             }
         }
     }
@@ -1613,18 +1902,32 @@ class MultiLingualTextAreaComponent {
         this.ArabicTextAreaFormControl.updateValueAndValidity();
         this.EnglishTextAreaFormControl.updateValueAndValidity();
     }
-    showArabicWordCount(value) {
-        this.IsShowArabicWordCount = value;
+    onArabicFocus(isFocus) {
+        this.IsShowArabicWordCount = isFocus;
+        //onFocus
+        if (isFocus) {
+            if (this.hasArabicCharsLimitValidationError) //check if there was previous validation error
+                this.showArabicCharsLimitMsg = true;
+        }
+        else //onFocusOut
+            this.showArabicCharsLimitMsg = false;
     }
-    showEnglishWordCount(value) {
-        this.IsShowEnglishWordCount = value;
+    onEnglishFocus(isFocus) {
+        this.IsShowEnglishWordCount = isFocus;
+        //onFocus
+        if (isFocus) {
+            if (this.hasEnglishCharsLimitValidationError) //check if there was previous validation error
+                this.showEnglishCharsLimitMsg = true;
+        }
+        else //onFocusOut
+            this.showEnglishCharsLimitMsg = false;
     }
 }
 MultiLingualTextAreaComponent.controlContainerstatic = null;
 MultiLingualTextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextArea',
-                template: "<div class=\"b-control b-multilangual-textarea\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n          <label class=\"b-label col-form-label col-sm-12 \"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n              <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                        (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                        maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                        aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                        formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                        [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                        placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                         \r\n                        (keyup)=\"onTextChange()\"\r\n                        (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                        #userinputTextAreaEnglish>\r\n                            </textarea>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n\r\n\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\"\r\n                 *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n              {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n            </div>\r\n\r\n            <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n          <label class=\"b-label col-form-label col-sm-12  \"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLable\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n              <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                        (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                        [hidden]=\"options.IsHideArabicFields\"\r\n                        aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                        formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                        maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                        [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                        placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                        (keyup)=\"onTextChange()\"\r\n                        (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                        #userinputTextAreaArabic>\r\n                            </textarea>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\"\r\n                 *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n              {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"ArabicTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-multilangual-textarea\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n          <label class=\"b-label col-form-label col-sm-12 \"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n              <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                        (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                        maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                        aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                        formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                        [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                        placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                        (keyup)=\"onTextChange()\"\r\n                        (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                        #userinputTextAreaEnglish>\r\n                            </textarea>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n\r\n\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\"\r\n                 *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showEnglishCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n                {{englishMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n              {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n            </div>\r\n\r\n            <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n          <label class=\"b-label col-form-label col-sm-12  \"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n              <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                        (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                        [hidden]=\"options.IsHideArabicFields\"\r\n                        aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                        formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                        maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                        [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                        placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                        (keyup)=\"onTextChange()\"\r\n                        (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                        #userinputTextAreaArabic>\r\n                            </textarea>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\"\r\n                 *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n              {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showArabicCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n                {{arabicMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n              {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"ArabicTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -1724,6 +2027,10 @@ class CheckBoxComponent {
     }
     onValueChanged() {
         this.OnChange.emit(this.CheckBoxFormControl.value);
+        let originalValue = this.CheckBoxFormControl.value;
+        if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
     }
 }
 CheckBoxComponent.controlContainerstatic = null;
@@ -1859,7 +2166,11 @@ class DropdownListComponent {
     }
     onItemSelect(item) {
         this.onChangeService.ChangeValue(this.options.Name);
-        this.OnChange.emit(item);
+        let originalValue = item;
+        if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+        this.OnChange.emit(originalValue);
         //console.log(this.DropdownListFormControl.value)
     }
     Clear() {
@@ -2003,7 +2314,11 @@ class PhoneComponent {
     }
     onValueChanged() {
         let Number = this.PhoneFormControl.value.internationalNumber;
-        this.OnChange.emit(Number.trim());
+        let originalValue = this.controlUtility.trimControlValue(Number);
+        if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+        this.OnChange.emit(originalValue);
     }
 }
 PhoneComponent.controlContainerstatic = null;
@@ -2040,6 +2355,7 @@ class ToggleslideComponent {
         this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.SlideValue = false;
+        this.markAllAsTouched = false;
         ToggleslideComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
@@ -2067,12 +2383,22 @@ class ToggleslideComponent {
     resetError() {
         this.controlValidationService.RemoveGlobalError();
     }
-    getErrorValidation(Errorsitem) {
-        return this.controlUtility.getErrorValidation(Errorsitem, this.options.CustomValidation);
+    showGlobalError() {
+        this.controlUtility.showGlobalError();
+    }
+    getErrorValidation(ErrorList) {
+        if (this.markAllAsTouched && this.group.invalid) {
+            this.showGlobalError();
+            this.markAllAsTouched = false;
+        }
+        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
     }
     changeValueToggle() {
         this.OnChange.emit(this.SlideValue);
         this.ToggleslideFormControl.setValue(this.SlideValue);
+        if (this.options.PatchFunction && this.options.PatchPath && this.ToggleslideFormControl.valid) {
+            this.controlUtility.patchControlValue(this.SlideValue, this.options.PatchFunction, this.options.PatchPath);
+        }
     }
 }
 ToggleslideComponent.controlContainerstatic = null;
@@ -2276,7 +2602,11 @@ class HtmlEditorComponent {
     }
     onValueChanged() {
         this.HtmlEditorFormControl.setValue(this.HtmlEditorFormControl.value.trim());
-        this.OnChange.emit(this.HtmlEditorFormControl.value);
+        let originalValue = this.controlUtility.trimControlValue(this.HtmlEditorFormControl.value);
+        if (this.options.PatchFunction && this.options.PatchPath && this.HtmlEditorFormControl.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+        this.OnChange.emit(originalValue);
     }
 }
 HtmlEditorComponent.controlContainerstatic = null;
@@ -2561,8 +2891,13 @@ class MultiLingualHtmlEditorComponent {
         if (type == "en") {
             this.MultilingualHtmlEditorgroup.controls["English"].setValue(this.MultilingualHtmlEditorgroup.controls["English"].value.trim());
             this.englishValue = this.MultilingualHtmlEditorgroup.controls["English"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["English"].value;
-            if (this.englishValue)
+            if (this.englishValue) {
                 this.EnglishHtmlEditorFormControl.setValue(this.englishValue);
+                let originalValue = this.englishValue;
+                if (this.options.PatchFunction && this.options.PatchPath && this.EnglishHtmlEditorFormControl.valid) {
+                    this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                }
+            }
             let EngliswordCountArray = this.EnglishHtmlEditorFormControl.value.split(" ").length;
             if (EngliswordCountArray > 0) {
                 if (EngliswordCountArray > this.options.MaxWordCount)
@@ -2574,8 +2909,13 @@ class MultiLingualHtmlEditorComponent {
         if (type == "ar") {
             this.MultilingualHtmlEditorgroup.controls["Arabic"].setValue(this.MultilingualHtmlEditorgroup.controls["Arabic"].value.trim());
             this.arabicValue = this.MultilingualHtmlEditorgroup.controls["Arabic"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["Arabic"].value;
-            if (this.arabicValue)
+            if (this.arabicValue) {
                 this.ArabicHtmlEditorFormControl.setValue(this.arabicValue);
+                let originalValue = this.arabicValue;
+                if (this.options.PatchFunction && this.options.PatchPath && this.ArabicHtmlEditorFormControl.valid) {
+                    this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                }
+            }
             let ArabicwordCountArray = this.ArabicHtmlEditorFormControl.value.split(" ").length;
             if (ArabicwordCountArray > 0) {
                 if (ArabicwordCountArray > this.options.MaxWordCount)
@@ -2680,7 +3020,7 @@ MultiLingualHtmlEditorComponent.controlContainerstatic = null;
 MultiLingualHtmlEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualHtmlEditor',
-                template: "<div class=\"b-control b-multilangual-html-editor\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      \r\n                            <angular-editor  class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange('en')\"  [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                    formControlName=\"English\"  [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideArabicLable\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                        \r\n\r\n                            <angular-editor  dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\"    [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                              formControlName=\"Arabic\"  [config]=\"editorArabicConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                \r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n</div>\r\n",
+                template: "<div class=\"b-control b-multilangual-html-editor\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      \r\n                            <angular-editor  class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange('en')\"  [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                    formControlName=\"English\"  [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideArabicLabel\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                        \r\n\r\n                            <angular-editor  dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\"    [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                              formControlName=\"Arabic\"  [config]=\"editorArabicConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                \r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -2708,7 +3048,6 @@ class ImageUploaderComponent {
         this.controlValidationService = controlValidationService;
         this.globalSettings = globalSettings;
         this.files = [];
-        this.ImageSource = "./src/assets/images/uploadimg.png";
         this.OnChange = new EventEmitter();
         this.ValidationMessage = "";
         this.AcceptedType = "";
@@ -2755,8 +3094,10 @@ class ImageUploaderComponent {
         this.controlValidationService.isCreatedBefor = false;
         if (!this.options.ViewType)
             this.options.ViewType = this.globalSettings.ViewType;
-        if (this.options.DefaultImageSrc != null && this.options.DefaultImageSrc != "")
-            this.ImageSource = this.options.DefaultImageSrc;
+        if (!this.options.DefaultImageSrc)
+            this.options.DefaultImageSrc = this.globalSettings.DefaultImageSrc;
+        //Set img src by default value
+        this.ImageSource = this.options.DefaultImageSrc;
         if (this.options.AllowImageCropper) {
             this.config = {
                 aspectRatio: this.options.ImageCropperWidth / this.options.ImageCropperHeight,
@@ -2913,7 +3254,11 @@ class ImageUploaderComponent {
                         this.files = [];
                         this.files.push(...event.addedFiles);
                     }
-                    this.OnChange.emit(this.ImageUploadFormControl.value);
+                    let originalValue = this.ImageUploadFormControl.value;
+                    if (this.options.PatchFunction && this.options.PatchPath && this.ImageUploadFormControl.valid) {
+                        this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                    }
+                    this.OnChange.emit(originalValue);
                 };
             }
         }
@@ -2922,6 +3267,8 @@ class ImageUploaderComponent {
         let ItemList = this.group.get(this.options.Name).value;
         this.files = [];
         ItemList = null;
+        //Set Img src by default image (upload)
+        this.ImageSource = this.options.DefaultImageSrc;
         if ((this.files.length == 0) && this.options.IsRequired) {
             this.ImageUploadFormControl.markAsTouched();
             this.ImageUploadFormControl.setErrors(Validators.required);
@@ -3189,7 +3536,11 @@ class ProfileImageUploaderComponent {
                 reader.onload = () => {
                     this.imageUrl = reader.result.toString();
                     this.openModal(true);
-                    this.OnChange.emit(this.group.get(this.options.Name).value);
+                    let originalValue = this.group.get(this.options.Name).value;
+                    if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+                        this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                    }
+                    this.OnChange.emit(originalValue);
                 };
             }
         }
@@ -3519,13 +3870,16 @@ class AutocompleteTextBoxComponent {
             else {
                 this.AutocompleteTextBoxControl.setValue(item);
                 this.AutocompleteTextBoxControl.updateValueAndValidity();
+                let originalValue = this.AutocompleteTextBoxControl.value;
+                if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+                    this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                }
                 this.OnChange.emit(this.AutocompleteTextBoxControl.value);
             }
         }
     }
     onChangeSearch(search) {
         return __awaiter(this, void 0, void 0, function* () {
-            debugger;
             this.Search = search;
             this.SelectedValue = "";
             yield this.suggestions$.subscribe((result) => {
@@ -3549,7 +3903,7 @@ AutocompleteTextBoxComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-AutocompleteTextBox',
-                template: "<div class=\"b-control b-auto-complete-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n           [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      \r\n    <!-- <input \r\n[(ngModel)]=\"Search\"\r\n    value=\"{{Search}}\"    \r\n    autocomplete=\"off\"\r\n    class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n    aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n    [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n    typeaheadOptionField=\"{{Value}}\"\r\n    [typeahead]=\"suggestions$\"\r\n    [typeaheadAsync]=\"true\"\r\n    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"  (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\"  /> -->\r\n<!-- \r\n      <input ngxTypeahead autocomplete=\"off\"\r\n             value=\"{{Search}}\"\r\n             class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n             [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\"   (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n             \r\n              <ng-autocomplete\r\n                *ngIf=\"!options.AllowNewSelection\"\r\n                [data]=\"dataList\"\r\n                [initialValue]=\"SelectedValue\"\r\n                [searchKeyword]=\"keyword\"\r\n                placeholder=\"{{options.Placeholder}}\"\r\n                (selected)='selectEvent($event)'\r\n                (inputChanged)='onChangeSearch($event)'\r\n                historyIdentifier=\"dataList\"\r\n                [itemTemplate]=\"itemTemplate\"\r\n                [notFoundTemplate]=\"notFoundTemplate\"\r\n                class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n                dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                formControlName=\"{{options.Name}}\"\r\n                aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n                >\r\n              </ng-autocomplete>\r\n              <ng-autocomplete\r\n              *ngIf=\"options.AllowNewSelection\"\r\n              [data]=\"dataList\"\r\n              [initialValue]=\"SelectedValue\"\r\n              [searchKeyword]=\"keyword\"\r\n              placeholder=\"{{options.Placeholder}}\"\r\n              (selected)='selectEvent($event)'\r\n              (inputChanged)='onChangeSearch($event)'\r\n              historyIdentifier=\"dataList\"\r\n              [itemTemplate]=\"itemTemplate\"\r\n              class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n              dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n              formControlName=\"{{options.Name}}\"\r\n              aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n              [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n              >\r\n            </ng-autocomplete>\r\n\r\n        \r\n            \r\n              <ng-template #itemTemplate let-item>\r\n                <a [innerHTML]=\"item.value\"></a>\r\n              </ng-template>\r\n            \r\n              <ng-template #notFoundTemplate let-notFound >\r\n                <div [innerHTML]=\"notFound\"></div>\r\n              </ng-template>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n      *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n  </div>\r\n\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-auto-complete-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <!-- <input \r\n[(ngModel)]=\"Search\"\r\n    value=\"{{Search}}\"    \r\n    autocomplete=\"off\"\r\n    class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n    aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n    [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n    typeaheadOptionField=\"{{Value}}\"\r\n    [typeahead]=\"suggestions$\"\r\n    [typeaheadAsync]=\"true\"\r\n    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"  (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\"  /> -->\r\n      <!-- \r\n      <input ngxTypeahead autocomplete=\"off\"\r\n             value=\"{{Search}}\"\r\n             class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n             dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n             [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\"   (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n      <ng-autocomplete *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n        [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n        (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n        [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n        [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n        (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n        class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n\r\n      <ng-template #notFoundTemplate let-notFound>\r\n        <div [innerHTML]=\"notFound\"></div>\r\n      </ng-template>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n        {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n    </div>\r\n  </div>\r\n</div>",
                 styles: [""]
             },] }
 ];
@@ -3732,7 +4086,11 @@ class TagsInputComponent {
                 this.TagsFormControl.invalid;
             }
         }
-        this.OnChange.emit(this.TagsFormControl.value);
+        let originalValue = this.TagsFormControl.value;
+        if (this.options.PatchFunction && this.options.PatchPath && this.TagsFormControl.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+        this.OnChange.emit(originalValue);
     }
     onNoOptionsMatch(event) {
         this.IsNoMatch = event;
@@ -3968,7 +4326,6 @@ class PagingComponent {
         }
         this.requestHandlerService.post(this.options.ActionPostURL, pagingDTO, null, params, null)
             .subscribe((responseData) => {
-            debugger;
             this.result = responseData.items; //this.castItems(responseData.items);
             let castedResult = plainToClass(this.options.TypeOfResponse, this.result, { excludeExtraneousValues: true });
             this.Items.emit(castedResult);
@@ -3984,7 +4341,6 @@ class PagingComponent {
         });
     }
     castItems(objectArr) {
-        debugger;
         let originalArray = [];
         for (let index = 0; index < objectArr.length; index++) {
             const element = objectArr[index];
@@ -4220,7 +4576,11 @@ class RadioButtonComponent {
         return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
     }
     onValueChanged() {
-        this.OnChange.emit(this.RadioButtonFormControl.value);
+        let originalValue = this.RadioButtonFormControl.value;
+        if (this.options.PatchFunction && this.options.PatchPath && this.RadioButtonFormControl.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+        this.OnChange.emit(originalValue);
     }
 }
 RadioButtonComponent.controlContainerstatic = null;
@@ -4269,7 +4629,12 @@ class TextboxComponent {
         this.markAllAsTouched = false;
         this.validationRules = [];
         this.validationRulesasync = [];
-        this.currentLanguage = "";
+        //For Show warning message of max length limit
+        this.currentCharsCount = 0;
+        this.showCharsLimitMsg = false;
+        this.hasCharsLimitValidationError = false;
+        this.minCharsLimit = -1; //To disable chars limit feature by default
+        this.maxLimitWarningMsg = "";
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -4295,21 +4660,10 @@ class TextboxComponent {
         };
         TextboxComponent.controlContainerstatic = this.controlContainer;
     }
-    // static showErrorOfInputs(errors: any) {
-    //   const controlContainerstatic = TextboxComponent.controlContainerstatic;
-    //   const formGroup = controlContainerstatic.control as FormGroup;
-    //   for (const key in errors) {
-    //     if (errors.hasOwnProperty(key)) {
-    //       for (const iterator of errors[key]) {
-    //         const formControl = formGroup.get(key) as FormControl;
-    //         formControl.setErrors({ "FluentApi": iterator });
-    //         formControl.markAsTouched();
-    //       }
-    //     }
-    //   }
-    // }
     ngOnInit() {
         this.controlValidationService.isCreatedBefor = false;
+        if (!this.options.MaxLength)
+            this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
         if (!this.options.ViewType)
             this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.MaskPattern != null && this.options.MaskPattern != "") {
@@ -4322,6 +4676,9 @@ class TextboxComponent {
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
         this.getCustomErrorsMassages();
+        if (this.options.IsRequired) {
+            this.validationRules.push(Validators.required);
+        }
         switch (this.options.Type) {
             case InputType.Email:
                 this.validationRules.push(Validators.compose([
@@ -4333,7 +4690,12 @@ class TextboxComponent {
                 this.options.Placeholder = this.MaskPattern;
                 break;
             case InputType.Number:
-                this.validationRules.push(Validators.pattern('^[0-9]+(\.?[0-9]+)?$'));
+                this.validationRules.push(Validators.compose([
+                    this.controlUtility.patternValidator(/^[0-9]*$/, { IntegerNumberValidationKey: "" }),
+                ]));
+                this.validationRules.push(Validators.compose([
+                    this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: "" }),
+                ]));
                 if (this.options.NumberRange != null) {
                     this.validationRules.push(Validators.min(this.options.NumberRange.From));
                     this.validationRules.push(Validators.max(this.options.NumberRange.To));
@@ -4375,9 +4737,9 @@ class TextboxComponent {
         }
         if (this.options.MaxLength > 0) {
             this.validationRules.push(Validators.maxLength(this.options.MaxLength));
-        }
-        if (this.options.IsRequired) {
-            this.validationRules.push(Validators.required);
+            if (!this.options.MaxLengthWarningLimit)
+                this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
+            this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
         }
         this.TextBoxFormControl.setValidators(this.validationRules);
         this.TextBoxFormControl.setAsyncValidators(this.validationRulesasync);
@@ -4407,8 +4769,11 @@ class TextboxComponent {
         return this.controlUtility.getInputType(type);
     }
     trimControlValue() {
-        let OrignalValue = this.controlUtility.trimControlValue(this.TextBoxFormControl.value);
-        this.TextBoxFormControl.patchValue(OrignalValue);
+        let originalValue = this.controlUtility.trimControlValue(this.TextBoxFormControl.value);
+        this.TextBoxFormControl.patchValue(originalValue);
+        if (this.options.PatchFunction && this.options.PatchPath && this.TextBoxFormControl.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
     }
     copyInputMessage(inputElement) {
         this.controlUtility.CopyInputMessage(inputElement);
@@ -4424,6 +4789,11 @@ class TextboxComponent {
         this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
     }
     onTextChange() {
+        if (this.options.Type == InputType.Number)
+            if (!this.TextBoxFormControl.value) {
+                this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: "" });
+                return;
+            }
         if (this.TextBoxFormControl.value == "") {
             this.WordCountArray = 0;
             this.WordCount = 0;
@@ -4441,18 +4811,46 @@ class TextboxComponent {
                     this.WordCount = this.WordCountArray;
                 }
             }
+            //Check for maxlength limit count
+            //MaxLength should be gretaer than or equals chars limit so that minCharsLimit would be >= 0
+            if (this.options.MaxLength && this.minCharsLimit >= 0) {
+                this.currentCharsCount = this.TextBoxFormControl.value.length;
+                if (this.currentCharsCount >= this.minCharsLimit) {
+                    this.showCharsLimitMsg = true;
+                    this.hasCharsLimitValidationError = true;
+                    if (this.currentCharsCount == this.options.MaxLength)
+                        this.charsLimitMsgClass = "danger";
+                    else
+                        this.charsLimitMsgClass = "warning";
+                }
+                else {
+                    this.showCharsLimitMsg = false;
+                    this.hasCharsLimitValidationError = false;
+                }
+                var max = this.options.MaxLength;
+                var current = this.currentCharsCount;
+                var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+                this.maxLimitWarningMsg = eval('`' + resource + '`');
+            }
         }
         this.OnChange.emit(this.TextBoxFormControl.value);
     }
-    showWordCount(value) {
-        this.IsShowWordCount = value;
+    onFocus(isFocus) {
+        this.IsShowWordCount = isFocus;
+        //onFocus
+        if (isFocus) {
+            if (this.hasCharsLimitValidationError) //check if there was previous validation error
+                this.showCharsLimitMsg = true;
+        }
+        else //onFocusOut
+            this.showCharsLimitMsg = false;
     }
 }
 TextboxComponent.controlContainerstatic = null;
 TextboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-TextBox',
-                template: "<div class=\"b-control b-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n      <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern!=null&&MaskPattern!=''\">\r\n        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n          <span [inlineSVG]=\"options.Icon\"></span>\r\n        </div>\r\n        <input [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n               class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n               dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n               aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n               type=\"{{getInputType(options.Type)}}\"\r\n               [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n               placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n               (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n               (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n               #userinput>\r\n        <div class=\"input-group-append\">\r\n          <span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n            <i class=\"fas fa-copy\"></i>\r\n          </span>\r\n        </div>\r\n        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n      </div>\r\n\r\n      <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern==null||MaskPattern==''\">\r\n        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n          <span [inlineSVG]=\"options.Icon\"></span>\r\n        </div>\r\n        <input class=\"form-control bnsights-control {{options.ExtraClasses}} \"\r\n               dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n               (focus)=\"showWordCount(true)\" (focusout)=\"showWordCount(false)\"\r\n                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n               [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n               placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n               (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n               (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n               #userinput>\r\n        <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n          <span class=\"input-group-text\" (click)=\"copyInputMessage(userinput)\">\r\n            <i class=\"fas fa-copy\"></i>\r\n          </span>\r\n        </div>\r\n        <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n      </div>\r\n      <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n           *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n        {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n      </div>\r\n      <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-textbox\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n      <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern!=null&&MaskPattern!=''\">\r\n        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n          <span [inlineSVG]=\"options.Icon\"></span>\r\n        </div>\r\n        <input [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n               class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n               dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n               aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n               type=\"{{getInputType(options.Type)}}\"\r\n               [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n               placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n               (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n               (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n               #userinput>\r\n        <div class=\"input-group-append\">\r\n          <span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n            <i class=\"fas fa-copy\"></i>\r\n          </span>\r\n        </div>\r\n        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n      </div>\r\n\r\n      <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern==null||MaskPattern==''\">\r\n        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n          <span [inlineSVG]=\"options.Icon\"></span>\r\n        </div>\r\n        <input class=\"form-control bnsights-control {{options.ExtraClasses}} \"\r\n               dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n               (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n               [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n               placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n               (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n               (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n               #userinput>\r\n        <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n          <span class=\"input-group-text\" (click)=\"copyInputMessage(userinput)\">\r\n            <i class=\"fas fa-copy\"></i>\r\n          </span>\r\n        </div>\r\n        <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n      </div>\r\n      <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n           *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n        {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n      </div>\r\n      <div *ngIf=\"showCharsLimitMsg\">\r\n        <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n          {{maxLimitWarningMsg}}\r\n        </span>\r\n      </div>\r\n      <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
             },] }
 ];
@@ -4709,6 +5107,10 @@ class MapAutoCompleteComponent {
         this.MapAutoCompleteModel.Longitude = location.longitude;
         this.MapAutoCompleteFormControl.setValue(null);
         this.MapAutoCompleteFormControl.setValue(this.MapAutoCompleteModel);
+        let originalValue = this.MapAutoCompleteFormControl.value;
+        if (this.options.PatchFunction && this.options.PatchPath && this.MapAutoCompleteFormControl.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+        }
     }
     GermanAddressMapped(result) {
         this.MapAutoCompleteModel == new MapAutocompleteDTO();
@@ -4977,23 +5379,7 @@ class FormComponent {
                 this.utilityService.notifyErrorMessage();
         }
         else {
-            debugger;
-            if (err.status == 400) {
-                this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new RequestOptionsModel(), this.fromName);
-            }
-            else if (err.status == 401) {
-                this.router.navigate(["/Admin/account/login"]);
-            }
-            else if (err.status == 510) {
-                errorMessage = this.utilityService.getCurrentLanguage() == "en" ? "Can not delete this item as it is related to others" : "لا يمكن حذف هذا العنصر لأنه مرتبط بعناصر أخرى";
-                if (!this.options.DisableErrorNotification)
-                    this.utilityService.notifyErrorMessage(errorMessage);
-            }
-            else {
-                errorMessage = `error message is: ${err.error ? err.error.Message : err.message}`;
-                if (!this.options.DisableErrorNotification)
-                    this.utilityService.notifyErrorMessage(errorMessage);
-            }
+            this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new RequestOptionsModel(), this.fromName);
         }
         if (!this.options.DisableBlockUI)
             this.utilityService.stopBlockUI();
@@ -5344,13 +5730,18 @@ var ForceDirection;
     ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
 })(ForceDirection || (ForceDirection = {}));
 
-class DatePickerOptions {
+class ControlOptionsBase {
     constructor() {
-        /**  to set type of view  if DatePicker is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
+        /**  to set type of view  if Control is Vertical or Horizontal */
+        this.ViewType = null;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
         this.CustomValidation = [];
+    }
+}
+
+class DatePickerOptions extends ControlOptionsBase {
+    constructor() {
+        super(...arguments);
         /**To set  First Day Of Week  to DatePicker */
         this.FirstDayOfWeek = 1;
         /**To set PickerType to DatePicker  is Calendar or Timer Or Both */
@@ -5360,17 +5751,16 @@ class DatePickerOptions {
         /**To set SelectMode to DatePicker  is Single or Range */
         this.SelectMode = SelectMode.Single;
         this.ForceDirection = ForceDirection.English;
+        /**Name of DatePicker control to compare value with it   */
+        this.StartControlToCompareWith = null;
     }
 }
 
-class DropdownOptions {
+class DropdownOptions extends ControlOptionsBase {
     constructor() {
+        super(...arguments);
         /** Disable Bootstrap DropdownList */
         this.DisableBootstrapSelect = false;
-        /**  to set type of view  if DropdownList is Vertical or Horizontal */
-        this.ViewType = null;
-        /**  To Set Custom Validation*/
-        this.CustomValidation = [];
         /** Set key for item in  DropdownList  */
         this.ItemTempletkey = "key";
         /** Set value for item in  DropdownList  */
@@ -5379,27 +5769,19 @@ class DropdownOptions {
     }
 }
 
-class FileUploadOptions {
+class FileUploadOptions extends ControlOptionsBase {
     constructor() {
+        super(...arguments);
         /** Ability to set  FileInput required */
         this.IsMultipleFile = false;
         /** Sets  boolean Value to Show IsDropZone Or Not   */
         this.IsDropZone = false;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
     }
 }
 
-class HtmlEditorOptions {
+class HtmlEditorOptions extends ControlOptionsBase {
     constructor() {
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
+        super(...arguments);
         /** to set Direction of HtmlEditor  if HtmlEditor is Arabic or English  */
         this.ForceDirection = ForceDirection.English;
         /** Set Height For  */
@@ -5417,45 +5799,26 @@ var ImageType;
     ImageType["None"] = "";
 })(ImageType || (ImageType = {}));
 
-class ImageUploadOptions {
+class ImageUploadOptions extends ControlOptionsBase {
     constructor() {
+        super(...arguments);
         /** Allow to Upload Multiple File  */
         this.IsMultiple = false;
         /** Allow to Use Drop Zone  */
         this.AllowDropZone = false;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
-        /**  to set type of view  if FileInput is Vertical or Horizontal */
-        this.ViewType = null;
         /** Set List of Custom Attribute to FileInput  */
         this.FileUploadAcceptsTypes = [ImageType.ImageTypes];
     }
 }
 
-class MapAutoCompleteOptions {
-    constructor() {
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /**  to set type of view  if MapAutoComplete is Vertical or Horizontal */
-        this.ViewType = null;
-    }
+class MapAutoCompleteOptions extends ControlOptionsBase {
 }
 
-class PhoneOptions {
+class PhoneOptions extends ControlOptionsBase {
     constructor() {
-        /**
-      *   Represent Css classes to Phonebox
-      */
-        this.ExtraClasses = "form-control bnsights-control";
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-       */
-        this.CustomValidation = [];
+        super(...arguments);
         /**Set List Of Countries As Preferred Countries*/
         this.PreferredCountries = [];
-        /**  to set type of view  if Phonebox is Vertical or Horizontal */
-        this.ViewType = null;
         this.ForceDirection = ForceDirection.English;
     }
 }
@@ -5463,13 +5826,9 @@ class PhoneOptions {
 class RangeNumber {
 }
 
-class TextAreaOptions {
+class TextAreaOptions extends ControlOptionsBase {
     constructor() {
-        /**  to set type of view  if TextArea is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
+        super(...arguments);
         /** to set Direction of TextArea  if TextArea is Arabic or English  */
         this.ForceDirection = ForceDirection.English;
     }
@@ -5481,17 +5840,13 @@ var IconPosition;
     IconPosition[IconPosition["right"] = 2] = "right";
 })(IconPosition || (IconPosition = {}));
 
-class TextBoxOptions {
+class TextBoxOptions extends ControlOptionsBase {
     constructor() {
+        super(...arguments);
         /** set Range Number to Textbox with type number with From-Value and To-value*/
         this.NumberRange = new RangeNumber();
         /**Prevent AutoComplete of textbox*/
         this.AutoComplete = "off";
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
         /** to set Direction of textbox  if textbox is Arabic or English  */
         this.ForceDirection = null;
         /** to set Language of textbox  if textbox language is Arabic or English  */
@@ -5504,9 +5859,9 @@ class TextBoxOptions {
     }
 }
 
-class ToggleSlideOptions {
+class ToggleSlideOptions extends ControlOptionsBase {
     constructor() {
-        this.ViewType = null;
+        super(...arguments);
         this.ForceDirection = ForceDirection.English;
     }
 }
@@ -6365,6 +6720,42 @@ RepeaterTableComponent.propDecorators = {
     options: [{ type: Input }]
 };
 
+class BBSFDateTimePipe {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+    }
+    transform(value) {
+        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
+        return latest_date;
+    }
+}
+BBSFDateTimePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'bbsfDateTime'
+            },] }
+];
+BBSFDateTimePipe.ctorParameters = () => [
+    { type: DatePipe }
+];
+
+class BBSFDatePipe {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+    }
+    transform(value) {
+        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
+        return latest_date;
+    }
+}
+BBSFDatePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'bbsfDate'
+            },] }
+];
+BBSFDatePipe.ctorParameters = () => [
+    { type: DatePipe }
+];
+
 let options;
 let AppInjector;
 FullCalendarModule.registerPlugins([
@@ -6412,7 +6803,9 @@ BBSFControlsModule.decorators = [
                     RepeaterFieldBuilderComponent,
                     NgTemplateNameDirective,
                     RepeaterItemFieldComponent,
-                    RepeaterTableComponent
+                    RepeaterTableComponent,
+                    BBSFDateTimePipe,
+                    BBSFDatePipe
                 ],
                 imports: [
                     CommonModule,
@@ -6461,7 +6854,7 @@ BBSFControlsModule.decorators = [
                     AutocompleteLibModule,
                     BBSFUtilitiesModule,
                     InlineSVGModule.forRoot(),
-                    SweetAlert2Module
+                    SweetAlert2Module,
                 ],
                 providers: [
                     ErrorMassageValidation,
@@ -6472,6 +6865,8 @@ BBSFControlsModule.decorators = [
                     NgbModal,
                     NgbActiveModal,
                     DatePipe,
+                    BBSFDateTimePipe,
+                    BBSFDatePipe,
                     RenderComponentService,
                     { provide: OWL_DATE_TIME_LOCALE, useValue: ɵ0 },
                 ],
@@ -6507,7 +6902,9 @@ BBSFControlsModule.decorators = [
                     RepeaterFieldBuilderComponent,
                     NgTemplateNameDirective,
                     RepeaterItemFieldComponent,
-                    RepeaterTableComponent
+                    RepeaterTableComponent,
+                    BBSFDateTimePipe,
+                    BBSFDatePipe
                 ]
             },] }
 ];
@@ -6519,7 +6916,7 @@ BBSFControlsModule.ctorParameters = () => [
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-const environment = Object.assign({}, window.Envirnment);
+const environment = Object.assign({}, window.Environment);
 /*
  * In development mode, to ignore zone related error stack frames such as
  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
@@ -6528,6 +6925,19 @@ const environment = Object.assign({}, window.Envirnment);
  */
 // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
 
+class MultilingualControlOptionsBase {
+    constructor() {
+        /**  to set type of view  if MultipleLanguageText is Vertical or Horizontal */
+        this.ViewType = null;
+        /**To Set Value To MultipleLanguageText with Object From Type "EnglishArabicDTO" */
+        this.Value = new EnglishArabicDTO();
+        /**To Set LanguageMode To MultipleLanguageText */
+        this.LanguageMode = null;
+        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
+        this.CustomValidation = [];
+    }
+}
+
 class CustomValidation {
 }
 class CustomValidator {
@@ -6542,17 +6952,9 @@ class CustomValidator {
     }
 }
 
-class MultiLingualTextBoxOptions {
+class MultiLingualTextBoxOptions extends MultilingualControlOptionsBase {
     constructor() {
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /**To Set Value To MultipleLanguageText with Object From Type "EnglishArabicDTO" */
-        this.Value = new EnglishArabicDTO();
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-        /**To Set LanguageMode To MultipleLanguageText */
-        this.LanguageMode = null;
+        super(...arguments);
         this.IconPositionEN = IconPosition.left;
         this.IconPositionAR = IconPosition.right;
         /*multi control placement type*/
@@ -6563,29 +6965,19 @@ class MultiLingualTextBoxOptions {
 class Attribute {
 }
 
-class MultiLingualTextAreaOptions {
+class MultiLingualTextAreaOptions extends MultilingualControlOptionsBase {
     constructor() {
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /**To Set Value To MultipleLanguageText with Object From Type "EnglishArabicDTO" */
-        this.Value = new EnglishArabicDTO();
-        /**  to set type of view  if MultilingualTextArea is Vertical or Horizontal */
-        this.ViewType = null;
-        /**To Set LanguageMode To MultipleLanguageText */
-        this.LanguageMode = null;
+        super(...arguments);
         /*multi control placement type*/
         this.MultiControlPlacementType = null;
     }
 }
 
-class CheckBoxOptions {
+class CheckBoxOptions extends ControlOptionsBase {
     constructor() {
+        super(...arguments);
         /**To set  value  to CheckBox */
         this.Value = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-     */
-        this.CustomValidation = [];
         this.ForceDirection = ForceDirection.English;
     }
 }
@@ -6593,30 +6985,18 @@ class CheckBoxOptions {
 class DropdownListItem {
 }
 
-class MultiLingualHtmlEditorOptions {
+class MultiLingualHtmlEditorOptions extends MultilingualControlOptionsBase {
     constructor() {
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-        /**To Set Value To MultipleLanguageText with Object From Type "EnglishArabicDTO" */
-        this.Value = new EnglishArabicDTO();
-        /**  to set type of view  if MultipleLanguageText is Vertical or Horizontal */
-        this.ViewType = null;
+        super(...arguments);
         /** Set Height For  */
         this.Height = 150;
-        /**To Set LanguageMode To MultipleLanguageText */
-        this.LanguageMode = null;
     }
 }
 
-class ProfileImageUploadOptions {
+class ProfileImageUploadOptions extends ControlOptionsBase {
     constructor() {
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
+        super(...arguments);
         this.AllowDropZone = false;
-        this.CustomValidation = [];
-        /**  to set type of view  if FileInput is Vertical or Horizontal */
-        this.ViewType = null;
         /** Set List of Custom Attribute to FileInput  */
         this.ImageUploadAcceptsTypes = [ImageType.ImageTypes];
     }
@@ -6650,8 +7030,9 @@ class UploadPersonalImage {
     }
 }
 
-class CalendarOptions {
+class CalendarOptions extends ControlOptionsBase {
     constructor() {
+        super(...arguments);
         /** Represent DefaultView Of Calendar*/
         this.DefaultView = CalendarView.Month;
         /** Represent CalendarViews Of Calendar*/
@@ -6669,21 +7050,15 @@ class CalendarOptions {
 class CalendarEventDTO {
 }
 
-class AutocompleteOptions {
+class AutocompleteOptions extends ControlOptionsBase {
     constructor() {
-        /**
-      *   Represent classes to textbox that allow us to select the AutoComplete by jquery or javascript
-      */
+        super(...arguments);
+        /**Represent classes to textbox that allow us to select the AutoComplete by jquery or javascript */
         this.ValidationToken = null;
         /**To set  value  to textbox */
         this.Value = null;
         /** set Range Number to Textbox with type number with From-Value and To-value*/
         this.NumberRange = new RangeNumber();
-        /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
         /** to set Direction of textbox  if textbox is Arabic or English  */
         this.ForceDirection = ForceDirection.English;
         /** allow add  value of  AutoComplete dosn't exist in list*/
@@ -6698,15 +7073,9 @@ class AutocompleteOptions {
 class TagsInputDTO {
 }
 
-class TagsInputOptions {
+class TagsInputOptions extends ControlOptionsBase {
     constructor() {
-        /**To set  value  to tagsinput */
-        this.Value = null;
-        /**  to set type of view  if tagsinput is Vertical or Horizontal */
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-        */
-        this.CustomValidation = [];
+        super(...arguments);
         /** to set Direction of tagsinput  if tagsinput is Arabic or English  */
         this.ForceDirection = ForceDirection.English;
         /**Remove Last When User Click On Backspace */
@@ -6791,13 +7160,7 @@ class PagingOptions {
     }
 }
 
-class RadioButtonOptions {
-    constructor() {
-        this.ViewType = null;
-        /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-      */
-        this.CustomValidation = [];
-    }
+class RadioButtonOptions extends ControlOptionsBase {
 }
 
 class RadioButtonItem {
@@ -6871,7 +7234,6 @@ class RepeaterField {
 
 class RepeaterOptions {
     constructor() {
-        this.MinRequiredItems = 1;
         this.ActionLabelKey = "";
         this.AddButtonText = "Add";
         this.DeleteButtonText = "Delete";
@@ -7203,5 +7565,5 @@ var FileType;
  * Generated bundle index. Do not edit.
  */
 
-export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageType, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, PropertyLocation, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0 };
+export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageType, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, PropertyLocation, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0 };
 //# sourceMappingURL=bnsights-bbsf-controls.js.map