@bnsights/bbsf-controls 1.0.32 → 1.0.35

package/bundles/bnsights-bbsf-controls.umd.js

@@ -90,6 +90,12 @@
                 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;
@@ -105,6 +111,9 @@
                 case "EnglishLetterOnly":
                     result = this.utilityService.getResourceValue("EnglishLetterOnly");
                     break;
+                case "ArabicIsRequiredAndOnly50CharactersEnglish":
+                    result = this.utilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
+                    break;
                 case "PasswordComplexityHasCapitalLetter":
                     result = this.utilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
                     break;
@@ -135,6 +144,12 @@
                 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;
             }
@@ -162,9 +177,10 @@
     })(exports.InputType || (exports.InputType = {}));
 
     var ControlUtility = /** @class */ (function () {
-        function ControlUtility(ErrorHandler, controlValidationService) {
+        function ControlUtility(ErrorHandler, controlValidationService, utilityService) {
             this.ErrorHandler = ErrorHandler;
             this.controlValidationService = controlValidationService;
+            this.utilityService = utilityService;
         }
         ControlUtility.prototype.getErrorValidation = function (Errorsitem, CustomValidation) {
             var _this = this;
@@ -197,6 +213,41 @@
                 return valid ? null : error;
             };
         };
+        ControlUtility.prototype.patchControlValue = function (originalValue, PatchFunction, PatchPath) {
+            var _this = this;
+            var patchOp = [{
+                    op: "replace",
+                    path: PatchPath,
+                    value: originalValue
+                }];
+            var patchService = PatchFunction.call(null, patchOp);
+            patchService.subscribe(function (r) { return console.log(r); }, function (erorr) { return _this.utilityService.notifyErrorMessage(erorr); });
+        };
+        ControlUtility.prototype.arabicValidator = function (error) {
+            return function (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;
+                }
+            };
+        };
         ControlUtility.prototype.getInputType = function (type) {
             return exports.InputType[type];
         };
@@ -283,7 +334,8 @@
     ];
     ControlUtility.ctorParameters = function () { return [
         { type: ErrorMassageValidation },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: bbsfUtilities.UtilityService }
     ]; };
 
     exports.PickerType = void 0;
@@ -344,9 +396,37 @@
             this.markAllAsTouched = false;
             this.validationRules = [];
             this.validationRulesasync = [];
+            this.comparedControl = null;
+            this.dateError = false;
             this.resetError = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
+            this.checkIfEndDateAfterStartDate = function () {
+                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 = function () {
+                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 = function () {
                 _this.controlUtility.RemoveRequiredValidation(_this.DatePickerFormControl, _this.validationRules, _this.options);
@@ -389,11 +469,17 @@
             }
             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(function (value) {
                 _this.group.markAllAsTouched();
                 _this.markAllAsTouched = true;
@@ -445,7 +531,24 @@
             }
             this.DatePickerFormControl.setValue(DateValue);
             this.onChangeService.ChangeValue(this.options.Name);
-            this.OnChange.emit(DateValue);
+            var 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);
+        };
+        DateInputComponent.prototype.subscribeDateChanges = function () {
+            var _this = this;
+            var startDateChanges = this.comparedControl.valueChanges;
+            var endDateChanges = this.group.get(this.options.Name).valueChanges;
+            startDateChanges.subscribe(function (start) {
+                _this.comparedControl.addValidators(_this.checkIfStartDateBeForEndDate);
+                _this.comparedControl.updateValueAndValidity();
+            });
+            endDateChanges.subscribe(function (end) {
+                _this.DatePickerFormControl.addValidators(_this.checkIfEndDateAfterStartDate);
+                _this.DatePickerFormControl.updateValueAndValidity();
+            });
         };
         return DateInputComponent;
     }());
@@ -517,6 +620,14 @@
             /**To Set LanguageMode To MultipleLanguageText */
             this.LanguageMode = exports.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";
         }
         return GlobalSettings;
     }());
@@ -738,7 +849,6 @@
                         this_1.uploader.queue = [];
                         return { value: void 0 };
                     }
-                    debugger;
                     var reader_1 = new FileReader();
                     var fileObject = file.rawFile;
                     reader_1.readAsDataURL(fileObject);
@@ -768,7 +878,11 @@
                             _this.group.get(_this.options.Name).setValue(_this.multipleFileUploadModel);
                         }
                     };
-                    this_1.OnChange.emit(this_1.group.get(this_1.options.Name).value);
+                    var originalValue = this_1.group.get(this_1.options.Name).value;
+                    if (this_1.options.PatchFunction && this_1.options.PatchPath && this_1.group.get(this_1.options.Name).valid) {
+                        this_1.controlUtility.patchControlValue(originalValue, this_1.options.PatchFunction, this_1.options.PatchPath);
+                    }
+                    this_1.OnChange.emit(originalValue);
                 }
             };
             var this_1 = this;
@@ -779,7 +893,6 @@
             }
         };
         FileUploadComponent.prototype.removeFromControlValue = function (item) {
-            debugger;
             if (this.options.IsMultipleFile == false) {
                 this.fileUploadModel = null;
                 if (this.options.IsRequired == true) {
@@ -1205,6 +1318,16 @@
             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 = function () {
                 _this.controlUtility.RemoveRequiredValidation(_this.ArabicFormControl, _this.EnglishValidationRules, _this.options);
@@ -1234,12 +1357,12 @@
             this.CurrentLanguage = translate.currentLang != undefined ? translate.currentLang : translate.defaultLang;
         }
         MultiLingualTextBoxComponent.prototype.getCustomErrorsMassages = function () {
-            this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicLetterOnly");
+            this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
             this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
         };
         MultiLingualTextBoxComponent.prototype.ngOnInit = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var _a, Validations, index, Validation, Validations, index, Validation;
+                var _a, Validations, index, Validation;
                 var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
@@ -1267,6 +1390,8 @@
                                 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 != "")
@@ -1279,14 +1404,6 @@
                                     this.ArabicValidationRules.push(Validation.functionBody);
                                 }
                             }
