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/bundles/bnsights-bbsf-controls.umd.js CHANGED Viewed

@@ -556,7 +556,7 @@
     DateInputComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -653,6 +653,7 @@
             this.markAllAsTouched = false;
             this.validationRules = [];
             this.validationRulesasync = [];
+            this.deletedFiles = [];
             this.resetError = function () {
                 _this.controlValidationService.RemoveGlobalError();
             };
@@ -699,33 +700,43 @@
             else {
                 if (this.options.IsMultipleFile == true) {
                     var files = [];
-                    this.multipleFileUploadModel = this.options.Value;
+                    this.multipleFileUploadModel.ExistingFiles = this.options.Value.ExistingFiles;
+                    this.multipleFileUploadModel.UploadedFiles = [];
                     for (var index = 0; index < this.options.Value.ExistingFiles.length; index++) {
                         var element = this.options.Value.ExistingFiles[index];
-                        // this.FileLikeObject = new FileLikeObject({
-                        //   name: element.FileName,
-                        //   size: element.FileSizeInMB * 1000 * 1000,
-                        //   type: element.FileType,
-                        //   rawFile: element.FileBase64,
-                        // })
-                        var blob = void 0;
-                        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 ng2FileUpload.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 = '';
+                        var file = this.FileLikeObject;
+                        file.url = element.FileURL;
+                        files.push(file);
                     }
                     this.uploader.addToQueue(files);
+                    console.log(this.uploader.queue);
                 }
                 else {
-                    var element = this.options.Value.File;
+                    var element = this.options.Value;
+                    var bytes = new Uint8Array(element.Bytes);
+                    var base64 = btoa(String.fromCharCode(null, bytes));
                     this.FileLikeObject = new ng2FileUpload.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;
+                    var 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 @@
                     var fileObject = file.rawFile;
                     reader_1.readAsDataURL(fileObject);
                     reader_1.onload = function () {
+                        var existingID_GUID = null;
+                        if (!_this.options.IsMultipleFile && _this.file)
+                            existingID_GUID = _this.file.NameWithExtension == file.name ? _this.file.ID_GUID : null;
                         var AddedFile = {
                             FileName: file.name,
                             FileType: file.type,
                             FileBase64: reader_1.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();
@@ -904,33 +919,35 @@
             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) {
                             var FileObject_1 = item.file.rawFile;
-                            var DeletedItemId = this.options.Value.ExistingFiles.filter(function (Object) { return Object.FileName == FileObject_1.name; })[0];
-                            this.options.Value.ExistingFiles = this.options.Value.ExistingFiles.filter(function (Object) { return Object.FileName != FileObject_1.name; });
-                            this.multipleFileUploadModel.RemovedFiles.push(DeletedItemId);
+                            var DeletedItem = this.multipleFileUploadModel.ExistingFiles.filter(function (Object) { return Object.NameWithExtension == FileObject_1.name; })[0];
+                            this.multipleFileUploadModel.ExistingFiles = this.multipleFileUploadModel.ExistingFiles.filter(function (Object) { return Object.NameWithExtension != FileObject_1.name; });
+                            this.deletedFiles.push(DeletedItem);
+                            this.multipleFileUploadModel.RemovedFiles.push(DeletedItem.ID_GUID);
                         }
                         else {
                             var FileObject_2 = item.file.rawFile;
-                            var deletedList = this.multipleFileUploadModel.RemovedFiles.filter(function (Object) { return Object.FileName == FileObject_2.name; });
+                            var deletedList = this.deletedFiles.filter(function (Object) { return Object.NameWithExtension == FileObject_2.name; });
                             if (deletedList.length == 0 || deletedList == undefined) {
-                                var DeletedItemId = this.options.Value.ExistingFiles.filter(function (Object) { return Object.FileName == FileObject_2.name; })[0];
-                                this.options.Value.ExistingFiles = this.options.Value.ExistingFiles.filter(function (Object) { return Object.FileName != FileObject_2.name; });
-                                this.multipleFileUploadModel.RemovedFiles.push(DeletedItemId);
+                                var DeletedItem = this.multipleFileUploadModel.ExistingFiles.filter(function (Object) { return Object.NameWithExtension == FileObject_2.name; })[0];
+                                this.multipleFileUploadModel.ExistingFiles = this.multipleFileUploadModel.ExistingFiles.filter(function (Object) { return Object.NameWithExtension != FileObject_2.name; });
+                                this.deletedFiles.push(DeletedItem);
+                                this.multipleFileUploadModel.RemovedFiles.push(DeletedItem.ID_GUID);
                             }
                         }
                     }
                 }
                 else {
+                    this.deletedFiles = [];
                     this.multipleFileUploadModel.RemovedFiles = [];
                 }
-                var ItemList = this.group.get(this.options.Name).value.UploadedFiles;
-                ItemList = ItemList.filter(function (Object) { return Object.FileName != item._file.name; });
-                this.multipleFileUploadModel.UploadedFiles = ItemList;
-                if ((ItemList == null || ItemList == []) && this.options.IsRequired) {
+                this.multipleFileUploadModel.UploadedFiles = this.multipleFileUploadModel.UploadedFiles.filter(function (Object) { return Object.NameWithExtension != item._file.name; });
+                if ((this.multipleFileUploadModel.UploadedFiles == null || this.multipleFileUploadModel.UploadedFiles == []) && this.options.IsRequired) {
                     this.fileUploadFormControl.markAsTouched();
                     this.fileUploadFormControl.invalid;
                 }
@@ -944,7 +961,7 @@
     FileUploadComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -1357,7 +1374,7 @@
             this.CurrentLanguage = translate.currentLang != undefined ? translate.currentLang : translate.defaultLang;
         }
         MultiLingualTextBoxComponent.prototype.getCustomErrorsMassages = function () {
-            this.ArabicLetterOnly = this.UtilityService.getResourceValue("VAL_ArabicIsRequiredAndOnly50CharactersEnglish");
+            this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
             this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
         };
         MultiLingualTextBoxComponent.prototype.ngOnInit = function () {
@@ -1417,7 +1434,7 @@
                             }
                             this.showInputUsingLanguageMode();
                             this.ArabicValidationRules.push(forms.Validators.compose([
-                                this.controlUtility.arabicValidator({ ArabicLetterOnly: this.ArabicLetterOnly }),
+                                this.controlUtility.arabicValidator({ ArabicIsRequiredAndOnly50CharactersEnglish: this.ArabicLetterOnly }),
                             ]));
                             this.EnglishValidationRules.push(forms.Validators.compose([
                                 this.controlUtility.patternValidator(/^[\x00-\x7F]*$/, { EnglishLetterOnly: this.EnglishLetterOnly }),
@@ -1682,7 +1699,7 @@
     MultiLingualTextBoxComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-MultiLingualTextBox',
-                    template: "<div class=\"b-control b-multilangual-textbox\">\r\n  <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n    <div class=\"form-group row\" [formGroup]=\"MultiLanguagegroup\">\r\n      <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n        <div class=\"row\" *ngIf=\"ShowEnglishTextBox\">\r\n          <label class=\"b-label col-form-label col-sm-12\"\r\n                 [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\" [hidden]=\"options.IsHideEnglishLabel\">\r\n            {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n            <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n                  class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n          </label>\r\n\r\n          <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n            <div class=\"input-group 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"]
                 },] }
     ];
