@bnsights/bbsf-controls 1.0.8 → 1.0.9

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/angular'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@angular/core'), require('ng-block-ui'), require('@angular/forms'), require('@angular/http'), require('@angular/router'), require('ngx-toastr'), require('ngx-permissions'), require('@angular/cdk/overlay'), require('@ngrx/store-devtools'), require('@angular/common'), require('ngx-intl-tel-input'), require('@bnsights/bbsf-utilities'), require('ngx-bootstrap/datepicker'), require('rxjs'), require('ng2-file-upload'), require('ng-pick-datetime'), require('ng-multiselect-dropdown'), require('angular2-multiselect-dropdown'), require('ngx-summernote'), require('ngx-mask'), require('@syncfusion/ej2-angular-popups'), require('ngx-dropzone'), require('angular-cropperjs'), require('ngx-image-cropper'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('ngx-typeahead'), require('rxjs/operators'), require('ngx-tags-input'), require('@ng-select/ng-select'), require('ngx-infinite-scroll'), require('@angular/platform-browser'), require('@agm/core'), require('@angular-material-extensions/google-maps-autocomplete'), require('@fullcalendar/core/locales/en-gb'), require('@fullcalendar/core/locales/ar'), require('ngx-bootstrap/typeahead'), require('@angular/material/slide-toggle'), require('@kolkov/angular-editor'), require('angular-ng-autocomplete'), require('ng-inline-svg')) :
-    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', 'ng2-file-upload', 'ng-pick-datetime', 'ng-multiselect-dropdown', 'angular2-multiselect-dropdown', 'ngx-summernote', 'ngx-mask', '@syncfusion/ej2-angular-popups', 'ngx-dropzone', 'angular-cropperjs', 'ngx-image-cropper', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', 'ngx-typeahead', 'rxjs/operators', 'ngx-tags-input', '@ng-select/ng-select', 'ngx-infinite-scroll', '@angular/platform-browser', '@agm/core', '@angular-material-extensions/google-maps-autocomplete', '@fullcalendar/core/locales/en-gb', '@fullcalendar/core/locales/ar', 'ngx-bootstrap/typeahead', '@angular/material/slide-toggle', '@kolkov/angular-editor', 'angular-ng-autocomplete', 'ng-inline-svg'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.ng2FileUpload, global.ngPickDatetime, global.ngMultiselectDropdown, global.angular2MultiselectDropdown, global.ngxSummernote, global.ngxMask, global.ej2AngularPopups, global.ngxDropzone, global.angularCropperjs, global.ngxImageCropper, global.ngBootstrap, global.core$1, global.ng.common.http, global.ngxTypeahead, global.rxjs.operators, global.ngxTagsInput, global.ngSelect, global.ngxInfiniteScroll, global.ng.platformBrowser, global.core, global.googleMapsAutocomplete, global.enGbLocale, global.ArLocale, global.typeahead, global.ng.material.slideToggle, global.angularEditor, global.angularNgAutocomplete, global.ngInlineSvg));
-})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, ng2FileUpload, ngPickDatetime, ngMultiselectDropdown, angular2MultiselectDropdown, ngxSummernote, ngxMask, ej2AngularPopups, ngxDropzone, angularCropperjs, ngxImageCropper, ngBootstrap, core$1, http$1, ngxTypeahead, operators, ngxTagsInput, ngSelect, ngxInfiniteScroll, platformBrowser, core, googleMapsAutocomplete, enGbLocale, ArLocale, typeahead, slideToggle, angularEditor, angularNgAutocomplete, ngInlineSvg) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/angular'), require('@fullcalendar/daygrid'), require('@fullcalendar/timegrid'), require('@fullcalendar/list'), require('@fullcalendar/interaction'), require('@angular/core'), require('ng-block-ui'), require('@angular/forms'), require('@angular/http'), require('@angular/router'), require('ngx-toastr'), require('ngx-permissions'), require('@angular/cdk/overlay'), require('@ngrx/store-devtools'), require('@angular/common'), require('ngx-intl-tel-input'), require('@bnsights/bbsf-utilities'), require('ngx-bootstrap/datepicker'), require('rxjs'), require('ng2-file-upload'), require('ng-pick-datetime'), require('ng-multiselect-dropdown'), require('angular2-multiselect-dropdown'), require('ngx-summernote'), require('ngx-mask'), require('@syncfusion/ej2-angular-popups'), require('ngx-dropzone'), require('angular-cropperjs'), require('ngx-image-cropper'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('ngx-typeahead'), require('rxjs/operators'), require('ngx-tags-input'), require('@ng-select/ng-select'), require('ngx-infinite-scroll'), require('@agm/core'), require('@angular-material-extensions/google-maps-autocomplete'), require('@fullcalendar/core/locales/en-gb'), require('@fullcalendar/core/locales/ar'), require('ngx-bootstrap/typeahead'), require('@angular/material/slide-toggle'), require('@kolkov/angular-editor'), require('angular-ng-autocomplete'), require('ng-inline-svg')) :
+    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', 'ng2-file-upload', 'ng-pick-datetime', 'ng-multiselect-dropdown', 'angular2-multiselect-dropdown', 'ngx-summernote', 'ngx-mask', '@syncfusion/ej2-angular-popups', 'ngx-dropzone', 'angular-cropperjs', 'ngx-image-cropper', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', 'ngx-typeahead', 'rxjs/operators', 'ngx-tags-input', '@ng-select/ng-select', 'ngx-infinite-scroll', '@agm/core', '@angular-material-extensions/google-maps-autocomplete', '@fullcalendar/core/locales/en-gb', '@fullcalendar/core/locales/ar', 'ngx-bootstrap/typeahead', '@angular/material/slide-toggle', '@kolkov/angular-editor', 'angular-ng-autocomplete', 'ng-inline-svg'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.ng2FileUpload, global.ngPickDatetime, global.ngMultiselectDropdown, global.angular2MultiselectDropdown, global.ngxSummernote, global.ngxMask, global.ej2AngularPopups, global.ngxDropzone, global.angularCropperjs, global.ngxImageCropper, global.ngBootstrap, global.core$1, global.ng.common.http, global.ngxTypeahead, global.rxjs.operators, global.ngxTagsInput, global.ngSelect, global.ngxInfiniteScroll, global.core, global.googleMapsAutocomplete, global.enGbLocale, global.ArLocale, global.typeahead, global.ng.material.slideToggle, global.angularEditor, global.angularNgAutocomplete, global.ngInlineSvg));
+})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, ng2FileUpload, ngPickDatetime, ngMultiselectDropdown, angular2MultiselectDropdown, ngxSummernote, ngxMask, ej2AngularPopups, ngxDropzone, angularCropperjs, ngxImageCropper, ngBootstrap, core$1, http$1, ngxTypeahead, operators, ngxTagsInput, ngSelect, ngxInfiniteScroll, core, googleMapsAutocomplete, enGbLocale, ArLocale, typeahead, slideToggle, angularEditor, angularNgAutocomplete, ngInlineSvg) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -469,15 +469,49 @@
         return MultipleFileUploadModel;
     }());
 