-                            if (this.options.CustomValidation.length > 0) {
-                                Validations = this.options.CustomValidation;
-                                for (index = 0; index < Validations.length; index++) {
-                                    Validation = Validations[index];
-                                    this.EnglishValidationRules.push(Validation.functionBody);
-                                    this.ArabicValidationRules.push(Validation.functionBody);
-                                }
-                            }
                             if (this.options.MinLength > 0) {
                                 this.ArabicValidationRules.push(forms.Validators.minLength(this.options.MinLength));
                                 this.EnglishValidationRules.push(forms.Validators.minLength(this.options.MinLength));
@@ -1294,10 +1411,13 @@
                             if (this.options.MaxLength > 0) {
                                 this.EnglishValidationRules.push(forms.Validators.maxLength(this.options.MaxLength));
                                 this.ArabicValidationRules.push(forms.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(forms.Validators.compose([
-                                this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
+                                this.controlUtility.arabicValidator({ ArabicIsRequiredAndOnly50CharactersEnglish: this.ArabicLetterOnly }),
                             ]));
                             this.EnglishValidationRules.push(forms.Validators.compose([
                                 this.controlUtility.patternValidator(/^[\x00-\x7F]*$/, { EnglishLetterOnly: this.EnglishLetterOnly }),
@@ -1346,6 +1466,27 @@
                         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;
@@ -1367,6 +1508,27 @@
                         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 + '`');
+                }
             }
             var mulitLangModel = new EnglishArabicDTO();
             mulitLangModel.Arabic = arabicValue;
@@ -1399,13 +1561,21 @@
         MultiLingualTextBoxComponent.prototype.trimControlValue = function (type) {
             var whitespace = ' ';
             if (type == "En") {
+                var 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") {
+                var 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);
                 }
             }
         };
@@ -1486,11 +1656,25 @@
             this.ArabicFormControl.updateValueAndValidity();
             this.EnglishFormControl.updateValueAndValidity();
         };
-        MultiLingualTextBoxComponent.prototype.showArabicWordCount = function (value) {
-            this.IsShowArabicWordCount = value;
+        MultiLingualTextBoxComponent.prototype.onArabicFocus = function (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;
         };
-        MultiLingualTextBoxComponent.prototype.showEnglishWordCount = function (value) {
-            this.IsShowEnglishWordCount = value;
+        MultiLingualTextBoxComponent.prototype.onEnglishFocus = function (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;
         };
         return MultiLingualTextBoxComponent;
     }());
@@ -1498,7 +1682,7 @@
     MultiLingualTextBoxComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -1533,6 +1717,12 @@
             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 = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -1563,6 +1753,8 @@
             this.controlValidationService.isCreatedBefor = false;
             this.group.addControl(this.options.Name, new forms.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 != "")
@@ -1580,6 +1772,9 @@
             }
             if (this.options.MaxLength > 0) {
                 this.validationRules.push(forms.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(forms.Validators.required);
@@ -1611,8 +1806,11 @@
             return this.controlUtility.getInputType(type);
         };
         TextAreaComponent.prototype.trimControlValue = function () {
-            var OrignalValue = this.controlUtility.trimControlValue(this.TextAreaFormControl.value);
-            this.TextAreaFormControl.patchValue(OrignalValue);
+            var 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);
+            }
         };
         TextAreaComponent.prototype.copyInputMessage = function (inputElement) {
             this.controlUtility.CopyInputMessage(inputElement);
@@ -1636,10 +1834,38 @@
                     }
                 }
             }
+            //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);
         };
-        TextAreaComponent.prototype.showWordCount = function (value) {
-            this.IsShowWordCount = value;
+        TextAreaComponent.prototype.onFocus = function (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;
         };
         return TextAreaComponent;
     }());
@@ -1647,7 +1873,7 @@
     TextAreaComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -1691,6 +1917,16 @@
             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 = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -1722,7 +1958,7 @@
             MultiLingualTextAreaComponent.controlContainerstatic = this.controlContainer;
         }
         MultiLingualTextAreaComponent.prototype.getCustomErrorsMassages = function () {
-            this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicLetterOnly");
+            this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
             this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
         };
         MultiLingualTextAreaComponent.prototype.ngOnInit = function () {
@@ -1747,6 +1983,8 @@
                                 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 != "")
@@ -1787,10 +2025,13 @@
                             if (this.options.MaxLength > 0) {
                                 this.EnglishValidationRules.push(forms.Validators.maxLength(this.options.MaxLength));
                                 this.ArabicValidationRules.push(forms.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(forms.Validators.compose([
-                                this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
+                                this.controlUtility.arabicValidator({ ArabicIsRequiredAndOnly50CharactersEnglish: this.ArabicLetterOnly }),
                             ]));
                             this.EnglishValidationRules.push(forms.Validators.compose([
                                 this.controlUtility.patternValidator(/^[\x00-\x7F]*$/, { EnglishLetterOnly: this.EnglishLetterOnly }),
@@ -1837,6 +2078,27 @@
                         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;
@@ -1858,6 +2120,27 @@
                         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 + '`');
+                }
             }
             var mulitLangModel = new EnglishArabicDTO();
             mulitLangModel.Arabic = arabicValue;
@@ -1881,13 +2164,21 @@
         MultiLingualTextAreaComponent.prototype.trimControlValue = function (type) {
             var whitespace = ' ';
             if (type == "En") {
+                var 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") {
+                var 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);
                 }
             }
         };
