@bnsights/bbsf-controls 1.0.94 → 1.0.96

package/fesm2015/bnsights-bbsf-controls.js

@@ -63,14 +63,14 @@ class ErrorMassageValidation {
     }
     // tslint:disable-next-line: deprecation
     static showerror(FormControlName) {
-        ;
-        let form = ErrorMassageValidation.controlContainerstatic.control;
+        let form = ErrorMassageValidation.controlContainerstatic
+            .control;
         let control = form.get(FormControlName);
         //console.log(control)
-        control.setErrors({ 'minlength': true });
+        control.setErrors({ minlength: true });
         control.markAsTouched();
     }
-    //  isEmailRegisterd(Email: string) 
+    //  isEmailRegisterd(Email: string)
     //  {
     //    let resource:object={
     //      email:Email
@@ -82,92 +82,127 @@ class ErrorMassageValidation {
     //    .pipe(map(response => response.json()))
     //  }
     getErrorMassageValidation(error) {
-        ;
-        let result = "";
+        let result = '';
         switch (error.key) {
-            case "required":
-                result = this.utilityService.getResourceValue("RequiredValidationKey");
+            case 'required':
+                result = this.utilityService.getResourceValue('RequiredValidationKey');
                 break;
-            case "email":
-                result = this.utilityService.getResourceValue("EmailValidationKey");
+            case 'email':
+                result = this.utilityService.getResourceValue('EmailValidationKey');
                 break;
-            case "EmailValidationKey":
-                result = this.utilityService.getResourceValue("EmailValidationKey");
+            case 'EmailValidationKey':
+                result = this.utilityService.getResourceValue('EmailValidationKey');
                 break;
-            case "pattern":
-                result = this.utilityService.getResourceValue("NumberValidationKey");
+            case 'URLValidationKey':
+                result = this.utilityService.getResourceValue('urlValidationError');
                 break;
-            case "maxlength":
-                result = this.utilityService.getResourceValue("MaxLenghtValidationKey") + " " + error.value.requiredLength;
+            case 'pattern':
+                result = this.utilityService.getResourceValue('NumberValidationKey');
                 break;
-            case "minlength":
-                result = this.utilityService.getResourceValue("MinLenghtValidationKey") + " " + error.value.requiredLength;
+            case 'maxlength':
+                result =
+                    this.utilityService.getResourceValue('MaxLenghtValidationKey') +
+                        ' ' +
+                        error.value.requiredLength;
                 break;
-            case "min":
-                result = this.utilityService.getResourceValue("MinValueValidationKey") + " " + error.value.min;
+            case 'minlength':
+                result =
+                    this.utilityService.getResourceValue('MinLenghtValidationKey') +
+                        ' ' +
+                        error.value.requiredLength;
                 break;
-            case "max":
-                result = this.utilityService.getResourceValue("MaxValueValidationKey") + " " + error.value.max;
+            case 'min':
+                result =
+                    this.utilityService.getResourceValue('MinValueValidationKey') +
+                        ' ' +
+                        error.value.min;
                 break;
-            case "IntegerNumberValidationKey":
-                result = this.utilityService.getResourceValue("IntegerNumberValidationKey");
+            case 'max':
+                result =
+                    this.utilityService.getResourceValue('MaxValueValidationKey') +
+                        ' ' +
+                        error.value.max;
                 break;
-            case "PositiveNumberValidationKey":
-                result = this.utilityService.getResourceValue("PositiveNumberValidationKey");
+            case 'IntegerNumberValidationKey':
+                result = this.utilityService.getResourceValue('IntegerNumberValidationKey');
                 break;
-            case "validatePhoneNumber":
-                result = this.utilityService.getResourceValue("PhoneNumberValidationKey");
+            case 'PositiveNumberValidationKey':
+                result = this.utilityService.getResourceValue('PositiveNumberValidationKey');
                 break;
-            case "mask":
-                result = this.utilityService.getResourceValue("MaskValidationKey") + " " + error.value.requiredMask;
+            case 'validatePhoneNumber':
+                result = this.utilityService.getResourceValue('PhoneNumberValidationKey');
                 break;
-            case "PasswordComplexityHasNumber":
-                result = this.utilityService.getResourceValue("PasswordComplexityHasNumber");
+            case 'mask':
+                result =
+                    this.utilityService.getResourceValue('MaskValidationKey') +
+                        ' ' +
+                        error.value.requiredMask;
                 break;
-            case "ArabicLetterOnly":
-                result = this.utilityService.getResourceValue("ArabicLetterOnly");
+            case 'PasswordComplexityHasNumber':
+                result = this.utilityService.getResourceValue('PasswordComplexityHasNumber');
                 break;
-            case "EnglishLetterOnly":
-                result = this.utilityService.getResourceValue("EnglishLetterOnly");
+            case 'ArabicLetterOnly':
+                result = this.utilityService.getResourceValue('ArabicLetterOnly');
                 break;
-            case "ArabicIsRequiredAndOnly50CharactersEnglish":
-                result = this.utilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
+            case 'EnglishLetterOnly':
+                result = this.utilityService.getResourceValue('EnglishLetterOnly');
                 break;
-            case "PasswordComplexityHasCapitalLetter":
-                result = this.utilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
+            case 'ArabicIsRequiredAndOnly50CharactersEnglish':
+                result = this.utilityService.getResourceValue('ArabicIsRequiredAndOnly50CharactersEnglish');
                 break;
-            case "PasswordComplexityHasSmallLetter":
-                result = this.utilityService.getResourceValue("PasswordComplexityHasSmallLetter");
+            case 'PasswordComplexityHasCapitalLetter':
+                result = this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
                 break;
-            case "PasswordComplexityHasSpecialLetter":
-                result = this.utilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
+            case 'PasswordComplexityHasSmallLetter':
+                result = this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
                 break;
-            case "MaxWordCountValidationKey":
-                result = this.utilityService.getResourceValue("MaxWordCountValidationKey") + " " + error.value;
+            case 'PasswordComplexityHasSpecialLetter':
+                result = this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
                 break;
-            case "NewSelectionValidationKey":
-                result = this.utilityService.getResourceValue("NewSelectionValidationKey");
+            case 'MaxWordCountValidationKey':
+                result =
+                    this.utilityService.getResourceValue('MaxWordCountValidationKey') +
+                        ' ' +
+                        error.value;
                 break;
-            case "MaxFileCountValidationKey":
-                result = this.utilityService.getResourceValue("MaxFileCountValidationKey") + " " + error.value;
+            case 'NewSelectionValidationKey':
+                result = this.utilityService.getResourceValue('NewSelectionValidationKey');
                 break;
-            case "MinFileCountValidationKey":
-                result = this.utilityService.getResourceValue("MinFileCountValidationKey") + " " + error.value;
+            case 'MaxFileCountValidationKey':
+                result =
+                    this.utilityService.getResourceValue('MaxFileCountValidationKey') +
+                        ' ' +
+                        error.value;
                 break;
-            case "MaxSizeForAllFilesInMB":
-                result = this.utilityService.getResourceValue("MaxSizeForAllFilesInMB") + " " + error.value;
+            case 'MinFileCountValidationKey':
+                result =
+                    this.utilityService.getResourceValue('MinFileCountValidationKey') +
+                        ' ' +
+                        error.value;
                 break;
-            case "FileMaxSizeInMB":
-                result = this.utilityService.getResourceValue("FileMaxSizeInMB") + " " + error.value;
+            case 'MaxSizeForAllFilesInMB':
+                result =
+                    this.utilityService.getResourceValue('MaxSizeForAllFilesInMB') +
+                        ' ' +
+                        error.value;
                 break;
-            case "ToolTipTypeError":
-                result = this.utilityService.getResourceValue("ToolTipTypeError") + " " + error.value;
+            case 'FileMaxSizeInMB':
+                result =
+                    this.utilityService.getResourceValue('FileMaxSizeInMB') +
+                        ' ' +
+                        error.value;
                 break;
-            case "InvalidEndDate":
-                result = this.utilityService.getResourceValue("InvalidEndDate");
+            case 'ToolTipTypeError':
+                result =
+                    this.utilityService.getResourceValue('ToolTipTypeError') +
+                        ' ' +
+                        error.value;
                 break;
-            case "InvalidStartDate":
-                result = this.utilityService.getResourceValue("InvalidStartDate");
+            case 'InvalidEndDate':
+                result = this.utilityService.getResourceValue('InvalidEndDate');
+                break;
+            case 'InvalidStartDate':
+                result = this.utilityService.getResourceValue('InvalidStartDate');
                 break;
             default:
                 break;
@@ -192,6 +227,7 @@ var InputType;
     InputType[InputType["Email"] = 3] = "Email";
     InputType[InputType["Number"] = 4] = "Number";
     InputType[InputType["EID"] = 5] = "EID";
+    InputType[InputType["URL"] = 6] = "URL";
 })(InputType || (InputType = {}));
 
 class ControlUtility {
@@ -600,12 +636,15 @@ class DateInputComponent {
             this.DatePickerFormControl.updateValueAndValidity();
         });
     }
+    getDateValue() {
+        return this.options.Value ? this.datepipe.transform(this.options.Value, 'MMM d, y, h:mm a') : this.UtilityService.getResourceValue('NA');
+    }
 }
 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\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",
+                template: "<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 *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\"\r\n      aria-required=\"true\">*</span>\r\n    <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\" [dir]=\"textDir\" class=\"form-control bnsights-control\r\n        {{options.ExtraClasses}} \" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\" [class.is-invalid]=\"DatePickerFormControl.invalid &&\r\n        DatePickerFormControl.touched\" [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\"\r\n        [selectMode]=\"getSelectMode(options.SelectMode)\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n      <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\" [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\r\n            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\"\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    <!-- readonly -->\r\n    <div *ngIf=\"options.IsReadonly\">\r\n      <span class=\"readonly-view\">{{getDateValue()}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\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>",
                 providers: [
                     { provide: OwlDateTimeIntl, useClass: DefaultIntl }
                 ]
@@ -1109,7 +1148,7 @@ FileUploadComponent.controlContainerstatic = null;
 FileUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-FileUplaod',
