@bnsights/bbsf-controls 1.0.90 → 1.0.92

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

@@ -799,7 +799,10 @@
         }
         DateInputComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 {
@@ -875,7 +878,7 @@
             if (!item)
                 return;
             var 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 (var index = 0; index < item.value.length; index++) {
                     item.value[index] = new Date(item.value[index] - tzoffset).toISOString().slice(0, -1);
@@ -914,7 +917,7 @@
     DateInputComponent.decorators = [
         { type: i0.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: ngPickDatetime.OwlDateTimeIntl, useClass: DefaultIntl }
                     ]
@@ -1943,7 +1946,10 @@
         }
         TextAreaComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 forms.FormControl(''));
             this.TextAreaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2558,7 +2564,10 @@
         }
         CheckBoxComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 forms.FormControl(''));
             this.CheckBoxFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2682,7 +2691,10 @@
         }
         DropdownListComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 = {
@@ -2788,7 +2800,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-DropdownList',
-                    template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [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      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false\" [dir]=\"textDir\"\r\n                 [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                 [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                 [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n                 [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                 [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n                 [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n                 [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n                 [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n        <!--No checkbox-->\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.id}}>{{item.itemName}}</label>\r\n        </ng-template>\r\n        <!--checkbox-->\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.id}}>{{item.itemName}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control\"\r\n      [dir]=\"textDir\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"select\")}}--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.id}}\" [ngValue]=\"item.id\">\r\n          {{item.itemName}}\r\n        </option>\r\n      </select>\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=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n          {{getErrorValidation(DropdownListFormControl.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  </div>\r\n  </div>\r\n"
+                    template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [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      <!--Asterisk-->\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n            aria-required=\"true\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input enabled bootstrap select-->\r\n      <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                 [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n                 [notFoundText]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n                 [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n                 [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n                 [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n                 [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n                 [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n                 [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n        <!--No checkbox-->\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n        <!--checkbox-->\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\" bbsf-checkbox\">\r\n            <div class=\"bbsf-input-container align-items-center\">\r\n              <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n              <div class=\"label-subtext-container\">\r\n                <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </ng-select>\r\n      <!--input disabled bootstrap select-->\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control\"\r\n              dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect()\" [(ngModel)]=\"options.SelectedItems\" [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--{{UtilityService.getResourceValue(\"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      <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=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n          {{getErrorValidation(DropdownListFormControl.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  </div>\r\n  </div>\r\n"
                 },] }
     ];
     DropdownListComponent.ctorParameters = function () { return [
@@ -2851,7 +2863,10 @@
         }
         PhoneComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 forms.FormControl(''));
             this.PhoneFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -2944,7 +2959,10 @@
             ToggleslideComponent.controlContainerstatic = this.controlContainer;
         }
         ToggleslideComponent.prototype.ngOnInit = function () {
-            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 forms.FormControl(''));
             this.ToggleslideFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
             var validationRules = [];
@@ -3051,7 +3069,10 @@
         }
         HtmlEditorComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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,
