@bnsights/bbsf-controls 1.0.7 → 1.0.11

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'), require('sweetalert2'), require('@sweetalert2/ngx-sweetalert2')) :
+    typeof define === 'function' && define.amd ? define('@bnsights/bbsf-controls', ['exports', '@fullcalendar/angular', '@fullcalendar/daygrid', '@fullcalendar/timegrid', '@fullcalendar/list', '@fullcalendar/interaction', '@angular/core', 'ng-block-ui', '@angular/forms', '@angular/http', '@angular/router', 'ngx-toastr', 'ngx-permissions', '@angular/cdk/overlay', '@ngrx/store-devtools', '@angular/common', 'ngx-intl-tel-input', '@bnsights/bbsf-utilities', 'ngx-bootstrap/datepicker', 'rxjs', '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', 'sweetalert2', '@sweetalert2/ngx-sweetalert2'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bnsights = global.bnsights || {}, global.bnsights["bbsf-controls"] = {}), global.angular, global.dayGridPlugin, global.timeGridPlugin, global.listPlugin, global.interactionPlugin, global.ng.core, global.ngBlockUi, global.ng.forms, global.ng.http, global.ng.router, global.ngxToastr, global.ngxPermissions, global.ng.cdk.overlay, global.storeDevtools, global.ng.common, global.ngxIntlTelInput, global.bbsfUtilities, global.datepicker, global.rxjs, global.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, global.Swal, global.ngxSweetalert2));
+})(this, (function (exports, angular, dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin, i0, ngBlockUi, forms, http, router, ngxToastr, ngxPermissions, overlay, storeDevtools, common, ngxIntlTelInput, bbsfUtilities, datepicker, rxjs, 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, Swal, ngxSweetalert2) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,6 +31,7 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var enGbLocale__default = /*#__PURE__*/_interopDefaultLegacy(enGbLocale);
     var ArLocale__default = /*#__PURE__*/_interopDefaultLegacy(ArLocale);
+    var Swal__default = /*#__PURE__*/_interopDefaultLegacy(Swal);
 
     var ErrorMassageValidation = /** @class */ (function () {
         // tslint:disable-next-line: deprecation
@@ -232,8 +233,8 @@
                 }
             }
         };
-        ControlUtility.prototype.showGlobalError = function () {
-            this.controlValidationService.showGlobalError();
+        ControlUtility.prototype.showGlobalError = function (formId) {
+            this.controlValidationService.showGlobalError(null, formId);
             this.scrollToGlobalErrorMassage();
         };
         ControlUtility.prototype.RemoveRequiredValidation = function (FormControl, ValidationRole, Options) {
@@ -248,6 +249,16 @@
             FormControl.setValidators(ValidationRole);
             FormControl.updateValueAndValidity();
         };
+        ControlUtility.prototype.addRequiredToControl = function (FormControl, Options) {
+            Options.IsRequired = true;
+            FormControl.addValidators(forms.Validators.required);
+            FormControl.updateValueAndValidity();
+        };
+        ControlUtility.prototype.removeRequiredFromControl = function (FormControl, Options) {
+            Options.IsRequired = false;
+            FormControl.removeValidators(forms.Validators.required);
+            FormControl.updateValueAndValidity();
+        };
         ControlUtility.prototype.RemoveCustomValidation = function (FormControl, ValidationRole, CustomValidation) {
             ValidationRole = ValidationRole.filter(function (e) { return e != CustomValidation.functionBody; });
             FormControl.setValidators(ValidationRole);
@@ -469,15 +480,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 +564,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 +828,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 +1162,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;
@@ -1201,12 +1237,18 @@
                             // });
                             this.MultiLanguagegroup = new forms.FormGroup({});
                             ;
-                            this.MultiLanguagegroup.addControl("ArabicValue", new forms.FormControl(''));
-                            this.MultiLanguagegroup.addControl("EnglishValue", new forms.FormControl(''));
-                            this.ArabicFormControl = this.MultiLanguagegroup.controls["ArabicValue"]; //  new FormControl('',validationRules);
-                            this.EnglishFormControl = this.MultiLanguagegroup.controls["EnglishValue"]; //  new FormControl('',validationRules);
+                            this.MultiLanguagegroup.addControl("Arabic", new forms.FormControl(''));
+                            this.MultiLanguagegroup.addControl("English", new forms.FormControl(''));
+                            this.ArabicFormControl = this.MultiLanguagegroup.controls["Arabic"]; //  new FormControl('',validationRules);
+                            this.EnglishFormControl = this.MultiLanguagegroup.controls["English"]; //  new FormControl('',validationRules);
                             this.group.addControl(this.options.Name, new 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 != "")
@@ -1276,9 +1318,9 @@
                     if (this.EnglishWordCountArray > 0) {
                         if (this.EnglishWordCountArray > this.options.MaxWordCount) {
                             this.EnglishWordCount = this.options.MaxWordCount;
-                            this.MultiLanguagegroup.controls["EnglishValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                            this.MultiLanguagegroup.controls["EnglishValue"].markAsTouched();
-                            this.MultiLanguagegroup.controls["EnglishValue"].invalid;
+                            this.MultiLanguagegroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                            this.MultiLanguagegroup.controls["English"].markAsTouched();
+                            this.MultiLanguagegroup.controls["English"].invalid;
                         }
                         else {
                             this.EnglishWordCount = this.EnglishWordCountArray;
@@ -1297,9 +1339,9 @@
                     if (this.ArabicWordCountArray > 0) {
                         if (this.ArabicWordCountArray > this.options.MaxWordCount) {
                             this.ArabicWordCount = this.options.MaxWordCount;
-                            this.MultiLanguagegroup.controls["ArabicValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                            this.MultiLanguagegroup.controls["ArabicValue"].markAsTouched();
-                            this.MultiLanguagegroup.controls["ArabicValue"].invalid;
+                            this.MultiLanguagegroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                            this.MultiLanguagegroup.controls["Arabic"].markAsTouched();
+                            this.MultiLanguagegroup.controls["Arabic"].invalid;
                         }
                         else {
                             this.ArabicWordCount = this.ArabicWordCountArray;
@@ -1438,18 +1480,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=\"English\"\r\n                               [hidden]=\"options.IsHideEnglishFields\"\r\n                               [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n                               placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                               (keyup)=\"onTextChange()\"\r\n                               (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                               #userinputEnglish>\r\n\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} words</div>\r\n                      </div>\r\n\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                      \r\n\r\n                        <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n                        <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n\r\n            <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12\"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n                    </label>\r\n\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group align-items-center\">\r\n                        <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right':'left'\" *ngIf=\"options.Icon!=null\">\r\n                          <span [inlineSVG]=\"options.Icon\"></span>\r\n                        </div>\r\n                        <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                               (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                               [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                               formControlName=\"Arabic\"\r\n                               maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                               [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n                               placeholder=\"{{options.ArabicPlaceholder}}\" (keyup)=\"onTextChange()\"\r\n                               (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                               (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputArabic)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n                                {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n            \r\n                       \r\n\r\n                        <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n                        \r\n                        <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n\r\n                    </div>\r\n                    \r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
                 },] }
     ];
     MultiLingualTextBoxComponent.ctorParameters = 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 +1500,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 +1545,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 +1634,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 +1648,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,15 +1723,21 @@
                             //   this.CurrentLanguage = event.lang
                             //   this.showInputUsingLanguageMode();
                             // });
+                            if (!this.options.ViewType)
+                                this.options.ViewType = this.globalSettings.ViewType;
+                            if (!this.options.LanguageMode)
+                                this.options.LanguageMode = this.globalSettings.LanguageMode;
+                            if (!this.options.MultiControlPlacementType)
+                                this.options.MultiControlPlacementType = this.globalSettings.MultiControlPlacementType;
                             if (this.options.ArabicLabelKey != null && this.options.ArabicLabelKey != "")
                                 this.options.ArabicLabelValue = this.UtilityService.getResourceValue(this.options.ArabicLabelKey);
                             if (this.options.EnglishLabelKey != null && this.options.EnglishLabelKey != "")
                                 this.options.EnglishLabelValue = this.UtilityService.getResourceValue(this.options.EnglishLabelKey);
                             this.MultiLanguageTextAreagroup = new forms.FormGroup({});
-                            this.MultiLanguageTextAreagroup.addControl("ArabicTextAreaValue", new forms.FormControl(''));
-                            this.MultiLanguageTextAreagroup.addControl("EnglishTextAreaValue", new forms.FormControl(''));
-                            this.ArabicTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"]; //  new FormControl('',validationRules);
-                            this.EnglishTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"]; //  new FormControl('',validationRules);
+                            this.MultiLanguageTextAreagroup.addControl("Arabic", new forms.FormControl(''));
+                            this.MultiLanguageTextAreagroup.addControl("English", new forms.FormControl(''));
+                            this.ArabicTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["Arabic"]; //  new FormControl('',validationRules);
+                            this.EnglishTextAreaFormControl = this.MultiLanguageTextAreagroup.controls["English"]; //  new FormControl('',validationRules);
                             this.group.addControl(this.options.Name, new forms.FormGroup(this.MultiLanguageTextAreagroup.controls));
                             this.getCustomErrorsMassages();
                             switch (this.options.Type) {
@@ -1760,9 +1809,9 @@
                     if (this.EnglishWordCountArray > 0) {
                         if (this.EnglishWordCountArray > this.options.MaxWordCount) {
                             this.EnglishWordCount = this.options.MaxWordCount;
-                            this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                            this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"].markAsTouched();
-                            this.MultiLanguageTextAreagroup.controls["EnglishTextAreaValue"].invalid;
+                            this.MultiLanguageTextAreagroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                            this.MultiLanguageTextAreagroup.controls["English"].markAsTouched();
+                            this.MultiLanguageTextAreagroup.controls["English"].invalid;
                         }
                         else {
                             this.EnglishWordCount = this.EnglishWordCountArray;
@@ -1781,9 +1830,9 @@
                     if (this.ArabicWordCountArray > 0) {
                         if (this.ArabicWordCountArray > this.options.MaxWordCount) {
                             this.ArabicWordCount = this.options.MaxWordCount;
-                            this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
-                            this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"].markAsTouched();
-                            this.MultiLanguageTextAreagroup.controls["ArabicTextAreaValue"].invalid;
+                            this.MultiLanguageTextAreagroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                            this.MultiLanguageTextAreagroup.controls["Arabic"].markAsTouched();
+                            this.MultiLanguageTextAreagroup.controls["Arabic"].invalid;
                         }
                         else {
                             this.ArabicWordCount = this.ArabicWordCountArray;
@@ -1913,18 +1962,17 @@
     MultiLingualTextAreaComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-MultiLingualTextArea',
-                    template: "<div class=\"b-control b-multilangual-textarea\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n            <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                                  maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                                  aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"EnglishTextAreaValue\" [hidden]=\"options.IsHideEnglishFields\"\r\n                                  [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                                  placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                                  (keyup)=\"onTextChange()\"\r\n                                  (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                                  #userinputTextAreaEnglish>\r\n                            </textarea>\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n                      <div class=\"text-danger Required-text\"\r\n                           *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n                        {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n                      </div>\r\n                      <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                        {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                    </div>\r\n\r\n                      <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n                      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLable\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                                  [hidden]=\"options.IsHideArabicFields\" maxlength=\"{{options.MaxLength}}\"\r\n                                  minlength=\"{{options.MinLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"ArabicTextAreaValue\" rows=\"{{options.Rows}}\"\r\n                                  [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                                  placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                                  (keyup)=\"onTextChange()\"\r\n                                  (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                                  #userinputTextAreaArabic>\r\n                            </textarea>\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}Words</div>\r\n\r\n                      </div>\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n                        </div>\r\n                        <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n                          {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                      </div>\r\n\r\n                        <!-- <div *ngIf=\"ArabicTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
+                    template: "<div class=\"b-control b-multilangual-textarea\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n        <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n            <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n                    <label class=\"b-label col-form-label col-sm-12 \" \r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n                        {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n\r\n                    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showEnglishWordCount(true)\" (focusout)=\"showEnglishWordCount(false)\"\r\n                                  maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                                  aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n                                  [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n                                  placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n                                  (keyup)=\"onTextChange()\"\r\n                                  (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                                  #userinputTextAreaEnglish>\r\n                            </textarea>\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n                      </div>\r\n                      <div class=\"text-danger Required-text\"\r\n                           *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n                        {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\r\n                      </div>\r\n                      <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n                        {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                    </div>\r\n\r\n                      <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n                      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div  [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLable\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                      <div class=\"input-group\">\r\n                        <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                                  (focus)=\"showArabicWordCount(true)\" (focusout)=\"showArabicWordCount(false)\"\r\n                                  [hidden]=\"options.IsHideArabicFields\" maxlength=\"{{options.MaxLength}}\"\r\n                                  minlength=\"{{options.MinLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                                  formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                                  [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                                  placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                                  (keyup)=\"onTextChange()\"\r\n                                  (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                                  #userinputTextAreaArabic>\r\n                            </textarea>\r\n                        <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                          <span class=\"input-group-text\"  (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n                            <i class=\"fas fa-copy\"></i>\r\n                          </span>\r\n                        </div>\r\n                        <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}Words</div>\r\n\r\n                      </div>\r\n                        <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\r\n                        </div>\r\n                        <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n                          {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                      </div>\r\n\r\n                        <!-- <div *ngIf=\"ArabicTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n",
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
                 },] }
     ];
     MultiLingualTextAreaComponent.ctorParameters = 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 +2092,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 +2163,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 +2242,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 +2252,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 +2264,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 +2309,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 +2362,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 +2377,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 +2430,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 +2444,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 +2570,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 +2637,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 +2647,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 +2666,8 @@
             this.validationRulesasync = [];
             this.ArabicLetterOnly = "";
             this.EnglishLetterOnly = "";
+            this.englishValue = null;
+            this.arabicValue = null;
             this.resetError = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -2654,6 +2710,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,
@@ -2778,10 +2838,10 @@
                             // }
                             this.MultilingualHtmlEditorgroup = new forms.FormGroup({});
                             ;
-                            this.MultilingualHtmlEditorgroup.addControl("ArabicHtmlEditorValue", new forms.FormControl(''));
-                            this.MultilingualHtmlEditorgroup.addControl("EnglishHtmlEditorValue", new forms.FormControl(''));
-                            this.ArabicHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["ArabicHtmlEditorValue"]; //  new FormControl('',validationRules);
-                            this.EnglishHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["EnglishHtmlEditorValue"]; //  new FormControl('',validationRules);
+                            this.MultilingualHtmlEditorgroup.addControl("Arabic", new forms.FormControl(''));
+                            this.MultilingualHtmlEditorgroup.addControl("English", new forms.FormControl(''));
+                            this.ArabicHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["Arabic"]; //  new FormControl('',validationRules);
+                            this.EnglishHtmlEditorFormControl = this.MultilingualHtmlEditorgroup.controls["English"]; //  new FormControl('',validationRules);
                             this.group.addControl(this.options.Name, new forms.FormGroup(this.MultilingualHtmlEditorgroup.controls));
                             this.getCustomErrorsMassages();
                             switch (this.options.Type) {
@@ -2844,30 +2904,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["English"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["English"].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["English"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                    this.MultilingualHtmlEditorgroup.controls["English"].markAsTouched();
+                    this.MultilingualHtmlEditorgroup.controls["English"].invalid;
+                }
+            }
+            if (type == "ar") {
+                this.arabicValue = this.MultilingualHtmlEditorgroup.controls["Arabic"].value == null ? "" : this.MultilingualHtmlEditorgroup.controls["Arabic"].value;
+                if (this.arabicValue)
+                    this.ArabicHtmlEditorFormControl.setValue(this.arabicValue);
+                var ArabicwordCountArray = this.ArabicHtmlEditorFormControl.value.split(" ").length;
+                if (ArabicwordCountArray > 0) {
+                    if (ArabicwordCountArray > this.options.MaxWordCount)
+                        this.MultilingualHtmlEditorgroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                    this.MultilingualHtmlEditorgroup.controls["Arabic"].markAsTouched();
+                    this.MultilingualHtmlEditorgroup.controls["Arabic"].invalid;
+                }
             }
             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 +3026,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=\"English\"  [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"col-lg-6\">\r\n                <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n                    <label class=\"b-label col-form-label col-sm-12  \"\r\n                        [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n                        [hidden]=\"options.IsHideArabicLable\">\r\n                        {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n                        <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                            class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n                    </label>\r\n                    <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n                        \r\n\r\n                            <angular-editor  dir=\"rtl\"  class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\"    [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                              formControlName=\"Arabic\"  [config]=\"editorArabicConfig\"></angular-editor>\r\n\r\n                            <div class=\"text-danger Required-text\"\r\n                            *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n                            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n                        </div>\r\n\r\n                \r\n\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <div class=\"control-desc text-dark\">\r\n                                {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n                    </div>\r\n\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n</div>\r\n",
                     styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
                 },] }
     ];
     MultiLingualHtmlEditorComponent.ctorParameters = 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 +3045,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 +3101,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) {
@@ -3123,7 +3190,8 @@
             }
         };
         ImageUploaderComponent.prototype.showImageUploader = function (element) {
-            console.log(element);
+            var input = element.parentElement.parentElement.querySelector('input[type=file]');
+            input.click();
         };
         ImageUploaderComponent.prototype.showGlobalError = function () {
             this.controlUtility.showGlobalError();
@@ -3276,13 +3344,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 },] }],
@@ -3299,15 +3366,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();
@@ -3356,6 +3423,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 = {
@@ -3426,6 +3495,10 @@
                 }
             }
         };