-                template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         *ngIf=\"(options.IsDropZone)&&(!((options.IsMultipleFile==false)&&(uploader.queue.length)>0))\"\r\n         [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n         (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n         aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\" #fileInput\r\n         [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())\" (click)=\"fileInput.click();\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg  text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n          <div class=\"bbsf-validation-msg  text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n             class=\"fileSelector customFileUploadPlacment hidden  v-required-multiplefiles d-none\"\r\n             multiple=\"{{options.IsMultipleFile?'multiple':''}}\" name=\"file\" type=\"file\" value=\"\"\r\n             autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n             id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n             formControlName=\"{{options.Name}}\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n    </div>\r\n  </div>\r\n  <!--items uploaded-->\r\n  <div class=\"uploaded-items\">\r\n    <div class=\"btn-group\"  *ngFor=\"let item of uploader.queue\">\r\n      <button type=\"button\" class=\"btn btn-download-file btn-sm\" download>\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\" fill=\"currentColor\"></path>\r\n          <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\"></path>\r\n        </svg>\r\n        <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n      </button>\r\n      <button class=\"btn btn-download-file btn-sm btn-danger\"\r\n              (click)=\"item.remove();removeFromControlValue(item)\">\r\n        <i class=\"fa fa-times px-0\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n      {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\"> {{options.LabelDescription}}</div>\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</div>\r\n\r\n"
+                template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n      *ngIf=\"(options.IsDropZone)&&(!((options.IsMultipleFile==false)&&(uploader.queue.length)>0))&&!options.IsReadonly\"\r\n      [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\" (fileOver)=\"fileOverAnother($event)\"\r\n      [uploader]=\"uploader\" [accept]=\"AcceptedType\" (change)=\"onFileChange()\" id=\"{{options.Name}}\"\r\n      multiple=\"{{options.IsMultipleFile?'multiple':''}}\" aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\"\r\n      formControlName=\"{{options.Name}}\" #fileInput [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\"\r\n            *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())&&!options.IsReadonly\" (click)=\"fileInput.click();\">\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg  text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n          <div class=\"bbsf-validation-msg  text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n          <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\"\r\n            *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n        </div>\r\n      </div>\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden  v-required-multiplefiles d-none\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n        name=\"file\" type=\"file\" value=\"\" autocomplete=\"off\" (change)=\"onFileChange()\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n        id=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\" #fileInput\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.IsReadonly && !options.Value\">\r\n      <span class=\"readonly-view\">{{UtilityService.getResourceValue('NA')}}</span>\r\n    </div>\r\n  </div>\r\n  <!--items uploaded-->\r\n  <div class=\"uploaded-items\">\r\n    <div class=\"btn-group\" *ngFor=\"let item of uploader.queue\">\r\n      <a href=\"{{ item?.file?.rawFile?.url }}\" class=\"btn btn-download-file btn-sm\" download>\r\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <path\r\n            d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n            fill=\"currentColor\"></path>\r\n          <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\"></path>\r\n        </svg>\r\n        <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n      </a>\r\n      <button *ngIf=\"!options.IsReadonly\" class=\"btn btn-download-file btn-sm btn-danger\" (click)=\"item.remove();removeFromControlValue(item)\">\r\n        <i class=\"fa fa-times px-0\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n      {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\"> {{options.LabelDescription}}</div>\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</div>"
             },] }
 ];
 FileUploadComponent.ctorParameters = () => [
@@ -1274,6 +1313,10 @@ class MultiLingualTextBoxComponent {
             }
             this.ArabicFormControl.setValue(this.options.Value.Arabic);
             this.EnglishFormControl.setValue(this.options.Value.English);
+            if (this.options.IsReadonly && !this.options.Value) {
+                this.options.Value.Arabic = this.UtilityService.getResourceValue('NA');
+                this.options.Value.English = this.UtilityService.getResourceValue('NA');
+            }
             this.MultiLingualTextBoxFormControlHost.ngSubmit.subscribe((value) => {
                 this.group.markAllAsTouched();
                 this.markAllAsTouched = true;
@@ -1537,7 +1580,7 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
 MultiLingualTextBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextBox',
-                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"MultiLanguagegroup\">\r\n    <div class=\"row\">\r\n      <!--English textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\"\r\n                   (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n                   aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"English\"\r\n                   [hidden]=\"options.IsHideEnglishFields\" maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\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                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.English\" [(ngModel)]=\"options.Value.English\"\r\n                   #userinputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n            {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"  class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"  [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\"\r\n                   (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                   [hidden]=\"options.IsHideArabicFields\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                   formControlName=\"Arabic\" 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                   autocomplete=\"{{options.AutoComplete}}\"\r\n                   id=\"{{options.Name}}.Arabic\"\r\n                   (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\"(click)=\"copyInputMessage(userinputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n            {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n          </div>\r\n          <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
+                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\"\r\n    [formGroup]=\"MultiLanguagegroup\">\r\n    <div class=\"row\">\r\n      <!--English textbox-->\r\n      <div\r\n        [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\"\r\n        *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\"\r\n            [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish))&&!options.IsReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\"\r\n            [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div class=\"svg svg-icon-grey bbsf-icon\"\r\n              [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\"\r\n              *ngIf=\"options.Icon!=null\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"ltr\"\r\n              (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n              aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n              formControlName=\"English\"\r\n              [hidden]=\"options.IsHideEnglishFields\"\r\n              maxlength=\"{{options.MaxLength}}\"\r\n              minlength=\"{{options.MinLength}}\"\r\n              [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n              placeholder=\"{{options.EnglishPlaceholder}}\"\r\n              (change)=\"trimControlValue('En')\"\r\n              (keyup)=\"onTextChange()\"\r\n              (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              autocomplete=\"{{options.AutoComplete}}\"\r\n              id=\"{{options.Name}}.English\" [(ngModel)]=\"options.Value.English\"\r\n              #userinputEnglish>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\"\r\n              *ngIf=\"options.EnableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userinputEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"\r\n              [innerHTML]=\"options.Value.English\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\"\r\n              *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n              {{englishMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *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            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\"\r\n              *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n              {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!--Arabic textbox-->\r\n      <div\r\n        [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\"\r\n        *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\"\r\n            [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <!--Asterisk-->\r\n            <span\r\n              *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic)&&!options.IsReadonly\"\r\n              class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\"\r\n            [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--Icon-->\r\n            <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n              [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n              <span [inlineSVG]=\"options.Icon\"></span>\r\n            </div>\r\n            <!--input-->\r\n            <input class=\"form-control\" dir=\"rtl\"\r\n              (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n              [hidden]=\"options.IsHideArabicFields\"\r\n              aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n              formControlName=\"Arabic\" maxlength=\"{{options.MaxLength}}\"\r\n              minlength=\"{{options.MinLength}}\"\r\n              [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n              placeholder=\"{{options.ArabicPlaceholder}}\"\r\n              (keyup)=\"onTextChange()\"\r\n              (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n              autocomplete=\"{{options.AutoComplete}}\"\r\n              id=\"{{options.Name}}.Arabic\"\r\n              (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\"\r\n              *ngIf=\"options.EnableCopyToClipboard\"\r\n              (click)=\"copyInputMessage(userinputArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"\r\n              [innerHTML]=\"options.Value.Arabic\"></span>\r\n\r\n          </div>\r\n          <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n            <!--wordCount-->\r\n            <div class=\"bbsf-word-count\"\r\n              *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}\r\n              Words</div>\r\n            <!-- CharsLimitMsg-->\r\n            <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n              [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n              {{arabicMaxLimitWarningMsg}}\r\n            </div>\r\n            <!-- LabelDescription-->\r\n            <div class=\"bbsf-control-desc\"\r\n              *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            <!-- requiredText-->\r\n            <div class=\"bbsf-validation\"\r\n              *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n              {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 MultiLingualTextBoxComponent.ctorParameters = () => [
@@ -1602,6 +1645,8 @@ class TextAreaComponent {
         TextAreaComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        if (this.options.IsReadonly && !this.options.Value)
+            this.options.Value = this.UtilityService.getResourceValue('NA');
         if (this.options.ForceDirection)
             this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         else
@@ -1728,7 +1773,7 @@ TextAreaComponent.controlContainerstatic = null;
 TextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-TextArea',
-                template: "<div class=\"form-group bbsf-control bbsf-textarea\" [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\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n                (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n                aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n                [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n                placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n                (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n                (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n      {{getErrorValidation(TextAreaFormControl.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: "<div class=\"form-group bbsf-control bbsf-textarea\" [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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div  *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n                (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n                [dir]=\"textDir\" aria-describedby=\"email-error\"\r\n                aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n                [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n                placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n                (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n                maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n                (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n     <!-- readonly -->\r\n     <div  *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" >{{options.Value}}</span>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n      {{getErrorValidation(TextAreaFormControl.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"
             },] }
 ];
 TextAreaComponent.ctorParameters = () => [
@@ -1901,6 +1946,10 @@ class MultiLingualTextAreaComponent {
                 this.group.markAllAsTouched();
                 this.markAllAsTouched = true;
             });
+            if (this.options.IsReadonly && !this.options.Value) {
+                this.options.Value.Arabic = this.UtilityService.getResourceValue('NA');
+                this.options.Value.English = this.UtilityService.getResourceValue('NA');
+            }
         });
     }
     onTextChange() {
@@ -2148,7 +2197,7 @@ MultiLingualTextAreaComponent.controlContainerstatic = null;
 MultiLingualTextAreaComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextArea',
-                template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--English textarea-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(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()\" [(ngModel)]=\"options.Value.English\"\r\n                      (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\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      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                      [hidden]=\"options.IsHideArabicFields\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.Arabic\"\r\n                      (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaArabic>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"subtext-container\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\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    </div>\r\n  </div>\r\n"
+                template: "<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n    <div class=\"row\">\r\n      <!--English textarea-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish)&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control\" dir=\"ltr\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(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()\" [(ngModel)]=\"options.Value.English\"\r\n                      (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaEnglish>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n\r\n          <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"  [innerHTML]=\"options.Value.English\" ></span>\r\n\r\n        </div>\r\n        <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n            {{englishMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\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      <!--Arabic textbox-->\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic)&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n            <!--input-->\r\n            <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n                      (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n                      [hidden]=\"options.IsHideArabicFields\"\r\n                      aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                      formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n                      maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n                      [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n                      placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n                      (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.Arabic\"\r\n                      (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n                      #userinputTextAreaArabic>\r\n                            </textarea>\r\n            <!--CopyToClipboard-->\r\n            <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n              <i class=\"fas fa-copy\"></i>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"  [innerHTML]=\"options.Value.Arabic\" ></span>\r\n\r\n        </div>\r\n        <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n          <!--wordCount-->\r\n          <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n          <!-- CharsLimitMsg-->\r\n          <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n            {{arabicMaxLimitWarningMsg}}\r\n          </div>\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n            {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\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    </div>\r\n  </div>\r\n</div>\r\n"
             },] }
 ];
 MultiLingualTextAreaComponent.ctorParameters = () => [
@@ -2262,7 +2311,7 @@ CheckBoxComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-CheckBox',
-                template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" [dir]=\"textDir\" [checked]=\"options.Value==true?true:null\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n           (change)=\"onValueChanged()\"\r\n           [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n           id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n\r\n    <div class=\"label-subtext-container\">\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\">*</span>\r\n      </label>\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=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n          {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\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: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n  <div class=\"bbsf-input-container\">\r\n    <!--input-->\r\n    <input *ngIf=\"!options.IsReadonly\" class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" [dir]=\"textDir\" [checked]=\"options.Value==true?true:null\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n           (change)=\"onValueChanged()\"\r\n           [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n           id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n\r\n    <div class=\"label-subtext-container\">\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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n      </label>\r\n       <!-- readonly -->\r\n    <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{options.Value}}</span>\r\n    </div>\r\n      <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\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=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n          {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n        </div>\r\n      </div>\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"
             },] }
 ];
 CheckBoxComponent.ctorParameters = () => [
@@ -2391,6 +2440,16 @@ class DropdownListComponent {
         }
         return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
     }
