npm - @bnsights/bbsf-controls - Versions diffs - 1.0.41 → 1.0.44 - Mend

@bnsights/bbsf-controls 1.0.41 → 1.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/fesm2015/bnsights-bbsf-controls.js CHANGED Viewed

@@ -564,7 +564,7 @@ DateInputComponent.controlContainerstatic = null;
 DateInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-DateTimePicker',
-                template: "<div class=\"b-control b-date-picker\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n            [hidden]=\"options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n        </label>\r\n\r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n                <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n                    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                    class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n                    [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                    formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n                    [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n                    [min]=\"options.StartDate\" [max]=\"options.EndDate\" [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]=\"getStartView(options.StartView)\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                    [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n                    \r\n                <div class=\"input-group-append\">\r\n                    <span class=\"input-group-text\" [owlDateTimeTrigger]=\"dt1\">\r\n                      <span class=\"svg-icon\">\r\n                        <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n                          <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n                          <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n                          <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\"  fill=\"#d5d5d5\"></path>\r\n                          <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n                        </svg>\r\n                      </span>\r\n                    </span>\r\n                    <!--<span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\"\r\n                        (click)=\"copyInputMessage(Dateinput)\">\r\n                        <i class=\"fas fa-copy\"></i>\r\n                    </span>-->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"text-danger Required-text\"\r\n                *ngIf=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n                {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n            </div>\r\n\r\n                <div class=\"control-desc\"*ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n          \r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-date-picker\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n            [hidden]=\"options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n        </label>\r\n\r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group\">\r\n                <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n                    dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n                    class=\"form-control bnsights-control  {{options.ExtraClasses}} \"\r\n                    [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n                    formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\" [owlDateTimeTrigger]=\"dt1\"\r\n                    [class.is-invalid]=\"DatePickerFormControl.invalid && DatePickerFormControl.touched\"\r\n                    [min]=\"options.StartDate\" [max]=\"options.EndDate\" [hour12Timer]=\"options.Hour12Timer\" [selectMode]=\"getSelectMode(options.SelectMode)\"\r\n                    placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" #Dateinput>\r\n\r\n                <owl-date-time [pickerType]=\"getPickerType(options.PickerType)\"\r\n                    [startView]=\"getStartView(options.StartView)\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n                    [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n                    \r\n                <div class=\"input-group-append\">\r\n                    <span class=\"input-group-text\" [owlDateTimeTrigger]=\"dt1\">\r\n                      <span class=\"svg-icon\">\r\n                        <svg id=\"Group_356\" data-name=\"Group 356\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 48 48\">\r\n                          <path id=\"Path_6737\" data-name=\"Path 6737\" d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n                          <path id=\"Path_6738\" data-name=\"Path 6738\" d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n                          <path id=\"Path_6739\" data-name=\"Path 6739\" d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\"  fill=\"#d5d5d5\"></path>\r\n                          <path id=\"Path_6740\" data-name=\"Path 6740\" d=\"M43.929,5.7H38.417v5.512a1,1,0,1,1-2,0V5.7H11.583v5.512a1,1,0,1,1-2,0V5.7H4.07C1.826,5.7,0,7.877,0,10.555v4.566H48V10.555C48,7.877,46.174,5.7,43.929,5.7Z\" fill=\"#595959\"></path>\r\n                        </svg>\r\n                      </span>\r\n                    </span>\r\n                    <!--<span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\"\r\n                        (click)=\"copyInputMessage(Dateinput)\">\r\n                        <i class=\"fas fa-copy\"></i>\r\n                    </span>-->\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"text-danger Required-text\"\r\n                *ngIf=\"(DatePickerFormControl.invalid && DatePickerFormControl.touched)\">\r\n                {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n            </div>\r\n\r\n                <div class=\"control-desc\"*ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n          \r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -655,6 +655,7 @@ class FileUploadComponent {
         this.markAllAsTouched = false;
         this.validationRules = [];
         this.validationRulesasync = [];
+        this.deletedFiles = [];
         this.resetError = () => {
             this.controlValidationService.RemoveGlobalError();
         };
