@bnsights/bbsf-controls 1.0.34 → 1.0.35

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/angular'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@angular/core'), require('ng-block-ui'), require('@angular/forms'), require('@angular/http'), require('@angular/router'), require('ngx-toastr'), require('ngx-permissions'), require('@angular/cdk/overlay'), require('@ngrx/store-devtools'), require('@angular/common'), require('ngx-intl-tel-input'), require('@bnsights/bbsf-utilities'), require('ngx-bootstrap/datepicker'), require('rxjs'), require('ng-pick-datetime'), require('ng2-file-upload'), require('class-transformer'), require('ng-multiselect-dropdown'), require('angular2-multiselect-dropdown'), require('ngx-summernote'), require('ngx-mask'), require('@syncfusion/ej2-angular-popups'), require('ngx-dropzone'), require('angular-cropperjs'), require('ngx-image-cropper'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('ngx-typeahead'), require('rxjs/operators'), require('ngx-tags-input'), require('@ng-select/ng-select'), require('ngx-infinite-scroll'), require('@agm/core'), require('@angular-material-extensions/google-maps-autocomplete'), require('@fullcalendar/core/locales/en-gb'), require('@fullcalendar/core/locales/ar'), require('ngx-bootstrap/typeahead'), require('@angular/material/slide-toggle'), require('@kolkov/angular-editor'), require('ng-inline-svg'), require('sweetalert2'), require('@sweetalert2/ngx-sweetalert2')) :
-    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', 'ng-pick-datetime', 'ng2-file-upload', 'class-transformer', 'ng-multiselect-dropdown', 'angular2-multiselect-dropdown', 'ngx-summernote', 'ngx-mask', '@syncfusion/ej2-angular-popups', 'ngx-dropzone', 'angular-cropperjs', 'ngx-image-cropper', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', 'ngx-typeahead', 'rxjs/operators', 'ngx-tags-input', '@ng-select/ng-select', 'ngx-infinite-scroll', '@agm/core', '@angular-material-extensions/google-maps-autocomplete', '@fullcalendar/core/locales/en-gb', '@fullcalendar/core/locales/ar', 'ngx-bootstrap/typeahead', '@angular/material/slide-toggle', '@kolkov/angular-editor', 'ng-inline-svg', 'sweetalert2', '@sweetalert2/ngx-sweetalert2'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.ngPickDatetime, global.ng2FileUpload, global.classTransformer, global.ngMultiselectDropdown, global.angular2MultiselectDropdown, global.ngxSummernote, global.ngxMask, global.ej2AngularPopups, global.ngxDropzone, global.angularCropperjs, global.ngxImageCropper, global.ngBootstrap, global.core$1, global.ng.common.http, global.ngxTypeahead, global.rxjs.operators, global.ngxTagsInput, global.ngSelect, global.ngxInfiniteScroll, global.core, global.googleMapsAutocomplete, global.enGbLocale, global.ArLocale, global.typeahead, global.ng.material.slideToggle, global.angularEditor, global.ngInlineSvg, global.Swal, global.ngxSweetalert2));
-})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, ngPickDatetime, ng2FileUpload, classTransformer, ngMultiselectDropdown, angular2MultiselectDropdown, ngxSummernote, ngxMask, ej2AngularPopups, ngxDropzone, angularCropperjs, ngxImageCropper, ngBootstrap, core$1, http$1, ngxTypeahead, operators, ngxTagsInput, ngSelect, ngxInfiniteScroll, core, googleMapsAutocomplete, enGbLocale, ArLocale, typeahead, slideToggle, angularEditor, ngInlineSvg, Swal, ngxSweetalert2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/angular'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@angular/core'), require('ng-block-ui'), require('@angular/forms'), require('@angular/http'), require('@angular/router'), require('ngx-toastr'), require('ngx-permissions'), require('@angular/cdk/overlay'), require('@ngrx/store-devtools'), require('@angular/common'), require('ngx-intl-tel-input'), require('@bnsights/bbsf-utilities'), require('ngx-bootstrap/datepicker'), require('rxjs'), require('ng-pick-datetime'), require('ng2-file-upload'), require('class-transformer'), require('ng-multiselect-dropdown'), require('angular2-multiselect-dropdown'), require('ngx-summernote'), require('ngx-mask'), require('@syncfusion/ej2-angular-popups'), require('ngx-dropzone'), require('angular-cropperjs'), require('ngx-image-cropper'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('ngx-typeahead'), require('rxjs/operators'), require('ngx-tags-input'), require('@ng-select/ng-select'), require('ngx-infinite-scroll'), require('@agm/core'), require('@angular-material-extensions/google-maps-autocomplete'), require('@fullcalendar/core/locales/en-gb'), require('@fullcalendar/core/locales/ar'), require('ngx-bootstrap/typeahead'), require('@angular/material/slide-toggle'), require('@kolkov/angular-editor'), require('angular-ng-autocomplete'), require('ng-inline-svg'), require('sweetalert2'), require('@sweetalert2/ngx-sweetalert2')) :
+    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', 'ng-pick-datetime', 'ng2-file-upload', 'class-transformer', 'ng-multiselect-dropdown', 'angular2-multiselect-dropdown', 'ngx-summernote', 'ngx-mask', '@syncfusion/ej2-angular-popups', 'ngx-dropzone', 'angular-cropperjs', 'ngx-image-cropper', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', 'ngx-typeahead', 'rxjs/operators', 'ngx-tags-input', '@ng-select/ng-select', 'ngx-infinite-scroll', '@agm/core', '@angular-material-extensions/google-maps-autocomplete', '@fullcalendar/core/locales/en-gb', '@fullcalendar/core/locales/ar', 'ngx-bootstrap/typeahead', '@angular/material/slide-toggle', '@kolkov/angular-editor', 'angular-ng-autocomplete', 'ng-inline-svg', 'sweetalert2', '@sweetalert2/ngx-sweetalert2'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.ngPickDatetime, global.ng2FileUpload, global.classTransformer, global.ngMultiselectDropdown, global.angular2MultiselectDropdown, global.ngxSummernote, global.ngxMask, global.ej2AngularPopups, global.ngxDropzone, global.angularCropperjs, global.ngxImageCropper, global.ngBootstrap, global.core$1, global.ng.common.http, global.ngxTypeahead, global.rxjs.operators, global.ngxTagsInput, global.ngSelect, global.ngxInfiniteScroll, global.core, global.googleMapsAutocomplete, global.enGbLocale, global.ArLocale, global.typeahead, global.ng.material.slideToggle, global.angularEditor, global.angularNgAutocomplete, global.ngInlineSvg, global.Swal, global.ngxSweetalert2));
+})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, ngPickDatetime, ng2FileUpload, classTransformer, ngMultiselectDropdown, angular2MultiselectDropdown, ngxSummernote, ngxMask, ej2AngularPopups, ngxDropzone, angularCropperjs, ngxImageCropper, ngBootstrap, core$1, http$1, ngxTypeahead, operators, ngxTagsInput, ngSelect, ngxInfiniteScroll, core, googleMapsAutocomplete, enGbLocale, ArLocale, typeahead, slideToggle, angularEditor, angularNgAutocomplete, ngInlineSvg, Swal, ngxSweetalert2) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -177,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;
@@ -212,8 +213,20 @@
                 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