+    getSelectedItemValue() {
+        if (this.options.SelectedItems) {
+            if (this.options.SingleSelection)
+                return this.options.DataSource.filter(item => item[this.options.ItemTempletkey] == this.options.SelectedItems)[0][this.options.ItemTempletvalue];
+            else
+                return this.options.DataSource.filter(item => this.options.SelectedItems.includes(item[this.options.ItemTempletkey])).map(item => item[this.options.ItemTempletvalue]);
+        }
+        else
+            return this.UtilityService.getResourceValue('NA');
+    }
     onItemSelect() {
         this.onChangeService.ChangeValue(this.options.Name);
         let originalValue = this.options.SelectedItems;
@@ -2436,7 +2495,7 @@ DropdownListComponent.decorators = [
     { type: 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=\"{{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"
+                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))&&!options.IsReadonly\" 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&&!options.IsReadonly\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\" [notFoundText]=\"options.NotFoundText\"\r\n        [maxSelectedItems]=\"options.LimitSelection\" [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\"\r\n        [readonly]=\"options.IsDisabled\" [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [selectableGroup]=\"true\"\r\n        [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\" [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\"\r\n        (clear)=\"Clear()\" [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}\"\r\n                [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&&!options.IsReadonly\" class=\"form-control\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        (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      <!-- readonly -->\r\n      <div *ngIf=\"options.IsReadonly\">\r\n        <span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n      </div>\r\n      <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\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>"
             },] }
 ];
 DropdownListComponent.ctorParameters = () => [
@@ -2497,6 +2556,8 @@ class PhoneComponent {
         PhoneComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        if (this.options.IsReadonly && !this.options.Value)
+            this.options.Value = this.UtilityService.getResourceValue('NA');
         if (this.options.ForceDirection)
             this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         else
@@ -2524,7 +2585,7 @@ class PhoneComponent {
         if (this.options.IsDisabled) {
             this.PhoneFormControl.disable();
         }
-        this.PhoneControlHost.ngSubmit.subscribe((value) => {
+        this.PhoneControlHost.ngSubmit.subscribe(() => {
             this.group.markAllAsTouched();
             this.markAllAsTouched = true;
         });
@@ -2559,7 +2620,7 @@ PhoneComponent.controlContainerstatic = null;
 PhoneComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-Phone',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [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      <!--Asterisk-->\r\n      <span\r\n        *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':'ltr'}}\"\r\n        [cssClass]=\"options.ExtraClasses\"\r\n        [preferredCountries]=\"options.PreferredCountries\"\r\n        [onlyCountries]=\"options.OnlyCountries\"\r\n        [enableAutoCountrySelect]=\"true\"\r\n        [enablePlaceholder]=\"options.EnablePlaceholder\"\r\n        [searchCountryFlag]=\"options.AllowSearch\"\r\n        [searchCountryField]=\"[SearchCountryField.Iso2,\r\n        SearchCountryField.Name]\"\r\n        [selectFirstCountry]=\"options.SelectFirstCountry\"\r\n        [selectedCountryISO]=\"getSelectedCountry(options.SelectedCountryISO)\"\r\n        [separateDialCode]=\"separateDialCode\"\r\n        maxlength=\"15\" [(ngModel)]=\"options.Value\"\r\n        [phoneValidation]=\"options.PhoneValidation\" [id]=\"options.Name\"\r\n        name=\"{{options.Name}}\" formControlName=\"{{options.Name}}\"\r\n        (change)=\"onValueChanged()\"\r\n        [class.is-invalid]=\"PhoneFormControl.invalid &&\r\n        PhoneFormControl.touched\" aria-invalid=\"true\"\r\n        class=\"form-control\">\r\n      </ngx-intl-tel-input>\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=\"(PhoneFormControl.invalid &&\r\n      PhoneFormControl.touched)\">\r\n      {{getErrorValidation(PhoneFormControl.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"
+                template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [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      <!--Asterisk-->\r\n      <span\r\n        *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div  *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':'ltr'}}\"\r\n        [cssClass]=\"options.ExtraClasses\"\r\n        [preferredCountries]=\"options.PreferredCountries\"\r\n        [onlyCountries]=\"options.OnlyCountries\"\r\n        [enableAutoCountrySelect]=\"true\"\r\n        [enablePlaceholder]=\"options.EnablePlaceholder\"\r\n        [searchCountryFlag]=\"options.AllowSearch\"\r\n        [searchCountryField]=\"[SearchCountryField.Iso2,\r\n        SearchCountryField.Name]\"\r\n        [selectFirstCountry]=\"options.SelectFirstCountry\"\r\n        [selectedCountryISO]=\"getSelectedCountry(options.SelectedCountryISO)\"\r\n        [separateDialCode]=\"separateDialCode\"\r\n        maxlength=\"15\" [(ngModel)]=\"options.Value\"\r\n        [phoneValidation]=\"options.PhoneValidation\" [id]=\"options.Name\"\r\n        name=\"{{options.Name}}\" formControlName=\"{{options.Name}}\"\r\n        (change)=\"onValueChanged()\"\r\n        [class.is-invalid]=\"PhoneFormControl.invalid &&\r\n        PhoneFormControl.touched\" aria-invalid=\"true\"\r\n        class=\"form-control\">\r\n      </ngx-intl-tel-input>\r\n    </div>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.IsReadonly\"><a href=\"tel:{{options.Value}}\">{{options.Value}}</a>\r\n      </div>\r\n  </div>\r\n  <div  *ngIf=\"!options.IsReadonly\" 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=\"(PhoneFormControl.invalid &&\r\n      PhoneFormControl.touched)\">\r\n      {{getErrorValidation(PhoneFormControl.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"
             },] }
 ];
 PhoneComponent.ctorParameters = () => [
@@ -2576,88 +2637,6 @@ PhoneComponent.propDecorators = {
     OnChange: [{ type: Output }]
 };
 
-class ToggleslideComponent {
-    // tslint:disable-next-line: max-line-length
-    constructor(controlUtility, controlContainer, ToggleslideControlHost, TextControlHost, UtilityService, controlValidationService, globalSettings) {
-        this.controlUtility = controlUtility;
-        this.controlContainer = controlContainer;
-        this.ToggleslideControlHost = ToggleslideControlHost;
-        this.TextControlHost = TextControlHost;
-        this.UtilityService = UtilityService;
-        this.controlValidationService = controlValidationService;
-        this.globalSettings = globalSettings;
-        this.OnChange = new EventEmitter();
-        this.SlideValue = false;
-        this.markAllAsTouched = false;
-        ToggleslideComponent.controlContainerstatic = this.controlContainer;
-    }
-    ngOnInit() {
-        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 = [];
-        let validationRulesasync = [];
-        this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
-        if (!this.options.ViewType)
-            this.options.ViewType = this.globalSettings.ViewType;
-        if (this.options.LabelKey != null && this.options.LabelKey != "")
-            this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
-    }
-    ngAfterViewInit() {
-        if (this.options.AttributeList != null) {
-            var element = document.getElementById(this.options.Name);
-            for (let index = 0; index < this.options.AttributeList.length; index++) {
-                element.setAttribute(this.options.AttributeList[index].Key, this.options.AttributeList[index].value);
-            }
-        }
-    }
-    resetError() {
-        this.controlValidationService.RemoveGlobalError();
-    }
-    showGlobalError() {
-        this.controlUtility.showGlobalError();
-    }
-    getErrorValidation(ErrorList) {
-        if (this.markAllAsTouched && this.group.invalid) {
-            this.showGlobalError();
-            this.markAllAsTouched = false;
-        }
-        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
-    }
-    changeValueToggle() {
-        this.OnChange.emit(this.SlideValue);
-        this.options.Value = this.SlideValue;
-        this.ToggleslideFormControl.setValue(this.SlideValue);
-        if (this.options.PatchFunction && this.options.PatchPath && this.ToggleslideFormControl.valid) {
-            this.controlUtility.patchControlValue(this.SlideValue, this.options.PatchFunction, this.options.PatchPath);
-        }
-    }
-}
-ToggleslideComponent.controlContainerstatic = null;
-ToggleslideComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Toggleslide',
-                template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"SlideValue\" [dir]=\"textDir\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                        formControlName=\"{{options.Name}}\" disableRipple=\"true\" [disabled]=\"options.IsDisabled\" (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\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  </div>\r\n</div>\r\n"
-            },] }
-];
-ToggleslideComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: ControlContainer, decorators: [{ type: Optional }] },
-    { type: FormGroupDirective },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-ToggleslideComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
-
 class HtmlEditorComponent {
     constructor(zone, controlUtility, controlContainer, HtmlEditorControlHost, UtilityService, controlValidationService, globalSettings) {
         this.zone = zone;
@@ -2861,7 +2840,7 @@ HtmlEditorComponent.controlContainerstatic = null;
 HtmlEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-HtmlEditor',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-htmleditor\" [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\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <angular-editor\r\n                      (change)=\"onValueChanged()\"\r\n                      id=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n                      class=\"{{options.ExtraClasses}}\"\r\n                      [dir]=\"textDir\" formControlName=\"{{options.Name}}\"\r\n                      [config]=\"editorConfig\"></angular-editor>\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=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n      {{getErrorValidation(HtmlEditorFormControl.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-htmleditor\" [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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n      <angular-editor\r\n                      (change)=\"onValueChanged()\"\r\n                      id=\"{{options.Name}}\"\r\n                      [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n                      class=\"{{options.ExtraClasses}}\"\r\n                      [dir]=\"textDir\" formControlName=\"{{options.Name}}\"\r\n                      [config]=\"editorConfig\"></angular-editor>\r\n    </div>\r\n\r\n    <div  *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value\"></span>\r\n\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=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n      {{getErrorValidation(HtmlEditorFormControl.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"
             },] }
 ];
 HtmlEditorComponent.ctorParameters = () => [
@@ -3282,7 +3261,7 @@ MultiLingualHtmlEditorComponent.controlContainerstatic = null;
 MultiLingualHtmlEditorComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualHtmlEditor',
-                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div  [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                            formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\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!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n            {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\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\r\n      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                            formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\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!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n            {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n          </div>\r\n          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\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  </div>\r\n</div>\r\n\r\n"
+                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n    <div class=\"row\">\r\n      <!--English htmleditor-->\r\n      <div  [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n            <!--input-->\r\n            <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n                            formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n          </div>\r\n          <div  *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value.English\" ></span>\r\n\r\n        </div>\r\n        <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\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      <!--Arabic htmleditor-->\r\n      <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n        <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n          <!--label-->\r\n          <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n            <!--Asterisk-->\r\n            <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic)&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n          </label>\r\n          <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n            <!--input-->\r\n            <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n                            formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n          </div>\r\n          <div  *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"  [innerHTML]=\"options.Value.Arabic\" ></span>\r\n\r\n        </div>\r\n        <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n          <!-- LabelDescription-->\r\n          <div class=\"bbsf-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          <!-- requiredText-->\r\n          <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n            {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\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  </div>\r\n</div>\r\n</div>\r\n"
             },] }
 ];
 MultiLingualHtmlEditorComponent.ctorParameters = () => [
@@ -3618,7 +3597,7 @@ ImageUploaderComponent.controlContainerstatic = null;
 ImageUploaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-ImageUpload',
-                template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         [multiple]=\"options.IsMultiple\"\r\n         (change)=\"onFileChange($event)\"\r\n         ngDefaultControl\r\n         formControlName=\"{{options.Name}}\"\r\n         [maxFileSize]=\"maxFileSize\"\r\n         id=\"{{options.Name}}\"\r\n         [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img  *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\"\r\n           ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           [multiple]=\"options.IsMultiple\"\r\n           (change)=\"onFileChange($event)\"\r\n           ngDefaultControl\r\n           formControlName=\"{{options.Name}}\"\r\n           [maxFileSize]=\"maxFileSize\"\r\n           id=\"{{options.Name}}\"\r\n           [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomIn\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomOut\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveRight\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveUp\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveDown\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateRight\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
+                template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone&&!options.IsReadonly\" class=\"bbsf-input-container {{options.ExtraClasses}}\" ngx-dropzone\r\n      [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl\r\n      formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\" id=\"{{options.Name}}\"\r\n      [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <img *ngIf=\"ImageSource\" [src]=\"ImageSource\"\r\n          style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n        <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\"\r\n              d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\"\r\n              fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n        ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone&&!options.IsReadonly\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\"\r\n        [multiple]=\"options.IsMultiple\" (change)=\"onFileChange($event)\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n        [maxFileSize]=\"maxFileSize\" id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n        ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.IsReadonly\">\r\n      <div *ngIf=\"ImageSource\" #element>\r\n        <img [src]=\"ImageSource\" />\r\n      </div>\r\n      <div *ngIf=\"!ImageSource\">\r\n        <span class=\"readonly-view\">{{UtilityService.getResourceValue('NA')}}</span>\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\" *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomIn\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomOut\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveRight\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveUp\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveDown\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateLeft\")}}'>\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateRight\")}}'>\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- readonly -->\r\n\r\n\r\n</div>"
             },] }
 ];
 ImageUploaderComponent.ctorParameters = () => [
@@ -3986,7 +3965,7 @@ ProfileImageUploaderComponent.controlContainerstatic = null;
 ProfileImageUploaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-ProfileImageUploader',
-                template: "<div class=\"form-group bbsf-control bbsf-profile-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"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\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange($event)\"\r\n         aria-describedby=\"email-error\"\r\n         aria-invalid=\"true\"\r\n         ngDefaultControl formControlName=\"{{options.Name}}\"\r\n         id=\"{{options.Name}}\"\r\n         [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\"\r\n          ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n           ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           id=\"{{options.Name}}\"\r\n           [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
+                template: "<div class=\"form-group bbsf-control bbsf-profile-image-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div *ngIf=\"options.AllowDropZone&&!options.IsReadonly\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n         ngx-dropzone\r\n         [disabled]=\"options.IsDisabled\"\r\n         [accept]=\"AcceptedType\"\r\n         (change)=\"onFileChange($event)\"\r\n         aria-describedby=\"email-error\"\r\n         aria-invalid=\"true\"\r\n         ngDefaultControl formControlName=\"{{options.Name}}\"\r\n         id=\"{{options.Name}}\"\r\n         [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n      <ngx-dropzone-label class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n            <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n            <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n          </svg>\r\n          <!--Validation text-->\r\n          <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n    </div>\r\n    <!--Not allowed dropZone-->\r\n    <div *ngIf=\"!options.AllowDropZone&&!options.IsReadonly\" style=\"width:fit-content\">\r\n      <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n        <div #element (click)=\"showImageUploader(element)\">\r\n          <img [src]=\"ImageSource\" class=\"profile-upload-img\" />\r\n        </div>\r\n      </ngx-dropzone-label>\r\n      <div class=\"d-none {{options.ExtraClasses}}\"\r\n          ngx-dropzone\r\n           [disabled]=\"options.IsDisabled\"\r\n           [accept]=\"AcceptedType\"\r\n           (change)=\"onFileChange($event)\"\r\n           aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n           ngDefaultControl formControlName=\"{{options.Name}}\"\r\n           id=\"{{options.Name}}\"\r\n           [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n      </div>\r\n      <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n      </ngx-dropzone-image-preview>\r\n      <!--Validation text-->\r\n      <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n    </div>\r\n\r\n    <ngx-dropzone-label *ngIf=\"files.length==0&&options.IsReadonly\">\r\n      <div #element >\r\n        <img [src]=\"ImageSource\" />\r\n      </div>\r\n    </ngx-dropzone-label>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n    <!-- required text-->\r\n    <div class=\"bbsf-validation\"\r\n         *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n      {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n    </div>\r\n\r\n    <!-- LabelDescription-->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n  </div>\r\n  <!-- image cropper modal-->\r\n  <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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            {{UtilityService.getResourceValue(\"CropImage\")}}\r\n          </h4>\r\n          <button type=\"button\" class=\"btn-close\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <div *ngIf=\"imageUrl\">\r\n            <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n            </angular-cropper>\r\n            <img [src]=\"imgwUrl\" />\r\n          </div>\r\n          <div class=\"cropper-btns\">\r\n            <div class=\"btn-group\">\r\n              <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Zoom out\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move left\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move right\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move up\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move down\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate left\">\r\n                <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate right\">\r\n                <span class=\"docs-tooltip\">\r\n                  <span class=\"fa fa-redo-alt\"></span>\r\n                </span>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"modal-footer\" align=\"right\">\r\n          <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n            {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n          </button>\r\n          <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n            {{UtilityService.getResourceValue(\"Crop\")}}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n"
             },] }
 ];
 ProfileImageUploaderComponent.ctorParameters = () => [
@@ -4097,6 +4076,8 @@ class AutocompleteTextBoxComponent {
         AutocompleteTextBoxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        if (this.options.IsReadonly && !this.options.Value)
+            this.options.Value = this.UtilityService.getResourceValue('NA');
         if (this.options.ForceDirection)
             this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         else
@@ -4235,7 +4216,7 @@ AutocompleteTextBoxComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-AutocompleteTextBox',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [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\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.ExtraClasses}}\" *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\"\r\n                       aria-describedby=\"email-error\"\r\n                       aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\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=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(AutocompleteTextBoxControl.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\r\n"
+                template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Input container-->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n      <!--input-->\r\n      <ng-autocomplete class=\"form-control  {{options.ExtraClasses}}\" *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\"\r\n                       aria-describedby=\"email-error\"\r\n                       aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n                       [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n                       (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n                       [dir]=\"textDir\"\r\n                       formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                       [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n      </ng-autocomplete>\r\n\r\n      <ng-template #itemTemplate let-item>\r\n        <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n        <a [innerHTML]=\"item.value\"></a>\r\n      </ng-template>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{AutocompleteTextBoxControl.value.value}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\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=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n      {{getErrorValidation(AutocompleteTextBoxControl.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\r\n"
             },] }
 ];
 AutocompleteTextBoxComponent.ctorParameters = () => [
@@ -4318,6 +4299,8 @@ class TagsInputComponent {
             this.changeValueSubscription.unsubscribe();
     }
     ngOnInit() {
+        if (this.options.IsReadonly && !this.options.Value)
+            this.options.Value = this.UtilityService.getResourceValue('NA');
         if (this.options.ForceDirection)
             this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         else
@@ -4494,13 +4477,17 @@ class TagsInputComponent {
                 this.tags.pop();
         }
     }
+    getTagsValue() {
+        if (this.tags.length > 0)
+            return this.tags.map(item => item.name);
+    }
 }
 TagsInputComponent.controlContainerstatic = null;
 TagsInputComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-TagsInput',