@@ -700,33 +701,43 @@ class FileUploadComponent {
         else {
             if (this.options.IsMultipleFile == true) {
                 let files = [];
-                this.multipleFileUploadModel = this.options.Value;
+                this.multipleFileUploadModel.ExistingFiles = this.options.Value.ExistingFiles;
+                this.multipleFileUploadModel.UploadedFiles = [];
                 for (let index = 0; index < this.options.Value.ExistingFiles.length; index++) {
                     const element = this.options.Value.ExistingFiles[index];
-                    // this.FileLikeObject = new FileLikeObject({
-                    //   name: element.FileName,
-                    //   size: element.FileSizeInMB * 1000 * 1000,
-                    //   type: element.FileType,
-                    //   rawFile: element.FileBase64,
-                    // })
-                    let blob;
-                    blob = new Blob(['']);
-                    blob.name = element.FileName;
-                    blob.lastModifiedDate = null;
-                    blob.webkitRelativePath = '';
-                    files.push(blob);
+                    var bytes = new Uint8Array(element.Bytes);
+                    var base64 = btoa(String.fromCharCode(null, bytes));
+                    this.FileLikeObject = new FileLikeObject({
+                        name: element.NameWithExtension,
+                        type: element.MimeType,
+                        rawFile: base64,
+                    });
+                    // let blob: any;
+                    // blob = new Blob(['']) as any;
+                    // blob.name = element.FileName;
+                    // blob.lastModifiedDate = null;
+                    // blob.webkitRelativePath = '';
+                    let file = this.FileLikeObject;
+                    file.url = element.FileURL;
+                    files.push(file);
                 }
                 this.uploader.addToQueue(files);
+                console.log(this.uploader.queue);
             }
             else {
-                const element = this.options.Value.File;
+                const element = this.options.Value;
+                var bytes = new Uint8Array(element.Bytes);
+                var base64 = btoa(String.fromCharCode(null, bytes));
                 this.FileLikeObject = new FileLikeObject({
-                    name: element.FileName,
-                    size: element.FileSizeInMB * 1000 * 1000,
-                    type: element.FileType,
-                    rawFile: element.FileBase64,
+                    name: element.NameWithExtension,
+                    type: element.MimeType,
+                    rawFile: base64,
                 });
-                this.uploader.addToQueue([this.FileLikeObject]);
+                this.file = element;
+                let file = this.FileLikeObject;
+                file.url = element.FileURL;
+                this.uploader.addToQueue([file]);
+                console.log(this.uploader.queue);
             }
         }
         if (this.options.LabelKey != null && this.options.LabelKey != "")
@@ -853,12 +864,16 @@ class FileUploadComponent {
                 let fileObject = file.rawFile;
                 reader.readAsDataURL(fileObject);
                 reader.onload = () => {
+                    let existingID_GUID = null;
+                    if (!this.options.IsMultipleFile && this.file)
+                        existingID_GUID = this.file.NameWithExtension == file.name ? this.file.ID_GUID : null;
                     let AddedFile = {
                         FileName: file.name,
                         FileType: file.type,
                         FileBase64: reader.result.toString().split(',')[1],
                         FileSizeInMB: ((file.size / 1000) / 1000),
-                        NameWithExtension: file.name
+                        NameWithExtension: file.name,
+                        ID_GUID: existingID_GUID
                     };
                     if (this.options.IsMultipleFile == false) {
                         this.fileUploadModel = new FileUploadModel();
@@ -898,33 +913,35 @@ class FileUploadComponent {
         else {
             if (this.options.Value != null && this.options.Value != undefined) {
                 if (this.options.Value.CorrelationID_GUID == null) {
+                    this.deletedFiles = [];
                     this.multipleFileUploadModel.RemovedFiles = [];
                 }
                 else {
                     if (this.multipleFileUploadModel.RemovedFiles.length == 0) {
                         let FileObject = item.file.rawFile;
-                        let DeletedItemId = this.options.Value.ExistingFiles.filter(Object => Object.FileName == FileObject.name)[0];
-                        this.options.Value.ExistingFiles = this.options.Value.ExistingFiles.filter(Object => Object.FileName != FileObject.name);
-                        this.multipleFileUploadModel.RemovedFiles.push(DeletedItemId);
+                        let DeletedItem = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension == FileObject.name)[0];
+                        this.multipleFileUploadModel.ExistingFiles = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension != FileObject.name);
+                        this.deletedFiles.push(DeletedItem);
+                        this.multipleFileUploadModel.RemovedFiles.push(DeletedItem.ID_GUID);
                     }
                     else {
                         let FileObject = item.file.rawFile;
-                        let deletedList = this.multipleFileUploadModel.RemovedFiles.filter(Object => Object.FileName == FileObject.name);
+                        let deletedList = this.deletedFiles.filter(Object => Object.NameWithExtension == FileObject.name);
                         if (deletedList.length == 0 || deletedList == undefined) {
-                            let DeletedItemId = this.options.Value.ExistingFiles.filter(Object => Object.FileName == FileObject.name)[0];
-                            this.options.Value.ExistingFiles = this.options.Value.ExistingFiles.filter(Object => Object.FileName != FileObject.name);
-                            this.multipleFileUploadModel.RemovedFiles.push(DeletedItemId);
+                            let DeletedItem = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension == FileObject.name)[0];
+                            this.multipleFileUploadModel.ExistingFiles = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension != FileObject.name);
+                            this.deletedFiles.push(DeletedItem);
+                            this.multipleFileUploadModel.RemovedFiles.push(DeletedItem.ID_GUID);
                         }
                     }
                 }
             }
             else {
+                this.deletedFiles = [];
                 this.multipleFileUploadModel.RemovedFiles = [];
             }
-            let ItemList = this.group.get(this.options.Name).value.UploadedFiles;
-            ItemList = ItemList.filter(Object => Object.FileName != item._file.name);
-            this.multipleFileUploadModel.UploadedFiles = ItemList;
-            if ((ItemList == null || ItemList == []) && this.options.IsRequired) {
+            this.multipleFileUploadModel.UploadedFiles = this.multipleFileUploadModel.UploadedFiles.filter(Object => Object.NameWithExtension != item._file.name);
+            if ((this.multipleFileUploadModel.UploadedFiles == null || this.multipleFileUploadModel.UploadedFiles == []) && this.options.IsRequired) {
                 this.fileUploadFormControl.markAsTouched();
                 this.fileUploadFormControl.invalid;
             }
@@ -937,7 +954,7 @@ FileUploadComponent.controlContainerstatic = null;
 FileUploadComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-FileUplaod',
-                template: "\r\n<div class=\"b-control b-fileupload\">\r\n    <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"col-form-label col-sm-12 mb-2\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n            [hidden]=\"options.HideLabel\">\r\n            {{options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n                aria-required=\"true\">*</span>\r\n    \r\n            <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'\r\n                *ngIf=\"(ValidationMessage!=null&&ValidationMessage!='')\">\r\n                <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n                </i>\r\n            </ejs-tooltip>\r\n    \r\n    \r\n        </label>\r\n    \r\n        <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n    \r\n            <div>\r\n    \r\n                <div ng2FileDrop *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                    class=\"well my-drop-zoneform-control bnsights-control {{options.ExtraClasses}}\"\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}}\"\r\n                    id=\"options.Name\" #fileInput\r\n                    [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n    \r\n    \r\n                    <div class=\"dragndrop text-center\">\r\n                        <p class=\"drag-icon mb-3\">\r\n                            <i class=\"fas fa-cloud-download-alt\"></i> \r\n                        </p>\r\n                        <p>Drag and Drop File Here </p>\r\n                    </div>\r\n                </div>\r\n    \r\n                <div *ngIf=\"(!options.IsDropZone)&&!((uploader.queue.length>0)&&(!options.IsMultipleFile))\">\r\n                    <button type=\"button\"  class=\"btn btn-light btn-sm file-fake-input mb-3\" (click)=\"fileInput.click();\">\r\n                        <i class=\"icon fa fa-cloud-upload-alt\" ></i>\r\n                        Upload\r\n                    </button>\r\n                    <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n                        class=\"fileSelector customFileUploadPlacment hidden  v-required-multiplefiles d-none\" id=\"file\"\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\" type=\"file\"\r\n                        formControlName=\"{{options.Name}}\" id=\"options.Name\" #fileInput\r\n                        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n                </div>\r\n    \r\n            </div>\r\n    \r\n            <div *ngFor=\"let item of uploader.queue\">\r\n                <div class=\"fileInfoContainer ui-file btn-group mb-3\" >\r\n                    <button type=\"button\"class=\"download-link btn btn-light btn-sm\">\r\n                        <span>\r\n                            <i class=\"icon fa fa-download\"></i>\r\n                            <span class=\"upload-file-info\">{{ item?.file?.name }}</span>\r\n                        </span>\r\n                    </button>\r\n                    <span class=\"removeUIFile remove-link btn btn-xs btn-danger d-flex align-items-center justify-content-center\"\r\n                        (click)=\"item.remove();removeFromControlValue(item)\">\r\n                        <i class=\"fa fa-times px-0\"></i>\r\n                    </span>\r\n                </div>\r\n            </div>\r\n    \r\n    \r\n            <div class=\"text-danger Required-text\" *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n                {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n            </div>\r\n    \r\n    \r\n    \r\n            <div class=\"col-md-9 col-sm-9\">\r\n    \r\n                <div><label>{{options.LabelDescription}}\r\n                    </label></div>\r\n    \r\n    \r\n            </div>\r\n            <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n    \r\n    \r\n    \r\n        </div>\r\n    \r\n    </div>\r\n</div>\r\n",
+                template: "\r\n<div class=\"b-control b-fileupload\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"col-form-label col-sm-12 mb-2\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n           [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n            aria-required=\"true\">*</span>\r\n\r\n      <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'\r\n                   *ngIf=\"(ValidationMessage!=null&&ValidationMessage!='')\">\r\n        <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n        </i>\r\n      </ejs-tooltip>\r\n\r\n\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n      <div>\r\n\r\n        <div ng2FileDrop *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             class=\"well my-drop-zoneform-control bnsights-control {{options.ExtraClasses}}\"\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}}\"\r\n             id=\"options.Name\" #fileInput\r\n             [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n\r\n\r\n          <div class=\"dragndrop text-center\">\r\n            <p class=\"drag-icon mb-3\">\r\n              <i class=\"fas fa-cloud-download-alt\"></i>\r\n            </p>\r\n            <p>\r\n              {{UtilityService.getResourceValue(\"DragAndDropHere\")}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"(!options.IsDropZone)&&!((uploader.queue.length>0)&&(!options.IsMultipleFile))\">\r\n          <button type=\"button\" class=\"btn btn-light btn-sm file-fake-input mb-3\" (click)=\"fileInput.click();\">\r\n            <i class=\"icon fa fa-cloud-upload-alt\"></i>\r\n            {{UtilityService.getResourceValue(\"Upload\")}}\r\n          </button>\r\n          <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n                 class=\"fileSelector customFileUploadPlacment hidden  v-required-multiplefiles d-none\" id=\"file\"\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\" type=\"file\"\r\n                 formControlName=\"{{options.Name}}\" id=\"options.Name\" #fileInput\r\n                 [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div *ngFor=\"let item of uploader.queue\">\r\n        <div class=\"fileInfoContainer ui-file btn-group mb-3\">\r\n          <a href=\"{{ item?._file?.url}}\" download>\r\n            <button type=\"button\" class=\"download-link btn btn-light btn-sm\">\r\n              <span>\r\n                <i class=\"icon fa fa-download\"></i>\r\n                <span class=\"upload-file-info\">{{ item?.file?.name }}</span>\r\n              </span>\r\n            </button>\r\n          </a>\r\n          <span class=\"removeUIFile remove-link btn btn-xs btn-danger d-flex align-items-center justify-content-center\"\r\n                (click)=\"item.remove();removeFromControlValue(item)\">\r\n            <i class=\"fa fa-times px-0\"></i>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"text-danger Required-text\" *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n        {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n\r\n\r\n      <div class=\"col-md-9 col-sm-9\">\r\n\r\n        <div>\r\n          <label>\r\n            {{options.LabelDescription}}\r\n          </label>\r\n        </div>\r\n\r\n\r\n      </div>\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n\r\n\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                 styles: [".e-tip-content{background-color:#afafaf;color:#fff;padding-left:10px;padding-right:10px;padding-top:2px}.my-drop-zone{border:dotted 3px lightgray}.nv-file-over{border:dotted 3px red}.another-file-over-class{border:dotted 3px green}html,body{height:100%}\n"]
             },] }
 ];
@@ -1028,7 +1045,7 @@ class MultiLingualTextBoxComponent {
         this.CurrentLanguage = translate.currentLang != undefined ? translate.currentLang : translate.defaultLang;
     }
     getCustomErrorsMassages() {
-        this.ArabicLetterOnly = this.UtilityService.getResourceValue("VAL_ArabicIsRequiredAndOnly50CharactersEnglish");
+        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
         this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
     }
     ngOnInit() {
@@ -1080,7 +1097,7 @@ class MultiLingualTextBoxComponent {
             }
             this.showInputUsingLanguageMode();
             this.ArabicValidationRules.push(Validators.compose([
-                this.controlUtility.arabicValidator({ ArabicLetterOnly: this.ArabicLetterOnly }),
+                this.controlUtility.arabicValidator({ ArabicIsRequiredAndOnly50CharactersEnglish: this.ArabicLetterOnly }),
             ]));
             this.EnglishValidationRules.push(Validators.compose([
                 this.controlUtility.patternValidator(/^[\x00-\x7F]*$/, { EnglishLetterOnly: this.EnglishLetterOnly }),
@@ -1340,7 +1357,7 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
 MultiLingualTextBoxComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-MultiLingualTextBox',
-                template: "<div class=\"b-control b-multilangual-textbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [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 class=\"form-control bnsights-control\"\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                     #userinputEnglish>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n              {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showEnglishCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n                {{englishMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n              {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                     (focus)=\"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                     (change)=\"trimControlValue('Ar')\" #userinputArabic>\r\n\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n              {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showArabicCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n                {{arabicMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n              {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-multilangual-textbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\"\r\n                     (focus)=\"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\"\r\n                     #userinputEnglish>\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n              {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showEnglishCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n                {{englishMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='') ||(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!='')\">\r\n              {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"EnglishFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowArabicTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.IsHideArabicLabel\">\r\n            {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n          <div class=\" col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group align-items-center\">\r\n              <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\" *ngIf=\"options.Icon!=null\">\r\n                <span [inlineSVG]=\"options.Icon\"></span>\r\n              </div>\r\n              <input class=\"form-control bnsights-control\" dir=\"rtl\"\r\n                     (focus)=\"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\r\n              <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n                <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputArabic)\">\r\n                  <i class=\"fas fa-copy\"></i>\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}</div>\r\n            <div class=\"text-danger Required-text\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n              {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n            </div>\r\n            <div *ngIf=\"showArabicCharsLimitMsg\">\r\n              <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n                {{arabicMaxLimitWarningMsg}}\r\n              </span>\r\n            </div>\r\n            <div class=\"control-desc\" *ngIf=\"(options.LabelDescription!=null&&options.LabelDescription!='')||(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!='')\">\r\n              {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n            </div>\r\n            <!-- <div *ngIf=\"ArabicFormControl.valid\">{{resetError()}}</div> -->\r\n            <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
                 styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
             },] }
 ];
@@ -2164,9 +2181,9 @@ class DropdownListComponent {
         }
         return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
     }