+        ProfileImageUploaderComponent.prototype.showImageUploader = function (element) {
+            var input = element.parentElement.parentElement.querySelector('input[type=file]');
+            input.click();
+        };
         ProfileImageUploaderComponent.prototype.showGlobalError = function () {
             this.controlUtility.showGlobalError();
         };
@@ -3608,18 +3681,18 @@
     ProfileImageUploaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-ProfileImageUploader',
-                    template: "<div class=\"b-control b-profile-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\"></i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" class=\"ProfileDropBox d-inline-flex h-auto w-auto overflow-hidden m-0  {{options.ExtraClasses}}\" style=\"width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label class=\"rounded-circle w-100 h-100 m-0\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"w-100 rounded-circle\" />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n        <ngx-dropzone-image-preview *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    class=\"w-100 h-100 m-0\">\r\n\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ProfileImageUploadClassSelector\"  *ngIf=\"!options.AllowDropZone\" >\r\n        <ngx-dropzone-label  style=\" border: none !important;width:200px;height:200px;overflow:inherit;\"  class=\"d-inline-flex h-auto w-auto overflow-hidden m-0\" *ngIf=\"files.length==0\" >\r\n          <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\"  onclick=\"$(this).parents('.ProfileImageUploadClassSelector').find('input[type=file]').click();\">\r\n            <img [src]=\"ImageSource\"  class=\"h-100 w-100\"  />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n  \r\n      <div class=\"ProfileDropBox rounded-circle {{options.ExtraClasses}}\" style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n      [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n      id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n  \r\n   <ngx-dropzone-image-preview class=\"rounded-circle w-100 h-100 m-0\" *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                               >\r\n\r\n   </ngx-dropzone-image-preview>\r\n </div>\r\n      </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                Crop Image\r\n              </h4>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\r\n              <div *ngIf=\"imageUrl\">\r\n                <angular-cropper class=\"ProfileDropBox\" #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n                </angular-cropper>\r\n                <img [src]=\"imgwUrl\" />\r\n              </div>\r\n              <div style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n                      <span class=\"fa fa-search-plus\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n                      <span class=\"fa fa-search-minus\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n                      <span class=\"fa fa-arrow-left\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n                      <span class=\"fa fa-arrow-right\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n                      <span class=\"fa fa-arrow-up\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n                      <span class=\"fa fa-arrow-down\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n                      <span class=\"fa fa-undo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                Crop\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      \r\n    \r\n\r\n  <div class=\"text-danger Required-text\"\r\n  *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n  {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n</div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"b-control b-profile-image-upload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\"></i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div *ngIf=\"options.AllowDropZone\" class=\"ProfileDropBox d-inline-flex h-auto w-auto overflow-hidden m-0  {{options.ExtraClasses}}\" style=\"width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n        <ngx-dropzone-label class=\"rounded-circle w-100 h-100 m-0\">\r\n          <div class=\"h-100\">\r\n            <img [src]=\"ImageSource\" class=\"w-100 rounded-circle\" />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n        <ngx-dropzone-image-preview *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                                    class=\"w-100 h-100 m-0\">\r\n\r\n        </ngx-dropzone-image-preview>\r\n      </div>\r\n\r\n      <div class=\"ProfileImageUploadClassSelector\"  *ngIf=\"!options.AllowDropZone\" >\r\n        <ngx-dropzone-label  style=\" border: none !important;width:200px;height:200px;overflow:inherit;\"  class=\"d-inline-flex h-auto w-auto overflow-hidden m-0\" *ngIf=\"files.length==0\" >\r\n          <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element  (click)=\"showImageUploader(element)\">\r\n            <img [src]=\"ImageSource\"  class=\"h-100 w-100\"  />\r\n          </div>\r\n        </ngx-dropzone-label>\r\n  \r\n      <div class=\"ProfileDropBox rounded-circle {{options.ExtraClasses}}\" style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n      [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n      aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n      id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n  \r\n   <ngx-dropzone-image-preview class=\"rounded-circle w-100 h-100 m-0\" *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n                               >\r\n\r\n   </ngx-dropzone-image-preview>\r\n </div>\r\n      </div>\r\n\r\n\r\n      <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n           [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n        <div class=\"modal-dialog modal-lg\">\r\n          <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n              <h4 class=\"modal-title\">\r\n                Crop Image\r\n              </h4>\r\n            </div>\r\n            <div class=\"modal-body py-5\">\r\n              <div *ngIf=\"imageUrl\">\r\n                <angular-cropper class=\"ProfileDropBox\" #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n                </angular-cropper>\r\n                <img [src]=\"imgwUrl\" />\r\n              </div>\r\n              <div style=\"text-align:center;\">\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n                      <span class=\"fa fa-search-plus\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n                      <span class=\"fa fa-search-minus\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n                      <span class=\"fa fa-arrow-left\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n                      <span class=\"fa fa-arrow-right\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n                      <span class=\"fa fa-arrow-up\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n                      <span class=\"fa fa-arrow-down\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n                <div class=\"btn-group\">\r\n                  <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n                      <span class=\"fa fa-undo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                  <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n                    <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n                      <span class=\"fa fa-redo-alt\"></span>\r\n                    </span>\r\n                  </button>\r\n                </div>\r\n\r\n              </div>\r\n            </div>\r\n            <div class=\"modal-footer\" align=\"right\">\r\n              <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n                <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n              </button>\r\n              <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n                <i class=\"fa fa-check fa-fw\"></i>\r\n                Crop\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      \r\n    \r\n\r\n  <div class=\"text-danger Required-text\"\r\n  *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n  {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n</div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                     styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-body{padding:2px 16px}\n"]
                 },] }
     ];
     ProfileImageUploaderComponent.ctorParameters = 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 },] }],