@@ -321,7 +334,8 @@
     ];
     ControlUtility.ctorParameters = function () { return [
         { type: ErrorMassageValidation },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: bbsfUtilities.UtilityService }
     ]; };
 
     exports.PickerType = void 0;
@@ -517,7 +531,11 @@
             }
             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;
@@ -860,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;
@@ -1539,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);
                 }
             }
         };
@@ -1776,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);
@@ -2131,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);
                 }
             }
         };
@@ -2244,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)=\"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.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)=\"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",
+                    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"]
                 },] }
     ];
@@ -2346,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;
     }());
@@ -2484,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 () {
@@ -2631,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;
     }());
@@ -2669,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 () {
@@ -2696,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;
     }());
@@ -2908,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;
     }());
@@ -3206,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)
@@ -3219,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)
@@ -3326,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"]
                 },] }
     ];
@@ -3564,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);
                     };
                 }
             };
@@ -3857,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);
                     };
                 }
             };
@@ -4199,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);
                 }
             }
@@ -4238,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: [""]
                 },] }
     ];
@@ -4434,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;
@@ -4913,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;
     }());
@@ -5012,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([
@@ -5074,9 +5175,6 @@
                     this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
                 this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
             }
-            if (this.options.IsRequired) {
-                this.validationRules.push(forms.Validators.required);
-            }
             this.TextBoxFormControl.setValidators(this.validationRules);
             this.TextBoxFormControl.setAsyncValidators(this.validationRulesasync);
             if (this.options.IsDisabled) {
@@ -5105,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);
@@ -5122,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;
@@ -5447,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();
@@ -6092,74 +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;
+            _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) {
@@ -6171,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() {
@@ -6223,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) {
@@ -6242,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) {
@@ -7141,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([
@@ -7189,7 +7327,9 @@
                         RepeaterFieldBuilderComponent,
                         NgTemplateNameDirective,
                         RepeaterItemFieldComponent,
-                        RepeaterTableComponent
+                        RepeaterTableComponent,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe
                     ],
                     imports: [
                         common.CommonModule,
@@ -7235,9 +7375,10 @@
                         angular.FullCalendarModule,
                         typeahead.TypeaheadModule.forRoot(),
                         angularEditor.AngularEditorModule,
+                        angularNgAutocomplete.AutocompleteLibModule,
                         bbsfUtilities.BBSFUtilitiesModule,
                         ngInlineSvg.InlineSVGModule.forRoot(),
-                        ngxSweetalert2.SweetAlert2Module
+                        ngxSweetalert2.SweetAlert2Module,
                     ],
                     providers: [
                         ErrorMassageValidation,
@@ -7248,6 +7389,8 @@
                         ngBootstrap.NgbModal,
                         ngBootstrap.NgbActiveModal,
                         common.DatePipe,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe,
                         RenderComponentService,
                         { provide: ngPickDatetime.OWL_DATE_TIME_LOCALE, useValue: ɵ0 },
                     ],
@@ -7283,7 +7426,9 @@
                         RepeaterFieldBuilderComponent,
                         NgTemplateNameDirective,
                         RepeaterItemFieldComponent,
-                        RepeaterTableComponent
+                        RepeaterTableComponent,
+                        BBSFDateTimePipe,
+                        BBSFDatePipe
                     ]
                 },] }
     ];