-    onItemSelect(item) {
+    onItemSelect() {
         this.onChangeService.ChangeValue(this.options.Name);
-        let originalValue = item;
+        let originalValue = this.options.SelectedItems;
         if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
             this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
         }
@@ -2209,7 +2226,7 @@ DropdownListComponent.decorators = [
     { type: Component, args: [{
                 // tslint:disable-next-line: component-selector
                 selector: 'BBSF-DropdownList',
-                template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n        [notFoundText]=\"'No data found.'\" [maxSelectedItems]=\"options.LimitSelection\"\r\n        [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n        [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n        [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n        [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect($event[options.ItemTempletkey])\" (clear)=\"Clear()\"\r\n        [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n        [closeOnSelect]=\"options.SingleSelection  ? true : false\">\r\n\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\"ks-cboxtags\">\r\n            <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\"\r\n              class=\" \" /> <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control bnsights-control\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect($event.target.value)\"\r\n        [disabled]=\"options.IsDisabled\" formControlName=\"{{options.Name}}\">\r\n        <option value=\"\" disabled>--select--</option>\r\n        <option *ngFor=\"let item of options.DataSource\" value=\"{{item.key}}\" [ngValue]=\"item.key\">\r\n          {{item.value}}\r\n        </option>\r\n      </select>\r\n\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n        {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <!-- <div *ngIf=\"DropdownListFormControl.valid\">{{resetError()}}</div> -->\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n        [bindValue]=\"options.ItemTempletkey\" [bindLabel]=\"options.ItemTempletvalue\" [items]=\"options.DataSource\"\r\n        [notFoundText]=\"'No data found.'\" [maxSelectedItems]=\"options.LimitSelection\"\r\n        [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n        [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\r\n        <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n          <div class=\"ks-cboxtags\">\r\n            <input id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\"\r\n              class=\" \" /> <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n          </div>\r\n        </ng-template>\r\n\r\n        <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n           <label class=\"ng-option-label  mb-0\" id={{item.key}}>{{item.value}}</label>\r\n        </ng-template>\r\n\r\n      </ng-select>\r\n\r\n      <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-control bnsights-control\"\r\n        dir=\"{{options.ForceDirection==2?'rtl':''}}\" (change)=\"onItemSelect()\" [(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\r\n      <div class=\"text-danger Required-text\"\r\n        *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n        {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <div class=\"control-desc\">{{options.LabelDescription}}</div>\r\n      </div>\r\n\r\n      <!-- <div *ngIf=\"DropdownListFormControl.valid\">{{resetError()}}</div> -->\r\n      <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n        {{resetError()}}</div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n",
                 styles: [".cuppa-dropdown{background-color:#fff}.arrow-up,.arrow-down{border-left:none!important;border-right:none!important}.dropdown-list{padding-top:0!important}.c-token{background-color:#6495ed}.pure-checkbox .selected-item{background-color:#6495ed;color:#fff}\n"]
             },] }
 ];
@@ -2366,9 +2383,6 @@ class ToggleslideComponent {
         this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
         if (!this.options.ViewType)
             this.options.ViewType = this.globalSettings.ViewType;
-        if (this.options.IsDisabled) {
-            this.ToggleslideFormControl.disable();
-        }
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
     }
@@ -2405,7 +2419,7 @@ ToggleslideComponent.controlContainerstatic = null;
 ToggleslideComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-Toggleslide',
-                template: "<div class=\"b-control b-toggle-slide\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n    </label>\r\n            <mat-slide-toggle [(ngModel)]=\"SlideValue\"  dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n              formControlName=\"{{options.Name}}\" disableRipple=\"true\"\r\n            (change)=\"changeValueToggle()\">\r\n        </mat-slide-toggle>\r\n        \r\n    </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-toggle-slide\">\r\n    <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n        <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n        [hidden]=\"options.HideLabel\">\r\n        {{options.LabelValue}}\r\n    </label>\r\n            <mat-slide-toggle [(ngModel)]=\"SlideValue\"  dir=\"{{options.ForceDirection==2?'rtl':''}}\" [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        \r\n    </div>\r\n</div>\r\n",
                 styles: [".mat-slide-toggle{padding-left:10px}.mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:#e3f4fe}.mat-slide-toggle-thumb-container{width:25px;height:25px;top:1px;left:-2px}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#009ef7}.mat-slide-toggle-thumb{height:25px;width:25px;border-radius:50%}.mat-slide-toggle.mat-checked .mat-ripple-element{background-color:#009ef7}.mat-slide-toggle-bar{width:55px;height:30px;border-radius:3.25rem}\n"]
             },] }
 ];
