@bnsights/bbsf-controls 1.0.7 → 1.0.11

package/fesm2015/bnsights-bbsf-controls.js

@@ -15,7 +15,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { CommonModule } from '@angular/common';
 import { SearchCountryField, NgxIntlTelInputModule } from 'ngx-intl-tel-input';
-import { UtilityService, ControlValidationService, BBSFTranslateService, RequestHandlerService, RequestOptionsModel, BBSFUtilitiesModule, EnvironmentService, AuthService } from '@bnsights/bbsf-utilities';
+import { UtilityService, ControlValidationService, BBSFTranslateService, RequestOptionsModel, RequestHandlerService, BBSFUtilitiesModule } from '@bnsights/bbsf-utilities';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { Subject, Observable, noop, of } from 'rxjs';
 import { FileUploader, FileLikeObject, FileUploadModule } from 'ng2-file-upload';
@@ -37,7 +37,6 @@ import { switchMap, map, tap } from 'rxjs/operators';
 import { NgxTagsInputModule } from 'ngx-tags-input';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { Title } from '@angular/platform-browser';
 import { LazyMapsAPILoader, MapsAPILoader, AgmCoreModule } from '@agm/core';
 import { MatGoogleMapsAutocompleteModule } from '@angular-material-extensions/google-maps-autocomplete';
 import enGbLocale from '@fullcalendar/core/locales/en-gb';
@@ -47,6 +46,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 import { InlineSVGModule } from 'ng-inline-svg';
+import Swal from 'sweetalert2';
+import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 
 class ErrorMassageValidation {
     // tslint:disable-next-line: deprecation
@@ -246,8 +247,8 @@ class ControlUtility {
             }
         }
     }