@@ -3639,16 +3712,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 = '';
@@ -3723,6 +3797,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);
@@ -3765,10 +3841,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';
                     }));
@@ -3862,12 +3940,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 }],
@@ -3877,15 +3956,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 = [];
@@ -3952,6 +4032,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(''));
@@ -4009,21 +4091,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) {
@@ -4075,12 +4147,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 }],
@@ -4115,8 +4188,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;
@@ -4251,7 +4325,6 @@
         PagingComponent.prototype.getItemList = function (page, IsFilterUpdated) {
             var _this = this;
             if (IsFilterUpdated === void 0) { IsFilterUpdated = false; }
-            ;
             var pagingDTO = new PagingDTO();
             var size = Number.parseInt(this.options.PageSize.toString());
             if (this.options.IsLoadMoreControl)
@@ -4296,26 +4369,46 @@
             }
             this.requestHandlerService.post(this.options.ActionPostURL, pagingDTO, params)
                 .subscribe(function (responseData) {
-                _this.result = responseData.items;
+                debugger;
+                _this.result = responseData.items; //this.castItems(responseData.items);
                 _this.Items.emit(_this.result);
+                _this.totalRow = responseData.totalCount;
                 if (IsFilterUpdated) {
                     _this.items = [];
-                    _this.totalRow = responseData.totalCount;
                     _this.Pages = Math.ceil((_this.totalRow / _this.options.PageSize));
                     _this.items = Array(_this.totalRow);
                 }
             });
         };