-                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\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\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n        [dir]=\"textDir\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"tags\"\r\n                      [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n                      id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n                      [removeLastOnBackspace]=\"options.RemoveLastOnBackspace\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n                      [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n                      [scrollableOptions]=\"options.ScrollableOptions\" [scrollableOptionsInView]=\"options.MaxSearchResultsCount\"\r\n                      (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n                      [maxTags]=\"options.MaxNumberTags\" [minLengthBeforeOptions]=\"options.MinSearchLength\"\r\n                      [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n                      (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n        </b-tags-input>\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=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.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\r\n</div>\r\n"
+                template: "\r\n<div [formGroup]=\"group\">\r\n  <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n      </label>\r\n      <!--input-->\r\n      <div class=\"bbsf-input-container\"  *ngIf=\"!options.IsReadonly\">\r\n        <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n        [dir]=\"textDir\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n                      aria-invalid=\"true\" formControlName=\"tags\"\r\n                      [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n                      id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n                      [removeLastOnBackspace]=\"options.RemoveLastOnBackspace\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n                      [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n                      [scrollableOptions]=\"options.ScrollableOptions\" [scrollableOptionsInView]=\"options.MaxSearchResultsCount\"\r\n                      (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n                      [maxTags]=\"options.MaxNumberTags\" [minLengthBeforeOptions]=\"options.MinSearchLength\"\r\n                      [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n                      (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n        </b-tags-input>\r\n      </div>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{getTagsValue()}}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"subtext-container\"  *ngIf=\"!options.IsReadonly\">\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=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n        {{getErrorValidation(TagsFormControl.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\r\n</div>\r\n"
             },] }
 ];
 TagsInputComponent.ctorParameters = () => [
@@ -5055,13 +5042,16 @@ class RadioButtonComponent {
         this.options.Value = originalValue;
         this.OnChange.emit(originalValue);
     }
+    getSelectedItemValue(value) {
+        return this.options.Items.filter(item => item.Value == value)[0].Text;
+    }
 }
 RadioButtonComponent.controlContainerstatic = null;
 RadioButtonComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-RadioButton',