@@ -2527,9 +2544,9 @@
             }
             return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
         };
-        DropdownListComponent.prototype.onItemSelect = function (item) {
+        DropdownListComponent.prototype.onItemSelect = function () {
             this.onChangeService.ChangeValue(this.options.Name);
-            var originalValue = item;
+            var 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);
             }
@@ -2573,7 +2590,7 @@
         { type: i0.Component, args: [{
                     // tslint:disable-next-line: component-selector
                     selector: 'BBSF-DropdownList',
-                    template: "<div class=\"b-control b-dropdown-list\">\r\n  <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n    <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n      [hidden]=\"options.HideLabel\">\r\n      {{options.LabelValue}}\r\n      <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\"\r\n        aria-required=\"true\">*</span>\r\n    </label>\r\n\r\n    <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n      <ng-select *ngIf=\"options.DisableBootstrapSelect==false\" 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"]
                 },] }
     ];
@@ -2733,9 +2750,6 @@
             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);
         };
@@ -2773,7 +2787,7 @@
     ToggleslideComponent.decorators = [
         { type: i0.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"]
                 },] }
     ];
@@ -4434,6 +4448,8 @@
                 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);
@@ -4529,7 +4545,7 @@
                     this.TagsFormControl.invalid;
                 }
             }
-            var originalValue = this.TagsFormControl.value;
+            var 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);
             }