+        PagingComponent.prototype.castItems = function (objectArr) {
+            debugger;
+            var originalArray = [];
+            for (var index = 0; index < objectArr.length; index++) {
+                var element = objectArr[index];
+                var key = void 0, keys = Object.keys(element);
+                var n = keys.length;
+                var newObject = {};
+                while (n--) {
+                    key = keys[n];
+                    var Okey = key;
+                    newObject[key.charAt(0).toUpperCase() + Okey.slice(1)] = element[key];
+                }
+                var finalObject = newObject;
+                originalArray.push(finalObject);
+            }
+            return originalArray;
+        };
         return PagingComponent;
     }());
     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 },
@@ -4438,13 +4531,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 = [];
@@ -4478,6 +4572,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);
             }
@@ -4525,7 +4621,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 }],
@@ -4535,13 +4632,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;
@@ -4591,6 +4689,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;
@@ -4667,6 +4767,7 @@
                 _this.group.markAllAsTouched();
                 _this.markAllAsTouched = true;
             });
+            this.options.ValidationRules = this.validationRules;
         };
         TextboxComponent.prototype.ngAfterViewInit = function () {
             this.controlUtility.setAttributeForControl(this.options);
@@ -4740,7 +4841,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 }],
@@ -4755,18 +4857,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 = "";
@@ -4943,6 +5044,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);
             }