@@ -1968,11 +2259,25 @@
             this.ArabicTextAreaFormControl.updateValueAndValidity();
             this.EnglishTextAreaFormControl.updateValueAndValidity();
         };
-        MultiLingualTextAreaComponent.prototype.showArabicWordCount = function (value) {
-            this.IsShowArabicWordCount = value;
+        MultiLingualTextAreaComponent.prototype.onArabicFocus = function (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;
         };
-        MultiLingualTextAreaComponent.prototype.showEnglishWordCount = function (value) {
-            this.IsShowEnglishWordCount = value;
+        MultiLingualTextAreaComponent.prototype.onEnglishFocus = function (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;
         };
         return MultiLingualTextAreaComponent;
     }());
@@ -1980,7 +2285,7 @@
     MultiLingualTextAreaComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -2082,6 +2387,10 @@
         };
         CheckBoxComponent.prototype.onValueChanged = function () {
             this.OnChange.emit(this.CheckBoxFormControl.value);
+            var 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);
+            }
         };
         return CheckBoxComponent;
     }());
@@ -2220,7 +2529,11 @@
         };
         DropdownListComponent.prototype.onItemSelect = function (item) {
             this.onChangeService.ChangeValue(this.options.Name);
-            this.OnChange.emit(item);
+            var 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)
         };
         DropdownListComponent.prototype.Clear = function () {
@@ -2367,7 +2680,11 @@
         };
         PhoneComponent.prototype.onValueChanged = function () {
             var Number = this.PhoneFormControl.value.internationalNumber;
-            this.OnChange.emit(Number.trim());
+            var 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);
         };
         return PhoneComponent;
     }());
@@ -2405,6 +2722,7 @@
             this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.SlideValue = false;
+            this.markAllAsTouched = false;
             ToggleslideComponent.controlContainerstatic = this.controlContainer;
         }
         ToggleslideComponent.prototype.ngOnInit = function () {
@@ -2432,12 +2750,22 @@
         ToggleslideComponent.prototype.resetError = function () {
             this.controlValidationService.RemoveGlobalError();
         };
-        ToggleslideComponent.prototype.getErrorValidation = function (Errorsitem) {
-            return this.controlUtility.getErrorValidation(Errorsitem, this.options.CustomValidation);
+        ToggleslideComponent.prototype.showGlobalError = function () {
+            this.controlUtility.showGlobalError();
+        };
+        ToggleslideComponent.prototype.getErrorValidation = function (ErrorList) {
+            if (this.markAllAsTouched && this.group.invalid) {
+                this.showGlobalError();
+                this.markAllAsTouched = false;
+            }
+            return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
         };
         ToggleslideComponent.prototype.changeValueToggle = function () {
             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);
+            }
         };
         return ToggleslideComponent;
     }());
@@ -2644,7 +2972,11 @@
         };
         HtmlEditorComponent.prototype.onValueChanged = function () {
             this.HtmlEditorFormControl.setValue(this.HtmlEditorFormControl.value.trim());
-            this.OnChange.emit(this.HtmlEditorFormControl.value);
+            var 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);
         };
         return HtmlEditorComponent;
     }());
@@ -2942,8 +3274,13 @@
             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);
+                    var originalValue = this.englishValue;
+                    if (this.options.PatchFunction && this.options.PatchPath && this.EnglishHtmlEditorFormControl.valid) {
+                        this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                    }
+                }
                 var EngliswordCountArray = this.EnglishHtmlEditorFormControl.value.split(" ").length;
                 if (EngliswordCountArray > 0) {
                     if (EngliswordCountArray > this.options.MaxWordCount)
@@ -2955,8 +3292,13 @@
             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);
+                    var originalValue = this.arabicValue;
+                    if (this.options.PatchFunction && this.options.PatchPath && this.ArabicHtmlEditorFormControl.valid) {
+                        this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+                    }
+                }
                 var ArabicwordCountArray = this.ArabicHtmlEditorFormControl.value.split(" ").length;
                 if (ArabicwordCountArray > 0) {
                     if (ArabicwordCountArray > this.options.MaxWordCount)
@@ -3062,7 +3404,7 @@
     MultiLingualHtmlEditorComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -3091,7 +3433,6 @@
             this.controlValidationService = controlValidationService;
             this.globalSettings = globalSettings;
             this.files = [];
-            this.ImageSource = "./src/assets/images/uploadimg.png";
             this.OnChange = new i0.EventEmitter();
             this.ValidationMessage = "";
             this.AcceptedType = "";
@@ -3139,8 +3480,10 @@
             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,
@@ -3299,7 +3642,11 @@
                             _this.files = [];
                             (_a = _this.files).push.apply(_a, __spreadArray([], __read(event.addedFiles)));
                         }
-                        _this.OnChange.emit(_this.ImageUploadFormControl.value);
+                        var 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);
                     };
                 }
             };
@@ -3314,6 +3661,8 @@
             var 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(forms.Validators.required);
@@ -3590,7 +3939,11 @@
                     reader_1.onload = function () {
                         _this.imageUrl = reader_1.result.toString();
                         _this.openModal(true);
-                        _this.OnChange.emit(_this.group.get(_this.options.Name).value);
+                        var 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);
                     };
                 }
             };
@@ -3932,6 +4285,10 @@
                 else {
                     this.AutocompleteTextBoxControl.setValue(item);
                     this.AutocompleteTextBoxControl.updateValueAndValidity();
+                    var 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);
                 }
             }