-    showGlobalError() {
-        this.controlValidationService.showGlobalError();
+    showGlobalError(formId) {
+        this.controlValidationService.showGlobalError(null, formId);
         this.scrollToGlobalErrorMassage();
     }
     RemoveRequiredValidation(FormControl, ValidationRole, Options) {
@@ -262,6 +263,16 @@ class ControlUtility {
         FormControl.setValidators(ValidationRole);
         FormControl.updateValueAndValidity();
     }
+    addRequiredToControl(FormControl, Options) {
+        Options.IsRequired = true;
+        FormControl.addValidators(Validators.required);
+        FormControl.updateValueAndValidity();
+    }
+    removeRequiredFromControl(FormControl, Options) {
+        Options.IsRequired = false;
+        FormControl.removeValidators(Validators.required);
+        FormControl.updateValueAndValidity();
+    }
     RemoveCustomValidation(FormControl, ValidationRole, CustomValidation) {
         ValidationRole = ValidationRole.filter((e) => e != CustomValidation.functionBody);
         FormControl.setValidators(ValidationRole);
@@ -474,14 +485,47 @@ class MultipleFileUploadModel {
     }
 }
 
+var ControlLayout;
+(function (ControlLayout) {
+    ControlLayout[ControlLayout["Vertical"] = 1] = "Vertical";
+    ControlLayout[ControlLayout["Horizontal"] = 2] = "Horizontal";
+})(ControlLayout || (ControlLayout = {}));
+
+var LanguageMode;
+(function (LanguageMode) {
+    LanguageMode[LanguageMode["Both_Languages_are_visible"] = 1] = "Both_Languages_are_visible";
+    LanguageMode[LanguageMode["English_Language_only_is_visible"] = 2] = "English_Language_only_is_visible";
+    LanguageMode[LanguageMode["Arabic_Language_only_is_visible"] = 3] = "Arabic_Language_only_is_visible";
+    LanguageMode[LanguageMode["Both_Languages_but_only_English_is_required"] = 4] = "Both_Languages_but_only_English_is_required";
+    LanguageMode[LanguageMode["Both_Languages_but_only_Arabic_is_required"] = 5] = "Both_Languages_but_only_Arabic_is_required";
+    LanguageMode[LanguageMode["Current_Language_only_is_visible_and_required"] = 6] = "Current_Language_only_is_visible_and_required";
+    LanguageMode[LanguageMode["Both_Languages_are_visible_but_only_current_language_is_required"] = 7] = "Both_Languages_are_visible_but_only_current_language_is_required";
+})(LanguageMode || (LanguageMode = {}));
+
+class GlobalSettings {
+    constructor() {
+        /**  to set type of view  if MultilingualTextArea is Vertical or Horizontal */
+        this.ViewType = ControlLayout.Vertical;
+        /*multi control placement type*/
+        this.MultiControlPlacementType = ControlLayout.Horizontal;
+        /**To Set LanguageMode To MultipleLanguageText */
+        this.LanguageMode = LanguageMode.Both_Languages_are_visible;
+        this.HideAstericsWhenRequired = false;
+    }
+}
+GlobalSettings.ɵprov = i0.ɵɵdefineInjectable({ factory: function GlobalSettings_Factory() { return new GlobalSettings(); }, token: GlobalSettings, providedIn: "root" });
+GlobalSettings.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+
 class FileUploadComponent {
-    constructor(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, translate, controlValidationService) {
+    constructor(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, controlValidationService, globalSettings) {
         this.controlContainer = controlContainer;
         this.MultipleFileUplaodControlHost = MultipleFileUplaodControlHost;
         this.controlUtility = controlUtility;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.ValidationMessage = "";
         this.AcceptedType = "";
@@ -522,6 +566,8 @@ class FileUploadComponent {
     ngOnInit() {
         this.fileUploadModel = new FileUploadModel();
         this.multipleFileUploadModel = new MultipleFileUploadModel();
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.Value == null) {
             if (this.options.IsMultipleFile == true) {
                 //this.options.Value=this.multipleFileUploadModel
@@ -776,8 +822,8 @@ FileUploadComponent.ctorParameters = () => [
     { type: FormGroupDirective },
     { type: ControlUtility },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 FileUploadComponent.propDecorators = {
     fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
@@ -789,26 +835,15 @@ FileUploadComponent.propDecorators = {
 class EnglishArabicDTO {
 }
 
-var LanguageMode;
-(function (LanguageMode) {
-    LanguageMode[LanguageMode["Both_Languages_are_visible"] = 1] = "Both_Languages_are_visible";
-    LanguageMode[LanguageMode["English_Language_only_is_visible"] = 2] = "English_Language_only_is_visible";
-    LanguageMode[LanguageMode["Arabic_Language_only_is_visible"] = 3] = "Arabic_Language_only_is_visible";
-    LanguageMode[LanguageMode["Both_Languages_but_only_English_is_required"] = 4] = "Both_Languages_but_only_English_is_required";
-    LanguageMode[LanguageMode["Both_Languages_but_only_Arabic_is_required"] = 5] = "Both_Languages_but_only_Arabic_is_required";
-    LanguageMode[LanguageMode["Current_Language_only_is_visible_and_required"] = 6] = "Current_Language_only_is_visible_and_required";
-    LanguageMode[LanguageMode["Both_Languages_are_visible_but_only_current_language_is_required"] = 7] = "Both_Languages_are_visible_but_only_current_language_is_required";
-})(LanguageMode || (LanguageMode = {}));
-
 class MultiLingualTextBoxComponent {
-    constructor(ErrorHandler, MultiLingualTextBoxFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService) {
-        this.ErrorHandler = ErrorHandler;
+    constructor(MultiLingualTextBoxFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService, globalSettings) {
         this.MultiLingualTextBoxFormControlHost = MultiLingualTextBoxFormControlHost;
         this.controlContainer = controlContainer;
         this.controlUtility = controlUtility;
         this.UtilityService = UtilityService;
         this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.ArabicWordCount = 0;
         this.ArabicWordCountArray = 0;
@@ -866,12 +901,18 @@ class MultiLingualTextBoxComponent {
             // });
             this.MultiLanguagegroup = new FormGroup({});
             ;
-            this.MultiLanguagegroup.addControl("ArabicValue", new FormControl(''));
-            this.MultiLanguagegroup.addControl("EnglishValue", new FormControl(''));
-            this.ArabicFormControl = this.MultiLanguagegroup.controls["ArabicValue"]; //  new FormControl('',validationRules);
-            this.EnglishFormControl = this.MultiLanguagegroup.controls["EnglishValue"]; //  new FormControl('',validationRules);
+            this.MultiLanguagegroup.addControl("Arabic", new FormControl(''));
+            this.MultiLanguagegroup.addControl("English", new FormControl(''));
+            this.ArabicFormControl = this.MultiLanguagegroup.controls["Arabic"]; //  new FormControl('',validationRules);
+            this.EnglishFormControl = this.MultiLanguagegroup.controls["English"]; //  new FormControl('',validationRules);
             this.group.addControl(this.options.Name, new FormGroup(this.MultiLanguagegroup.controls));
             this.getCustomErrorsMassages();
+            if (!this.options.ViewType)
+                this.options.ViewType = this.globalSettings.ViewType;
+            if (!this.options.LanguageMode)
+                this.options.LanguageMode = this.globalSettings.LanguageMode;
+            if (!this.options.MultiControlPlacementType)
+                this.options.MultiControlPlacementType = this.globalSettings.MultiControlPlacementType;
             if (this.options.ArabicLabelKey != null && this.options.ArabicLabelKey != "")
                 this.options.ArabicLabelValue = this.UtilityService.getResourceValue(this.options.ArabicLabelKey);
             if (this.options.EnglishLabelKey != null && this.options.EnglishLabelKey != "")
@@ -937,9 +978,9 @@ class MultiLingualTextBoxComponent {
                 if (this.EnglishWordCountArray > 0) {
                     if (this.EnglishWordCountArray > this.options.MaxWordCount) {
                         this.EnglishWordCount = this.options.MaxWordCount;
-                        this.MultiLanguagegroup.controls["EnglishValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                        this.MultiLanguagegroup.controls["EnglishValue"].markAsTouched();
-                        this.MultiLanguagegroup.controls["EnglishValue"].invalid;
+                        this.MultiLanguagegroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                        this.MultiLanguagegroup.controls["English"].markAsTouched();
+                        this.MultiLanguagegroup.controls["English"].invalid;
                     }
                     else {
                         this.EnglishWordCount = this.EnglishWordCountArray;
@@ -958,9 +999,9 @@ class MultiLingualTextBoxComponent {
                 if (this.ArabicWordCountArray > 0) {
                     if (this.ArabicWordCountArray > this.options.MaxWordCount) {
                         this.ArabicWordCount = this.options.MaxWordCount;
-                        this.MultiLanguagegroup.controls["ArabicValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                        this.MultiLanguagegroup.controls["ArabicValue"].markAsTouched();
-                        this.MultiLanguagegroup.controls["ArabicValue"].invalid;
+                        this.MultiLanguagegroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                        this.MultiLanguagegroup.controls["Arabic"].markAsTouched();
+                        this.MultiLanguagegroup.controls["Arabic"].invalid;
                     }
                     else {
                         this.ArabicWordCount = this.ArabicWordCountArray;
@@ -1098,18 +1139,18 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
 MultiLingualTextBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextBox',
-                template: "<div class=\"b-control b-multilangual-textbox\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n                    <label class=\"b-label col-form-label col-sm-12\"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'left':'right'\" *ngIf=\"options.Icon!=null\">\r\n                          <span [inlineSVG]=\"options.Icon\"></span>\r\n                        </div>\r\n                        <input class=\"form-control bnsights-control\"\r\n                               (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                               maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                               aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"EnglishValue\"\r\n                               [hidden]=\"options.IsHideEnglishFields\"\r\n                               [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                               placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                               (keyup)=\"onTextChange()\"\r\n                               (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                               #userinputEnglish>\r\n\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} words</div>\r\n                      </div>\r\n\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                      \r\n\r\n                        <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n                        <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\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}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\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                        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right':'left'\" *ngIf=\"options.Icon!=null\">\r\n                          <span [inlineSVG]=\"options.Icon\"></span>\r\n                        </div>\r\n                        <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                               (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                               [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                               formControlName=\"ArabicValue\"\r\n                               maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                               [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                               placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                               (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                               (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputArabic)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\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            \r\n                       \r\n\r\n                        <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n                        \r\n                        <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n\r\n                    </div>\r\n                    \r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-multilangual-textbox\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n                    <label class=\"b-label col-form-label col-sm-12\"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group align-items-center\">\r\n                        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'left':'right'\" *ngIf=\"options.Icon!=null\">\r\n                          <span [inlineSVG]=\"options.Icon\"></span>\r\n                        </div>\r\n                        <input class=\"form-control bnsights-control\"\r\n                               (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                               maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                               aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                               [hidden]=\"options.IsHideEnglishFields\"\r\n                               [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                               placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                               (keyup)=\"onTextChange()\"\r\n                               (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                               #userinputEnglish>\r\n\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} words</div>\r\n                      </div>\r\n\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                      \r\n\r\n                        <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n                        <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\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}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n                    </label>\r\n\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group align-items-center\">\r\n                        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right':'left'\" *ngIf=\"options.Icon!=null\">\r\n                          <span [inlineSVG]=\"options.Icon\"></span>\r\n                        </div>\r\n                        <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                               (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                               [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                               formControlName=\"Arabic\"\r\n                               maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                               [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                               placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                               (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                               (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputArabic)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\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            \r\n                       \r\n\r\n                        <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n                        \r\n                        <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n\r\n                    </div>\r\n                    \r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
 MultiLingualTextBoxComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
     { type: FormGroupDirective },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: ControlUtility },
     { type: UtilityService },
     { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 MultiLingualTextBoxComponent.propDecorators = {
     group: [{ type: Input }],
@@ -1118,13 +1159,13 @@ MultiLingualTextBoxComponent.propDecorators = {
 };
 
 class TextAreaComponent {
-    constructor(ErrorHandler, controlUtility, controlContainer, TextAreaControlHost, UtilityService, controlValidationService) {
-        this.ErrorHandler = ErrorHandler;
+    constructor(controlUtility, controlContainer, TextAreaControlHost, UtilityService, controlValidationService, globalSettings) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.TextAreaControlHost = TextAreaControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.WordCount = 0;
         this.WordCountArray = 0;
@@ -1161,6 +1202,8 @@ class TextAreaComponent {
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.TextAreaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
         this.TextAreaFormControl.setValue(this.options.Value);
@@ -1247,12 +1290,12 @@ TextAreaComponent.decorators = [
             },] }
 ];
 TextAreaComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 TextAreaComponent.propDecorators = {
     group: [{ type: Input }],
@@ -1261,14 +1304,13 @@ TextAreaComponent.propDecorators = {
 };
 
 class MultiLingualTextAreaComponent {
-    constructor(ErrorHandler, MultiLingualTextAreaFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService) {
-        this.ErrorHandler = ErrorHandler;
+    constructor(MultiLingualTextAreaFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
         this.MultiLingualTextAreaFormControlHost = MultiLingualTextAreaFormControlHost;
         this.controlContainer = controlContainer;
         this.controlUtility = controlUtility;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.ArabicWordCount = 0;
         this.ArabicWordCountArray = 0;
@@ -1328,15 +1370,21 @@ class MultiLingualTextAreaComponent {
             //   this.CurrentLanguage = event.lang
             //   this.showInputUsingLanguageMode();
             // });
+            if (!this.options.ViewType)
+                this.options.ViewType = this.globalSettings.ViewType;
+            if (!this.options.LanguageMode)
+                this.options.LanguageMode = this.globalSettings.LanguageMode;
+            if (!this.options.MultiControlPlacementType)
+                this.options.MultiControlPlacementType = this.globalSettings.MultiControlPlacementType;
             if (this.options.ArabicLabelKey != null && this.options.ArabicLabelKey != "")
                 this.options.ArabicLabelValue = this.UtilityService.getResourceValue(this.options.ArabicLabelKey);
             if (this.options.EnglishLabelKey != null && this.options.EnglishLabelKey != "")
                 this.options.EnglishLabelValue = this.UtilityService.getResourceValue(this.options.EnglishLabelKey);
             this.MultiLanguageTextAreagroup = new FormGroup({});
-            this.MultiLanguageTextAreagroup.addControl("ArabicTextAreaValue", new FormControl(''));
-            this.MultiLanguageTextAreagroup.addControl("EnglishTextAreaValue", new FormControl(''));
-            this.ArabicTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"]; //  new FormControl('',validationRules);
-            this.EnglishTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"]; //  new FormControl('',validationRules);
+            this.MultiLanguageTextAreagroup.addControl("Arabic", new FormControl(''));
+            this.MultiLanguageTextAreagroup.addControl("English", new FormControl(''));
+            this.ArabicTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["Arabic"]; //  new FormControl('',validationRules);
+            this.EnglishTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["English"]; //  new FormControl('',validationRules);
             this.group.addControl(this.options.Name, new FormGroup(this.MultiLanguageTextAreagroup.controls));
             this.getCustomErrorsMassages();
             switch (this.options.Type) {
@@ -1405,9 +1453,9 @@ class MultiLingualTextAreaComponent {
                 if (this.EnglishWordCountArray > 0) {
                     if (this.EnglishWordCountArray > this.options.MaxWordCount) {
                         this.EnglishWordCount = this.options.MaxWordCount;
-                        this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                        this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"].markAsTouched();
-                        this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"].invalid;
+                        this.MultiLanguageTextAreagroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                        this.MultiLanguageTextAreagroup.controls["English"].markAsTouched();
+                        this.MultiLanguageTextAreagroup.controls["English"].invalid;
                     }
                     else {
                         this.EnglishWordCount = this.EnglishWordCountArray;
@@ -1426,9 +1474,9 @@ class MultiLingualTextAreaComponent {
                 if (this.ArabicWordCountArray > 0) {
                     if (this.ArabicWordCountArray > this.options.MaxWordCount) {
                         this.ArabicWordCount = this.options.MaxWordCount;
-                        this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                        this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"].markAsTouched();
-                        this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"].invalid;
+                        this.MultiLanguageTextAreagroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                        this.MultiLanguageTextAreagroup.controls["Arabic"].markAsTouched();
+                        this.MultiLanguageTextAreagroup.controls["Arabic"].invalid;
                     }
                     else {
                         this.ArabicWordCount = this.ArabicWordCountArray;
@@ -1557,18 +1605,17 @@ MultiLingualTextAreaComponent.controlContainerstatic = null;
 MultiLingualTextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextArea',
-                template: "<div class=\"b-control b-multilangual-textarea\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n            <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                                  maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                                  aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"EnglishTextAreaValue\" [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                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n                      <div class=\"text-danger Required-text\"\r\n                           *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n                        {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n                      </div>\r\n                      <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                        {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                    </div>\r\n\r\n                      <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n                      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLable\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                                  [hidden]=\"options.IsHideArabicFields\" maxlength=\"{{options.MaxLength}}\"\r\n                                  minlength=\"{{options.MinLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"ArabicTextAreaValue\" rows=\"{{options.Rows}}\"\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 class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}Words</div>\r\n\r\n                      </div>\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n                        </div>\r\n                        <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n                          {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                      </div>\r\n\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\r\n                    </div>\r\n\r\n\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)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                                  maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                                  aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                                  [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                                  placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                                  (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                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n                      <div class=\"text-danger Required-text\"\r\n                           *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n                        {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n                      </div>\r\n                      <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                        {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                    </div>\r\n\r\n                      <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n                      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLable\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                                  [hidden]=\"options.IsHideArabicFields\" maxlength=\"{{options.MaxLength}}\"\r\n                                  minlength=\"{{options.MinLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\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 class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}Words</div>\r\n\r\n                      </div>\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n                        </div>\r\n                        <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n                          {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                      </div>\r\n\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\r\n                    </div>\r\n\r\n\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"]
             },] }
 ];
 MultiLingualTextAreaComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
     { type: FormGroupDirective },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: ControlUtility },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 MultiLingualTextAreaComponent.propDecorators = {
     group: [{ type: Input }],
@@ -1685,14 +1732,14 @@ CheckBoxComponent.propDecorators = {
 
 class DropdownListComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(onChangeService, controlUtility, controlContainer, DropdownListControlHost, UtilityService, translate, controlValidationService) {
+    constructor(onChangeService, controlUtility, controlContainer, DropdownListControlHost, UtilityService, controlValidationService, globalSettings) {
         this.onChangeService = onChangeService;
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.DropdownListControlHost = DropdownListControlHost;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.dropdownSettings = {};
         this.SelectedList = [];
         this.OnChange = new EventEmitter();
@@ -1754,6 +1801,8 @@ class DropdownListComponent {
         };
         this.group.addControl(this.options.Name, new FormControl(''));
         this.DropdownListFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.CustomValidation.length > 0) {
             let Validations = this.options.CustomValidation;
             for (let index = 0; index < Validations.length; index++) {
@@ -1830,7 +1879,7 @@ DropdownListComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-DropdownList',
-                template: "<div class=\"b-control b-dropdown-list\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n            [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          <ng-select *ngIf=\"options.DisableBootstrapSelect==false\"\r\n                     dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                     [bindValue]=\"options.ItemTempletkey\"\r\n                     [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                     [notFoundText]=\"'No data found.'\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                     [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\"\r\n                     [readonly]=\"options.IsDisabled\" [searchable]=\"true\" [clearable]=\"true\"\r\n                     placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [selectableGroup]=\"true\"\r\n                     [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\" [(ngModel)]=\"SelectedList\"\r\n                     (change)=\"onItemSelect($event[options.ItemTempletkey])\" (clear)=\"Clear()\"\r\n                     [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"  [closeOnSelect] = \"options.SingleSelection  ? true : false\">\r\n            \r\n            <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\"\r\n                         let-index=\"index\" >\r\n              <div class=\"ks-cboxtags\">\r\n                <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\"\r\n                       [ngModel]=\"item$.selected\" class=\" \" /> <label class=\"ng-option-label  mb-0\">{{item.value}}</label>\r\n              </div>\r\n            </ng-template>\r\n          </ng-select>\r\n      \r\n          <select *ngIf=\"options.DisableBootstrapSelect\"\r\n                  class=\"form-control bnsights-control\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                  (change)=\"onItemSelect($event.target.value)\" [disabled]=\"options.IsDisabled\"\r\n                  formControlName=\"{{options.Name}}\">\r\n            <option value=\"\" disabled>--select--</option>\r\n            <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n                {{item.value}}\r\n            </option>\r\n          </select>\r\n\r\n          <div class=\"text-danger Required-text\"\r\n               *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n            {{getErrorValidation(DropdownListFormControl.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\">{{options.LabelDescription}}</div>\r\n          </div>\r\n\r\n          <!-- <div *ngIf=\"DropdownListFormControl.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",
+                template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [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      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n        [notFoundText]=\"'No data found.'\" [maxSelectedItems]=\"options.LimitSelection\"\r\n        [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n        [searchable]=\"true\" [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n        [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n        [(ngModel)]=\"SelectedList\" (change)=\"onItemSelect($event[options.ItemTempletkey])\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\"ks-cboxtags\">\r\n            <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\"\r\n              class=\" \" /> <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control bnsights-control\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect($event.target.value)\"\r\n        [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--select--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n        {{getErrorValidation(DropdownListFormControl.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\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <!-- <div *ngIf=\"DropdownListFormControl.valid\">{{resetError()}}</div> -->\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n</div>",
                 styles: [".cuppa-dropdown{background-color:#fff}.arrow-up,.arrow-down{border-left:none!important;border-right:none!important}.dropdown-list{padding-top:0!important}.c-token{background-color:#6495ed}.pure-checkbox .selected-item{background-color:#6495ed;color:#fff}\n"]
             },] }
 ];
@@ -1840,8 +1889,8 @@ DropdownListComponent.ctorParameters = () => [
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 DropdownListComponent.propDecorators = {
     group: [{ type: Input }],
@@ -1852,13 +1901,13 @@ DropdownListComponent.propDecorators = {
 
 class PhoneComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(ErrorHandler, controlUtility, controlContainer, PhoneControlHost, UtilityService, controlValidationService) {
-        this.ErrorHandler = ErrorHandler;
+    constructor(controlUtility, controlContainer, PhoneControlHost, UtilityService, controlValidationService, globalSettings) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.PhoneControlHost = PhoneControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.SearchCountryField = SearchCountryField;
         // TooltipLabel = TooltipLabel;
@@ -1895,6 +1944,8 @@ class PhoneComponent {
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.PhoneFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.IsRequired) {
             this.validationRules.push(Validators.required);
         }
@@ -1945,12 +1996,12 @@ PhoneComponent.decorators = [
             },] }
 ];
 PhoneComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 PhoneComponent.propDecorators = {
     group: [{ type: Input }],
@@ -1960,24 +2011,25 @@ PhoneComponent.propDecorators = {
 
 class ToggleslideComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(ErrorHandler, controlUtility, controlContainer, ToggleslideControlHost, TextControlHost, UtilityService, controlValidationService) {
-        this.ErrorHandler = ErrorHandler;
+    constructor(controlUtility, controlContainer, ToggleslideControlHost, TextControlHost, UtilityService, controlValidationService, globalSettings) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.ToggleslideControlHost = ToggleslideControlHost;
         this.TextControlHost = TextControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.SlideValue = false;
         ToggleslideComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        ;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.ToggleslideFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
         let validationRules = [];
         let validationRulesasync = [];
         this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.IsDisabled) {
             this.ToggleslideFormControl.disable();
         }
@@ -2011,13 +2063,13 @@ ToggleslideComponent.decorators = [
             },] }
 ];
 ToggleslideComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 ToggleslideComponent.propDecorators = {
     group: [{ type: Input }],
@@ -2025,14 +2077,14 @@ ToggleslideComponent.propDecorators = {
 };
 
 class HtmlEditorComponent {
-    constructor(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, translate, controlValidationService) {
+    constructor(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, controlValidationService, globalSettings) {
         this.zone = zone;
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.HtmlEditorControlHost = HtmlEditorControlHost;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.WordCount = 0;
         this.WordCountArray = 0;
@@ -2149,6 +2201,8 @@ class HtmlEditorComponent {
         this.group.addControl(this.options.Name, new FormControl(''));
         this.HtmlEditorFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
         this.HtmlEditorFormControl.setValue(this.options.Value);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.CustomValidation.length > 0) {
             let Validations = this.options.CustomValidation;
             for (let index = 0; index < Validations.length; index++) {
@@ -2213,8 +2267,8 @@ HtmlEditorComponent.ctorParameters = () => [
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 HtmlEditorComponent.propDecorators = {
     group: [{ type: Input }],
@@ -2223,14 +2277,13 @@ HtmlEditorComponent.propDecorators = {
 };
 
 class MultiLingualHtmlEditorComponent {
-    constructor(ErrorHandler, MultiLingualHtmlEditorFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService) {
-        this.ErrorHandler = ErrorHandler;
+    constructor(MultiLingualHtmlEditorFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
         this.MultiLingualHtmlEditorFormControlHost = MultiLingualHtmlEditorFormControlHost;
         this.controlContainer = controlContainer;
         this.controlUtility = controlUtility;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.CurrentLanguage = "";
         this.ArabicValidationRules = [];
@@ -2242,6 +2295,8 @@ class MultiLingualHtmlEditorComponent {
         this.validationRulesasync = [];
         this.ArabicLetterOnly = "";
         this.EnglishLetterOnly = "";
+        this.englishValue = null;
+        this.arabicValue = null;
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -2279,6 +2334,10 @@ class MultiLingualHtmlEditorComponent {
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!this.options.ViewType)
+                this.options.ViewType = this.globalSettings.ViewType;
+            if (!this.options.LanguageMode)
+                this.options.LanguageMode = this.globalSettings.LanguageMode;
             this.editorEnglishConfig = {
                 editable: !this.options.IsDisabled,
                 spellcheck: true,
@@ -2400,10 +2459,10 @@ class MultiLingualHtmlEditorComponent {
             // }
             this.MultilingualHtmlEditorgroup = new FormGroup({});
             ;
-            this.MultilingualHtmlEditorgroup.addControl("ArabicHtmlEditorValue", new FormControl(''));
-            this.MultilingualHtmlEditorgroup.addControl("EnglishHtmlEditorValue", new FormControl(''));
-            this.ArabicHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"]; //  new FormControl('',validationRules);
-            this.EnglishHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"]; //  new FormControl('',validationRules);
+            this.MultilingualHtmlEditorgroup.addControl("Arabic", new FormControl(''));
+            this.MultilingualHtmlEditorgroup.addControl("English", new FormControl(''));
+            this.ArabicHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["Arabic"]; //  new FormControl('',validationRules);
+            this.EnglishHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["English"]; //  new FormControl('',validationRules);
             this.group.addControl(this.options.Name, new FormGroup(this.MultilingualHtmlEditorgroup.controls));
             this.getCustomErrorsMassages();
             switch (this.options.Type) {
@@ -2463,30 +2522,37 @@ class MultiLingualHtmlEditorComponent {
             });
         });
     }
-    onTextChange() {
-        let arabicValue = this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].value;
-        let englishValue = this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].value;
-        let EngliswordCountArray = this.EnglishHtmlEditorFormControl.value.split(" ").length;
-        if (EngliswordCountArray > 0) {
-            if (EngliswordCountArray > this.options.MaxWordCount)
-                this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-            this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].markAsTouched();
-            this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].invalid;
-        }
-        let ArabicwordCountArray = this.ArabicHtmlEditorFormControl.value.split(" ").length;
-        if (ArabicwordCountArray > 0) {
-            if (ArabicwordCountArray > this.options.MaxWordCount)
-                this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-            this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].markAsTouched();
-            this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].invalid;
+    onTextChange(type) {
+        if (type == "en") {
+            this.englishValue = this.MultilingualHtmlEditorgroup.controls["English"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["English"].value;
+            if (this.englishValue)
+                this.EnglishHtmlEditorFormControl.setValue(this.englishValue);
+            let EngliswordCountArray = this.EnglishHtmlEditorFormControl.value.split(" ").length;
+            if (EngliswordCountArray > 0) {
+                if (EngliswordCountArray > this.options.MaxWordCount)
+                    this.MultilingualHtmlEditorgroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                this.MultilingualHtmlEditorgroup.controls["English"].markAsTouched();
+                this.MultilingualHtmlEditorgroup.controls["English"].invalid;
+            }
+        }
+        if (type == "ar") {
+            this.arabicValue = this.MultilingualHtmlEditorgroup.controls["Arabic"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["Arabic"].value;
+            if (this.arabicValue)
+                this.ArabicHtmlEditorFormControl.setValue(this.arabicValue);
+            let ArabicwordCountArray = this.ArabicHtmlEditorFormControl.value.split(" ").length;
+            if (ArabicwordCountArray > 0) {
+                if (ArabicwordCountArray > this.options.MaxWordCount)
+                    this.MultilingualHtmlEditorgroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                this.MultilingualHtmlEditorgroup.controls["Arabic"].markAsTouched();
+                this.MultilingualHtmlEditorgroup.controls["Arabic"].invalid;
+            }
         }
         let mulitLangModel = new EnglishArabicDTO();
-        mulitLangModel.Arabic = arabicValue;
-        mulitLangModel.English = englishValue;
-        this.ArabicHtmlEditorFormControl.setValue(arabicValue);
-        this.EnglishHtmlEditorFormControl.setValue(englishValue);
+        mulitLangModel.Arabic = this.arabicValue;
+        mulitLangModel.English = this.englishValue;
         this.OnChange.emit(mulitLangModel);
-        this.group.get(this.options.Name).setValue(mulitLangModel);
+        if (this.arabicValue && this.englishValue)
+            this.group.get(this.options.Name).setValue(mulitLangModel);
     }
     showGlobalError() {
         this.controlUtility.showGlobalError();
@@ -2577,18 +2643,17 @@ MultiLingualHtmlEditorComponent.controlContainerstatic = null;
 MultiLingualHtmlEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualHtmlEditor',
-                template: "<div class=\"b-control b-multilangual-html-editor\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      \r\n                            <angular-editor (blur)=\"onTextChange()\" dir=\"ltr\" (input)=\"onTextChange()\"  class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange()\"  [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                    formControlName=\"EnglishHtmlEditorValue\"  [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 (blur)=\"onTextChange()\" (input)=\"onTextChange()\" dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange()\"    [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                              formControlName=\"ArabicHtmlEditorValue\"  [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.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",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
 MultiLingualHtmlEditorComponent.ctorParameters = () => [
-    { type: ErrorMassageValidation },
     { type: FormGroupDirective },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: ControlUtility },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 MultiLingualHtmlEditorComponent.propDecorators = {
     group: [{ type: Input }],
@@ -2597,15 +2662,14 @@ MultiLingualHtmlEditorComponent.propDecorators = {
 };
 
 class ImageUploaderComponent {
-    constructor(zone, ErrorHandler, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, translate, controlValidationService) {
+    constructor(zone, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, controlValidationService, globalSettings) {
         this.zone = zone;
-        this.ErrorHandler = ErrorHandler;
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.ImageUplaoderControlHost = ImageUplaoderControlHost;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.files = [];
         this.ImageSource = "./src/assets/images/uploadimg.png";
         this.OnChange = new EventEmitter();
@@ -2652,6 +2716,8 @@ class ImageUploaderComponent {
     }
     ngOnInit() {
         this.controlValidationService.isCreatedBefor = false;
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.DefaultImageSrc != null && this.options.DefaultImageSrc != "")
             this.ImageSource = this.options.DefaultImageSrc;
         if (this.options.AllowImageCropper) {
@@ -2739,7 +2805,8 @@ class ImageUploaderComponent {
         }
     }
     showImageUploader(element) {
-        console.log(element);
+        let input = element.parentElement.parentElement.querySelector('input[type=file]');
+        input.click();
     }
     showGlobalError() {
         this.controlUtility.showGlobalError();
@@ -2881,13 +2948,12 @@ ImageUploaderComponent.decorators = [
 ];
 ImageUploaderComponent.ctorParameters = () => [
     { type: NgZone },
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 ImageUploaderComponent.propDecorators = {
     fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
@@ -2901,14 +2967,14 @@ class ProfilePictureDTO {
 }
 
 class ProfileImageUploaderComponent {
-    constructor(zone, ErrorHandler, controlUtility, controlContainer, ProfileImageUploaderControlHost, UtilityService, controlValidationService) {
+    constructor(zone, controlUtility, controlContainer, ProfileImageUploaderControlHost, UtilityService, controlValidationService, globalSettings) {
         this.zone = zone;
-        this.ErrorHandler = ErrorHandler;
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.ProfileImageUploaderControlHost = ProfileImageUploaderControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.files = [];
         this.ImageSource = "./src/assets/images/userimg.png";
         this.OnChange = new EventEmitter();
@@ -2956,6 +3022,8 @@ class ProfileImageUploaderComponent {
     }
     ngOnInit() {
         this.controlValidationService.isCreatedBefor = false;
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.DefaultImageSrc != null && this.options.DefaultImageSrc != "")
             this.ImageSource = this.options.DefaultImageSrc;
         this.config = {
@@ -3026,6 +3094,10 @@ class ProfileImageUploaderComponent {
             }
         }
     }
+    showImageUploader(element) {
+        let input = element.parentElement.parentElement.querySelector('input[type=file]');
+        input.click();
+    }
     showGlobalError() {
         this.controlUtility.showGlobalError();
     }
@@ -3198,18 +3270,18 @@ ProfileImageUploaderComponent.controlContainerstatic = null;
 ProfileImageUploaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-ProfileImageUploader',
-                template: "<div class=\"b-control b-profile-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\"></i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" class=\"ProfileDropBox d-inline-flex h-auto w-auto overflow-hidden m-0  {{options.ExtraClasses}}\" style=\"width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label class=\"rounded-circle w-100 h-100 m-0\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"w-100 rounded-circle\" />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n        <ngx-dropzone-image-preview *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    class=\"w-100 h-100 m-0\">\r\n\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ProfileImageUploadClassSelector\"  *ngIf=\"!options.AllowDropZone\" >\r\n        <ngx-dropzone-label  style=\" border: none !important;width:200px;height:200px;overflow:inherit;\"  class=\"d-inline-flex h-auto w-auto overflow-hidden m-0\" *ngIf=\"files.length==0\" >\r\n          <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\"  onclick=\"$(this).parents('.ProfileImageUploadClassSelector').find('input[type=file]').click();\">\r\n            <img [src]=\"ImageSource\"  class=\"h-100 w-100\"  />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n  \r\n      <div class=\"ProfileDropBox rounded-circle {{options.ExtraClasses}}\" style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n      [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n      id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n  \r\n   <ngx-dropzone-image-preview class=\"rounded-circle w-100 h-100 m-0\" *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                               >\r\n\r\n   </ngx-dropzone-image-preview>\r\n </div>\r\n      </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                Crop Image\r\n              </h4>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\r\n              <div *ngIf=\"imageUrl\">\r\n                <angular-cropper class=\"ProfileDropBox\" #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n                </angular-cropper>\r\n                <img [src]=\"imgwUrl\" />\r\n              </div>\r\n              <div style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n                      <span class=\"fa fa-search-plus\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n                      <span class=\"fa fa-search-minus\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n                      <span class=\"fa fa-arrow-left\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n                      <span class=\"fa fa-arrow-right\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n                      <span class=\"fa fa-arrow-up\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n                      <span class=\"fa fa-arrow-down\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n                      <span class=\"fa fa-undo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                Crop\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      \r\n    \r\n\r\n  <div class=\"text-danger Required-text\"\r\n  *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n  {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n</div>\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\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-profile-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\"></i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" class=\"ProfileDropBox d-inline-flex h-auto w-auto overflow-hidden m-0  {{options.ExtraClasses}}\" style=\"width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label class=\"rounded-circle w-100 h-100 m-0\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"w-100 rounded-circle\" />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n        <ngx-dropzone-image-preview *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    class=\"w-100 h-100 m-0\">\r\n\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ProfileImageUploadClassSelector\"  *ngIf=\"!options.AllowDropZone\" >\r\n        <ngx-dropzone-label  style=\" border: none !important;width:200px;height:200px;overflow:inherit;\"  class=\"d-inline-flex h-auto w-auto overflow-hidden m-0\" *ngIf=\"files.length==0\" >\r\n          <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element  (click)=\"showImageUploader(element)\">\r\n            <img [src]=\"ImageSource\"  class=\"h-100 w-100\"  />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n  \r\n      <div class=\"ProfileDropBox rounded-circle {{options.ExtraClasses}}\" style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n      [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n      id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n  \r\n   <ngx-dropzone-image-preview class=\"rounded-circle w-100 h-100 m-0\" *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                               >\r\n\r\n   </ngx-dropzone-image-preview>\r\n </div>\r\n      </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                Crop Image\r\n              </h4>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\r\n              <div *ngIf=\"imageUrl\">\r\n                <angular-cropper class=\"ProfileDropBox\" #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n                </angular-cropper>\r\n                <img [src]=\"imgwUrl\" />\r\n              </div>\r\n              <div style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n                      <span class=\"fa fa-search-plus\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n                      <span class=\"fa fa-search-minus\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n                      <span class=\"fa fa-arrow-left\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n                      <span class=\"fa fa-arrow-right\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n                      <span class=\"fa fa-arrow-up\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n                      <span class=\"fa fa-arrow-down\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n                      <span class=\"fa fa-undo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                Crop\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      \r\n    \r\n\r\n  <div class=\"text-danger Required-text\"\r\n  *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n  {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n</div>\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\r\n  </div>\r\n</div>\r\n",
                 styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-body{padding:2px 16px}\n"]
             },] }
 ];
 ProfileImageUploaderComponent.ctorParameters = () => [
     { type: NgZone },
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 ProfileImageUploaderComponent.propDecorators = {
     fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
@@ -3228,15 +3300,16 @@ class AutocompleteDTO {
 
 class AutocompleteTextBoxComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(http, ErrorHandler, controlUtility, controlContainer, AutocompleteTextBoxControlHost, UtilityService, translate, controlValidationService) {
+    constructor(http, ErrorHandler, requestHandlerService, controlUtility, controlContainer, AutocompleteTextBoxControlHost, UtilityService, controlValidationService, globalSettings) {
         this.http = http;
         this.ErrorHandler = ErrorHandler;
+        this.requestHandlerService = requestHandlerService;
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.AutocompleteTextBoxControlHost = AutocompleteTextBoxControlHost;
         this.UtilityService = UtilityService;
-        this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.keyword = 'value';
         this.Search = '';
@@ -3310,6 +3383,8 @@ class AutocompleteTextBoxComponent {
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.AutocompleteTextBoxControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
         // this.AutocompleteTextBoxControl.setValue(this.options.Value);
@@ -3352,10 +3427,12 @@ class AutocompleteTextBoxComponent {
             if (query) {
                 let params = new HttpParams();
                 params = params.append(this.options.QueryParam, query);
+                let requestOptionsModel = new RequestOptionsModel();
+                requestOptionsModel.disableBlockUI = true;
+                requestOptionsModel.disableSuccessNotification = true;
                 // using github public api to get users by name
-                return this.http.get(this.options.ActionURL, { headers: httpOptions.headers,
-                    params: params
-                }).pipe(map((data) => data || []), tap(() => noop, err => {
+                return this.requestHandlerService.get(this.options.ActionURL, params, requestOptionsModel)
+                    .pipe(map((data) => data || []), tap(() => noop, err => {
                     // in case of http error
                     this.errorMessage = err && err.message || 'Something goes wrong';
                 }));
@@ -3439,12 +3516,13 @@ AutocompleteTextBoxComponent.decorators = [
 AutocompleteTextBoxComponent.ctorParameters = () => [
     { type: HttpClient },
     { type: ErrorMassageValidation },
+    { type: RequestHandlerService },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 AutocompleteTextBoxComponent.propDecorators = {
     group: [{ type: Input }],
@@ -3454,14 +3532,15 @@ AutocompleteTextBoxComponent.propDecorators = {
 
 class TagsInputComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(http, ErrorHandler, controlUtility, controlContainer, TagsInputControlHost, UtilityService, controlValidationService) {
+    constructor(http, controlUtility, requestHandlerService, controlContainer, TagsInputControlHost, UtilityService, controlValidationService, globalSettings) {
         this.http = http;
-        this.ErrorHandler = ErrorHandler;
         this.controlUtility = controlUtility;
+        this.requestHandlerService = requestHandlerService;
         this.controlContainer = controlContainer;
         this.TagsInputControlHost = TagsInputControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         // TagInputControl: AbstractControl;
         this.SelectedId = [];
@@ -3516,6 +3595,8 @@ class TagsInputComponent {
         this.TagsFormGroup.addControl("tags", new FormControl(''));
         this.TagsFormControl = this.TagsFormGroup.controls["tags"]; //  new FormControl('',validationRules);
         this.group.addControl(this.options.Name, this.TagsFormControl);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
         // this.group.addControl(this.options.Name, new FormControl(''));
@@ -3573,21 +3654,11 @@ class TagsInputComponent {
         this.controlUtility.CopyInputMessage(inputElement);
     }
     searchFunctionFactory(Text) {
-        const httpOptions = this.options.ValidationToken != null && this.options.ValidationToken != "" ?
-            {
-                headers: new HttpHeaders({
-                    'Content-Type': 'application/json',
-                    'Authorization': this.options.ValidationToken
-                })
-            }
-            :
-                {
-                    headers: new HttpHeaders({
-                        'Content-Type': 'application/json',
-                    })
-                };
         let Url = `${this.options.ActionURL}?${this.options.QueryParamName}=${Text}&${this.options.SelectedItemsParamName}=${this.SelectedId}`;
-        let Model = this.http.get(Url, httpOptions);
+        let requestOptionsModel = new RequestOptionsModel();
+        requestOptionsModel.disableBlockUI = true;
+        requestOptionsModel.disableSuccessNotification = true;
+        let Model = this.requestHandlerService.get(Url, null, requestOptionsModel);
         return Model;
     }
     AddTag(event, key) {
@@ -3638,12 +3709,13 @@ TagsInputComponent.decorators = [
 ];
 TagsInputComponent.ctorParameters = () => [
     { type: HttpClient },
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
+    { type: RequestHandlerService },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 TagsInputComponent.propDecorators = {
     group: [{ type: Input }],
@@ -3677,7 +3749,8 @@ var FilterType;
 
 // tslint:disable-next-line: no-conflicting-lifecycle
 class PagingComponent {
-    constructor(http, router, onChangeService, requestHandlerService) {
+    constructor(utilityService, http, router, onChangeService, requestHandlerService) {
+        this.utilityService = utilityService;
         this.http = http;
         this.router = router;
         this.onChangeService = onChangeService;
@@ -3808,7 +3881,6 @@ class PagingComponent {
         this.getItemList(this.CurrentPage, true);
     }
     getItemList(page, IsFilterUpdated = false) {
-        ;
         let pagingDTO = new PagingDTO();
         let size = Number.parseInt(this.options.PageSize.toString());
         if (this.options.IsLoadMoreControl)
@@ -3853,25 +3925,45 @@ class PagingComponent {
         }
         this.requestHandlerService.post(this.options.ActionPostURL, pagingDTO, params)
             .subscribe((responseData) => {
-            this.result = responseData.items;
+            debugger;
+            this.result = responseData.items; //this.castItems(responseData.items);
             this.Items.emit(this.result);
+            this.totalRow = responseData.totalCount;
             if (IsFilterUpdated) {
                 this.items = [];
-                this.totalRow = responseData.totalCount;
                 this.Pages = Math.ceil((this.totalRow / this.options.PageSize));
                 this.items = Array(this.totalRow);
             }
         });
     }
+    castItems(objectArr) {
+        debugger;
+        let originalArray = [];
+        for (let index = 0; index < objectArr.length; index++) {
+            const element = objectArr[index];
+            let key, keys = Object.keys(element);
+            let n = keys.length;
+            let newObject = {};
+            while (n--) {
+                key = keys[n];
+                let Okey = key;
+                newObject[key.charAt(0).toUpperCase() + Okey.slice(1)] = element[key];
+            }
+            let finalObject = newObject;
+            originalArray.push(finalObject);
+        }
+        return originalArray;
+    }
 }
 PagingComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-Paging',
-                template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> Items in <strong> {{Pages}}</strong> Pages\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *ngIf=\"options.IsLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"ScrollDistance\"\r\n         [infiniteScrollUpDistance]=\"ScrollUpDistance\" [infiniteScrollThrottle]=\"Throttle\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-primary\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\"> Load More </button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{utilityService.getResourceValue(\"ItemsIn\")}} <strong> {{Pages}}</strong> {{utilityService.getResourceValue(\"Pages\")}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *ngIf=\"options.IsLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"ScrollDistance\"\r\n         [infiniteScrollUpDistance]=\"ScrollUpDistance\" [infiniteScrollThrottle]=\"Throttle\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-primary\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\"> Load More </button>\r\n  </div>\r\n</div>\r\n",
                 styles: [".ngx-pager-container{text-align:center;padding:25px 0 0}.ngx-pager-container li{display:inline-block;margin:0 4px}.ngx-pager-container li a{display:block;width:26px;height:26px;border:1px solid #707070;text-align:center;color:#3e4e59;font-size:14px;line-height:24px;border-radius:5px;text-decoration:none}.ngx-pager-container li a:hover{color:#fff;background:#0a0e03}.ngx-pager-container li.invisible{display:none}.ngx-pager-container li.active{background:#0a0e03;border-radius:5px}.ngx-pager-container li.active a{border:none;color:#fff}\n"]
             },] }
 ];
 PagingComponent.ctorParameters = () => [
+    { type: UtilityService },
     { type: HttpClient },
     { type: Router },
     { type: OnPagingFiltersChangeService },
@@ -4011,12 +4103,13 @@ JwPaginationComponent.propDecorators = {
 
 class RadioButtonComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(controlUtility, controlContainer, RadioButtonControlHost, UtilityService, controlValidationService) {
+    constructor(controlUtility, controlContainer, RadioButtonControlHost, UtilityService, controlValidationService, globalSettings) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.RadioButtonControlHost = RadioButtonControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.markAllAsTouched = false;
         this.validationRules = [];
@@ -4049,6 +4142,8 @@ class RadioButtonComponent {
     ngOnInit() {
         this.group.addControl(this.options.Name, new FormControl(''));
         this.RadioButtonFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.IsRequired) {
             this.validationRules.push(Validators.required);
         }
@@ -4095,7 +4190,8 @@ RadioButtonComponent.ctorParameters = () => [
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 RadioButtonComponent.propDecorators = {
     group: [{ type: Input }],
@@ -4105,12 +4201,13 @@ RadioButtonComponent.propDecorators = {
 
 class TextboxComponent {
     // tslint:disable-next-line: max-line-length
-    constructor(controlUtility, controlContainer, TextControlHost, UtilityService, controlValidationService) {
+    constructor(controlUtility, controlContainer, TextControlHost, UtilityService, controlValidationService, globalSettings) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.TextControlHost = TextControlHost;
         this.UtilityService = UtilityService;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.WordCount = 0;
         this.WordCountArray = 0;
@@ -4159,6 +4256,8 @@ class TextboxComponent {
     // }
     ngOnInit() {
         this.controlValidationService.isCreatedBefor = false;
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.MaskPattern != null && this.options.MaskPattern != "") {
             this.MaskPattern = this.options.MaskPattern;
             this.options.Placeholder = this.MaskPattern;
@@ -4235,6 +4334,7 @@ class TextboxComponent {
             this.group.markAllAsTouched();
             this.markAllAsTouched = true;
         });
+        this.options.ValidationRules = this.validationRules;
     }
     ngAfterViewInit() {
         this.controlUtility.setAttributeForControl(this.options);
@@ -4307,7 +4407,8 @@ TextboxComponent.ctorParameters = () => [
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 TextboxComponent.propDecorators = {
     group: [{ type: Input }],
@@ -4319,17 +4420,16 @@ class MapAutocompleteDTO {
 }
 
 class MapAutoCompleteComponent {
-    constructor(mapsAPILoader, ngZone, titleService, ErrorHandler, controlUtility, controlContainer, MapAutoCompleteControlHost, UtilityService, translate, controlValidationService) {
+    constructor(mapsAPILoader, ngZone, controlUtility, controlContainer, MapAutoCompleteControlHost, UtilityService, translate, controlValidationService, globalSettings) {
         this.mapsAPILoader = mapsAPILoader;
         this.ngZone = ngZone;
-        this.titleService = titleService;
-        this.ErrorHandler = ErrorHandler;
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.MapAutoCompleteControlHost = MapAutoCompleteControlHost;
         this.UtilityService = UtilityService;
         this.translate = translate;
         this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
         this.MapAutoCompleteModel = new MapAutocompleteDTO();
         this.CurrentLanguage = "";
@@ -4499,6 +4599,8 @@ class MapAutoCompleteComponent {
         });
         this.group.addControl(this.options.Name, new FormControl(''));
         this.MapAutoCompleteFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.IsRequired) {
             this.validationRules.push(Validators.required);
         }
@@ -4577,14 +4679,13 @@ MapAutoCompleteComponent.decorators = [
 MapAutoCompleteComponent.ctorParameters = () => [
     { type: MapsAPILoader },
     { type: NgZone },
-    { type: Title },
-    { type: ErrorMassageValidation },
     { type: ControlUtility },
     { type: ControlContainer, decorators: [{ type: Optional }] },
     { type: FormGroupDirective },
     { type: UtilityService },
     { type: BBSFTranslateService },
-    { type: ControlValidationService }
+    { type: ControlValidationService },
+    { type: GlobalSettings }
 ];
 MapAutoCompleteComponent.propDecorators = {
     group: [{ type: Input }],
@@ -4770,17 +4871,22 @@ var PagingActionMode;
 })(PagingActionMode || (PagingActionMode = {}));
 
 class FormComponent {
-    constructor(utilityService, controlValidationService, modalService, ngbActiveModal) {
+    constructor(controlUtility, utilityService, controlValidationService, modalService, ngbActiveModal) {
+        this.controlUtility = controlUtility;
         this.utilityService = utilityService;
         this.controlValidationService = controlValidationService;
         this.modalService = modalService;
         this.ngbActiveModal = ngbActiveModal;
     }
     ngOnInit() {
+        this.fromName = this.randomString(5);
     }
     submit() {
-        if (this.options.FormGroup.invalid)
+        this.options.FormGroup.markAllAsTouched();
+        if (this.options.FormGroup.invalid) {
+            this.showGlobalError();
             return;
+        }
         else {
             let submitModel = this.options.GetModelFunction();
             let submittedService = this.options.ServiceSubmitFunction.apply(null, submitModel);
@@ -4816,8 +4922,9 @@ class FormComponent {
                 this.utilityService.notifyErrorMessage();
         }
         else {
+            debugger;
             if (err.status == 400) {
-                this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new RequestOptionsModel());
+                this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new RequestOptionsModel(), this.fromName);
             }
             else {
                 errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
@@ -4829,15 +4936,27 @@ class FormComponent {
         if (!this.options.DisableBlockUI)
             this.utilityService.stopBlockUI();
     }
+    showGlobalError() {
+        this.controlUtility.showGlobalError(this.fromName);
+    }
+    randomString(length) {
+        var randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        var result = '';
+        for (var i = 0; i < length; i++) {
+            result += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
+        }
+        return result;
+    }
 }
 FormComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-Form',
-                template: "<form [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\">\r\n  \r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>"
+                template: "<form id=\"{{fromName}}\" [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\" > \r\n  \r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>"
             },] }
 ];
 FormComponent.ctorParameters = () => [
+    { type: ControlUtility },
     { type: UtilityService },
     { type: ControlValidationService },
     { type: NgbModal },
@@ -4856,27 +4975,43 @@ class ConfirmationModalComponent {
         this.styleSuccess = StyleConfirmationMode.Success;
     }
     ngOnInit() {
-        console.log("options on initialize");
-        console.log(this.options);
-        //check for options text values
-        this.setTextValues();
-    }
-    ngAfterViewInit() {
-        if (this.options.AutoShowModal)
-            this.showModal();
     }
     //Method used to show confirmation modal
     showModal() {
         this.utilityService.startBlockUI();
-        //open modal
-        this.modalService.open(this.confirmationModal);
+        //check for options text values
+        this.setTextValues();
+        //sweetalert styles//
+        switch (this.options.StyleConfirmationMode) {
+            case this.styleSuccess: {
+                this.icon = 'success';
+                this.btnColor = '#50cd89';
+            }
+            case this.styleWarning: {
+                this.icon = 'warning';
+                this.btnColor = '#ffc700';
+            }
+            case this.styleDanger: {
+                this.icon = 'error';
+                this.btnColor = '#f1416c';
+            }
+        }
+        Swal.fire({
+            title: this.options.ConfirmationHeader,
+            text: this.options.ConfirmationBody,
+            icon: this.icon,
+            showCancelButton: true,
+            confirmButtonColor: this.btnColor,
+            cancelButtonColor: '#f5f8fa',
+            showCloseButton: true,
+        }).then((result) => {
+            if (result.isConfirmed) {
+                this.submit();
+            }
+        });
         this.utilityService.stopBlockUI();
-        console.log("options after modal opened");
-        console.log(this.options);
     }
     setTextValues() {
-        console.log("options in first showmodal");
-        console.log(this.options);
         if (!this.options.ConfirmationHeader)
             this.options.ConfirmationHeader = this.utilityService.getResourceValue("DeleteConfirmation");
         if (!this.options.ConfirmationBody)
@@ -4931,9 +5066,8 @@ class ConfirmationModalComponent {
 }
 ConfirmationModalComponent.decorators = [
     { type: Component, args: [{
-                selector: 'BBSF-ConfirmationModal',
-                template: "<!--delete Modal-->\r\n<ng-template #confirmationModal let-modal>\r\n  <div class=\"modal-header pb-0 border-0 justify-content-end\">\r\n    <h5 class=\"modal-title\" id=\"exampleModalLabel\"></h5>\r\n    <button type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\" class=\"btn btn-sm btn-icon btn-active-color-primary\" (click)=\"modal.dismiss()\">\r\n      <span class=\"svg-icon svg-icon-1\">\r\n        <span [inlineSVG]=\"'./src/assets/images/arr061.svg'\"></span>\r\n      </span>\r\n    </button>\r\n  </div>\r\n  <div class=\"modal-body scroll-y px-10 px-lg-15 pt-0 pb-15\">\r\n    <div class=\"mb-13 text-center\">\r\n      <h1 class=\"mb-3\">{{options.ConfirmationHeader}}</h1>\r\n    </div>\r\n    <!--Style danger-->\r\n    <div [ngSwitch]=\"options.StyleConfirmationMode\">\r\n      <div *ngSwitchCase=\"styleDanger\" class=\"notice d-flex bg-light-danger rounded border-danger border border-dashed mb-10 p-6\">\r\n        <span class=\"svg-icon svg-icon-2tx svg-icon-danger me-4\">\r\n          <span [inlineSVG]=\"'./src/assets/images/gen044.svg'\"></span>\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-stack flex-grow-1\">\r\n          <div class=\"fw-bold\">\r\n            <div class=\"fs-6 text-gray-700\">\r\n              {{options.ConfirmationBody}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!--Style warning-->\r\n      <div *ngSwitchCase=\"styleWarning\" class=\"notice d-flex bg-light-warning rounded border-warning border border-dashed mb-10 p-6\">\r\n        <span class=\"svg-icon svg-icon-2tx svg-icon-warning me-4\">\r\n          <span [inlineSVG]=\"'./src/assets/images/gen044.svg'\"></span>\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-stack flex-grow-1\">\r\n          <div class=\"fw-bold\">\r\n            <div class=\"fs-6 text-gray-700\">\r\n              {{options.ConfirmationBody}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!--Style success-->\r\n      <div *ngSwitchCase=\"styleSuccess\" class=\"notice d-flex bg-light-success rounded border-success border border-dashed mb-10 p-6\">\r\n        <span class=\"svg-icon svg-icon-2tx svg-icon-success me-4\">\r\n          <span [inlineSVG]=\"'./src/assets/images/gen044.svg'\"></span>\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-stack flex-grow-1\">\r\n          <div class=\"fw-bold\">\r\n            <div class=\"fs-6 text-gray-700\">\r\n              {{options.ConfirmationBody}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"text-center pt-7\">\r\n      <button type=\"button\" class=\"btn btn-light btn-sm me-3 \" data-dismiss=\"modal\" (click)=\"modal.dismiss()\">\r\n        {{utilityService.getResourceValue(\"CancelLabel\")}}\r\n      </button>\r\n      <button type=\"button\" (click)=\"submit()\"\r\n              class=\"btn btn-light-danger btn-sm \">\r\n        {{options.SubmitButtonText}}\r\n      </button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
-                styles: [""]
+                template: "",
+                selector: 'BBSF-ConfirmationModal'
             },] }
 ];
 ConfirmationModalComponent.ctorParameters = () => [
@@ -5035,18 +5169,19 @@ BBSFControlsModule.decorators = [
                     AutocompleteLibModule,
                     BBSFUtilitiesModule,
                     InlineSVGModule.forRoot(),
+                    SweetAlert2Module
                 ],
                 providers: [
                     ErrorMassageValidation,
                     ControlUtility,
                     OnPagingFiltersChangeService,
-                    EnvironmentService,
-                    AuthService,
-                    RequestHandlerService,
-                    UtilityService,
+                    // EnvironmentService,
+                    // AuthService,
+                    // RequestHandlerService,
+                    // UtilityService,
                     TranslateService,
-                    BBSFTranslateService,
-                    ControlValidationService,
+                    // BBSFTranslateService,
+                    // ControlValidationService,
                     FormGroupDirective,
                     NgbModal,
                     NgbActiveModal
@@ -5114,12 +5249,6 @@ class CustomValidator {
     }
 }
 
-var ControlLayout;
-(function (ControlLayout) {
-    ControlLayout[ControlLayout["Vertical"] = 1] = "Vertical";
-    ControlLayout[ControlLayout["Horizontal"] = 2] = "Horizontal";
-})(ControlLayout || (ControlLayout = {}));
-
 var ForceDirection;
 (function (ForceDirection) {
     ForceDirection[ForceDirection["English"] = 1] = "English";
@@ -5161,14 +5290,17 @@ class TextBoxOptions {
         /**Prevent AutoComplete of textbox*/
         this.AutoComplete = "off";
         /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
       */
         this.CustomValidation = [];
         /** to set Direction of textbox  if textbox is Arabic or English  */
         this.ForceDirection = null;
+        /** Set Type of TextBox ("text","password","email","number") */
+        this.Type = InputType.Text;
         this.IconPosition = IconPosition.left;
         this.NoMargin = false;
+        this.ValidationRules = [];
     }
 }
 
@@ -5182,7 +5314,7 @@ class FileUploadOptions {
         */
         this.CustomValidation = [];
         /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
     }
 }
 
@@ -5194,13 +5326,13 @@ class MultiLingualTextBoxOptions {
         /**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 = ControlLayout.Vertical;
+        this.ViewType = null;
         /**To Set LanguageMode To MultipleLanguageText */
-        this.LanguageMode = LanguageMode.Both_Languages_are_visible;
+        this.LanguageMode = null;
         this.IconPositionEN = IconPosition.left;
         this.IconPositionAR = IconPosition.right;
         /*multi control placement type*/
-        this.MultiControlPlacementType = ControlLayout.Horizontal;
+        this.MultiControlPlacementType = null;
     }
 }
 
@@ -5210,7 +5342,7 @@ class Attribute {
 class TextAreaOptions {
     constructor() {
         /**  to set type of view  if TextArea is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
       */
         this.CustomValidation = [];
@@ -5227,11 +5359,11 @@ class MultiLingualTextAreaOptions {
         /**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 = ControlLayout.Vertical;
+        this.ViewType = null;
         /**To Set LanguageMode To MultipleLanguageText */
-        this.LanguageMode = LanguageMode.Both_Languages_are_visible;
+        this.LanguageMode = null;
         /*multi control placement type*/
-        this.MultiControlPlacementType = ControlLayout.Horizontal;
+        this.MultiControlPlacementType = null;
     }
 }
 
@@ -5254,7 +5386,7 @@ class DropdownOptions {
         /** Disable Bootstrap DropdownList */
         this.DisableBootstrapSelect = false;
         /**  to set type of view  if DropdownList is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /**  To Set Custom Validation*/
         this.CustomValidation = [];
         /** Set key for item in  DropdownList  */
@@ -5273,14 +5405,14 @@ class PhoneOptions {
         /**Set List Of Countries As Preferred Countries*/
         this.PreferredCountries = [];
         /**  to set type of view  if Phonebox is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         this.ForceDirection = ForceDirection.English;
     }
 }
 
 class ToggleSlideOptions {
     constructor() {
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         this.ForceDirection = ForceDirection.English;
     }
 }
@@ -5288,7 +5420,7 @@ class ToggleSlideOptions {
 class HtmlEditorOptions {
     constructor() {
         /**  to set type of view  if textbox is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
       */
         this.CustomValidation = [];
@@ -5307,11 +5439,11 @@ class MultiLingualHtmlEditorOptions {
         /**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 = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Set Height For  */
         this.Height = 150;
         /**To Set LanguageMode To MultipleLanguageText */
-        this.LanguageMode = LanguageMode.Both_Languages_are_visible;
+        this.LanguageMode = null;
     }
 }
 
@@ -5335,7 +5467,7 @@ class ImageUploadOptions {
         */
         this.CustomValidation = [];
         /**  to set type of view  if FileInput is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Set List of Custom Attribute to FileInput  */
         this.FileUploadAcceptsTypes = [ImageType.ImageTypes];
     }
@@ -5348,7 +5480,7 @@ class ProfileImageUploadOptions {
         this.AllowDropZone = false;
         this.CustomValidation = [];
         /**  to set type of view  if FileInput is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Set List of Custom Attribute to FileInput  */
         this.ImageUploadAcceptsTypes = [ImageType.ImageTypes];
     }
@@ -5407,7 +5539,7 @@ class MapAutoCompleteOptions {
       */
         this.CustomValidation = [];
         /**  to set type of view  if MapAutoComplete is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
     }
 }
 
@@ -5422,7 +5554,7 @@ class AutocompleteOptions {
         /** 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 = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
         */
         this.CustomValidation = [];
@@ -5445,7 +5577,7 @@ class TagsInputOptions {
         /**To set  value  to tagsinput */
         this.Value = null;
         /**  to set type of view  if tagsinput is Vertical or Horizontal */
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
         */
         this.CustomValidation = [];
@@ -5535,7 +5667,7 @@ class PagingOptions {
 
 class RadioButtonOptions {
     constructor() {
-        this.ViewType = ControlLayout.Vertical;
+        this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
       */
         this.CustomValidation = [];
@@ -5594,7 +5726,7 @@ class ConfirmationModalOptions {
         //Represents refrence to paging control that needs to be updated after success
         this.PagingReference = null;
         //Represents paging action excutes after submission (Reinitialize/Update)
-        this.PagingActionMode = PagingActionMode.Update;
+        this.PagingActionMode = PagingActionMode.Reinitialize;
         //Represents function that excutes after submission error
         this.OnErrorHandler = null;
         //Represents function that excutes after submission success
@@ -5605,9 +5737,6 @@ class ConfirmationModalOptions {
         this.DisableSuccessNotification = false;
         //If ="true" disable notification after submission error
         this.DisableErrorNotification = false;
-        //If ="true" modal open automatically after options initialization
-        //If="false" should call function showModal()
-        this.AutoShowModal = true;
     }
 }
 
@@ -5934,5 +6063,5 @@ var FileType;
  * Generated bundle index. Do not edit.
  */
 
-export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, BBSFControlsModule, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxOptions, ConfirmationModalOptions, ControlLayout, ControlUtility, Country, CustomValidation, CustomValidator, DatePickerOptions, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormOptions, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, InputType, Insert, LanguageMode, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorOptions, MultiLingualTextAreaOptions, MultiLingualTextBoxOptions, MultipleFileUploadModel, OnPagingFiltersChangeService, PagingActionMode, PagingDTO, PagingOptions, Para, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfilePictureDTO, RadioButtonItem, RadioButtonOptions, RangeNumber, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputDTO, TagsInputOptions, TextAreaOptions, TextBoxOptions, ToggleSlideOptions, UploadPersonalImage, environment, options, DateInputComponent as ɵa, FileUploadComponent as ɵb, MultiLingualTextBoxComponent as ɵc, TextboxComponent as ɵd, TextAreaComponent as ɵe, MultiLingualTextAreaComponent as ɵf, CheckBoxComponent as ɵg, DropdownListComponent as ɵh, PhoneComponent as ɵi, ToggleslideComponent as ɵj, HtmlEditorComponent as ɵk, MultiLingualHtmlEditorComponent as ɵl, ImageUploaderComponent as ɵm, ProfileImageUploaderComponent as ɵn, CalendarComponent as ɵo, MapAutoCompleteComponent as ɵp, AutocompleteTextBoxComponent as ɵq, TagsInputComponent as ɵr, PagingComponent as ɵs, JwPaginationComponent as ɵt, RadioButtonComponent as ɵu, FormComponent as ɵv, ConfirmationModalComponent as ɵw };
+export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, BBSFControlsModule, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxOptions, ConfirmationModalOptions, ControlLayout, ControlUtility, Country, CustomValidation, CustomValidator, DatePickerOptions, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormOptions, GlobalSettings, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, InputType, Insert, LanguageMode, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorOptions, MultiLingualTextAreaOptions, MultiLingualTextBoxOptions, MultipleFileUploadModel, OnPagingFiltersChangeService, PagingActionMode, PagingDTO, PagingOptions, Para, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfilePictureDTO, RadioButtonItem, RadioButtonOptions, RangeNumber, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagsInputDTO, TagsInputOptions, TextAreaOptions, TextBoxOptions, ToggleSlideOptions, UploadPersonalImage, environment, options, DateInputComponent as ɵa, FileUploadComponent as ɵb, MultiLingualTextBoxComponent as ɵc, TextboxComponent as ɵd, TextAreaComponent as ɵe, MultiLingualTextAreaComponent as ɵf, CheckBoxComponent as ɵg, DropdownListComponent as ɵh, PhoneComponent as ɵi, ToggleslideComponent as ɵj, HtmlEditorComponent as ɵk, MultiLingualHtmlEditorComponent as ɵl, ImageUploaderComponent as ɵm, ProfileImageUploaderComponent as ɵn, CalendarComponent as ɵo, MapAutoCompleteComponent as ɵp, AutocompleteTextBoxComponent as ɵq, TagsInputComponent as ɵr, PagingComponent as ɵs, JwPaginationComponent as ɵt, RadioButtonComponent as ɵu, FormComponent as ɵv, ConfirmationModalComponent as ɵw };
 //# sourceMappingURL=bnsights-bbsf-controls.js.map