@@ -3768,13 +3789,13 @@
                 this.options.FileUploadAcceptsTypes.length > 0) {
                 for (var index = 0; index < this.options.FileUploadAcceptsTypes.length; index++) {
                     var Type = this.options.FileUploadAcceptsTypes[index];
-                    this.AcceptedType = this.AcceptedType + Type;
+                    this.AcceptedType = this.AcceptedType.toUpperCase() + Type.toUpperCase();
                 }
                 this.AcceptedTypeArray = this.AcceptedType.split(',');
                 for (var index = 0; index < this.AcceptedTypeArray.length; index++) {
                     var element = this.AcceptedTypeArray[index];
                     var TypeToolTipe = element.split('/')[1];
-                    this.ToolTipTypeArray.push(TypeToolTipe);
+                    this.ToolTipTypeArray.push(TypeToolTipe.toUpperCase());
                 }
                 this.ValidationMessage =
                     this.ValidationMessage +
@@ -4032,17 +4053,17 @@
             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 i0.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 = [];
@@ -4069,7 +4090,8 @@
             this.IsValid = function () {
                 _this.controlUtility.IsValid(_this.ProfileImageUploadFormControl);
             };
-            ProfileImageUploaderComponent.controlContainerstatic = this.controlContainer;
+            ProfileImageUploaderComponent.controlContainerstatic =
+                this.controlContainer;
             this.uploader = new ng2FileUpload.FileUploader({
                 disableMultipart: false, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
             });
@@ -4081,7 +4103,8 @@
             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,
@@ -4096,14 +4119,14 @@
                 modal: true,
                 checkCrossOrigin: false,
                 cropBoxResizable: false,
-                autoCrop: true
+                autoCrop: true,
             };
             if (this.options.ImageUploadAcceptsTypes != null) {
                 this.options.ImageUploadAcceptsTypes;
             }
             if (this.options.Value != null) {
-                var imgURL = this.options.Value["fileURL"];
-                if (imgURL != "" && imgURL != undefined && imgURL != null)
+                var imgURL = this.options.Value['fileURL'];
+                if (imgURL != '' && imgURL != undefined && imgURL != null)
                     this.ImageSource = imgURL;
                 var element = this.options.Value;
                 this.FileLikeObject = new ng2FileUpload.FileLikeObject({
@@ -4111,25 +4134,33 @@
                 });
                 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 (var index = 0; index < this.options.ImageUploadAcceptsTypes.length; index++) {
                     var 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 (var index = 0; index < this.AcceptedTypeArray.length; index++) {
                     var element = this.AcceptedTypeArray[index];
                     var 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 forms.FormControl(''));
             this.ProfileImageUploadFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -4183,12 +4214,17 @@
                 var fileType = file.type;
                 if (file.size > maxFileSize) {
                     var 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()))) {
                     var formControl = this.ProfileImageUploadFormControl;
                     formControl.setErrors({ ToolTipTypeError: this.ToolTipTypeArray });
                     formControl.markAsTouched();
@@ -4206,7 +4242,9 @@
                     var fileType = file.type;
                     if (file.size > maxFileSize_1) {
                         var formControl = this_1.ProfileImageUploadFormControl;
-                        formControl.setErrors({ FileMaxSizeInMB: this_1.options.FileMaxSizeInMB + 'M' });
+                        formControl.setErrors({
+                            FileMaxSizeInMB: this_1.options.FileMaxSizeInMB + 'M',
+                        });
                         formControl.markAsTouched();
                         this_1.uploader.queue = [];
                         return { value: void 0 };
@@ -4218,7 +4256,9 @@
                         _this.imageUrl = reader_1.result.toString();
                         _this.openModal(true);
                         var 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.
@@ -4238,7 +4278,7 @@
             var 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(forms.Validators.required);
                 this.ProfileImageUploadFormControl.invalid;
@@ -4271,17 +4311,17 @@
             });
             profilePicturCropper.toBlob(function (blob) {
                 _this.zone.run(function () {
-                    _this.getProfileImageBlobFile(blob, "profilePicturCropper");
+                    _this.getProfileImageBlobFile(blob, 'profilePicturCropper');
                 });
             });
             AvatarPictureCropper.toBlob(function (blob) {
                 _this.zone.run(function () {
-                    _this.getProfileImageBlobFile(blob, "AvatarPictureCropper");
+                    _this.getProfileImageBlobFile(blob, 'AvatarPictureCropper');
                 });
             });
             OriginalPictureCropper.toBlob(function (blob) {
                 _this.zone.run(function () {
-                    _this.getProfileImageBlobFile(blob, "OriginalPictureCropper");
+                    _this.getProfileImageBlobFile(blob, 'OriginalPictureCropper');
                 });
             });
             this.files = [];
@@ -4297,37 +4337,40 @@
             reader.onload = function () {
                 var 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;
@@ -4429,7 +4472,7 @@
             //       this.AutocompleteTextBoxControl.setValue(model);
             //       this.AutocompleteTextBoxControl.updateValueAndValidity()
             //     }
-            //   } 
+            //   }
             //   else {
             //     if (this.AutocompleteTextBoxControl.value == Value) {
             //       this.AutocompleteTextBoxControl.setErrors({ NewSelectionValidationKey: this.NewSelectionValidationKey });
@@ -4469,7 +4512,10 @@
         }
         AutocompleteTextBoxComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 forms.FormControl(''));
             this.AutocompleteTextBoxControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
@@ -4710,7 +4756,10 @@
         };
         TagsInputComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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 forms.FormGroup({});
@@ -5518,7 +5567,10 @@
         }
         TextboxComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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;
@@ -6658,12 +6710,6 @@
         DataType["AreaOfFocus"] = "06a4cfb7-216a-4a60-8388-7a859aab90b4";
     })(exports.DataType || (exports.DataType = {}));
 
-    exports.ForceDirection = void 0;
-    (function (ForceDirection) {
-        ForceDirection[ForceDirection["English"] = 1] = "English";
-        ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
-    })(exports.ForceDirection || (exports.ForceDirection = {}));
-
     var ControlOptionsBase = /** @class */ (function () {
         function ControlOptionsBase() {
             /** Sets an attribute disable="disabled"  */
@@ -6692,7 +6738,7 @@
             _this.StartView = exports.StartView.Month;
             /**To set SelectMode to DatePicker  is Single or Range */
             _this.SelectMode = exports.SelectMode.Single;
-            _this.ForceDirection = exports.ForceDirection.English;
+            _this.ForceDirection = null;
             /**Name of DatePicker control to compare value with it   */
             _this.StartControlToCompareWith = null;
             return _this;
@@ -6700,6 +6746,12 @@
         return DatePickerOptions;
     }(ControlOptionsBase));
 
+    exports.ForceDirection = void 0;
+    (function (ForceDirection) {
+        ForceDirection[ForceDirection["English"] = 1] = "English";
+        ForceDirection[ForceDirection["Arabic"] = 2] = "Arabic";
+    })(exports.ForceDirection || (exports.ForceDirection = {}));
+
     var DropdownOptions = /** @class */ (function (_super) {
         __extends(DropdownOptions, _super);
         function DropdownOptions() {
@@ -7992,7 +8044,10 @@
         }
         RecaptchaComponent.prototype.ngOnInit = function () {
             var _this = this;
-            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)