@@ -3996,6 +4010,8 @@ class TagsInputComponent {
             this.options.ViewType = this.globalSettings.ViewType;
         if (this.options.LabelKey != null && this.options.LabelKey != "")
             this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
+        if (!this.options.NoResultText)
+            this.options.NoResultText = this.UtilityService.getResourceValue("NoItemsMatch");
         // this.group.addControl(this.options.Name, new FormControl(''));
         // this.TagInputControl = this.group.controls[this.options.Name]; //  new FormControl('',validationRules);
         this.TagsFormControl.setValue(this.options.Value);
@@ -4091,7 +4107,7 @@ class TagsInputComponent {
                 this.TagsFormControl.invalid;
             }
         }
-        let originalValue = this.TagsFormControl.value;
+        let originalValue = this.TagsFormControl.value.map(function (a) { return a.key; });
         if (this.options.PatchFunction && this.options.PatchPath && this.TagsFormControl.valid) {
             this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
         }
@@ -4339,6 +4355,7 @@ class PagingComponent {
                 this.items = [];
                 this.Pages = Math.ceil((this.totalRow / this.options.PageSize));
                 this.items = Array(this.totalRow);
+                this.setText(this.Pages, this.totalRow);
             }
         }, (error) => {
             if (error.status == 401)
@@ -4362,11 +4379,37 @@ class PagingComponent {
         }
         return originalArray;
     }