-                template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label  [hidden]=\"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\">*</span>\r\n    </label>\r\n    <div class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n        <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n               class=\"{{options.ExtraClasses}}\"\r\n               [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n               (change)=\"onValueChanged()\"\r\n               aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n               formControlName=\"{{options.Name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n      </div>\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=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n      {{getErrorValidation(RadioButtonFormControl.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\r\n"
+                template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label  [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n        <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n               class=\"{{options.ExtraClasses}}\"\r\n               [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n               (change)=\"onValueChanged()\"\r\n               aria-describedby=\"email-error\"\r\n               aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n               formControlName=\"{{options.Name}}\">\r\n        <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n      </div>\r\n    </div>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{getSelectedItemValue(options.Value)}}</span>\r\n      </div>\r\n  </div>\r\n  <div *ngIf=\"!options.IsReadonly\" 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=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n      {{getErrorValidation(RadioButtonFormControl.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\r\n"
             },] }
 ];
 RadioButtonComponent.ctorParameters = () => [
@@ -5094,6 +5084,7 @@ class TextboxComponent {
         this.controlValidationService = controlValidationService;
         this.globalSettings = globalSettings;
         this.OnChange = new EventEmitter();
+        this.inputType = InputType;
         this.MaskPattern = '';
         this.WordCount = 0;
         this.WordCountArray = 0;
@@ -5106,7 +5097,7 @@ class TextboxComponent {
         this.showCharsLimitMsg = false;
         this.hasCharsLimitValidationError = false;
         this.minCharsLimit = -1; //To disable chars limit feature by default
-        this.maxLimitWarningMsg = "";
+        this.maxLimitWarningMsg = '';
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -5133,6 +5124,9 @@ class TextboxComponent {
         TextboxComponent.controlContainerstatic = this.controlContainer;
     }
     ngOnInit() {
+        if (this.options.IsReadonly && !this.options.Value) {
+            this.options.Value = this.UtilityService.getResourceValue('NA');
+        }
         if (this.options.ForceDirection)
             this.textDir = this.options.ForceDirection == 2 ? 'rtl' : 'ltr';
         else
@@ -5142,14 +5136,14 @@ class TextboxComponent {
             this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
         if (!this.options.ViewType)
             this.options.ViewType = this.globalSettings.ViewType;
-        if (this.options.MaskPattern != null && this.options.MaskPattern != "") {
+        if (this.options.MaskPattern != null && this.options.MaskPattern != '') {
             this.MaskPattern = this.options.MaskPattern;
             this.options.Placeholder = this.MaskPattern;
         }
         this.group.addControl(this.options.Name, new FormControl(''));
         this.TextBoxFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
         this.TextBoxFormControl.setValue(this.options.Value);
-        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);
         this.getCustomErrorsMassages();
         if (this.options.IsRequired) {
@@ -5161,17 +5155,27 @@ class TextboxComponent {
                     this.controlUtility.patternValidator(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, { EmailValidationKey: this.EmailValidationKey }),
                 ]));
                 break;
+            case InputType.URL:
+                var pattern = new RegExp("(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})(\.[a-zA-Z0-9]{2,})?");
+                this.validationRules.push(Validators.compose([
+                    this.controlUtility.patternValidator(pattern, { URLValidationKey: this.URLValidationKey }),
+                ]));
+                break;
             case InputType.EID:
                 this.MaskPattern = '000-0000-0000000-0';
                 this.options.Placeholder = this.MaskPattern;
                 break;
             case InputType.Number:
-                this.validationRules.push(Validators.compose([
-                    this.controlUtility.patternValidator(/^[0-9]*$/, { IntegerNumberValidationKey: "" }),
-                ]));
-                this.validationRules.push(Validators.compose([
-                    this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: "" }),
-                ]));
+                if (this.options.CustomValidation.length == 0) {
+                    this.validationRules.push(Validators.compose([
+                        this.controlUtility.patternValidator(/^[0-9]*$/, {
+                            IntegerNumberValidationKey: '',
+                        }),
+                    ]));
+                    this.validationRules.push(Validators.compose([
+                        this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: '' }),
+                    ]));
+                }
                 if (this.options.NumberRange != null) {
                     this.validationRules.push(Validators.min(this.options.NumberRange.From));
                     this.validationRules.push(Validators.max(this.options.NumberRange.To));
@@ -5180,10 +5184,18 @@ class TextboxComponent {
             case InputType.Password:
                 if (!this.options.RemoveDefaultPasswordValidation) {
                     this.validationRules.push(Validators.compose([
-                        this.controlUtility.patternValidator(/\d/, { PasswordComplexityHasNumber: this.PasswordComplexityHasNumber }),
-                        this.controlUtility.patternValidator(/[A-Z]/, { PasswordComplexityHasCapitalLetter: this.PasswordComplexityHasCapitalLetter }),
-                        this.controlUtility.patternValidator(/[a-z]/, { PasswordComplexityHasSmallLetter: this.PasswordComplexityHasSmallLetter }),
-                        this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, { PasswordComplexityHasSpecialLetter: this.PasswordComplexityHasSpecialLetter }),
+                        this.controlUtility.patternValidator(/\d/, {
+                            PasswordComplexityHasNumber: this.PasswordComplexityHasNumber,
+                        }),
+                        this.controlUtility.patternValidator(/[A-Z]/, {
+                            PasswordComplexityHasCapitalLetter: this.PasswordComplexityHasCapitalLetter,
+                        }),
+                        this.controlUtility.patternValidator(/[a-z]/, {
+                            PasswordComplexityHasSmallLetter: this.PasswordComplexityHasSmallLetter,
+                        }),
+                        this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, {
+                            PasswordComplexityHasSpecialLetter: this.PasswordComplexityHasSpecialLetter,
+                        }),
                         Validators.minLength(8),
                     ]));
                 }