@@ -4784,6 +4800,7 @@
                     _this.items = [];
                     _this.Pages = Math.ceil((_this.totalRow / _this.options.PageSize));
                     _this.items = Array(_this.totalRow);
+                    _this.setText(_this.Pages, _this.totalRow);
                 }
             }, function (error) {
                 if (error.status == 401)
@@ -4807,12 +4824,38 @@
             }
             return originalArray;
         };
+        PagingComponent.prototype.setText = function (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");
+            }
+        };
         return PagingComponent;
     }());
     PagingComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'BBSF-Paging',
-                    template: "<div class=\"b-control b-paging\" *ngIf=\"(result.length > 0)\">\r\n  <div class=\"d-flex justify-content-between align-items-center\" *ngIf=\"!options.IsLoadMoreControl\">\r\n    <div class=\"b-pagination\">\r\n      <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\"\r\n                     (changePage)=\"onChangePage($event)\" [pageSize]=\"options.PageSize\" [ShowFirstAndLast]=\"options.ShowFirstAndLast\"\r\n                     [initialPage]=\"1\" [maxPages]=\"10\"></jw-pagination>\r\n    </div>\r\n    <div class=\"b-pages d-flex\" *ngIf=\"!((Pages==1)&&options.HidePaginationWhenPageSizeEqualOne)\" >\r\n      <select (change)=\"changePageSize($event)\" *ngIf=\"options.ShowPageSizeOption\">\r\n        <option>10</option>\r\n        <option>20</option>\r\n        <option>50</option>\r\n        <option>100</option>\r\n        <option>200</option>\r\n      </select>\r\n      <div class=\"b-items ml-3\">\r\n        <strong>{{totalRow}}</strong> {{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"]
                 },] }
     ];
@@ -5226,7 +5269,7 @@
             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");
         };
         TextboxComponent.prototype.onTextChange = function () {
@@ -5799,10 +5842,21 @@
             this.modalService = modalService;
             this.ngbActiveModal = ngbActiveModal;
             this.router = router;
+            this.isChange = null;
+            this.OnChange = new i0.EventEmitter();
         }
         FormComponent.prototype.ngOnInit = function () {
             this.fromName = this.randomString(5);
         };
+        FormComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.options.FormGroup.valueChanges.subscribe(function (es) {
+                if (_this.isChange != null)
+                    _this.OnChange.emit(_this.isChange);
+                else
+                    _this.isChange = true;
+            });
+        };
         FormComponent.prototype.submit = function () {
             var _this = this;
             this.options.FormGroup.markAllAsTouched();
@@ -5879,6 +5933,7 @@
         { type: router.Router }
     ]; };
     FormComponent.propDecorators = {
+        OnChange: [{ type: i0.Output }],
         options: [{ type: i0.Input }]
     };
@@ -6188,6 +6243,7 @@
         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";
     })(exports.DataType || (exports.DataType = {}));
     exports.ForceDirection = void 0;
@@ -6198,6 +6254,8 @@
     var ControlOptionsBase = /** @class */ (function () {
         function ControlOptionsBase() {
+            /** 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 */
@@ -6212,6 +6270,8 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /**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 = exports.PickerType.Calendar;
             /**To set StartView to DatePicker  is Year or Month Or Multi-Year */
@@ -6342,8 +6402,8 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             /** 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  */
@@ -6372,11 +6432,23 @@
         function RenderComponentService(componentFactoryResolver) {
             this.componentFactoryResolver = componentFactoryResolver;
         }
-        RenderComponentService.prototype.renderDynamicComponent = function (viewContainerRef, component, group, options) {
+        RenderComponentService.prototype.renderDynamicComponent = function (viewContainerRef, component, group, options, size) {
+            if (size === void 0) { size = 0; }
             var factory = this.componentFactoryResolver.resolveComponentFactory(component);
             var componentRef = viewContainerRef.createComponent(factory);
             componentRef.instance.group = group;
             componentRef.instance.options = options;
+            if (size > 0) {
+                var 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);
+            }
         };
         return RenderComponentService;
     }());
@@ -7485,6 +7557,8 @@
             _this.IconPositionAR = exports.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";
             return _this;
         }
         return MultiLingualTextBoxOptions;
@@ -7659,8 +7733,6 @@
             _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'*/
@@ -8128,7 +8200,7 @@
         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";