@@ -3942,7 +4299,6 @@
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            debugger;
                             this.Search = search;
                             this.SelectedValue = "";
                             return [4 /*yield*/, this.suggestions$.subscribe(function (result) {
@@ -3972,7 +4328,7 @@
         { type: i0.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: [""]
                 },] }
     ];
@@ -4168,7 +4524,11 @@
                     this.TagsFormControl.invalid;
                 }
             }
-            this.OnChange.emit(this.TagsFormControl.value);
+            var 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);
         };
         TagsInputComponent.prototype.onNoOptionsMatch = function (event) {
             this.IsNoMatch = event;
@@ -4411,7 +4771,6 @@
             }
             this.requestHandlerService.post(this.options.ActionPostURL, pagingDTO, null, params, null)
                 .subscribe(function (responseData) {
-                debugger;
                 _this.result = responseData.items; //this.castItems(responseData.items);
                 var castedResult = classTransformer.plainToClass(_this.options.TypeOfResponse, _this.result, { excludeExtraneousValues: true });
                 _this.Items.emit(castedResult);
@@ -4427,7 +4786,6 @@
             });
         };
         PagingComponent.prototype.castItems = function (objectArr) {
-            debugger;
             var originalArray = [];
             for (var index = 0; index < objectArr.length; index++) {
                 var element = objectArr[index];
@@ -4649,7 +5007,11 @@
             return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
         };
         RadioButtonComponent.prototype.onValueChanged = function () {
-            this.OnChange.emit(this.RadioButtonFormControl.value);
+            var 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);
         };
         return RadioButtonComponent;
     }());
@@ -4700,7 +5062,12 @@
             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 = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -4726,22 +5093,11 @@
             };
             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();
-        //       }
-        //     }
-        //   }
-        // }
         TextboxComponent.prototype.ngOnInit = function () {
             var _this = this;
             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 != "") {
@@ -4754,6 +5110,9 @@
             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(forms.Validators.required);
+            }
             switch (this.options.Type) {
                 case exports.InputType.Email:
                     this.validationRules.push(forms.Validators.compose([
@@ -4765,7 +5124,12 @@
                     this.options.Placeholder = this.MaskPattern;
                     break;
                 case exports.InputType.Number:
-                    this.validationRules.push(forms.Validators.pattern('^[0-9]+(\.?[0-9]+)?$'));
+                    this.validationRules.push(forms.Validators.compose([
+                        this.controlUtility.patternValidator(/^[0-9]*$/, { IntegerNumberValidationKey: "" }),
+                    ]));
+                    this.validationRules.push(forms.Validators.compose([
+                        this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: "" }),
+                    ]));
                     if (this.options.NumberRange != null) {
                         this.validationRules.push(forms.Validators.min(this.options.NumberRange.From));
                         this.validationRules.push(forms.Validators.max(this.options.NumberRange.To));
@@ -4807,9 +5171,9 @@
             }
             if (this.options.MaxLength > 0) {
                 this.validationRules.push(forms.Validators.maxLength(this.options.MaxLength));
-            }
-            if (this.options.IsRequired) {
-                this.validationRules.push(forms.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);
@@ -4839,8 +5203,11 @@
             return this.controlUtility.getInputType(type);
         };
         TextboxComponent.prototype.trimControlValue = function () {
-            var OrignalValue = this.controlUtility.trimControlValue(this.TextBoxFormControl.value);
-            this.TextBoxFormControl.patchValue(OrignalValue);
+            var 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);
+            }
         };
         TextboxComponent.prototype.copyInputMessage = function (inputElement) {
             this.controlUtility.CopyInputMessage(inputElement);
@@ -4856,6 +5223,11 @@
             this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
         };
         TextboxComponent.prototype.onTextChange = function () {
+            if (this.options.Type == exports.InputType.Number)
+                if (!this.TextBoxFormControl.value) {
+                    this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: "" });
+                    return;
+                }
             if (this.TextBoxFormControl.value == "") {
                 this.WordCountArray = 0;
                 this.WordCount = 0;
@@ -4873,11 +5245,39 @@
                         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);
         };
-        TextboxComponent.prototype.showWordCount = function (value) {
-            this.IsShowWordCount = value;
+        TextboxComponent.prototype.onFocus = function (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;
         };
         return TextboxComponent;
     }());
@@ -4885,7 +5285,7 @@
     TextboxComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -5153,6 +5553,10 @@
             this.MapAutoCompleteModel.Longitude = location.longitude;
             this.MapAutoCompleteFormControl.setValue(null);
             this.MapAutoCompleteFormControl.setValue(this.MapAutoCompleteModel);
+            var originalValue = this.MapAutoCompleteFormControl.value;
+            if (this.options.PatchFunction && this.options.PatchPath && this.MapAutoCompleteFormControl.valid) {
+                this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
+            }
         };
         MapAutoCompleteComponent.prototype.GermanAddressMapped = function (result) {
             this.MapAutoCompleteModel == new MapAutocompleteDTO();
@@ -5434,23 +5838,7 @@
                     this.utilityService.notifyErrorMessage();
             }
             else {
-                debugger;
-                if (err.status == 400) {
-                    this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new bbsfUtilities.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 bbsfUtilities.RequestOptionsModel(), this.fromName);
             }
             if (!this.options.DisableBlockUI)
                 this.utilityService.stopBlockUI();
@@ -5814,72 +6202,77 @@
         ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
     })(exports.ForceDirection || (exports.ForceDirection = {}));
 