@@ -5192,7 +5204,9 @@ class TextboxComponent {
         if (this.options.LanguageValidation) {
             if (this.options.LanguageValidation == LanguageValidation.Arabic) {
                 this.validationRules.push(Validators.compose([
-                    this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
+                    this.controlUtility.patternValidator(/^[^A-Za-z]*$/, {
+                        ArabicLetterOnly: this.ArabicLetterOnly,
+                    }),
                 ]));
             }
             else if (this.options.LanguageValidation == LanguageValidation.English) {
@@ -5214,8 +5228,10 @@ class TextboxComponent {
         if (this.options.MaxLength > 0) {
             this.validationRules.push(Validators.maxLength(this.options.MaxLength));
             if (!this.options.MaxLengthWarningLimit)
-                this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
-            this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
+                this.options.MaxLengthWarningLimit =
+                    this.globalSettings.MaxLengthWarningLimit;
+            this.minCharsLimit =
+                this.options.MaxLength - this.options.MaxLengthWarningLimit;
         }
         this.TextBoxFormControl.setValidators(this.validationRules);
         this.TextBoxFormControl.setAsyncValidators(this.validationRulesasync);
@@ -5247,7 +5263,9 @@ class TextboxComponent {
     trimControlValue() {
         let originalValue = this.controlUtility.trimControlValue(this.TextBoxFormControl.value);
         this.TextBoxFormControl.patchValue(originalValue);
-        if (this.options.PatchFunction && this.options.PatchPath && this.TextBoxFormControl.valid) {
+        if (this.options.PatchFunction &&
+            this.options.PatchPath &&
+            this.TextBoxFormControl.valid) {
             this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
         }
     }
@@ -5255,31 +5273,40 @@ class TextboxComponent {
         this.controlUtility.CopyInputMessage(inputElement);
     }
     getCustomErrorsMassages() {
-        this.EmailValidationKey = this.UtilityService.getResourceValue("EmailValidationKey");
-        this.PasswordComplexityHasCapitalLetter = this.UtilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
-        this.PasswordComplexityHasNumber = this.UtilityService.getResourceValue("PasswordComplexityHasNumber");
-        this.PasswordComplexityHasSmallLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSmallLetter");
-        this.PasswordComplexityHasSpecialLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
-        this.MaxWordCountValidationKey = this.UtilityService.getResourceValue("MaxWordCountValidationKey");
-        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
-        this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
+        this.EmailValidationKey =
+            this.UtilityService.getResourceValue('EmailValidationKey');
+        this.URLValidationKey =
+            this.UtilityService.getResourceValue('urlValidationError');
+        this.PasswordComplexityHasCapitalLetter =
+            this.UtilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
+        this.PasswordComplexityHasNumber = this.UtilityService.getResourceValue('PasswordComplexityHasNumber');
+        this.PasswordComplexityHasSmallLetter =
+            this.UtilityService.getResourceValue('PasswordComplexityHasSmallLetter');
+        this.PasswordComplexityHasSpecialLetter =
+            this.UtilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
+        this.MaxWordCountValidationKey = this.UtilityService.getResourceValue('MaxWordCountValidationKey');
+        this.ArabicLetterOnly = this.UtilityService.getResourceValue('ArabicIsRequiredAndOnly50CharactersEnglish');
+        this.EnglishLetterOnly =
+            this.UtilityService.getResourceValue('EnglishLetterOnly');
     }
     onTextChange() {
         if (this.options.Type == InputType.Number)
             if (!this.TextBoxFormControl.value) {
-                this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: "" });
+                this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: '' });
                 return;
             }
-        if (this.TextBoxFormControl.value == "") {
+        if (this.TextBoxFormControl.value == '') {
             this.WordCountArray = 0;
             this.WordCount = 0;
         }
         else {
-            this.WordCountArray = this.TextBoxFormControl.value.split(" ").length;
+            this.WordCountArray = this.TextBoxFormControl.value.split(' ').length;
             if (this.WordCountArray > 0) {
                 if (this.WordCountArray > this.options.MaxWordCount) {
                     this.WordCount = this.options.MaxWordCount;
-                    this.TextBoxFormControl.setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
+                    this.TextBoxFormControl.setErrors({
+                        MaxWordCountValidationKey: this.options.MaxWordCount,
+                    });
                     this.TextBoxFormControl.markAsTouched();
                     this.TextBoxFormControl.invalid;
                 }
@@ -5295,9 +5322,9 @@ class TextboxComponent {
                     this.showCharsLimitMsg = true;
                     this.hasCharsLimitValidationError = true;
                     if (this.currentCharsCount == this.options.MaxLength)
-                        this.charsLimitMsgClass = "danger";
+                        this.charsLimitMsgClass = 'danger';
                     else
-                        this.charsLimitMsgClass = "warning";
+                        this.charsLimitMsgClass = 'warning';
                 }
                 else {
                     this.showCharsLimitMsg = false;
@@ -5305,7 +5332,7 @@ class TextboxComponent {
                 }
                 var max = this.options.MaxLength;
                 var current = this.currentCharsCount;
-                var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
+                var resource = this.UtilityService.getResourceValue('MaxLengthLimitWarning');
                 this.maxLimitWarningMsg = eval('`' + resource + '`');
             }
         }
@@ -5315,10 +5342,11 @@ class TextboxComponent {
         this.IsShowWordCount = isFocus;
         //onFocus
         if (isFocus) {
-            if (this.hasCharsLimitValidationError) //check if there was previous validation error
+            if (this.hasCharsLimitValidationError)
+                //check if there was previous validation error
                 this.showCharsLimitMsg = true;
-        }
-        else //onFocusOut
+        } //onFocusOut
+        else
             this.showCharsLimitMsg = false;
     }
 }
@@ -5326,7 +5354,7 @@ TextboxComponent.controlContainerstatic = null;
 TextboxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-TextBox',
-                template: "<div class=\"form-group bbsf-control bbsf-textbox\" [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\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n             [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n             [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n             type=\"{{getInputType(options.Type)}}\" [(ngModel)]=\"options.Value\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"MaskPattern==null||MaskPattern==''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.Icon!=null\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}} \"\r\n      [dir]=\"textDir\"\r\n             (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n             maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n             [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n             (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n             #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\"\r\n         *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n      {{getErrorValidation(TextBoxFormControl.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: "<div class=\"form-group bbsf-control bbsf-textbox\" [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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--MaskPattern-->\r\n    <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''&&!options.IsReadonly\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}}\" [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n        [(ngModel)]=\"options.Value\" [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n        placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\" (change)=\"trimControlValue()\"\r\n        (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n        (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!--NoMaskPattern-->\r\n    <div *ngIf=\"MaskPattern==null||MaskPattern==''&&!options.IsReadonly\" class=\"bbsf-input-container\"\r\n      [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--Icon-->\r\n      <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.Icon!=null\">\r\n        <span [inlineSVG]=\"options.Icon\"></span>\r\n      </div>\r\n      <!--input-->\r\n      <input class=\"form-control {{options.ExtraClasses}} \" [dir]=\"textDir\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n        formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n        [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n        autocomplete=\"{{options.AutoComplete}}\" (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n        (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\" #userinput>\r\n      <!--CopyToClipboard-->\r\n      <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.EnableCopyToClipboard\"\r\n        (click)=\"copyInputMessage(userinput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </span>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.IsReadonly\">\r\n      <a *ngIf=\"options.Type==inputType.Email\" href=\"mailto: {{options.Value}}\">{{options.Value}}</a>\r\n      <a *ngIf=\"options.Type==inputType.URL\" href=\"{{options.Value}}\" target=\"_blank\">{{options.Value}}</a>\r\n      <span *ngIf=\"options.Type!=inputType.URL&&options.Type!=inputType.Email\" class=\"readonly-view\">{{options.Value}}</span>\r\n    </div>\r\n  </div>\r\n  <div class=\"subtext-container\">\r\n    <!--wordCount-->\r\n    <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}}\r\n      Words</div>\r\n    <!-- CharsLimitMsg-->\r\n    <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n      [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n      {{maxLimitWarningMsg}}\r\n    </div>\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\" [dir]=\"textDir\" *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n      {{getErrorValidation(TextBoxFormControl.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>"
             },] }
 ];
 TextboxComponent.ctorParameters = () => [
@@ -5646,7 +5674,7 @@ MapAutoCompleteComponent.controlContainerstatic = null;
 MapAutoCompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MapAutoComplete',
-                template: "\r\n<div class=\"form-group bbsf-control bbsf-maps\" [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\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control{{options.ExtraClasses}}\"\r\n             [value]=\"MapAutoCompleteModel.Text\"\r\n             [address]=\"MapAutoCompleteModel.Text\"\r\n             value=\"{{MapAutoCompleteModel.Text}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\"\r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n             matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n\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\"\r\n         *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.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-maps\" [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))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\"  *ngIf=\"!options.IsReadonly\">\r\n      <input class=\"form-control{{options.ExtraClasses}}\"\r\n             [value]=\"MapAutoCompleteModel.Text\"\r\n             [address]=\"MapAutoCompleteModel.Text\"\r\n             value=\"{{MapAutoCompleteModel.Text}}\"\r\n             aria-describedby=\"email-error\"\r\n             aria-invalid=\"true\"\r\n             [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n             matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n             (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n\r\n    </div>\r\n     <!-- readonly -->\r\n     <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{MapAutoCompleteModel.Text}}</span>\r\n     </div>\r\n  </div>\r\n  <div class=\"subtext-container\"  *ngIf=\"!options.IsReadonly\">\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\"\r\n         *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n      {{getErrorValidation(MapAutoCompleteFormControl.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"
             },] }
 ];
 MapAutoCompleteComponent.ctorParameters = () => [
@@ -5943,6 +5971,13 @@ FormComponent.propDecorators = {
     options: [{ type: Input }]
 };
 
+var StyleConfirmationMode;
+(function (StyleConfirmationMode) {
+    StyleConfirmationMode[StyleConfirmationMode["Danger"] = 0] = "Danger";
+    StyleConfirmationMode[StyleConfirmationMode["Warning"] = 1] = "Warning";
+    StyleConfirmationMode[StyleConfirmationMode["Success"] = 2] = "Success";
+})(StyleConfirmationMode || (StyleConfirmationMode = {}));
+
 class ConfirmationModalComponent {
     constructor(utilityService, modalService, router) {
         this.utilityService = utilityService;
@@ -6194,7 +6229,7 @@ class RepeaterComponent {
 RepeaterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-repeater',
-                template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n             let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n                          [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n          [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n    <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n  <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.AddButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n"
+                template: "<ng-container *ngFor='let item of items ; index as i'>\r\n  {{setCurrentIndex(i)}}\r\n  <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n  </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\"  >\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n             let-control=\"controlIndex\">\r\n  <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n                          [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n  </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n  <button *ngIf=\"!options.IsReadonly\" class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n          [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n    <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n<ng-template #add >\r\n  <button *ngIf=\"!options.IsReadonly\" class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n    <span [innerHTML]=\"options.AddButtonText\"></span>\r\n  </button>\r\n</ng-template>\r\n\r\n"
             },] }
 ];
 RepeaterComponent.ctorParameters = () => [];
@@ -6414,6 +6449,91 @@ RenderComponentService.ctorParameters = () => [
     { type: ComponentFactoryResolver }
 ];
 
+class ToggleslideComponent {
+    // tslint:disable-next-line: max-line-length
+    constructor(controlUtility, controlContainer, ToggleslideControlHost, TextControlHost, UtilityService, controlValidationService, globalSettings) {
+        this.controlUtility = controlUtility;
+        this.controlContainer = controlContainer;
+        this.ToggleslideControlHost = ToggleslideControlHost;
+        this.TextControlHost = TextControlHost;
+        this.UtilityService = UtilityService;
+        this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
+        this.OnChange = new EventEmitter();
+        this.SlideValue = false;
+        this.markAllAsTouched = false;
+        ToggleslideComponent.controlContainerstatic = this.controlContainer;
+    }
+    ngOnInit() {
+        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 = [];
+        let validationRulesasync = [];
+        this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
+        if (!this.options.ViewType)
+            this.options.ViewType = this.globalSettings.ViewType;
+        if (this.options.IsDisabled || this.options.IsReadonly) {
+            this.ToggleslideFormControl.disable();
+        }
+        if (this.options.LabelKey != null && this.options.LabelKey != "")
+            this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
+    }
+    ngAfterViewInit() {
+        if (this.options.AttributeList != null) {
+            var element = document.getElementById(this.options.Name);
+            for (let index = 0; index < this.options.AttributeList.length; index++) {
+                element.setAttribute(this.options.AttributeList[index].Key, this.options.AttributeList[index].value);
+            }
+        }
+    }
+    resetError() {
+        this.controlValidationService.RemoveGlobalError();
+    }
+    showGlobalError() {
+        this.controlUtility.showGlobalError();
+    }
+    getErrorValidation(ErrorList) {
+        if (this.markAllAsTouched && this.group.invalid) {
+            this.showGlobalError();
+            this.markAllAsTouched = false;
+        }
+        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
+    }
+    changeValueToggle() {
+        this.OnChange.emit(this.SlideValue);
+        this.options.Value = this.SlideValue;
+        this.ToggleslideFormControl.setValue(this.SlideValue);
+        if (this.options.PatchFunction && this.options.PatchPath && this.ToggleslideFormControl.valid) {
+            this.controlUtility.patchControlValue(this.SlideValue, this.options.PatchFunction, this.options.PatchPath);
+        }
+    }
+}
+ToggleslideComponent.controlContainerstatic = null;
+ToggleslideComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'BBSF-Toggleslide',
+                template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n      {{options.LabelValue}}\r\n    </label>\r\n    <div *ngIf=\"!options.IsReadonly\"class=\"bbsf-input-container\">\r\n      <!--input-->\r\n      <mat-slide-toggle [(ngModel)]=\"SlideValue\" [dir]=\"textDir\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n                        formControlName=\"{{options.Name}}\" disableRipple=\"true\" [disabled]=\"options.IsDisabled\" (change)=\"changeValueToggle()\">\r\n      </mat-slide-toggle>\r\n    </div>\r\n      <!-- readonly -->\r\n      <div *ngIf=\"options.IsReadonly\">\r\n        <span class=\"readonly-view\" *ngIf=\"options.Value\">{{UtilityService.getResourceValue(\"Yes\")}}</span>\r\n        <span class=\"readonly-view\" *ngIf=\"!options.Value\">{{UtilityService.getResourceValue(\"No\")}}</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  </div>\r\n</div>\r\n"
+            },] }
+];
+ToggleslideComponent.ctorParameters = () => [
+    { type: ControlUtility },
+    { type: ControlContainer, decorators: [{ type: Optional }] },
+    { type: FormGroupDirective },
+    { type: FormGroupDirective },
+    { type: UtilityService },
+    { type: ControlValidationService },
+    { type: GlobalSettings }
+];
+ToggleslideComponent.propDecorators = {
+    group: [{ type: Input }],
+    options: [{ type: Input }],
+    OnChange: [{ type: Output }]
+};
+
 class RepeaterFieldBuilderComponent {
     constructor(renderComponentService, TextControlHost) {
         this.renderComponentService = renderComponentService;
@@ -7256,50 +7376,215 @@ RepeaterTableComponent.propDecorators = {
     options: [{ type: Input }]
 };
 
-class BBSFDateTimePipe {
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-    }
-    transform(value) {
-        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
-        return latest_date;
-    }
-}
-BBSFDateTimePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'bbsfDateTime'
-            },] }
-];
-BBSFDateTimePipe.ctorParameters = () => [
-    { type: DatePipe }
-];
-
-class BBSFDatePipe {
-    constructor(datePipe) {
-        this.datePipe = datePipe;
-    }
-    transform(value) {
-        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
-        return latest_date;
+class RecaptchaModel {
+    constructor() {
+        this.ImageJpeg = [];
     }
-}
-BBSFDatePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'bbsfDate'
-            },] }
-];
-BBSFDatePipe.ctorParameters = () => [
-    { type: DatePipe }
-];
+}
 
-var TagInputView;
-(function (TagInputView) {
-    TagInputView[TagInputView["WithImage"] = 1] = "WithImage";
-    TagInputView[TagInputView["WithoutImage"] = 2] = "WithoutImage";
-    TagInputView[TagInputView["WithInitial"] = 3] = "WithInitial";
-})(TagInputView || (TagInputView = {}));
+class CaptchaStyle {
+}
 
