@bnsights/bbsf-controls 1.0.91 → 1.0.92

package/fesm2015/bnsights-bbsf-controls.js

@@ -489,7 +489,10 @@ class DateInputComponent {
         DateInputComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         if (this.options.StartView == 3)
             this.startView = 'multi-year';
         else {
@@ -565,7 +568,7 @@ class DateInputComponent {
         if (!item)
             return;
         let DateValue;
-        var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds  
+        var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
         if (this.options.SelectMode == 2) {
             for (let index = 0; index < item.value.length; index++) {
                 item.value[index] = new Date(item.value[index] - tzoffset).toISOString().slice(0, -1);
@@ -602,7 +605,7 @@ DateInputComponent.controlContainerstatic = null;
 DateInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-DateTimePicker',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n    </label>\r\n    <!--Asterisk-->\r\n    <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n          aria-required=\"true\">*</span>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n      [dir]=\"textDir\"\r\n             class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n             [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n             [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n             [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                     [startView]=\"startView\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                     [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\" fill=\"#d5d5d5\"></path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n      {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n",
+                template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label\r\n      {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n    </label>\r\n    <!--Asterisk-->\r\n    <span\r\n      *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n      class=\"text-danger\"\r\n      aria-required=\"true\">*</span>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n        [dir]=\"textDir\" class=\"form-control bnsights-control\r\n        {{options.ExtraClasses}} \"\r\n        [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n        aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\"\r\n        [owlDateTimeTrigger]=\"dt1\"\r\n        [class.is-invalid]=\"DatePickerFormControl.invalid &&\r\n        DatePickerFormControl.touched\"\r\n        [min]=\"options.StartDate\" [max]=\"options.EndDate\"\r\n        [hour12Timer]=\"options.Hour12Timer\"\r\n        [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n        placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n        [startView]=\"startView\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n        [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n      <!--icon-->\r\n      <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n        <span class=\"svg-icon\">\r\n          <svg id=\"Group_356\" data-name=\"Group 356\"\r\n            xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0\r\n            0 48 48\">\r\n            <path id=\"Path_6737\" data-name=\"Path 6737\"\r\n              d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n            <path id=\"Path_6738\" data-name=\"Path 6738\"\r\n              d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n            <path id=\"Path_6739\" data-name=\"Path 6739\"\r\n              d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\"\r\n              fill=\"#d5d5d5\"></path>\r\n            <path id=\"Path_6740\" data-name=\"Path 6740\"\r\n              d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\"\r\n              fill=\"#595959\"></path>\r\n          </svg>\r\n        </span>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <!-- requiredText-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(DatePickerFormControl.invalid &&\r\n      DatePickerFormControl.touched)\">\r\n      {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n    )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n",
                 providers: [
                     { provide: OwlDateTimeIntl, useClass: DefaultIntl }
                 ]
@@ -1597,7 +1600,10 @@ class TextAreaComponent {
         TextAreaComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.TextAreaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2196,7 +2202,10 @@ class CheckBoxComponent {
         CheckBoxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.CheckBoxFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2317,7 +2326,10 @@ class DropdownListComponent {
         //console.log(environment["BBSF_AdminUrl"]);
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.SelectedList = this.options.SelectedItems;
         this.dropdownSettings = {
@@ -2483,7 +2495,10 @@ class PhoneComponent {
         PhoneComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.PhoneFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2575,7 +2590,10 @@ class ToggleslideComponent {
         ToggleslideComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.group.addControl(this.options.Name, new FormControl(''));
         this.ToggleslideFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
         let validationRules = [];
@@ -2679,7 +2697,10 @@ class HtmlEditorComponent {
         HtmlEditorComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.editorConfig = {
             editable: !this.options.IsDisabled,
             spellcheck: true,
@@ -3629,17 +3650,17 @@ class ProfileImageUploaderComponent {
         this.controlValidationService = controlValidationService;
         this.globalSettings = globalSettings;
         this.files = [];
-        this.ImageSource = "./src/assets/images/user.svg";
+        this.ImageSource = './src/assets/images/user.svg';
         this.OnChange = new EventEmitter();
-        this.ValidationMessage = "";
-        this.AcceptedType = "";
+        this.ValidationMessage = '';
+        this.AcceptedType = '';
         this.AcceptedTypeArray = [];
         this.ToolTipTypeArray = [];
         this.markAllAsTouched = false;
         this.imgUrl = null;
         this.config = null;
-        this.imageUrl = "";
-        this.imgwUrl = "";
+        this.imageUrl = '';
+        this.imgwUrl = '';
         this.mdlSampleIsOpen = false;
         this.validationRules = [];
         this.validationRulesasync = [];
@@ -3666,7 +3687,8 @@ class ProfileImageUploaderComponent {
         this.IsValid = () => {
             this.controlUtility.IsValid(this.ProfileImageUploadFormControl);
         };
-        ProfileImageUploaderComponent.controlContainerstatic = this.controlContainer;
+        ProfileImageUploaderComponent.controlContainerstatic =
+            this.controlContainer;
         this.uploader = new FileUploader({
             disableMultipart: false, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
         });
@@ -3677,7 +3699,8 @@ class ProfileImageUploaderComponent {
         this.controlValidationService.isCreatedBefor = false;
         if (!this.options.ViewType)
             this.options.ViewType = this.globalSettings.ViewType;
-        if (this.options.DefaultImageSrc != null && this.options.DefaultImageSrc != "")
+        if (this.options.DefaultImageSrc != null &&
+            this.options.DefaultImageSrc != '')
             this.ImageSource = this.options.DefaultImageSrc;
         this.config = {
             aspectRatio: 200 / 200,
@@ -3692,14 +3715,14 @@ class ProfileImageUploaderComponent {
             modal: true,
             checkCrossOrigin: false,
             cropBoxResizable: false,
-            autoCrop: true
+            autoCrop: true,
         };
         if (this.options.ImageUploadAcceptsTypes != null) {
             this.options.ImageUploadAcceptsTypes;
         }
         if (this.options.Value != null) {
-            let imgURL = this.options.Value["fileURL"];
-            if (imgURL != "" && imgURL != undefined && imgURL != null)
+            let imgURL = this.options.Value['fileURL'];
+            if (imgURL != '' && imgURL != undefined && imgURL != null)
                 this.ImageSource = imgURL;
             let element = this.options.Value;
             this.FileLikeObject = new FileLikeObject({
@@ -3707,25 +3730,33 @@ class ProfileImageUploaderComponent {
             });
             this.uploader.addToQueue([this.FileLikeObject]);
         }
-        if (this.options.LabelKey != null && this.options.LabelKey != "")
+        if (this.options.LabelKey != null && this.options.LabelKey != '')
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
-        if (this.options.ImageUploadAcceptsTypes != null && this.options.ImageUploadAcceptsTypes.length > 0) {
+        if (this.options.ImageUploadAcceptsTypes != null &&
+            this.options.ImageUploadAcceptsTypes.length > 0) {
             for (let index = 0; index < this.options.ImageUploadAcceptsTypes.length; index++) {
                 const Type = this.options.ImageUploadAcceptsTypes[index];
-                this.AcceptedType = this.AcceptedType + Type + ",";
+                this.AcceptedType =
+                    this.AcceptedType.toUpperCase() + Type.toUpperCase();
             }
-            this.AcceptedTypeArray = this.AcceptedType.split(",");
+            this.AcceptedTypeArray = this.AcceptedType.split(',');
             for (let index = 0; index < this.AcceptedTypeArray.length; index++) {
                 const element = this.AcceptedTypeArray[index];
                 const TypeToolTipe = element.split('/')[1];
-                this.ToolTipTypeArray.push(TypeToolTipe);
+                this.ToolTipTypeArray.push(TypeToolTipe.toUpperCase());
             }
-            this.ValidationMessage = this.ValidationMessage + ` Allowed extenstions (${this.ToolTipTypeArray}) `;
+            this.ValidationMessage =
+                this.ValidationMessage +
+                    this.UtilityService.getResourceValue('AllowedTypes') +
+                    ` (${this.ToolTipTypeArray}) `;
         }
         if (this.options.FileMaxSizeInMB > 0) {
-            this.ValidationMessage = this.ValidationMessage + ` <br />Max File Size ${this.options.FileMaxSizeInMB} MB`;
+            this.ValidationMessage =
+                this.ValidationMessage +
+                    ` <br /> ${this.UtilityService.getResourceValue('FileMaxSizeInMB')} ${this.options.FileMaxSizeInMB}`;
         }
-        if (this.options.ImageUploadAcceptsTypes != null && this.options.ImageUploadAcceptsTypes.length > 0) {
+        if (this.options.ImageUploadAcceptsTypes != null &&
+            this.options.ImageUploadAcceptsTypes.length > 0) {
         }
         this.group.addControl(this.options.Name, new FormControl(''));
         this.ProfileImageUploadFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -3778,12 +3809,17 @@ class ProfileImageUploaderComponent {
             const fileType = file.type;
             if (file.size > maxFileSize) {
                 const formControl = this.ProfileImageUploadFormControl;
-                formControl.setErrors({ FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M' });
+                formControl.setErrors({
+                    FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M',
+                });
                 formControl.markAsTouched();
                 this.uploader.queue = [];
                 return;
             }
-            if (this.options.ImageUploadAcceptsTypes != null && this.options.ImageUploadAcceptsTypes.length > 0 && !(this.AcceptedTypeArray.includes(fileType.toUpperCase()) || this.AcceptedTypeArray.includes(fileType.toLowerCase()))) {
+            if (this.options.ImageUploadAcceptsTypes != null &&
+                this.options.ImageUploadAcceptsTypes.length > 0 &&
+                !(this.AcceptedTypeArray.includes(fileType.toUpperCase()) ||
+                    this.AcceptedTypeArray.includes(fileType.toLowerCase()))) {
                 const formControl = this.ProfileImageUploadFormControl;
                 formControl.setErrors({ ToolTipTypeError: this.ToolTipTypeArray });
                 formControl.markAsTouched();
@@ -3801,7 +3837,9 @@ class ProfileImageUploaderComponent {
                 const fileType = file.type;
                 if (file.size > maxFileSize) {
                     const formControl = this.ProfileImageUploadFormControl;
-                    formControl.setErrors({ FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M' });
+                    formControl.setErrors({
+                        FileMaxSizeInMB: this.options.FileMaxSizeInMB + 'M',
+                    });
                     formControl.markAsTouched();
                     this.uploader.queue = [];
                     return;
@@ -3813,7 +3851,9 @@ class ProfileImageUploaderComponent {
                     this.imageUrl = reader.result.toString();
                     this.openModal(true);
                     let originalValue = this.group.get(this.options.Name).value;
-                    if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
+                    if (this.options.PatchFunction &&
+                        this.options.PatchPath &&
+                        this.group.get(this.options.Name).valid) {
                         this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
                     }
                     //Use this line to enable two way binding.
@@ -3827,7 +3867,7 @@ class ProfileImageUploaderComponent {
         let ItemList = this.group.get(this.options.Name).value;
         this.files.splice(this.files.indexOf(event), 1);
         ItemList = [];
-        if ((this.files.length == 0) && this.options.IsRequired) {
+        if (this.files.length == 0 && this.options.IsRequired) {
             this.ProfileImageUploadFormControl.markAsTouched();
             this.ProfileImageUploadFormControl.setErrors(Validators.required);
             this.ProfileImageUploadFormControl.invalid;
@@ -3859,17 +3899,17 @@ class ProfileImageUploaderComponent {
         });
         profilePicturCropper.toBlob((blob) => {
             this.zone.run(() => {
-                this.getProfileImageBlobFile(blob, "profilePicturCropper");
+                this.getProfileImageBlobFile(blob, 'profilePicturCropper');
             });
         });
         AvatarPictureCropper.toBlob((blob) => {
             this.zone.run(() => {
-                this.getProfileImageBlobFile(blob, "AvatarPictureCropper");
+                this.getProfileImageBlobFile(blob, 'AvatarPictureCropper');
             });
         });
         OriginalPictureCropper.toBlob((blob) => {
             this.zone.run(() => {
-                this.getProfileImageBlobFile(blob, "OriginalPictureCropper");
+                this.getProfileImageBlobFile(blob, 'OriginalPictureCropper');
             });
         });
         this.files = [];
@@ -3884,37 +3924,40 @@ class ProfileImageUploaderComponent {
         reader.onload = () => {
             let FileObject;
             switch (type) {
-                case "profilePicturCropper":
-                    BlobFile.name = this.EventFile.name + "MediumPicture";
+                case 'profilePicturCropper':
+                    BlobFile.name = this.EventFile.name + 'MediumPicture';
                     FileObject = {
-                        FileName: this.EventFile.name + "MediumPicture",
+                        FileName: this.EventFile.name + 'MediumPicture',
                         FileType: this.EventFile.type,
                         FileBase64: reader.result.toString().split(',')[1],
-                        FileSizeInMB: ((BlobFile.size / 1000) / 1000),
+                        FileSizeInMB: BlobFile.size / 1000 / 1000,
                     };
                     this.ProfilePictureDTO.profilePicture = FileObject;
-                    this.ProfilePictureDTO.MediumPicture = FileObject.FileName + "," + FileObject.FileBase64;
+                    this.ProfilePictureDTO.MediumPicture =
+                        FileObject.FileName + ',' + FileObject.FileBase64;
                     this.files.push(BlobFile);
                     break;
-                case "AvatarPictureCropper":
+                case 'AvatarPictureCropper':
                     FileObject = {
-                        FileName: this.EventFile.name + "SmallPicture",
+                        FileName: this.EventFile.name + 'SmallPicture',
                         FileType: this.EventFile.type,
                         FileBase64: reader.result.toString().split(',')[1],
-                        FileSizeInMB: ((BlobFile.size / 1000) / 1000),
+                        FileSizeInMB: BlobFile.size / 1000 / 1000,
                     };
                     this.ProfilePictureDTO.AvatarPicture = FileObject;
-                    this.ProfilePictureDTO.SmallPicture = FileObject.FileName + "," + FileObject.FileBase64;
+                    this.ProfilePictureDTO.SmallPicture =
+                        FileObject.FileName + ',' + FileObject.FileBase64;
                     break;
-                case "OriginalPictureCropper":
+                case 'OriginalPictureCropper':
                     FileObject = {
-                        FileName: this.EventFile.name + "Original",
+                        FileName: this.EventFile.name + 'Original',
                         FileType: this.EventFile.type,
                         FileBase64: reader.result.toString().split(',')[1],
-                        FileSizeInMB: ((BlobFile.size / 1000) / 1000),
+                        FileSizeInMB: BlobFile.size / 1000 / 1000,
                     };
                     this.ProfilePictureDTO.OriginalPicture = FileObject;
-                    this.ProfilePictureDTO.Original = FileObject.FileName + "," + FileObject.FileBase64;
+                    this.ProfilePictureDTO.Original =
+                        FileObject.FileName + ',' + FileObject.FileBase64;
                     this.group.get(this.options.Name).setValue(this.ProfilePictureDTO);
                     this.OnChange.emit(this.group.get(this.options.Name).value);
                     break;
@@ -4013,7 +4056,7 @@ class AutocompleteTextBoxComponent {
         //       this.AutocompleteTextBoxControl.setValue(model);
         //       this.AutocompleteTextBoxControl.updateValueAndValidity()
         //     }
-        //   } 
+        //   }
         //   else {
         //     if (this.AutocompleteTextBoxControl.value == Value) {
         //       this.AutocompleteTextBoxControl.setErrors({ NewSelectionValidationKey: this.NewSelectionValidationKey });
@@ -4052,7 +4095,10 @@ class AutocompleteTextBoxComponent {
         AutocompleteTextBoxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.Name, new FormControl(''));
         this.AutocompleteTextBoxControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -4270,7 +4316,10 @@ class TagsInputComponent {
             this.changeValueSubscription.unsubscribe();
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.options.DatasourceItemText = this.options.DatasourceItemText.toLowerCase();
         this.TagsFormGroup = new FormGroup({});
@@ -5082,7 +5131,10 @@ class TextboxComponent {
         TextboxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         if (!this.options.MaxLength)
             this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
@@ -6185,12 +6237,6 @@ var DataType;
     DataType["AreaOfFocus"] = "06a4cfb7-216a-4a60-8388-7a859aab90b4";
 })(DataType || (DataType = {}));
 
-var ForceDirection;
-(function (ForceDirection) {
-    ForceDirection[ForceDirection["English"] = 1] = "English";
-    ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
-})(ForceDirection || (ForceDirection = {}));
-
 class ControlOptionsBase {
     constructor() {
         /** Sets an attribute disable="disabled"  */
@@ -6217,12 +6263,18 @@ class DatePickerOptions extends ControlOptionsBase {
         this.StartView = StartView.Month;
         /**To set SelectMode to DatePicker  is Single or Range */
         this.SelectMode = SelectMode.Single;
-        this.ForceDirection = ForceDirection.English;
+        this.ForceDirection = null;
         /**Name of DatePicker control to compare value with it   */
         this.StartControlToCompareWith = null;
     }
 }
 
+var ForceDirection;
+(function (ForceDirection) {
+    ForceDirection[ForceDirection["English"] = 1] = "English";
+    ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
+})(ForceDirection || (ForceDirection = {}));
+
 class DropdownOptions extends ControlOptionsBase {
     constructor() {
         super(...arguments);
@@ -7613,7 +7665,10 @@ class RecaptchaComponent {
         };
     }
     ngOnInit() {
-        this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        if (this.options.ForceDirection)
+            this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
+        else
+            this.textDir = localStorage.getItem('language') == 'ar' ? 'rtl' : 'ltr';
         this.controlValidationService.isCreatedBefor = false;
         this.loadImage();
         if (!this.options.ViewType)