-    var DatePickerOptions = /** @class */ (function () {
-        function DatePickerOptions() {
-            /**  to set type of view  if DatePicker is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
-            /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-            */
+    var ControlOptionsBase = /** @class */ (function () {
+        function ControlOptionsBase() {
+            /**  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 = [];
+        }
+        return ControlOptionsBase;
+    }());
+
+    var DatePickerOptions = /** @class */ (function (_super) {
+        __extends(DatePickerOptions, _super);
+        function DatePickerOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /**To set  First Day Of Week  to DatePicker */
-            this.FirstDayOfWeek = 1;
+            _this.FirstDayOfWeek = 1;
             /**To set PickerType to DatePicker  is Calendar or Timer Or Both */
-            this.PickerType = exports.PickerType.Calendar;
+            _this.PickerType = exports.PickerType.Calendar;
             /**To set StartView to DatePicker  is Year or Month Or Multi-Year */
-            this.StartView = exports.StartView.Month;
+            _this.StartView = exports.StartView.Month;
             /**To set SelectMode to DatePicker  is Single or Range */
-            this.SelectMode = exports.SelectMode.Single;
-            this.ForceDirection = exports.ForceDirection.English;
+            _this.SelectMode = exports.SelectMode.Single;
+            _this.ForceDirection = exports.ForceDirection.English;
+            /**Name of DatePicker control to compare value with it   */
+            _this.StartControlToCompareWith = null;
+            return _this;
         }
         return DatePickerOptions;
-    }());
+    }(ControlOptionsBase));
 
-    var DropdownOptions = /** @class */ (function () {
+    var DropdownOptions = /** @class */ (function (_super) {
+        __extends(DropdownOptions, _super);
         function DropdownOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** 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 = [];
+            _this.DisableBootstrapSelect = false;
             /** Set key for item in  DropdownList  */
-            this.ItemTempletkey = "key";
+            _this.ItemTempletkey = "key";
             /** Set value for item in  DropdownList  */
-            this.ItemTempletvalue = "value";
-            this.ForceDirection = exports.ForceDirection.English;
+            _this.ItemTempletvalue = "value";
+            _this.ForceDirection = exports.ForceDirection.English;
+            return _this;
         }
         return DropdownOptions;
-    }());
+    }(ControlOptionsBase));
 
-    var FileUploadOptions = /** @class */ (function () {
+    var FileUploadOptions = /** @class */ (function (_super) {
+        __extends(FileUploadOptions, _super);
         function FileUploadOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** Ability to set  FileInput required */
-            this.IsMultipleFile = false;
+            _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;
+            _this.IsDropZone = false;
+            return _this;
         }
         return FileUploadOptions;
-    }());
+    }(ControlOptionsBase));
 
-    var HtmlEditorOptions = /** @class */ (function () {
+    var HtmlEditorOptions = /** @class */ (function (_super) {
+        __extends(HtmlEditorOptions, _super);
         function HtmlEditorOptions() {
-            /**  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 = [];
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** to set Direction of HtmlEditor  if HtmlEditor is Arabic or English  */
-            this.ForceDirection = exports.ForceDirection.English;
+            _this.ForceDirection = exports.ForceDirection.English;
             /** Set Height For  */
-            this.Height = 150;
+            _this.Height = 150;
+            return _this;
         }
         return HtmlEditorOptions;
-    }());
+    }(ControlOptionsBase));
 
     exports.ImageType = void 0;
     (function (ImageType) {
@@ -5891,51 +6284,40 @@
         ImageType["None"] = "";
     })(exports.ImageType || (exports.ImageType = {}));
 
-    var ImageUploadOptions = /** @class */ (function () {
+    var ImageUploadOptions = /** @class */ (function (_super) {
+        __extends(ImageUploadOptions, _super);
         function ImageUploadOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** Allow to Upload Multiple File  */
-            this.IsMultiple = false;
+            _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;
+            _this.AllowDropZone = false;
             /** Set List of Custom Attribute to FileInput  */
-            this.FileUploadAcceptsTypes = [exports.ImageType.ImageTypes];
+            _this.FileUploadAcceptsTypes = [exports.ImageType.ImageTypes];
+            return _this;
         }
         return ImageUploadOptions;
-    }());
+    }(ControlOptionsBase));
 