-const noop = () => { };
+class RecaptchaComponent {
+    constructor(controlUtility, requestHandlerService, recaptchaControlHost, UtilityService, controlValidationService, globalSettings) {
+        this.controlUtility = controlUtility;
+        this.requestHandlerService = requestHandlerService;
+        this.recaptchaControlHost = recaptchaControlHost;
+        this.UtilityService = UtilityService;
+        this.controlValidationService = controlValidationService;
+        this.globalSettings = globalSettings;
+        this.OnChange = new EventEmitter();
+        this.validationRules = [];
+        this.validationRulesAsync = [];
+        this.recaptchaModel = new RecaptchaModel();
+        this.resetError = () => {
+            this.controlValidationService.RemoveGlobalError();
+        };
+        //External Method
+        this.RemoveRequiredValidation = () => {
+            this.controlUtility.RemoveRequiredValidation(this.ReCaptchaFormControl, this.validationRules, this.options);
+        };
+        //External Method
+        this.AddRequiredValidation = () => {
+            this.controlUtility.AddRequiredValidation(this.ReCaptchaFormControl, this.validationRules, this.options);
+        };
+        //External Method
+        this.RemoveCustomValidation = (CustomValidation) => {
+            this.controlUtility.RemoveCustomValidation(this.ReCaptchaFormControl, this.validationRules, CustomValidation);
+        };
+        //External Method
+        this.AddCustomValidation = (CustomValidation) => {
+            this.controlUtility.AddCustomValidation(this.ReCaptchaFormControl, this.validationRules, CustomValidation);
+        };
+        //External Method
+        this.IsValid = () => {
+            this.controlUtility.IsValid(this.ReCaptchaFormControl);
+        };
+    }
+    ngOnInit() {
+        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)
+            this.options.ViewType = this.globalSettings.ViewType;
+        this.group.addControl(this.options.Name, new FormControl(''));
+        this.ReCaptchaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
+        if (this.options.LabelKey != null && this.options.LabelKey != "")
+            this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
+        if (this.options.IsRequired) {
+            this.validationRules.push(Validators.required);
+        }
+        if (this.options.CustomValidation.length > 0) {
+            let Validations = this.options.CustomValidation;
+            for (let index = 0; index < Validations.length; index++) {
+                const Validation = Validations[index];
+                this.validationRules.push(Validation.functionBody);
+            }
+        }
+        this.ReCaptchaFormControl.setValidators(this.validationRules);
+        this.ReCaptchaFormControl.setAsyncValidators(this.validationRulesAsync);
+        if (this.options.IsDisabled) {
+            this.ReCaptchaFormControl.disable();
+        }
+        this.recaptchaControlHost.ngSubmit.subscribe((value) => {
+            this.group.markAllAsTouched();
+            this.markAllAsTouched = true;
+        });
+    }
+    loadImage() {
+        let style = new CaptchaStyle();
+        style.BackgroundColorPrimary = this.options.BackgroundColorPrimary;
+        style.BackgroundColorSecondary = this.options.BackgroundColorSecondary;
+        style.TextColorPrimary = this.options.TextColorPrimary;
+        style.TextColorSecondary = this.options.TextColorSecondary;
+        style.FontSize = this.options.FontSize;
+        let requestOptionsModel = new RequestOptionsModel();
+        requestOptionsModel.disableBlockUI = true;
+        requestOptionsModel.disableSuccessNotification = true;
+        this.requestHandlerService.post(this.options.ActionURL, style, null, null, requestOptionsModel).subscribe((res) => {
+            let model = res;
+            this.recaptchaModel.ID = model.id;
+            this.recaptchaModel.EncryptedText = model.encryptedText;
+            this.recaptchaModel.ImageJpeg = model.imageJpeg;
+            this.image = 'data:image/jpeg;base64,' + this.recaptchaModel.ImageJpeg;
+        });
+    }
+    ngAfterViewInit() {
+        this.controlUtility.setAttributeForControl(this.options);
+    }
+    showGlobalError() {
+        this.controlUtility.showGlobalError();
+    }
+    getErrorValidation(ErrorList) {
+        if (this.markAllAsTouched && this.group.invalid) {
+            this.showGlobalError();
+            this.markAllAsTouched = false;
+        }
+        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
+    }
+    onTextChange(valueText) {
+        let value = valueText.target.value;
+        this.recaptchaModel.Text = value;
+        this.group.get(this.options.Name).setValue(this.recaptchaModel);
+        this.options.Value = this.recaptchaModel;
+        this.OnChange.emit(this.ReCaptchaFormControl.value);
+    }
+}
+RecaptchaComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'BBSF-Recaptcha',
+                template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\"\r\n          (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n      [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\"\r\n             [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"onTextChange($event)\" [readonly]=\"options.IsReadonly\" />\r\n\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\"\r\n    [dir]=\"textDir\"\r\n         *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(ReCaptchaFormControl.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"
+            },] }
+];
+RecaptchaComponent.ctorParameters = () => [
+    { type: ControlUtility },
+    { type: RequestHandlerService },
+    { type: FormGroupDirective },
+    { type: UtilityService },
+    { type: ControlValidationService },
+    { type: GlobalSettings }
+];
+RecaptchaComponent.propDecorators = {
+    group: [{ type: Input }],
+    options: [{ type: Input }],
+    OnChange: [{ type: Output }]
+};
+
+class PageHeaderComponentComponent {
+    constructor(router, utilityService) {
+        this.router = router;
+        this.utilityService = utilityService;
+        this.DataTypeEnum = DataType;
+    }
+    translate(key) {
+        return this.utilityService.getResourceValue(key);
+    }
+    ngOnInit() {
+        this.EN = this.utilityService.isCurrentLanguageEnglish();
+    }
+}
+PageHeaderComponentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'bbsf-page-header-component',
+                template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\"/>\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.Listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.TitleKey||options.TitleValue\">{{options.TitleValue == null ? translate(options.TitleKey) : options.TitleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.Listing\">\r\n          {{translate(options.SubTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.BreadCrumb.Active\">\r\n            <ng-container *ngFor=\"let item of options.BreadCrumb.BreadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.DropDownActions.Active\">\r\n            <button  [routerLink]=\"item.RouterLink\" (click)='item.Function?item.Function():\"\"' class=\"btn btn-light btn-sm subheader-btn export-btn\" *ngFor=\"let item of options.DropDownActions.DropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.SVG\"></span>\r\n              {{item.Text}}\r\n            </button>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.SearchTextBox.Active\" [options]=\"options.SearchTextBox.TextSearchBoxOptions\"\r\n                    [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.GridView.Active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.GridView.ShowGridViewByDefault? 'list-grid-item-active' : ''\"\r\n               (click)=\"options.GridView.ToggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.GridView.ShowGridViewByDefault? 'list-grid-item-active' : ''\"\r\n               (click)=\"options.GridView.ToggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.ExportButton.Active\" (click)=\"options.ExportButton.Function()\"\r\n                class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.ExportButton.ButtonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.FiltersButton.Active\" ngbDropdown container=\"body\" [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" \r\n             #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.FiltersButton.Function()\" ngbDropdownToggle\r\n                  class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.FiltersButton.ButtonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.Filters.ShowLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.Filters.ControlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\"\r\n                        (click)=\"options.Filters.RestFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\"\r\n                        (click)=\"options.Filters.ApplyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.AddButton.Active\" (click)=\"options.AddButton.Function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.AddButton.ButtonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.EditButton.Active\" (click)=\"options.EditButton.Function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.EditButton.ButtonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.DeleteButton.Active\" (click)=\"options.DeleteButton.Function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.DeleteButton.ButtonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n\r\n  <!--End toolbar-->\r\n"
+            },] }
+];
+PageHeaderComponentComponent.ctorParameters = () => [
+    { type: Router },
+    { type: UtilityService }
+];
+PageHeaderComponentComponent.propDecorators = {
+    group: [{ type: Input }],
+    options: [{ type: Input }]
+};
+
+class BBSFDateTimePipe {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+    }
+    transform(value) {
+        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy hh:mm a');
+        return latest_date;
+    }
+}
+BBSFDateTimePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'bbsfDateTime'
+            },] }
+];
+BBSFDateTimePipe.ctorParameters = () => [
+    { type: DatePipe }
+];
+
+class BBSFDatePipe {
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+    }
+    transform(value) {
+        let latest_date = this.datePipe.transform(value, 'dd/MM/yyyy');
+        return latest_date;
+    }
+}
+BBSFDatePipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'bbsfDate'
+            },] }
+];
+BBSFDatePipe.ctorParameters = () => [
+    { type: DatePipe }
+];
+
+var TagInputView;
+(function (TagInputView) {
+    TagInputView[TagInputView["WithImage"] = 1] = "WithImage";
+    TagInputView[TagInputView["WithoutImage"] = 2] = "WithoutImage";
+    TagInputView[TagInputView["WithInitial"] = 3] = "WithInitial";
+})(TagInputView || (TagInputView = {}));
+
+const noop = () => { };
 const ɵ0$1 = noop;
 const TAGS_INPUT_TEMPLATE = `
 
@@ -7618,171 +7903,6 @@ BTagsInputComponent.propDecorators = {
     onBlurInput: [{ type: Output }]
 };
 
-class RecaptchaModel {
-    constructor() {
-        this.ImageJpeg = [];
-    }
-}
-
-class CaptchaStyle {
-}
-
-class RecaptchaComponent {
-    constructor(controlUtility, requestHandlerService, recaptchaControlHost, UtilityService, controlValidationService, globalSettings) {
-        this.controlUtility = controlUtility;
-        this.requestHandlerService = requestHandlerService;
-        this.recaptchaControlHost = recaptchaControlHost;
-        this.UtilityService = UtilityService;
-        this.controlValidationService = controlValidationService;
-        this.globalSettings = globalSettings;
-        this.OnChange = new EventEmitter();
-        this.validationRules = [];
-        this.validationRulesAsync = [];
-        this.recaptchaModel = new RecaptchaModel();
-        this.resetError = () => {
-            this.controlValidationService.RemoveGlobalError();
-        };
-        //External Method
-        this.RemoveRequiredValidation = () => {
-            this.controlUtility.RemoveRequiredValidation(this.ReCaptchaFormControl, this.validationRules, this.options);
-        };
-        //External Method
-        this.AddRequiredValidation = () => {
-            this.controlUtility.AddRequiredValidation(this.ReCaptchaFormControl, this.validationRules, this.options);
-        };
-        //External Method
-        this.RemoveCustomValidation = (CustomValidation) => {
-            this.controlUtility.RemoveCustomValidation(this.ReCaptchaFormControl, this.validationRules, CustomValidation);
-        };
-        //External Method
-        this.AddCustomValidation = (CustomValidation) => {
-            this.controlUtility.AddCustomValidation(this.ReCaptchaFormControl, this.validationRules, CustomValidation);
-        };
-        //External Method
-        this.IsValid = () => {
-            this.controlUtility.IsValid(this.ReCaptchaFormControl);
-        };
-    }
-    ngOnInit() {
-        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)
-            this.options.ViewType = this.globalSettings.ViewType;
-        this.group.addControl(this.options.Name, new FormControl(''));
-        this.ReCaptchaFormControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
-        if (this.options.LabelKey != null && this.options.LabelKey != "")
-            this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
-        if (this.options.IsRequired) {
-            this.validationRules.push(Validators.required);
-        }
-        if (this.options.CustomValidation.length > 0) {
-            let Validations = this.options.CustomValidation;
-            for (let index = 0; index < Validations.length; index++) {
-                const Validation = Validations[index];
-                this.validationRules.push(Validation.functionBody);
-            }
-        }
-        this.ReCaptchaFormControl.setValidators(this.validationRules);
-        this.ReCaptchaFormControl.setAsyncValidators(this.validationRulesAsync);
-        if (this.options.IsDisabled) {
-            this.ReCaptchaFormControl.disable();
-        }
-        this.recaptchaControlHost.ngSubmit.subscribe((value) => {
-            this.group.markAllAsTouched();
-            this.markAllAsTouched = true;
-        });
-    }
-    loadImage() {
-        let style = new CaptchaStyle();
-        style.BackgroundColorPrimary = this.options.BackgroundColorPrimary;
-        style.BackgroundColorSecondary = this.options.BackgroundColorSecondary;
-        style.TextColorPrimary = this.options.TextColorPrimary;
-        style.TextColorSecondary = this.options.TextColorSecondary;
-        style.FontSize = this.options.FontSize;
-        let requestOptionsModel = new RequestOptionsModel();
-        requestOptionsModel.disableBlockUI = true;
-        requestOptionsModel.disableSuccessNotification = true;
-        this.requestHandlerService.post(this.options.ActionURL, style, null, null, requestOptionsModel).subscribe((res) => {
-            let model = res;
-            this.recaptchaModel.ID = model.id;
-            this.recaptchaModel.EncryptedText = model.encryptedText;
-            this.recaptchaModel.ImageJpeg = model.imageJpeg;
-            this.image = 'data:image/jpeg;base64,' + this.recaptchaModel.ImageJpeg;
-        });
-    }
-    ngAfterViewInit() {
-        this.controlUtility.setAttributeForControl(this.options);
-    }
-    showGlobalError() {
-        this.controlUtility.showGlobalError();
-    }
-    getErrorValidation(ErrorList) {
-        if (this.markAllAsTouched && this.group.invalid) {
-            this.showGlobalError();
-            this.markAllAsTouched = false;
-        }
-        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
-    }
-    onTextChange(valueText) {
-        let value = valueText.target.value;
-        this.recaptchaModel.Text = value;
-        this.group.get(this.options.Name).setValue(this.recaptchaModel);
-        this.options.Value = this.recaptchaModel;
-        this.OnChange.emit(this.ReCaptchaFormControl.value);
-    }
-}
-RecaptchaComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'BBSF-Recaptcha',
-                template: "<div class=\"form-group bbsf-control bbsf-recaptcha\" [formGroup]=\"group\">\r\n  <img class=\"h-100 w-100\" [src]=\"image\" />\r\n  <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\"\r\n          (click)=\"loadImage()\">\r\n    <i class=\"fas fa-refresh\"></i>\r\n  </button>\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\">*</span>\r\n    </label>\r\n    <!--input-->\r\n    <div class=\"bbsf-input-container\">\r\n      <input class=\"form-control {{options.ExtraClasses}}\"\r\n      [dir]=\"textDir\"\r\n             aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n             aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\"\r\n             [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n             placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n             (change)=\"onTextChange($event)\" [readonly]=\"options.IsReadonly\" />\r\n\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\"\r\n    [dir]=\"textDir\"\r\n         *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n      {{getErrorValidation(ReCaptchaFormControl.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"
-            },] }
-];
-RecaptchaComponent.ctorParameters = () => [
-    { type: ControlUtility },
-    { type: RequestHandlerService },
-    { type: FormGroupDirective },
-    { type: UtilityService },
-    { type: ControlValidationService },
-    { type: GlobalSettings }
-];
-RecaptchaComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }],
-    OnChange: [{ type: Output }]
-};
-
-class PageHeaderComponentComponent {
-    constructor(router, utilityService) {
-        this.router = router;
-        this.utilityService = utilityService;
-        this.DataTypeEnum = DataType;
-    }
-    translate(key) {
-        return this.utilityService.getResourceValue(key);
-    }
-    ngOnInit() {
-        this.EN = this.utilityService.isCurrentLanguageEnglish();
-    }
-}
-PageHeaderComponentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'bbsf-page-header-component',
-                template: "<!--toolbar-->\r\n<div class=\"toolbar\" style=\"overflow:hidden;position:relative;\">\r\n  <img class=\"pattern\" src=\"./src/assets/images/Bg-pattern.png\"/>\r\n  <div class=\"container-xxl\">\r\n    <div class=\"d-flex justify-content-between align-items-center\">\r\n      <div class=\"page-title w-100\" [ngClass]=\"!options.Listing? 'mb-0' : ''\">\r\n        <h3 *ngIf=\"options.TitleKey||options.TitleValue\">{{options.TitleValue == null ? translate(options.TitleKey) : options.TitleValue }}</h3>\r\n        <p class=\"sub-title\" *ngIf=\"options.Listing\">\r\n          {{translate(options.SubTitleKey)}}\r\n        </p>\r\n        <div class=\"d-flex justify-content-between align-items-end\">\r\n          <ul class=\"breadcrumb breadcrumb-dot\" *ngIf=\"options.BreadCrumb.Active\">\r\n            <ng-container *ngFor=\"let item of options.BreadCrumb.BreadCrumbItems\">\r\n              <li class=\"breadcrumb-item\" *ngIf=\"!item.active\">\r\n                <a *ngIf=\"item.route\" [routerLink]=\"item.route\">{{ item.label }}</a>\r\n                <a *ngIf=\"!item.route\" href=\"javascript: void(0);\">{{ item.label }}</a>\r\n              </li>\r\n              <li class=\"breadcrumb-item active\" *ngIf=\"item.active\">\r\n                <span>{{ item.label }}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n          <div class=\"page-subheader\" *ngIf=\"options.DropDownActions.Active\">\r\n            <button  [routerLink]=\"item.RouterLink\" (click)='item.Function?item.Function():\"\"' class=\"btn btn-light btn-sm subheader-btn export-btn\" *ngFor=\"let item of options.DropDownActions.DropdownActionItems\">\r\n              <span class=\"svg-icon svg-icon-3\" [inlineSVG]=\"item.SVG\"></span>\r\n              {{item.Text}}\r\n            </button>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"page-subheader\">\r\n      <BBSF-TextBox *ngIf=\"options.SearchTextBox.Active\" [options]=\"options.SearchTextBox.TextSearchBoxOptions\"\r\n                    [group]=\"group\">\r\n      </BBSF-TextBox>\r\n      <div class=\"d-flex align-items-center\">\r\n        <div class=\"subheader-btn list-grid\" *ngIf=\"options.GridView.Active\">\r\n          <div class=\"list-grid-item\" [ngClass]=\"options.GridView.ShowGridViewByDefault? 'list-grid-item-active' : ''\"\r\n               (click)=\"options.GridView.ToggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Listing.svg'\">\r\n            </span>\r\n          </div>\r\n          <div class=\"list-grid-item\" [ngClass]=\"!options.GridView.ShowGridViewByDefault? 'list-grid-item-active' : ''\"\r\n               (click)=\"options.GridView.ToggleFunction()\">\r\n            <span class=\"svg-icon svg-icon-4\" [inlineSVG]=\"'/assets/images/Grid.svg'\">\r\n            </span>\r\n          </div>\r\n        </div>\r\n        <button type=\"button\" *ngIf=\"options.ExportButton.Active\" (click)=\"options.ExportButton.Function()\"\r\n                class=\"btn btn-light btn-sm subheader-btn export-btn\">\r\n          <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/export.svg'\"></span>\r\n          {{translate(options.ExportButton.ButtonTextKey)}}\r\n        </button>\r\n\r\n\r\n        <div *ngIf=\"options.FiltersButton.Active\" ngbDropdown container=\"body\" [placement]=\"EN ? 'bottom-right' : 'bottom-left'\" \r\n             #dropdown=\"ngbDropdown\" class=\"subheader-btn\">\r\n          <button href=\"javascript:;\" (click)=\"options.FiltersButton.Function()\" ngbDropdownToggle\r\n                  class=\"btn btn-light btn-sm filters-btn\">\r\n            <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"'/assets/images/arrowdropdown.svg'\"></span>\r\n            {{translate(options.FiltersButton.ButtonTextKey)}}\r\n          </button>\r\n          <div ngbDropdownMenu class=\"dropdown-menu-custom filters-dropdown\">\r\n\r\n            <div [hidden]=\"options.Filters.ShowLoadingInFiltersBox\">\r\n              <div class=\"filter-select\">\r\n                <span *ngFor=\"let control of options.Filters.ControlsOptions\">\r\n                  <span [ngSwitch]=\"control.key\">\r\n                    <span *ngSwitchCase=\"DataTypeEnum.SingleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.MulipleSelect\">\r\n                      <BBSF-DropdownList [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DropdownList>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Date\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.DateTime\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Time\">\r\n                      <BBSF-DateTimePicker [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-DateTimePicker>\r\n                    </span>\r\n                    <span *ngSwitchCase=\"DataTypeEnum.Boolean\">\r\n                      <BBSF-Toggleslide [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-Toggleslide>\r\n                    </span>\r\n                    <span *ngSwitchDefault>\r\n                      <BBSF-TagsInput [options]=\"control.value\" [group]=\"group\">\r\n                      </BBSF-TagsInput>\r\n                    </span>\r\n                  </span>\r\n                </span>\r\n              </div>\r\n              <div class=\"dropdown-menu-buttons\">\r\n                <button class=\"btn btn-sm btn-light\"\r\n                        (click)=\"options.Filters.RestFunction(dropdown)\">\r\n                  {{translate(\"Reset\")}}\r\n                </button>\r\n                <button class=\"btn btn-brand btn-sm\"\r\n                        (click)=\"options.Filters.ApplyFunction(dropdown)\">\r\n                  {{translate(\"Apply\")}}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.AddButton.Active\" (click)=\"options.AddButton.Function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.AddButton.ButtonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.EditButton.Active\" (click)=\"options.EditButton.Function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.EditButton.ButtonTextKey)}}\r\n        </button>\r\n        <button appPreventDoubleClick type=\"button\" *ngIf=\"options.DeleteButton.Active\" (click)=\"options.DeleteButton.Function()\" class=\"btn btn-brand btn-sm subheader-btn\">\r\n          {{translate(options.DeleteButton.ButtonTextKey)}}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n\r\n  <!--End toolbar-->\r\n"
-            },] }
-];
-PageHeaderComponentComponent.ctorParameters = () => [
-    { type: Router },
-    { type: UtilityService }
-];
-PageHeaderComponentComponent.propDecorators = {
-    group: [{ type: Input }],
-    options: [{ type: Input }]
-};
-
 let options;
 let AppInjector;
 const ɵ0 = ControlUtility.getLocal();
@@ -7875,10 +7995,7 @@ BBSFControlsModule.decorators = [
                     OverlayModule,
                     StoreDevtoolsModule.instrument(),
                     FormsModule,
-                    NgxIntlTelInputModule,
-                    NgxIntlTelInputModule,
                     BsDatepickerModule.forRoot(),
-                    FullCalendarModule,
                     TypeaheadModule.forRoot(),
                     AngularEditorModule,
                     AutocompleteLibModule,
@@ -8195,6 +8312,8 @@ class MultilingualControlOptionsBase {
         this.LanguageMode = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
         this.CustomValidation = [];
+        /** Sets an attribute readonly  */
+        this.IsReadonly = false;
     }
 }
 
@@ -8447,13 +8566,6 @@ class FormOptions {
     }
 }
 
-var StyleConfirmationMode;
-(function (StyleConfirmationMode) {
-    StyleConfirmationMode[StyleConfirmationMode["Danger"] = 0] = "Danger";
-    StyleConfirmationMode[StyleConfirmationMode["Warning"] = 1] = "Warning";
-    StyleConfirmationMode[StyleConfirmationMode["Success"] = 2] = "Success";
-})(StyleConfirmationMode || (StyleConfirmationMode = {}));
-
 class ConfirmationModalOptions {
     constructor() {
         //Represents confirmation modal title
@@ -8503,6 +8615,7 @@ class RepeaterOptions {
         this.RepeaterStructure = [];
         this.DisableAddButton = false;
         this.DisableDeleteButton = false;
+        this.IsReadonly = false;
     }
 }