@@ -5022,14 +5125,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 }],
@@ -5226,18 +5328,23 @@
     })(exports.PagingActionMode || (exports.PagingActionMode = {}));
 
     var FormComponent = /** @class */ (function () {
-        function FormComponent(utilityService, controlValidationService, modalService, ngbActiveModal) {
+        function FormComponent(controlUtility, utilityService, controlValidationService, modalService, ngbActiveModal) {
+            this.controlUtility = controlUtility;
             this.utilityService = utilityService;
             this.controlValidationService = controlValidationService;
             this.modalService = modalService;
             this.ngbActiveModal = ngbActiveModal;
         }
         FormComponent.prototype.ngOnInit = function () {
+            this.fromName = this.randomString(5);
         };
         FormComponent.prototype.submit = function () {
             var _this = this;
-            if (this.options.FormGroup.invalid)
+            this.options.FormGroup.markAllAsTouched();
+            if (this.options.FormGroup.invalid) {
+                this.showGlobalError();
                 return;
+            }
             else {
                 var submitModel = this.options.GetModelFunction();
                 var submittedService = this.options.ServiceSubmitFunction.apply(null, submitModel);
@@ -5273,8 +5380,9 @@
                     this.utilityService.notifyErrorMessage();
             }
             else {
+                debugger;
                 if (err.status == 400) {
-                    this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new bbsfUtilities.RequestOptionsModel());
+                    this.controlValidationService.renderServerErrors(this.options.FormGroup, err, new bbsfUtilities.RequestOptionsModel(), this.fromName);
                 }
                 else {
                     errorMessage = "Server returned code: " + err.status + ", error message is: " + err.message;
@@ -5286,16 +5394,28 @@
             if (!this.options.DisableBlockUI)
                 this.utilityService.stopBlockUI();
         };
+        FormComponent.prototype.showGlobalError = function () {
+            this.controlUtility.showGlobalError(this.fromName);
+        };
+        FormComponent.prototype.randomString = function (length) {
+            var randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            var result = '';
+            for (var i = 0; i < length; i++) {
+                result += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
+            }
+            return result;
+        };
         return FormComponent;
     }());
     FormComponent.decorators = [
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-Form',
-                    template: "<form [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\">\r\n  \r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>"
+                    template: "<form id=\"{{fromName}}\" [FormGroup]=\"options.FormGroup\" (ngSubmit)=\"submit()\" > \r\n  \r\n  <ng-template #content><ng-content></ng-content></ng-template>\r\n\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</form>"
                 },] }
     ];
     FormComponent.ctorParameters = function () { return [
+        { type: ControlUtility },
         { type: bbsfUtilities.UtilityService },
         { type: bbsfUtilities.ControlValidationService },
         { type: ngBootstrap.NgbModal },
@@ -5314,27 +5434,44 @@
             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 () {
+            var _this = this;
             this.utilityService.startBlockUI();
-            //open modal
-            this.modalService.open(this.confirmationModal);
+            //check for options text values
+            this.setTextValues();
+            //sweetalert styles//
+            switch (this.options.StyleConfirmationMode) {
+                case this.styleSuccess: {
+                    this.icon = 'success';
+                    this.btnColor = '#50cd89';
+                }
+                case this.styleWarning: {
+                    this.icon = 'warning';
+                    this.btnColor = '#ffc700';
+                }
+                case this.styleDanger: {
+                    this.icon = 'error';
+                    this.btnColor = '#f1416c';
+                }
+            }
+            Swal__default["default"].fire({
+                title: this.options.ConfirmationHeader,
+                text: this.options.ConfirmationBody,
+                icon: this.icon,
+                showCancelButton: true,
+                confirmButtonColor: this.btnColor,
+                cancelButtonColor: '#f5f8fa',
+                showCloseButton: true,
+            }).then(function (result) {
+                if (result.isConfirmed) {
+                    _this.submit();
+                }
+            });
             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)
@@ -5391,9 +5528,8 @@
     }());
     ConfirmationModalComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'BBSF-ConfirmationModal',