-    var MapAutoCompleteOptions = /** @class */ (function () {
+    var MapAutoCompleteOptions = /** @class */ (function (_super) {
+        __extends(MapAutoCompleteOptions, _super);
         function MapAutoCompleteOptions() {
-            /** 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;
+            return _super !== null && _super.apply(this, arguments) || this;
         }
         return MapAutoCompleteOptions;
-    }());
+    }(ControlOptionsBase));
 
-    var PhoneOptions = /** @class */ (function () {
+    var PhoneOptions = /** @class */ (function (_super) {
+        __extends(PhoneOptions, _super);
         function PhoneOptions() {
-            /**
-          *   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 = [];
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /**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 = exports.ForceDirection.English;
+            _this.PreferredCountries = [];
+            _this.ForceDirection = exports.ForceDirection.English;
+            return _this;
         }
         return PhoneOptions;
-    }());
+    }(ControlOptionsBase));
 
     var RangeNumber = /** @class */ (function () {
         function RangeNumber() {
@@ -5943,18 +6325,16 @@
         return RangeNumber;
     }());
 
-    var TextAreaOptions = /** @class */ (function () {
+    var TextAreaOptions = /** @class */ (function (_super) {
+        __extends(TextAreaOptions, _super);
         function TextAreaOptions() {
-            /**  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 = [];
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** to set Direction of TextArea  if TextArea is Arabic or English  */
-            this.ForceDirection = exports.ForceDirection.English;
+            _this.ForceDirection = exports.ForceDirection.English;
+            return _this;
         }
         return TextAreaOptions;
-    }());
+    }(ControlOptionsBase));
 
     exports.IconPosition = void 0;
     (function (IconPosition) {
@@ -5962,37 +6342,37 @@
         IconPosition[IconPosition["right"] = 2] = "right";
     })(exports.IconPosition || (exports.IconPosition = {}));
 
-    var TextBoxOptions = /** @class */ (function () {
+    var TextBoxOptions = /** @class */ (function (_super) {
+        __extends(TextBoxOptions, _super);
         function TextBoxOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** set Range Number to Textbox with type number with From-Value and To-value*/
-            this.NumberRange = new RangeNumber();
+            _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 = [];
+            _this.AutoComplete = "off";
             /** to set Direction of textbox  if textbox is Arabic or English  */
-            this.ForceDirection = null;
+            _this.ForceDirection = null;
             /** to set Language of textbox  if textbox language is Arabic or English  */
-            this.LanguageValidation = null;
+            _this.LanguageValidation = null;
             /** Set Type of TextBox ("text","password","email","number") */
-            this.Type = exports.InputType.Text;
-            this.IconPosition = exports.IconPosition.left;
-            this.NoMargin = false;
-            this.ValidationRules = [];
+            _this.Type = exports.InputType.Text;
+            _this.IconPosition = exports.IconPosition.left;
+            _this.NoMargin = false;
+            _this.ValidationRules = [];
+            return _this;
         }
         return TextBoxOptions;
-    }());
+    }(ControlOptionsBase));
 
-    var ToggleSlideOptions = /** @class */ (function () {
+    var ToggleSlideOptions = /** @class */ (function (_super) {
+        __extends(ToggleSlideOptions, _super);
         function ToggleSlideOptions() {
-            this.ViewType = null;
-            this.ForceDirection = exports.ForceDirection.English;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.ForceDirection = exports.ForceDirection.English;
+            return _this;
         }
         return ToggleSlideOptions;
-    }());
+    }(ControlOptionsBase));
 
     var RenderComponentService = /** @class */ (function () {
         function RenderComponentService(componentFactoryResolver) {
@@ -6861,6 +7241,44 @@
         options: [{ type: i0.Input }]
     };
 
+    var BBSFDateTimePipe = /** @class */ (function () {
+        function BBSFDateTimePipe(datePipe) {
+            this.datePipe = datePipe;
+        }
+        BBSFDateTimePipe.prototype.transform = function (value) {
+            var latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
+            return latest_date;
+        };
+        return BBSFDateTimePipe;
+    }());
+    BBSFDateTimePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'bbsfDateTime'
+                },] }
+    ];
+    BBSFDateTimePipe.ctorParameters = function () { return [
+        { type: common.DatePipe }
+    ]; };
+
+    var BBSFDatePipe = /** @class */ (function () {
+        function BBSFDatePipe(datePipe) {
+            this.datePipe = datePipe;
+        }
+        BBSFDatePipe.prototype.transform = function (value) {
+            var latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
+            return latest_date;
+        };
+        return BBSFDatePipe;
+    }());
+    BBSFDatePipe.decorators = [
+        { type: i0.Pipe, args: [{
+                    name: 'bbsfDate'
+                },] }
+    ];
+    BBSFDatePipe.ctorParameters = function () { return [
+        { type: common.DatePipe }
+    ]; };
+
     var options;
     exports.AppInjector = void 0;
     angular.FullCalendarModule.registerPlugins([
@@ -6909,7 +7327,9 @@
                         RepeaterFieldBuilderComponent,
                         NgTemplateNameDirective,
                         RepeaterItemFieldComponent,
-                        RepeaterTableComponent
+                        RepeaterTableComponent,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe
                     ],
                     imports: [
                         common.CommonModule,
@@ -6958,7 +7378,7 @@
                         angularNgAutocomplete.AutocompleteLibModule,
                         bbsfUtilities.BBSFUtilitiesModule,
                         ngInlineSvg.InlineSVGModule.forRoot(),
-                        ngxSweetalert2.SweetAlert2Module
+                        ngxSweetalert2.SweetAlert2Module,
                     ],
                     providers: [
                         ErrorMassageValidation,
@@ -6969,6 +7389,8 @@
                         ngBootstrap.NgbModal,
                         ngBootstrap.NgbActiveModal,
                         common.DatePipe,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe,
                         RenderComponentService,
                         { provide: ngPickDatetime.OWL_DATE_TIME_LOCALE, useValue: ɵ0 },
                     ],
@@ -7004,7 +7426,9 @@
                         RepeaterFieldBuilderComponent,
                         NgTemplateNameDirective,
                         RepeaterItemFieldComponent,
-                        RepeaterTableComponent
+                        RepeaterTableComponent,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe
                     ]
                 },] }
     ];
@@ -7016,7 +7440,7 @@
     // 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`.
-    var environment = Object.assign({}, window.Envirnment);
+    var 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
@@ -7025,6 +7449,20 @@
      */
     // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
 
+    var MultilingualControlOptionsBase = /** @class */ (function () {
+        function MultilingualControlOptionsBase() {
+            /**  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 = [];
+        }
+        return MultilingualControlOptionsBase;
+    }());
+
     var CustomValidation = /** @class */ (function () {
         function CustomValidation() {
         }
@@ -7045,24 +7483,18 @@
         return CustomValidator;
     }());
 
-    var MultiLingualTextBoxOptions = /** @class */ (function () {
+    var MultiLingualTextBoxOptions = /** @class */ (function (_super) {
+        __extends(MultiLingualTextBoxOptions, _super);
         function MultiLingualTextBoxOptions() {
-            /** 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;
-            this.IconPositionEN = exports.IconPosition.left;
-            this.IconPositionAR = exports.IconPosition.right;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.IconPositionEN = exports.IconPosition.left;
+            _this.IconPositionAR = exports.IconPosition.right;
             /*multi control placement type*/
-            this.MultiControlPlacementType = null;
+            _this.MultiControlPlacementType = null;
+            return _this;
         }
         return MultiLingualTextBoxOptions;
-    }());
+    }(MultilingualControlOptionsBase));
 
     var Attribute = /** @class */ (function () {
         function Attribute() {
@@ -7070,34 +7502,28 @@
         return Attribute;
     }());
 
-    var MultiLingualTextAreaOptions = /** @class */ (function () {
+    var MultiLingualTextAreaOptions = /** @class */ (function (_super) {
+        __extends(MultiLingualTextAreaOptions, _super);
         function MultiLingualTextAreaOptions() {
-            /** 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;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /*multi control placement type*/
-            this.MultiControlPlacementType = null;
+            _this.MultiControlPlacementType = null;
+            return _this;
         }
         return MultiLingualTextAreaOptions;
-    }());
+    }(MultilingualControlOptionsBase));
 
-    var CheckBoxOptions = /** @class */ (function () {
+    var CheckBoxOptions = /** @class */ (function (_super) {
+        __extends(CheckBoxOptions, _super);
         function CheckBoxOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /**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 = exports.ForceDirection.English;
+            _this.Value = null;
+            _this.ForceDirection = exports.ForceDirection.English;
+            return _this;
         }
         return CheckBoxOptions;
-    }());
+    }(ControlOptionsBase));
 
     var DropdownListItem = /** @class */ (function () {
         function DropdownListItem() {
@@ -7105,36 +7531,28 @@
         return DropdownListItem;
     }());
 
-    var MultiLingualHtmlEditorOptions = /** @class */ (function () {
+    var MultiLingualHtmlEditorOptions = /** @class */ (function (_super) {
+        __extends(MultiLingualHtmlEditorOptions, _super);
         function MultiLingualHtmlEditorOptions() {
-            /** 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;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** Set Height For  */
-            this.Height = 150;
-            /**To Set LanguageMode To MultipleLanguageText */
-            this.LanguageMode = null;
+            _this.Height = 150;
+            return _this;
         }
         return MultiLingualHtmlEditorOptions;
-    }());
+    }(MultilingualControlOptionsBase));
 
-    var ProfileImageUploadOptions = /** @class */ (function () {
+    var ProfileImageUploadOptions = /** @class */ (function (_super) {
+        __extends(ProfileImageUploadOptions, _super);
         function ProfileImageUploadOptions() {
-            /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-            */
-            this.AllowDropZone = false;
-            this.CustomValidation = [];
-            /**  to set type of view  if FileInput is Vertical or Horizontal */
-            this.ViewType = null;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.AllowDropZone = false;
             /** Set List of Custom Attribute to FileInput  */
-            this.ImageUploadAcceptsTypes = [exports.ImageType.ImageTypes];
+            _this.ImageUploadAcceptsTypes = [exports.ImageType.ImageTypes];
+            return _this;
         }
         return ProfileImageUploadOptions;
-    }());
+    }(ControlOptionsBase));
 
     var SaveDTO = /** @class */ (function () {
         function SaveDTO() {
@@ -7168,22 +7586,25 @@
         return UploadPersonalImage;
     }());
 
-    var CalendarOptions = /** @class */ (function () {
+    var CalendarOptions = /** @class */ (function (_super) {
+        __extends(CalendarOptions, _super);
         function CalendarOptions() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** Represent DefaultView Of Calendar*/
-            this.DefaultView = exports.CalendarView.Month;
+            _this.DefaultView = exports.CalendarView.Month;
             /** Represent CalendarViews Of Calendar*/
-            this.CalendarViews = [exports.CalendarView.Agenda, exports.CalendarView.Daily, exports.CalendarView.Month, exports.CalendarView.Weekly];
+            _this.CalendarViews = [exports.CalendarView.Agenda, exports.CalendarView.Daily, exports.CalendarView.Month, exports.CalendarView.Weekly];
             /** Set Calendar Visible Of Calendar*/
-            this.CalendarVisible = true;
+            _this.CalendarVisible = true;
             /** Set DefaultDate  Of Calendar*/
-            this.DefaultDate = new Date();
-            this.Eventeditable = false;
-            this.Eventselectable = false;
-            this.dayMaxEvents = false;
+            _this.DefaultDate = new Date();
+            _this.Eventeditable = false;
+            _this.Eventselectable = false;
+            _this.dayMaxEvents = false;
+            return _this;
         }
         return CalendarOptions;
-    }());
+    }(ControlOptionsBase));
 
     var CalendarEventDTO = /** @class */ (function () {
         function CalendarEventDTO() {
@@ -7191,32 +7612,28 @@
         return CalendarEventDTO;
     }());
 
-    var AutocompleteOptions = /** @class */ (function () {
+    var AutocompleteOptions = /** @class */ (function (_super) {
+        __extends(AutocompleteOptions, _super);
         function AutocompleteOptions() {
-            /**
-          *   Represent classes to textbox that allow us to select the AutoComplete by jquery or javascript
-          */
-            this.ValidationToken = null;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**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;
+            _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 = [];
+            _this.NumberRange = new RangeNumber();
             /** to set Direction of textbox  if textbox is Arabic or English  */
-            this.ForceDirection = exports.ForceDirection.English;
+            _this.ForceDirection = exports.ForceDirection.English;
             /** allow add  value of  AutoComplete dosn't exist in list*/
-            this.AllowNewSelection = false;
+            _this.AllowNewSelection = false;
             // /**a {key,value} (json) object to include as params for the json call. Each api supports different structure.*/
             // Params: object={};
-            this.QueryParam = 'query';
-            this.SelectedValue = null;
+            _this.QueryParam = 'query';
+            _this.SelectedValue = null;
+            return _this;
         }
         return AutocompleteOptions;
-    }());
+    }(ControlOptionsBase));
 
     var TagsInputDTO = /** @class */ (function () {
         function TagsInputDTO() {
@@ -7224,49 +7641,45 @@
         return TagsInputDTO;
     }());
 
-    var TagsInputOptions = /** @class */ (function () {
+    var TagsInputOptions = /** @class */ (function (_super) {
+        __extends(TagsInputOptions, _super);
         function TagsInputOptions() {
-            /**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 = [];
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** to set Direction of tagsinput  if tagsinput is Arabic or English  */
-            this.ForceDirection = exports.ForceDirection.English;
+            _this.ForceDirection = exports.ForceDirection.English;
             /**Remove Last When User Click On Backspace */
-            this.RemoveLastOnBackspace = false;
+            _this.RemoveLastOnBackspace = false;
             /** Allow User To Delete Tags */
-            this.CanDeleteTags = true;
+            _this.CanDeleteTags = true;
             /** Allow User To Add Tags */
-            this.CanAddTags = true;
+            _this.CanAddTags = true;
             /** Set Max Number Of Tags That User Can Be Select  */
-            this.MaxNumberTags = 100;
+            _this.MaxNumberTags = 100;
             /** Set Min Length Of Char To Call Search Function   */
-            this.MinSearchLength = 1;
+            _this.MinSearchLength = 1;
             /**Allow  Scrolle Option In Dropdown  */
-            this.ScrollableOptions = true;
+            _this.ScrollableOptions = true;
             /** Set Max Number Of Tags That will Be Appear ON Dropdown  */
-            this.MaxSearchResultsCount = 5;
+            _this.MaxSearchResultsCount = 5;
             /**Value Name Of Tag Option In Dropdown */
-            this.DatasourceItemValue = "key";
+            _this.DatasourceItemValue = "key";
             /**Text  Of Tag That Will Show In Dropdown */
-            this.DatasourceItemText = "value";
+            _this.DatasourceItemText = "value";
             /**Text Show  when none of the given options match the entered text */
-            this.NoResultText = "No Item Matches";
+            _this.NoResultText = "No Item Matches";
             /**Set Query Param Name By Default It's 'query'*/
-            this.QueryParamName = "query";
+            _this.QueryParamName = "query";
             /**Set Query Param Name By Default It's 'query'*/
-            this.SelectedItemsParamName = "SelectedItems";
+            _this.SelectedItemsParamName = "SelectedItems";
             /**Set Filter Param Name By Default It's 'query'*/
-            this.FilterParamName = "";
+            _this.FilterParamName = "";
             /** allow add  value of  TagInput dosn't exist in list*/
-            this.AllowNewSelection = false;
-            this.ValidationToken = null;
+            _this.AllowNewSelection = false;
+            _this.ValidationToken = null;
+            return _this;
         }
         return TagsInputOptions;
-    }());
+    }(ControlOptionsBase));
 
     var FilterItem = /** @class */ (function () {
         function FilterItem() {
@@ -7320,15 +7733,13 @@
         return PagingOptions;
     }());
 
-    var RadioButtonOptions = /** @class */ (function () {
+    var RadioButtonOptions = /** @class */ (function (_super) {
+        __extends(RadioButtonOptions, _super);
         function RadioButtonOptions() {
-            this.ViewType = null;
-            /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
-          */
-            this.CustomValidation = [];
+            return _super !== null && _super.apply(this, arguments) || this;
         }
         return RadioButtonOptions;
-    }());
+    }(ControlOptionsBase));
 
     var RadioButtonItem = /** @class */ (function () {
         function RadioButtonItem() {
@@ -7409,7 +7820,6 @@
 
     var RepeaterOptions = /** @class */ (function () {
         function RepeaterOptions() {
-            this.MinRequiredItems = 1;
             this.ActionLabelKey = "";
             this.AddButtonText = "Add";
             this.DeleteButtonText = "Delete";
@@ -7747,6 +8157,8 @@
     exports.AutocompleteOptions = AutocompleteOptions;
     exports.AutocompleteTextBoxComponent = AutocompleteTextBoxComponent;
     exports.BBSFControlsModule = BBSFControlsModule;
+    exports.BBSFDatePipe = BBSFDatePipe;
+    exports.BBSFDateTimePipe = BBSFDateTimePipe;
     exports.CalendarComponent = CalendarComponent;
     exports.CalendarEventDTO = CalendarEventDTO;
     exports.CalendarOptions = CalendarOptions;
@@ -7755,6 +8167,7 @@
     exports.CheckBoxOptions = CheckBoxOptions;
     exports.ConfirmationModalComponent = ConfirmationModalComponent;
     exports.ConfirmationModalOptions = ConfirmationModalOptions;
+    exports.ControlOptionsBase = ControlOptionsBase;
     exports.ControlUtility = ControlUtility;
     exports.CustomValidation = CustomValidation;
     exports.CustomValidator = CustomValidator;
@@ -7787,6 +8200,7 @@
     exports.MultiLingualTextAreaOptions = MultiLingualTextAreaOptions;
     exports.MultiLingualTextBoxComponent = MultiLingualTextBoxComponent;
     exports.MultiLingualTextBoxOptions = MultiLingualTextBoxOptions;
+    exports.MultilingualControlOptionsBase = MultilingualControlOptionsBase;
     exports.MultipleFileUploadModel = MultipleFileUploadModel;
     exports.NgTemplateNameDirective = NgTemplateNameDirective;
     exports.OnPagingFiltersChangeService = OnPagingFiltersChangeService;