+    exports.ControlLayout = void 0;
+    (function (ControlLayout) {
+        ControlLayout[ControlLayout["Vertical"] = 1] = "Vertical";
+        ControlLayout[ControlLayout["Horizontal"] = 2] = "Horizontal";
+    })(exports.ControlLayout || (exports.ControlLayout = {}));
+
+    exports.LanguageMode = void 0;
+    (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";
+    })(exports.LanguageMode || (exports.LanguageMode = {}));
+
+    var GlobalSettings = /** @class */ (function () {
+        function GlobalSettings() {
+            /**  to set type of view  if MultilingualTextArea is Vertical or Horizontal */
+            this.ViewType = exports.ControlLayout.Vertical;
+            /*multi control placement type*/
+            this.MultiControlPlacementType = exports.ControlLayout.Horizontal;
+            /**To Set LanguageMode To MultipleLanguageText */
+            this.LanguageMode = exports.LanguageMode.Both_Languages_are_visible;
+            this.HideAstericsWhenRequired = false;
+        }
+        return GlobalSettings;
+    }());
+    GlobalSettings.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function GlobalSettings_Factory() { return new GlobalSettings(); }, token: GlobalSettings, providedIn: "root" });
+    GlobalSettings.decorators = [
+        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
+    ];
+
     var FileUploadComponent = /** @class */ (function () {
-        function FileUploadComponent(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, translate, controlValidationService) {
+        function FileUploadComponent(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             this.controlContainer = controlContainer;
             this.MultipleFileUplaodControlHost = MultipleFileUplaodControlHost;
             this.controlUtility = controlUtility;
             this.UtilityService = UtilityService;
-            this.translate = translate;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.ValidationMessage = "";
             this.AcceptedType = "";
@@ -519,6 +553,8 @@
             var _this = this;
             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
@@ -781,8 +817,8 @@
         { type: forms.FormGroupDirective },
         { type: ControlUtility },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     FileUploadComponent.propDecorators = {
         fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: false },] }],
@@ -1115,27 +1151,16 @@
         return EnglishArabicDTO;
     }());
 