-                    template: "<!--delete Modal-->\r\n<ng-template #confirmationModal let-modal>\r\n  <div class=\"modal-header pb-0 border-0 justify-content-end\">\r\n    <h5 class=\"modal-title\" id=\"exampleModalLabel\"></h5>\r\n    <button type=\"button\" data-dismiss=\"modal\" aria-label=\"Close\" class=\"btn btn-sm btn-icon btn-active-color-primary\" (click)=\"modal.dismiss()\">\r\n      <span class=\"svg-icon svg-icon-1\">\r\n        <span [inlineSVG]=\"'./src/assets/images/arr061.svg'\"></span>\r\n      </span>\r\n    </button>\r\n  </div>\r\n  <div class=\"modal-body scroll-y px-10 px-lg-15 pt-0 pb-15\">\r\n    <div class=\"mb-13 text-center\">\r\n      <h1 class=\"mb-3\">{{options.ConfirmationHeader}}</h1>\r\n    </div>\r\n    <!--Style danger-->\r\n    <div [ngSwitch]=\"options.StyleConfirmationMode\">\r\n      <div *ngSwitchCase=\"styleDanger\" class=\"notice d-flex bg-light-danger rounded border-danger border border-dashed mb-10 p-6\">\r\n        <span class=\"svg-icon svg-icon-2tx svg-icon-danger me-4\">\r\n          <span [inlineSVG]=\"'./src/assets/images/gen044.svg'\"></span>\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-stack flex-grow-1\">\r\n          <div class=\"fw-bold\">\r\n            <div class=\"fs-6 text-gray-700\">\r\n              {{options.ConfirmationBody}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!--Style warning-->\r\n      <div *ngSwitchCase=\"styleWarning\" class=\"notice d-flex bg-light-warning rounded border-warning border border-dashed mb-10 p-6\">\r\n        <span class=\"svg-icon svg-icon-2tx svg-icon-warning me-4\">\r\n          <span [inlineSVG]=\"'./src/assets/images/gen044.svg'\"></span>\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-stack flex-grow-1\">\r\n          <div class=\"fw-bold\">\r\n            <div class=\"fs-6 text-gray-700\">\r\n              {{options.ConfirmationBody}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!--Style success-->\r\n      <div *ngSwitchCase=\"styleSuccess\" class=\"notice d-flex bg-light-success rounded border-success border border-dashed mb-10 p-6\">\r\n        <span class=\"svg-icon svg-icon-2tx svg-icon-success me-4\">\r\n          <span [inlineSVG]=\"'./src/assets/images/gen044.svg'\"></span>\r\n        </span>\r\n\r\n        <div class=\"d-flex flex-stack flex-grow-1\">\r\n          <div class=\"fw-bold\">\r\n            <div class=\"fs-6 text-gray-700\">\r\n              {{options.ConfirmationBody}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"text-center pt-7\">\r\n      <button type=\"button\" class=\"btn btn-light btn-sm me-3 \" data-dismiss=\"modal\" (click)=\"modal.dismiss()\">\r\n        {{utilityService.getResourceValue(\"CancelLabel\")}}\r\n      </button>\r\n      <button type=\"button\" (click)=\"submit()\"\r\n              class=\"btn btn-light-danger btn-sm \">\r\n        {{options.SubmitButtonText}}\r\n      </button>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n",
-                    styles: [""]
+                    template: "",
+                    selector: 'BBSF-ConfirmationModal'
                 },] }
     ];
     ConfirmationModalComponent.ctorParameters = function () { return [
@@ -5496,18 +5632,19 @@
                         angularNgAutocomplete.AutocompleteLibModule,
                         bbsfUtilities.BBSFUtilitiesModule,
                         ngInlineSvg.InlineSVGModule.forRoot(),
+                        ngxSweetalert2.SweetAlert2Module
                     ],
                     providers: [
                         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
@@ -5581,12 +5718,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";
@@ -5632,14 +5763,17 @@
             /**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 = [];
             /** to set Direction of textbox  if textbox is Arabic or English  */
             this.ForceDirection = null;
+            /** Set Type of TextBox ("text","password","email","number") */
+            this.Type = exports.InputType.Text;
             this.IconPosition = exports.IconPosition.left;
             this.NoMargin = false;
+            this.ValidationRules = [];
         }
         return TextBoxOptions;
     }());