@@ -7304,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() {
         }
@@ -7324,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() {
@@ -7349,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() {
@@ -7384,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() {
@@ -7447,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() {
@@ -7470,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() {
@@ -7503,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() {
@@ -7599,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() {
@@ -8025,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;
@@ -8033,6 +8167,7 @@
     exports.CheckBoxOptions = CheckBoxOptions;
     exports.ConfirmationModalComponent = ConfirmationModalComponent;
     exports.ConfirmationModalOptions = ConfirmationModalOptions;
+    exports.ControlOptionsBase = ControlOptionsBase;
     exports.ControlUtility = ControlUtility;
     exports.CustomValidation = CustomValidation;
     exports.CustomValidator = CustomValidator;
@@ -8065,6 +8200,7 @@
     exports.MultiLingualTextAreaOptions = MultiLingualTextAreaOptions;
     exports.MultiLingualTextBoxComponent = MultiLingualTextBoxComponent;
     exports.MultiLingualTextBoxOptions = MultiLingualTextBoxOptions;
+    exports.MultilingualControlOptionsBase = MultilingualControlOptionsBase;
     exports.MultipleFileUploadModel = MultipleFileUploadModel;
     exports.NgTemplateNameDirective = NgTemplateNameDirective;
     exports.OnPagingFiltersChangeService = OnPagingFiltersChangeService;