-    exports.LanguageMode = void 0;
-    (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";
-    })(exports.LanguageMode || (exports.LanguageMode = {}));
-
     var MultiLingualTextBoxComponent = /** @class */ (function () {
-        function MultiLingualTextBoxComponent(ErrorHandler, MultiLingualTextBoxFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService) {
+        function MultiLingualTextBoxComponent(MultiLingualTextBoxFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService, globalSettings) {
             var _this = this;
-            this.ErrorHandler = ErrorHandler;
             this.MultiLingualTextBoxFormControlHost = MultiLingualTextBoxFormControlHost;
             this.controlContainer = controlContainer;
             this.controlUtility = controlUtility;
             this.UtilityService = UtilityService;
             this.translate = translate;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.ArabicWordCount = 0;
             this.ArabicWordCountArray = 0;
@@ -1207,6 +1232,12 @@
                             this.EnglishFormControl = this.MultiLanguagegroup.controls["EnglishValue"]; //  new FormControl('',validationRules);
                             this.group.addControl(this.options.Name, new forms.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 != "")
@@ -1438,18 +1469,18 @@
     MultiLingualTextBoxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-MultiLingualTextBox',
-                    template: "<div class=\"b-control b-multilangual-textbox\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n                    <label class=\"b-label col-form-label col-sm-12\"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\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=\"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 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=\"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",
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
                 },] }
     ];
     MultiLingualTextBoxComponent.ctorParameters = function () { return [
-        { type: ErrorMassageValidation },
         { type: forms.FormGroupDirective },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: ControlUtility },
         { type: bbsfUtilities.UtilityService },
         { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     MultiLingualTextBoxComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -1458,14 +1489,14 @@
     };
 
     var TextAreaComponent = /** @class */ (function () {
-        function TextAreaComponent(ErrorHandler, controlUtility, controlContainer, TextAreaControlHost, UtilityService, controlValidationService) {
+        function TextAreaComponent(controlUtility, controlContainer, TextAreaControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
-            this.ErrorHandler = ErrorHandler;
             this.controlUtility = controlUtility;
             this.controlContainer = controlContainer;
             this.TextAreaControlHost = TextAreaControlHost;
             this.UtilityService = UtilityService;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.WordCount = 0;
             this.WordCountArray = 0;
@@ -1503,6 +1534,8 @@
             this.controlValidationService.isCreatedBefor = false;
             this.group.addControl(this.options.Name, new forms.FormControl(''));
             this.TextAreaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+            if (!this.options.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);
@@ -1590,12 +1623,12 @@
                 },] }
     ];
     TextAreaComponent.ctorParameters = function () { return [
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     TextAreaComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -1604,15 +1637,14 @@
     };
 
     var MultiLingualTextAreaComponent = /** @class */ (function () {
-        function MultiLingualTextAreaComponent(ErrorHandler, MultiLingualTextAreaFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService) {
+        function MultiLingualTextAreaComponent(MultiLingualTextAreaFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
-            this.ErrorHandler = ErrorHandler;
             this.MultiLingualTextAreaFormControlHost = MultiLingualTextAreaFormControlHost;
             this.controlContainer = controlContainer;
             this.controlUtility = controlUtility;
             this.UtilityService = UtilityService;
-            this.translate = translate;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.ArabicWordCount = 0;
             this.ArabicWordCountArray = 0;
@@ -1680,6 +1712,12 @@
                             //   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 != "")
@@ -1918,13 +1956,12 @@
                 },] }
     ];
     MultiLingualTextAreaComponent.ctorParameters = function () { return [
-        { type: ErrorMassageValidation },
         { type: forms.FormGroupDirective },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: ControlUtility },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     MultiLingualTextAreaComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -2044,15 +2081,15 @@
 
     var DropdownListComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function DropdownListComponent(onChangeService, controlUtility, controlContainer, DropdownListControlHost, UtilityService, translate, controlValidationService) {
+        function DropdownListComponent(onChangeService, controlUtility, controlContainer, DropdownListControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
@@ -2115,6 +2152,8 @@
             };
             this.group.addControl(this.options.Name, new forms.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) {
                 var Validations = this.options.CustomValidation;
                 for (var index = 0; index < Validations.length; index++) {
@@ -2192,7 +2231,7 @@
         { type: i0.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"]
                 },] }
     ];
@@ -2202,8 +2241,8 @@
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     DropdownListComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -2214,14 +2253,14 @@
 
     var PhoneComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function PhoneComponent(ErrorHandler, controlUtility, controlContainer, PhoneControlHost, UtilityService, controlValidationService) {
+        function PhoneComponent(controlUtility, controlContainer, PhoneControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
-            this.ErrorHandler = ErrorHandler;
             this.controlUtility = controlUtility;
             this.controlContainer = controlContainer;
             this.PhoneControlHost = PhoneControlHost;
             this.UtilityService = UtilityService;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.SearchCountryField = ngxIntlTelInput.SearchCountryField;
             // TooltipLabel = TooltipLabel;
@@ -2259,6 +2298,8 @@
             this.controlValidationService.isCreatedBefor = false;
             this.group.addControl(this.options.Name, new forms.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(forms.Validators.required);
             }
@@ -2310,12 +2351,12 @@
                 },] }
     ];
     PhoneComponent.ctorParameters = function () { return [
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     PhoneComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -2325,24 +2366,25 @@
 
     var ToggleslideComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function ToggleslideComponent(ErrorHandler, controlUtility, controlContainer, ToggleslideControlHost, TextControlHost, UtilityService, controlValidationService) {
-            this.ErrorHandler = ErrorHandler;
+        function ToggleslideComponent(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;
         }
         ToggleslideComponent.prototype.ngOnInit = function () {
-            ;
             this.group.addControl(this.options.Name, new forms.FormControl(''));
             this.ToggleslideFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
             var validationRules = [];
             var 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();
             }
@@ -2377,13 +2419,13 @@
                 },] }
     ];
     ToggleslideComponent.ctorParameters = function () { return [
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     ToggleslideComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -2391,15 +2433,15 @@
     };
 
     var HtmlEditorComponent = /** @class */ (function () {
-        function HtmlEditorComponent(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, translate, controlValidationService) {
+        function HtmlEditorComponent(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
             this.WordCount = 0;
             this.WordCountArray = 0;
@@ -2517,6 +2559,8 @@
             this.group.addControl(this.options.Name, new forms.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) {
                 var Validations = this.options.CustomValidation;
                 for (var index = 0; index < Validations.length; index++) {
@@ -2582,8 +2626,8 @@
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     HtmlEditorComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -2592,15 +2636,14 @@
     };
 
     var MultiLingualHtmlEditorComponent = /** @class */ (function () {
-        function MultiLingualHtmlEditorComponent(ErrorHandler, MultiLingualHtmlEditorFormControlHost, controlContainer, controlUtility, UtilityService, translate, controlValidationService) {
+        function MultiLingualHtmlEditorComponent(MultiLingualHtmlEditorFormControlHost, controlContainer, controlUtility, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
-            this.ErrorHandler = ErrorHandler;
             this.MultiLingualHtmlEditorFormControlHost = MultiLingualHtmlEditorFormControlHost;
             this.controlContainer = controlContainer;
             this.controlUtility = controlUtility;
             this.UtilityService = UtilityService;
-            this.translate = translate;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.CurrentLanguage = "";
             this.ArabicValidationRules = [];
@@ -2612,6 +2655,8 @@
             this.validationRulesasync = [];
             this.ArabicLetterOnly = "";
             this.EnglishLetterOnly = "";
+            this.englishValue = null;
+            this.arabicValue = null;
             this.resetError = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -2654,6 +2699,10 @@
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
+                            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,
@@ -2844,30 +2893,37 @@
                 });
             });
         };
-        MultiLingualHtmlEditorComponent.prototype.onTextChange = function () {
-            var arabicValue = this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].value;
-            var englishValue = this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].value;
-            var 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;
-            }
-            var 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;
+        MultiLingualHtmlEditorComponent.prototype.onTextChange = function (type) {
+            if (type == "en") {
+                this.englishValue = this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"].value;
+                if (this.englishValue)
+                    this.EnglishHtmlEditorFormControl.setValue(this.englishValue);
+                var 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;
+                }
+            }
+            if (type == "ar") {
+                this.arabicValue = this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"].value;
+                if (this.arabicValue)
+                    this.ArabicHtmlEditorFormControl.setValue(this.arabicValue);
+                var 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;
+                }
             }
             var 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);
         };
         MultiLingualHtmlEditorComponent.prototype.showGlobalError = function () {
             this.controlUtility.showGlobalError();
@@ -2959,18 +3015,17 @@
     MultiLingualHtmlEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-MultiLingualHtmlEditor',
-                    template: "<div class=\"b-control b-multilangual-html-editor\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      \r\n                            <angular-editor (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=\"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  dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\"    [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",
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
                 },] }
     ];
     MultiLingualHtmlEditorComponent.ctorParameters = function () { return [
-        { type: ErrorMassageValidation },
         { type: forms.FormGroupDirective },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: ControlUtility },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     MultiLingualHtmlEditorComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -2979,16 +3034,15 @@
     };
 
     var ImageUploaderComponent = /** @class */ (function () {
-        function ImageUploaderComponent(zone, ErrorHandler, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, translate, controlValidationService) {
+        function ImageUploaderComponent(zone, controlUtility, controlContainer, ImageUplaoderControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
@@ -3036,6 +3090,8 @@
         ImageUploaderComponent.prototype.ngOnInit = function () {
             var _this = this;
             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) {
@@ -3277,13 +3333,12 @@
     ];
     ImageUploaderComponent.ctorParameters = function () { return [
         { type: i0.NgZone },
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     ImageUploaderComponent.propDecorators = {
         fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: false },] }],
@@ -3300,15 +3355,15 @@
     }());
 
     var ProfileImageUploaderComponent = /** @class */ (function () {
-        function ProfileImageUploaderComponent(zone, ErrorHandler, controlUtility, controlContainer, ProfileImageUploaderControlHost, UtilityService, controlValidationService) {
+        function ProfileImageUploaderComponent(zone, controlUtility, controlContainer, ProfileImageUploaderControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
@@ -3357,6 +3412,8 @@
         ProfileImageUploaderComponent.prototype.ngOnInit = function () {
             var _this = this;
             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 = {
@@ -3619,12 +3676,12 @@
     ];
     ProfileImageUploaderComponent.ctorParameters = function () { return [
         { type: i0.NgZone },
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     ProfileImageUploaderComponent.propDecorators = {
         fileInput: [{ type: i0.ViewChild, args: ['fileInput', { static: false },] }],
@@ -3644,16 +3701,17 @@
 
     var AutocompleteTextBoxComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function AutocompleteTextBoxComponent(http, ErrorHandler, controlUtility, controlContainer, AutocompleteTextBoxControlHost, UtilityService, translate, controlValidationService) {
+        function AutocompleteTextBoxComponent(http, ErrorHandler, requestHandlerService, controlUtility, controlContainer, AutocompleteTextBoxControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
             this.keyword = 'value';
             this.Search = '';
@@ -3728,6 +3786,8 @@
             this.controlValidationService.isCreatedBefor = false;
             this.group.addControl(this.options.Name, new forms.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);
@@ -3770,10 +3830,12 @@
                 if (query) {
                     var params = new http$1.HttpParams();
                     params = params.append(_this.options.QueryParam, query);
+                    var requestOptionsModel = new bbsfUtilities.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(operators.map(function (data) { return data || []; }), operators.tap(function () { return rxjs.noop; }, function (err) {
+                    return _this.requestHandlerService.get(_this.options.ActionURL, params, requestOptionsModel)
+                        .pipe(operators.map(function (data) { return data || []; }), operators.tap(function () { return rxjs.noop; }, function (err) {
                         // in case of http error
                         _this.errorMessage = err && err.message || 'Something goes wrong';
                     }));
@@ -3867,12 +3929,13 @@
     AutocompleteTextBoxComponent.ctorParameters = function () { return [
         { type: http$1.HttpClient },
         { type: ErrorMassageValidation },
+        { type: bbsfUtilities.RequestHandlerService },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     AutocompleteTextBoxComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -3882,15 +3945,16 @@
 
     var TagsInputComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function TagsInputComponent(http, ErrorHandler, controlUtility, controlContainer, TagsInputControlHost, UtilityService, controlValidationService) {
+        function TagsInputComponent(http, controlUtility, requestHandlerService, controlContainer, TagsInputControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
             // TagInputControl: AbstractControl;
             this.SelectedId = [];
@@ -3957,6 +4021,8 @@
             this.TagsFormGroup.addControl("tags", new forms.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(''));
@@ -4014,21 +4080,11 @@
             this.controlUtility.CopyInputMessage(inputElement);
         };
         TagsInputComponent.prototype.searchFunctionFactory = function (Text) {
-            var httpOptions = this.options.ValidationToken != null && this.options.ValidationToken != "" ?
-                {
-                    headers: new http$1.HttpHeaders({
-                        'Content-Type': 'application/json',
-                        'Authorization': this.options.ValidationToken
-                    })
-                }
-                :
-                    {
-                        headers: new http$1.HttpHeaders({
-                            'Content-Type': 'application/json',
-                        })
-                    };
             var Url = this.options.ActionURL + "?" + this.options.QueryParamName + "=" + Text + "&" + this.options.SelectedItemsParamName + "=" + this.SelectedId;
-            var Model = this.http.get(Url, httpOptions);
+            var requestOptionsModel = new bbsfUtilities.RequestOptionsModel();
+            requestOptionsModel.disableBlockUI = true;
+            requestOptionsModel.disableSuccessNotification = true;
+            var Model = this.requestHandlerService.get(Url, null, requestOptionsModel);
             return Model;
         };
         TagsInputComponent.prototype.AddTag = function (event, key) {
@@ -4080,12 +4136,13 @@
     ];
     TagsInputComponent.ctorParameters = function () { return [
         { type: http$1.HttpClient },
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
+        { type: bbsfUtilities.RequestHandlerService },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     TagsInputComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -4120,8 +4177,9 @@
 
     // tslint:disable-next-line: no-conflicting-lifecycle
     var PagingComponent = /** @class */ (function () {
-        function PagingComponent(http, router, onChangeService, requestHandlerService) {
+        function PagingComponent(utilityService, http, router, onChangeService, requestHandlerService) {
             var _this = this;
+            this.utilityService = utilityService;
             this.http = http;
             this.router = router;
             this.onChangeService = onChangeService;
@@ -4316,11 +4374,12 @@
     PagingComponent.decorators = [
         { type: i0.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 = function () { return [
+        { type: bbsfUtilities.UtilityService },
         { type: http$1.HttpClient },
         { type: router.Router },
         { type: OnPagingFiltersChangeService },
@@ -4443,13 +4502,14 @@
 
     var RadioButtonComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function RadioButtonComponent(controlUtility, controlContainer, RadioButtonControlHost, UtilityService, controlValidationService) {
+        function RadioButtonComponent(controlUtility, controlContainer, RadioButtonControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             this.controlUtility = controlUtility;
             this.controlContainer = controlContainer;
             this.RadioButtonControlHost = RadioButtonControlHost;
             this.UtilityService = UtilityService;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.markAllAsTouched = false;
             this.validationRules = [];
@@ -4483,6 +4543,8 @@
             var _this = this;
             this.group.addControl(this.options.Name, new forms.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(forms.Validators.required);
             }
@@ -4530,7 +4592,8 @@
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     RadioButtonComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -4540,13 +4603,14 @@
 
     var TextboxComponent = /** @class */ (function () {
         // tslint:disable-next-line: max-line-length
-        function TextboxComponent(controlUtility, controlContainer, TextControlHost, UtilityService, controlValidationService) {
+        function TextboxComponent(controlUtility, controlContainer, TextControlHost, UtilityService, controlValidationService, globalSettings) {
             var _this = this;
             this.controlUtility = controlUtility;
             this.controlContainer = controlContainer;
             this.TextControlHost = TextControlHost;
             this.UtilityService = UtilityService;
             this.controlValidationService = controlValidationService;
+            this.globalSettings = globalSettings;
             this.OnChange = new i0.EventEmitter();
             this.WordCount = 0;
             this.WordCountArray = 0;
@@ -4596,6 +4660,8 @@
         TextboxComponent.prototype.ngOnInit = function () {
             var _this = this;
             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;
@@ -4745,7 +4811,8 @@
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     TextboxComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -4760,18 +4827,17 @@
     }());
 
     var MapAutoCompleteComponent = /** @class */ (function () {
-        function MapAutoCompleteComponent(mapsAPILoader, ngZone, titleService, ErrorHandler, controlUtility, controlContainer, MapAutoCompleteControlHost, UtilityService, translate, controlValidationService) {
+        function MapAutoCompleteComponent(mapsAPILoader, ngZone, controlUtility, controlContainer, MapAutoCompleteControlHost, UtilityService, translate, controlValidationService, globalSettings) {
             var _this = this;
             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 i0.EventEmitter();
             this.MapAutoCompleteModel = new MapAutocompleteDTO();
             this.CurrentLanguage = "";
@@ -4948,6 +5014,8 @@
             });
             this.group.addControl(this.options.Name, new forms.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(forms.Validators.required);
             }
@@ -5027,14 +5095,13 @@
     MapAutoCompleteComponent.ctorParameters = function () { return [
         { type: core.MapsAPILoader },
         { type: i0.NgZone },
-        { type: platformBrowser.Title },
-        { type: ErrorMassageValidation },
         { type: ControlUtility },
         { type: forms.ControlContainer, decorators: [{ type: i0.Optional }] },
         { type: forms.FormGroupDirective },
         { type: bbsfUtilities.UtilityService },
         { type: bbsfUtilities.BBSFTranslateService },
-        { type: bbsfUtilities.ControlValidationService }
+        { type: bbsfUtilities.ControlValidationService },
+        { type: GlobalSettings }
     ]; };
     MapAutoCompleteComponent.propDecorators = {
         group: [{ type: i0.Input }],
@@ -5241,6 +5308,7 @@
         };
         FormComponent.prototype.submit = function () {
             var _this = this;
+            this.options.FormGroup.markAllAsTouched();
             if (this.options.FormGroup.invalid)
                 return;
             else {
@@ -5319,27 +5387,17 @@
             this.styleSuccess = exports.StyleConfirmationMode.Success;
         }
         ConfirmationModalComponent.prototype.ngOnInit = function () {
-            console.log("options on initialize");
-            console.log(this.options);
-            //check for options text values
-            this.setTextValues();
-        };
-        ConfirmationModalComponent.prototype.ngAfterViewInit = function () {
-            if (this.options.AutoShowModal)
-                this.showModal();
         };
         //Method used to show confirmation modal
         ConfirmationModalComponent.prototype.showModal = function () {
             this.utilityService.startBlockUI();
+            //check for options text values
+            this.setTextValues();
             //open modal
             this.modalService.open(this.confirmationModal);
             this.utilityService.stopBlockUI();
-            console.log("options after modal opened");
-            console.log(this.options);
         };
         ConfirmationModalComponent.prototype.setTextValues = function () {
-            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)
@@ -5506,13 +5564,13 @@
                         ErrorMassageValidation,
                         ControlUtility,
                         OnPagingFiltersChangeService,
-                        bbsfUtilities.EnvironmentService,
-                        bbsfUtilities.AuthService,
-                        bbsfUtilities.RequestHandlerService,
-                        bbsfUtilities.UtilityService,
+                        // EnvironmentService,
+                        // AuthService,
+                        // RequestHandlerService,
+                        // UtilityService,
                         core$1.TranslateService,
-                        bbsfUtilities.BBSFTranslateService,
-                        bbsfUtilities.ControlValidationService,
+                        // BBSFTranslateService,
+                        // ControlValidationService,
                         forms.FormGroupDirective,
                         ngBootstrap.NgbModal,
                         ngBootstrap.NgbActiveModal
@@ -5586,12 +5644,6 @@
         return CustomValidator;
     }());
 
-    exports.ControlLayout = void 0;
-    (function (ControlLayout) {
-        ControlLayout[ControlLayout["Vertical"] = 1] = "Vertical";
-        ControlLayout[ControlLayout["Horizontal"] = 2] = "Horizontal";
-    })(exports.ControlLayout || (exports.ControlLayout = {}));
-
     exports.ForceDirection = void 0;
     (function (ForceDirection) {
         ForceDirection[ForceDirection["English"] = 1] = "English";
@@ -5637,7 +5689,7 @@
             /**Prevent AutoComplete of textbox*/
             this.AutoComplete = "off";
             /**  to set type of view  if textbox is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
           */
             this.CustomValidation = [];
@@ -5659,7 +5711,7 @@
             */
             this.CustomValidation = [];
             /**  to set type of view  if textbox is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
         }
         return FileUploadOptions;
     }());
@@ -5672,13 +5724,13 @@
             /**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 = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /**To Set LanguageMode To MultipleLanguageText */
-            this.LanguageMode = exports.LanguageMode.Both_Languages_are_visible;
+            this.LanguageMode = null;
             this.IconPositionEN = exports.IconPosition.left;
             this.IconPositionAR = exports.IconPosition.right;
             /*multi control placement type*/
-            this.MultiControlPlacementType = exports.ControlLayout.Horizontal;
+            this.MultiControlPlacementType = null;
         }
         return MultiLingualTextBoxOptions;
     }());
@@ -5692,7 +5744,7 @@
     var TextAreaOptions = /** @class */ (function () {
         function TextAreaOptions() {
             /**  to set type of view  if TextArea is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
           */
             this.CustomValidation = [];
@@ -5710,11 +5762,11 @@
             /**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 = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /**To Set LanguageMode To MultipleLanguageText */
-            this.LanguageMode = exports.LanguageMode.Both_Languages_are_visible;
+            this.LanguageMode = null;
             /*multi control placement type*/
-            this.MultiControlPlacementType = exports.ControlLayout.Horizontal;
+            this.MultiControlPlacementType = null;
         }
         return MultiLingualTextAreaOptions;
     }());
@@ -5742,7 +5794,7 @@
             /** Disable Bootstrap DropdownList */
             this.DisableBootstrapSelect = false;
             /**  to set type of view  if DropdownList is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /**  To Set Custom Validation*/
             this.CustomValidation = [];
             /** Set key for item in  DropdownList  */
@@ -5762,7 +5814,7 @@
             /**Set List Of Countries As Preferred Countries*/
             this.PreferredCountries = [];
             /**  to set type of view  if Phonebox is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             this.ForceDirection = exports.ForceDirection.English;
         }
         return PhoneOptions;
@@ -5770,7 +5822,7 @@
 
     var ToggleSlideOptions = /** @class */ (function () {
         function ToggleSlideOptions() {
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             this.ForceDirection = exports.ForceDirection.English;
         }
         return ToggleSlideOptions;
@@ -5779,7 +5831,7 @@
     var HtmlEditorOptions = /** @class */ (function () {
         function HtmlEditorOptions() {
             /**  to set type of view  if textbox is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
           */
             this.CustomValidation = [];
@@ -5799,11 +5851,11 @@
             /**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 = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Set Height For  */
             this.Height = 150;
             /**To Set LanguageMode To MultipleLanguageText */
-            this.LanguageMode = exports.LanguageMode.Both_Languages_are_visible;
+            this.LanguageMode = null;
         }
         return MultiLingualHtmlEditorOptions;
     }());
@@ -5828,7 +5880,7 @@
             */
             this.CustomValidation = [];
             /**  to set type of view  if FileInput is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Set List of Custom Attribute to FileInput  */
             this.FileUploadAcceptsTypes = [exports.ImageType.ImageTypes];
         }
@@ -5842,7 +5894,7 @@
             this.AllowDropZone = false;
             this.CustomValidation = [];
             /**  to set type of view  if FileInput is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Set List of Custom Attribute to FileInput  */
             this.ImageUploadAcceptsTypes = [exports.ImageType.ImageTypes];
         }
@@ -5910,7 +5962,7 @@
           */
             this.CustomValidation = [];
             /**  to set type of view  if MapAutoComplete is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
         }
         return MapAutoCompleteOptions;
     }());
@@ -5926,7 +5978,7 @@
             /** 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 = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
             */
             this.CustomValidation = [];
@@ -5953,7 +6005,7 @@
             /**To set  value  to tagsinput */
             this.Value = null;
             /**  to set type of view  if tagsinput is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
             */
             this.CustomValidation = [];
@@ -6046,7 +6098,7 @@
 
     var RadioButtonOptions = /** @class */ (function () {
         function RadioButtonOptions() {
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage
           */
             this.CustomValidation = [];
@@ -6110,7 +6162,7 @@
             //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 = exports.PagingActionMode.Update;
+            this.PagingActionMode = exports.PagingActionMode.Reinitialize;
             //Represents function that excutes after submission error
             this.OnErrorHandler = null;
             //Represents function that excutes after submission success
@@ -6121,9 +6173,6 @@
             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;
         }
         return ConfirmationModalOptions;
     }());
@@ -6473,6 +6522,7 @@
     exports.FileUploadOptions = FileUploadOptions;
     exports.FilterItem = FilterItem;
     exports.FormOptions = FormOptions;
+    exports.GlobalSettings = GlobalSettings;
     exports.HtmlEditorOptions = HtmlEditorOptions;
     exports.ImageUploadOptions = ImageUploadOptions;
     exports.MapAutoCompleteOptions = MapAutoCompleteOptions;