@@ -5654,7 +5788,7 @@
             */
             this.CustomValidation = [];
             /**  to set type of view  if textbox is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
         }
         return FileUploadOptions;
     }());
@@ -5667,13 +5801,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;
     }());
@@ -5687,7 +5821,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 = [];
@@ -5705,11 +5839,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;
     }());
@@ -5737,7 +5871,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  */
@@ -5757,7 +5891,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;
@@ -5765,7 +5899,7 @@
 
     var ToggleSlideOptions = /** @class */ (function () {
         function ToggleSlideOptions() {
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
             this.ForceDirection = exports.ForceDirection.English;
         }
         return ToggleSlideOptions;
@@ -5774,7 +5908,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 = [];
@@ -5794,11 +5928,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;
     }());
@@ -5823,7 +5957,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];
         }
@@ -5837,7 +5971,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];
         }
@@ -5905,7 +6039,7 @@
           */
             this.CustomValidation = [];
             /**  to set type of view  if MapAutoComplete is Vertical or Horizontal */
-            this.ViewType = exports.ControlLayout.Vertical;
+            this.ViewType = null;
         }
         return MapAutoCompleteOptions;
     }());
@@ -5921,7 +6055,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 = [];
@@ -5948,7 +6082,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 = [];
@@ -6041,7 +6175,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 = [];
@@ -6105,7 +6239,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
@@ -6116,9 +6250,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;
     }());
@@ -6468,6 +6599,7 @@
     exports.FileUploadOptions = FileUploadOptions;
     exports.FilterItem = FilterItem;
     exports.FormOptions = FormOptions;
+    exports.GlobalSettings = GlobalSettings;
     exports.HtmlEditorOptions = HtmlEditorOptions;
     exports.ImageUploadOptions = ImageUploadOptions;
     exports.MapAutoCompleteOptions = MapAutoCompleteOptions;