+    setText(pagesNumber, itemsNumber) {
+        if (this.utilityService.isCurrentLanguageArabic()) {
+            //Set pages text
+            if (pagesNumber < 3 || pagesNumber > 10)
+                this.pagesText = this.utilityService.getResourceValue("Page");
+            else
+                this.pagesText = this.utilityService.getResourceValue("Pages");
+            //Set items text
+            if (itemsNumber < 3 || itemsNumber > 10)
+                this.itemsText = this.utilityService.getResourceValue("Item");
+            else
+                this.itemsText = this.utilityService.getResourceValue("Items");
+        }
+        else {
+            //Set pages text
+            if (pagesNumber > 1)
+                this.pagesText = this.utilityService.getResourceValue("Pages");
+            else
+                this.pagesText = this.utilityService.getResourceValue("Page");
+            //Set items text
+            if (itemsNumber > 1)
+                this.itemsText = this.utilityService.getResourceValue("Items");
+            else
+                this.itemsText = this.utilityService.getResourceValue("Item");
+        }
+    }
 }
 PagingComponent.decorators = [
     { type: Component, args: [{
                 selector: 'BBSF-Paging',
-                template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{utilityService.getResourceValue(\"ItemsIn\")}} <strong> {{Pages}}</strong> {{utilityService.getResourceValue(\"Pages\")}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *ngIf=\"options.IsLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"ScrollDistance\"\r\n         [infiniteScrollUpDistance]=\"ScrollUpDistance\" [infiniteScrollThrottle]=\"Throttle\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-info\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n",
+                template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong> {{Pages}}</strong> {{pagesText}}\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <div class=\"row\" style=\"align-self:center; align-items: center; text-align: center;\" *ngIf=\"options.IsLoadMoreControl\">\r\n    <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"ScrollDistance\"\r\n         [infiniteScrollUpDistance]=\"ScrollUpDistance\" [infiniteScrollThrottle]=\"Throttle\" (scrolled)=\"options.IsInfiniteScroll==true?onScrollDown():null\"\r\n         [scrollWindow]=\"options.ScrollWindow\" [infiniteScrollContainer]=\"options.InfiniteScrollContainer\">\r\n    </div>\r\n    <button class=\"btn btn-info\" (click)=\"onScrollDown()\" *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n  </div>\r\n</div>\r\n",
                 styles: [".ngx-pager-container{text-align:center;padding:25px 0 0}.ngx-pager-container li{display:inline-block;margin:0 4px}.ngx-pager-container li a{display:block;width:26px;height:26px;border:1px solid #707070;text-align:center;color:#3e4e59;font-size:14px;line-height:24px;border-radius:5px;text-decoration:none}.ngx-pager-container li a:hover{color:#fff;background:#0a0e03}.ngx-pager-container li.invisible{display:none}.ngx-pager-container li.active{background:#0a0e03;border-radius:5px}.ngx-pager-container li.active a{border:none;color:#fff}\n"]
             },] }
 ];
@@ -4792,7 +4835,7 @@ class TextboxComponent {
         this.PasswordComplexityHasSmallLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSmallLetter");
         this.PasswordComplexityHasSpecialLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
         this.MaxWordCountValidationKey = this.UtilityService.getResourceValue("MaxWordCountValidationKey");
-        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicLetterOnly");
+        this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
         this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
     }
     onTextChange() {
@@ -5341,10 +5384,20 @@ class FormComponent {
         this.modalService = modalService;
         this.ngbActiveModal = ngbActiveModal;
         this.router = router;
+        this.isChange = null;
+        this.OnChange = new EventEmitter();
     }
     ngOnInit() {
         this.fromName = this.randomString(5);
     }
+    ngAfterViewInit() {
+        this.options.FormGroup.valueChanges.subscribe((es) => {
+            if (this.isChange != null)
+                this.OnChange.emit(this.isChange);
+            else
+                this.isChange = true;
+        });
+    }
     submit() {
         this.options.FormGroup.markAllAsTouched();
         if (this.options.FormGroup.invalid) {
@@ -5419,6 +5472,7 @@ FormComponent.ctorParameters = () => [
     { type: Router }
 ];
 FormComponent.propDecorators = {
+    OnChange: [{ type: Output }],
     options: [{ type: Input }]
 };
@@ -5716,6 +5770,7 @@ var DataType;
     DataType["CoverPhoto"] = "9CC8C0BB-C670-466F-A632-8632FF5C1296";
     DataType["InnovationLab"] = "4B914ED0-8B36-4E24-B85E-9A04C9F266BE";
     DataType["Country"] = "342AA701-76C7-4E5D-8056-407BFC86F888";
+    DataType["AreaOfFocus"] = "06a4cfb7-216a-4a60-8388-7a859aab90b4";
 })(DataType || (DataType = {}));
 var ForceDirection;
@@ -5726,6 +5781,8 @@ var ForceDirection;
 class ControlOptionsBase {
     constructor() {
+        /** Sets an attribute disable="disabled"  */
+        this.IsDisabled = false;
         /**  to set type of view  if Control is Vertical or Horizontal */
         this.ViewType = null;
         /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
@@ -5738,6 +5795,8 @@ class DatePickerOptions extends ControlOptionsBase {
         super(...arguments);
         /**To set  First Day Of Week  to DatePicker */
         this.FirstDayOfWeek = 1;
+        /**To set Hour12Timer to DatePicker  is 12 Hour or 24 Hour*/
+        this.Hour12Timer = true;
         /**To set PickerType to DatePicker  is Calendar or Timer Or Both */
         this.PickerType = PickerType.Calendar;
         /**To set StartView to DatePicker  is Year or Month Or Multi-Year */
@@ -5839,8 +5898,8 @@ class TextBoxOptions extends ControlOptionsBase {
         super(...arguments);
         /** set Range Number to Textbox with type number with From-Value and To-value*/
         this.NumberRange = new RangeNumber();
-        /**Prevent AutoComplete of textbox*/
-        this.AutoComplete = "off";
+        /**Prevent AutoComplete of textbox default value is "on" available values "on" and "off"*/
+        this.AutoComplete = "on";
         /** to set Direction of textbox  if textbox is Arabic or English  */
         this.ForceDirection = null;
         /** to set Language of textbox  if textbox language is Arabic or English  */
@@ -5864,11 +5923,22 @@ class RenderComponentService {
     constructor(componentFactoryResolver) {
         this.componentFactoryResolver = componentFactoryResolver;
     }
-    renderDynamicComponent(viewContainerRef, component, group, options) {
+    renderDynamicComponent(viewContainerRef, component, group, options, size = 0) {
         let factory = this.componentFactoryResolver.resolveComponentFactory(component);
         const componentRef = viewContainerRef.createComponent(factory);
         componentRef.instance.group = group;
         componentRef.instance.options = options;
+        if (size > 0) {
+            let htmlElement = componentRef.hostView.rootNodes[0];
+            // `element` is the element you want to wrap
+            var parent = htmlElement.parentNode;
+            var wrapper = document.createElement('div');
+            wrapper.className = `col-md-${size}`;
+            // set the wrapper as child (instead of the element)
+            parent.replaceChild(wrapper, htmlElement);
+            // set element as child of wrapper
+            wrapper.appendChild(htmlElement);
+        }
     }
 }
 RenderComponentService.decorators = [
@@ -6953,6 +7023,8 @@ class MultiLingualTextBoxOptions extends MultilingualControlOptionsBase {
         this.IconPositionAR = IconPosition.right;
         /*multi control placement type*/
         this.MultiControlPlacementType = null;
+        /**Prevent AutoComplete of inputs default value is "on" available values "on" and "off"*/
+        this.AutoComplete = "on";
     }
 }
@@ -7090,8 +7162,6 @@ class TagsInputOptions extends ControlOptionsBase {
         this.DatasourceItemValue = "key";
         /**Text  Of Tag That Will Show In Dropdown */
         this.DatasourceItemText = "value";
-        /**Text Show  when none of the given options match the entered text */
-        this.NoResultText = "No Item Matches";
         /**Set Query Param Name By Default It's 'query'*/
         this.QueryParamName = "query";
         /**Set Query Param Name By Default It's 'query'*/
@@ -7541,7 +7611,7 @@ var FileType;
     FileType["ZIP"] = "application/zip";
     FileType["RAR"] = "application/x-rar-compressed";
     FileType["VIDEO"] = "video/webm,video/ogg,video/mp4,video/quicktime,video/x-msvideo,video/x-ms-wmv";
-    FileType["License"] = "application/octet-stream";
+    FileType["License"] = "application/BN";
     FileType["Xml"] = "text/xml";
     FileType["OctetSteam"] = "application/octet-stream";
     FileType["Txt"] = "text/plain";