@bnsights/bbsf-controls 1.0.42 → 1.0.43

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 (27) hide show
  1. package/README.md +4 -0
  2. package/bnsights-bbsf-controls-1.0.43.tgz +0 -0
  3. package/bnsights-bbsf-controls.metadata.json +1 -1
  4. package/bundles/bnsights-bbsf-controls.umd.js +100 -41
  5. package/bundles/bnsights-bbsf-controls.umd.js.map +1 -1
  6. package/esm2015/lib/Shared/Models/ControlOptionsBase.js +3 -1
  7. package/esm2015/lib/Shared/Models/FileDTO.js +1 -1
  8. package/esm2015/lib/Shared/Models/MultilingualTextBoxOptions.js +3 -1
  9. package/esm2015/lib/Shared/Models/MultipleFileUploadModel.js +1 -1
  10. package/esm2015/lib/Shared/Models/TextBoxOptions.js +3 -3
  11. package/esm2015/lib/Shared/Models/datePickerOptions.js +3 -1
  12. package/esm2015/lib/controls/DateTimePicker/DateTimePicker.component.js +2 -2
  13. package/esm2015/lib/controls/FileUplaod/FileUplaod.component.js +50 -33
  14. package/esm2015/lib/controls/Form/Form.component.js +13 -2
  15. package/esm2015/lib/controls/MultiLingualTextBox/MultiLingualTextBox.component.js +2 -2
  16. package/esm2015/lib/controls/Paging/Paging.component.js +29 -2
  17. package/esm2015/lib/controls/Toggleslide/toggleslide.component.js +2 -5
  18. package/fesm2015/bnsights-bbsf-controls.js +99 -41
  19. package/fesm2015/bnsights-bbsf-controls.js.map +1 -1
  20. package/lib/Shared/Models/FileDTO.d.ts +1 -1
  21. package/lib/Shared/Models/MultilingualTextBoxOptions.d.ts +2 -0
  22. package/lib/Shared/Models/MultipleFileUploadModel.d.ts +1 -1
  23. package/lib/Shared/Models/TextBoxOptions.d.ts +1 -1
  24. package/lib/controls/FileUplaod/FileUplaod.component.d.ts +3 -0
  25. package/lib/controls/Form/Form.component.d.ts +4 -1
  26. package/lib/controls/Paging/Paging.component.d.ts +3 -0
  27. package/package.json +1 -1
@@ -564,7 +564,7 @@ DateInputComponent.controlContainerstatic = null;
564
564
  DateInputComponent.decorators = [
565
565
  { type: Component, args: [{
566
566
  selector: 'BBSF-DateTimePicker',
567
- 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",
567
+ 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",
568
568
  styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
569
569
  },] }
570
570
  ];
@@ -655,6 +655,7 @@ class FileUploadComponent {
655
655
  this.markAllAsTouched = false;
656
656
  this.validationRules = [];
657
657
  this.validationRulesasync = [];
658
+ this.deletedFiles = [];
658
659
  this.resetError = () => {
659
660
  this.controlValidationService.RemoveGlobalError();
660
661
  };
@@ -700,33 +701,43 @@ class FileUploadComponent {
700
701
  else {
701
702
  if (this.options.IsMultipleFile == true) {
702
703
  let files = [];
703
- this.multipleFileUploadModel = this.options.Value;
704
+ this.multipleFileUploadModel.ExistingFiles = this.options.Value.ExistingFiles;
705
+ this.multipleFileUploadModel.UploadedFiles = [];
704
706
  for (let index = 0; index < this.options.Value.ExistingFiles.length; index++) {
705
707
  const element = this.options.Value.ExistingFiles[index];
706
- // this.FileLikeObject = new FileLikeObject({
707
- // name: element.FileName,
708
- // size: element.FileSizeInMB * 1000 * 1000,
709
- // type: element.FileType,
710
- // rawFile: element.FileBase64,
711
- // })
712
- let blob;
713
- blob = new Blob(['']);
714
- blob.name = element.FileName;
715
- blob.lastModifiedDate = null;
716
- blob.webkitRelativePath = '';
717
- files.push(blob);
708
+ var bytes = new Uint8Array(element.Bytes);
709
+ var base64 = btoa(String.fromCharCode(null, bytes));
710
+ this.FileLikeObject = new FileLikeObject({
711
+ name: element.NameWithExtension,
712
+ type: element.MimeType,
713
+ rawFile: base64,
714
+ });
715
+ // let blob: any;
716
+ // blob = new Blob(['']) as any;
717
+ // blob.name = element.FileName;
718
+ // blob.lastModifiedDate = null;
719
+ // blob.webkitRelativePath = '';
720
+ let file = this.FileLikeObject;
721
+ file.url = element.FileURL;
722
+ files.push(file);
718
723
  }
719
724
  this.uploader.addToQueue(files);
725
+ console.log(this.uploader.queue);
720
726
  }
721
727
  else {
722
- const element = this.options.Value.File;
728
+ const element = this.options.Value;
729
+ var bytes = new Uint8Array(element.Bytes);
730
+ var base64 = btoa(String.fromCharCode(null, bytes));
723
731
  this.FileLikeObject = new FileLikeObject({
724
- name: element.FileName,
725
- size: element.FileSizeInMB * 1000 * 1000,
726
- type: element.FileType,
727
- rawFile: element.FileBase64,
732
+ name: element.NameWithExtension,
733
+ type: element.MimeType,
734
+ rawFile: base64,
728
735
  });
729
- this.uploader.addToQueue([this.FileLikeObject]);
736
+ this.file = element;
737
+ let file = this.FileLikeObject;
738
+ file.url = element.FileURL;
739
+ this.uploader.addToQueue([file]);
740
+ console.log(this.uploader.queue);
730
741
  }
731
742
  }
732
743
  if (this.options.LabelKey != null && this.options.LabelKey != "")
@@ -853,12 +864,16 @@ class FileUploadComponent {
853
864
  let fileObject = file.rawFile;
854
865
  reader.readAsDataURL(fileObject);
855
866
  reader.onload = () => {
867
+ let existingID_GUID = null;
868
+ if (!this.options.IsMultipleFile && this.file)
869
+ existingID_GUID = this.file.NameWithExtension == file.name ? this.file.ID_GUID : null;
856
870
  let AddedFile = {
857
871
  FileName: file.name,
858
872
  FileType: file.type,
859
873
  FileBase64: reader.result.toString().split(',')[1],
860
874
  FileSizeInMB: ((file.size / 1000) / 1000),
861
- NameWithExtension: file.name
875
+ NameWithExtension: file.name,
876
+ ID_GUID: existingID_GUID
862
877
  };
863
878
  if (this.options.IsMultipleFile == false) {
864
879
  this.fileUploadModel = new FileUploadModel();
@@ -898,33 +913,35 @@ class FileUploadComponent {
898
913
  else {
899
914
  if (this.options.Value != null && this.options.Value != undefined) {
900
915
  if (this.options.Value.CorrelationID_GUID == null) {
916
+ this.deletedFiles = [];
901
917
  this.multipleFileUploadModel.RemovedFiles = [];
902
918
  }
903
919
  else {
904
920
  if (this.multipleFileUploadModel.RemovedFiles.length == 0) {
905
921
  let FileObject = item.file.rawFile;
906
- let DeletedItemId = this.options.Value.ExistingFiles.filter(Object => Object.FileName == FileObject.name)[0];
907
- this.options.Value.ExistingFiles = this.options.Value.ExistingFiles.filter(Object => Object.FileName != FileObject.name);
908
- this.multipleFileUploadModel.RemovedFiles.push(DeletedItemId);
922
+ let DeletedItem = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension == FileObject.name)[0];
923
+ this.multipleFileUploadModel.ExistingFiles = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension != FileObject.name);
924
+ this.deletedFiles.push(DeletedItem);
925
+ this.multipleFileUploadModel.RemovedFiles.push(DeletedItem.ID_GUID);
909
926
  }
910
927
  else {
911
928
  let FileObject = item.file.rawFile;
912
- let deletedList = this.multipleFileUploadModel.RemovedFiles.filter(Object => Object.FileName == FileObject.name);
929
+ let deletedList = this.deletedFiles.filter(Object => Object.NameWithExtension == FileObject.name);
913
930
  if (deletedList.length == 0 || deletedList == undefined) {
914
- let DeletedItemId = this.options.Value.ExistingFiles.filter(Object => Object.FileName == FileObject.name)[0];
915
- this.options.Value.ExistingFiles = this.options.Value.ExistingFiles.filter(Object => Object.FileName != FileObject.name);
916
- this.multipleFileUploadModel.RemovedFiles.push(DeletedItemId);
931
+ let DeletedItem = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension == FileObject.name)[0];
932
+ this.multipleFileUploadModel.ExistingFiles = this.multipleFileUploadModel.ExistingFiles.filter(Object => Object.NameWithExtension != FileObject.name);
933
+ this.deletedFiles.push(DeletedItem);
934
+ this.multipleFileUploadModel.RemovedFiles.push(DeletedItem.ID_GUID);
917
935
  }
918
936
  }
919
937
  }
920
938
  }
921
939
  else {
940
+ this.deletedFiles = [];
922
941
  this.multipleFileUploadModel.RemovedFiles = [];
923
942
  }
924
- let ItemList = this.group.get(this.options.Name).value.UploadedFiles;
925
- ItemList = ItemList.filter(Object => Object.FileName != item._file.name);
926
- this.multipleFileUploadModel.UploadedFiles = ItemList;
927
- if ((ItemList == null || ItemList == []) && this.options.IsRequired) {
943
+ this.multipleFileUploadModel.UploadedFiles = this.multipleFileUploadModel.UploadedFiles.filter(Object => Object.NameWithExtension != item._file.name);
944
+ if ((this.multipleFileUploadModel.UploadedFiles == null || this.multipleFileUploadModel.UploadedFiles == []) && this.options.IsRequired) {
928
945
  this.fileUploadFormControl.markAsTouched();
929
946
  this.fileUploadFormControl.invalid;
930
947
  }
@@ -937,7 +954,7 @@ FileUploadComponent.controlContainerstatic = null;
937
954
  FileUploadComponent.decorators = [
938
955
  { type: Component, args: [{
939
956
  selector: 'BBSF-FileUplaod',
940
- 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 {{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 <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",
957
+ 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",
941
958
  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"]
942
959
  },] }
943
960
  ];
@@ -1340,7 +1357,7 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
1340
1357
  MultiLingualTextBoxComponent.decorators = [
1341
1358
  { type: Component, args: [{
1342
1359
  selector: 'BBSF-MultiLingualTextBox',
1343
- 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",
1360
+ 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",
1344
1361
  styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
1345
1362
  },] }
1346
1363
  ];
@@ -2366,9 +2383,6 @@ class ToggleslideComponent {
2366
2383
  this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
2367
2384
  if (!this.options.ViewType)
2368
2385
  this.options.ViewType = this.globalSettings.ViewType;
2369
- if (this.options.IsDisabled) {
2370
- this.ToggleslideFormControl.disable();
2371
- }
2372
2386
  if (this.options.LabelKey != null && this.options.LabelKey != "")
2373
2387
  this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
2374
2388
  }
@@ -2405,7 +2419,7 @@ ToggleslideComponent.controlContainerstatic = null;
2405
2419
  ToggleslideComponent.decorators = [
2406
2420
  { type: Component, args: [{
2407
2421
  selector: 'BBSF-Toggleslide',
2408
- 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",
2422
+ 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",
2409
2423
  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"]
2410
2424
  },] }
2411
2425
  ];
@@ -4341,6 +4355,7 @@ class PagingComponent {
4341
4355
  this.items = [];
4342
4356
  this.Pages = Math.ceil((this.totalRow / this.options.PageSize));
4343
4357
  this.items = Array(this.totalRow);
4358
+ this.setText(this.Pages, this.totalRow);
4344
4359
  }
4345
4360
  }, (error) => {
4346
4361
  if (error.status == 401)
@@ -4364,11 +4379,37 @@ class PagingComponent {
4364
4379
  }
4365
4380
  return originalArray;
4366
4381
  }
4382
+ setText(pagesNumber, itemsNumber) {
4383
+ if (this.utilityService.isCurrentLanguageArabic()) {
4384
+ //Set pages text
4385
+ if (pagesNumber < 3 || pagesNumber > 10)
4386
+ this.pagesText = this.utilityService.getResourceValue("Page");
4387
+ else
4388
+ this.pagesText = this.utilityService.getResourceValue("Pages");
4389
+ //Set items text
4390
+ if (itemsNumber < 3 || itemsNumber > 10)
4391
+ this.itemsText = this.utilityService.getResourceValue("Item");
4392
+ else
4393
+ this.itemsText = this.utilityService.getResourceValue("Items");
4394
+ }
4395
+ else {
4396
+ //Set pages text
4397
+ if (pagesNumber > 1)
4398
+ this.pagesText = this.utilityService.getResourceValue("Pages");
4399
+ else
4400
+ this.pagesText = this.utilityService.getResourceValue("Page");
4401
+ //Set items text
4402
+ if (itemsNumber > 1)
4403
+ this.itemsText = this.utilityService.getResourceValue("Items");
4404
+ else
4405
+ this.itemsText = this.utilityService.getResourceValue("Item");
4406
+ }
4407
+ }
4367
4408
  }
4368
4409
  PagingComponent.decorators = [
4369
4410
  { type: Component, args: [{
4370
4411
  selector: 'BBSF-Paging',
4371
- 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",
4412
+ 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",
4372
4413
  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"]
4373
4414
  },] }
4374
4415
  ];
@@ -5343,10 +5384,20 @@ class FormComponent {
5343
5384
  this.modalService = modalService;
5344
5385
  this.ngbActiveModal = ngbActiveModal;
5345
5386
  this.router = router;
5387
+ this.isChange = null;
5388
+ this.OnChange = new EventEmitter();
5346
5389
  }
5347
5390
  ngOnInit() {
5348
5391
  this.fromName = this.randomString(5);
5349
5392
  }
5393
+ ngAfterViewInit() {
5394
+ this.options.FormGroup.valueChanges.subscribe((es) => {
5395
+ if (this.isChange != null)
5396
+ this.OnChange.emit(this.isChange);
5397
+ else
5398
+ this.isChange = true;
5399
+ });
5400
+ }
5350
5401
  submit() {
5351
5402
  this.options.FormGroup.markAllAsTouched();
5352
5403
  if (this.options.FormGroup.invalid) {
@@ -5421,6 +5472,7 @@ FormComponent.ctorParameters = () => [
5421
5472
  { type: Router }
5422
5473
  ];
5423
5474
  FormComponent.propDecorators = {
5475
+ OnChange: [{ type: Output }],
5424
5476
  options: [{ type: Input }]
5425
5477
  };
5426
5478
 
@@ -5729,6 +5781,8 @@ var ForceDirection;
5729
5781
 
5730
5782
  class ControlOptionsBase {
5731
5783
  constructor() {
5784
+ /** Sets an attribute disable="disabled" */
5785
+ this.IsDisabled = false;
5732
5786
  /** to set type of view if Control is Vertical or Horizontal */
5733
5787
  this.ViewType = null;
5734
5788
  /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
@@ -5741,6 +5795,8 @@ class DatePickerOptions extends ControlOptionsBase {
5741
5795
  super(...arguments);
5742
5796
  /**To set First Day Of Week to DatePicker */
5743
5797
  this.FirstDayOfWeek = 1;
5798
+ /**To set Hour12Timer to DatePicker is 12 Hour or 24 Hour*/
5799
+ this.Hour12Timer = true;
5744
5800
  /**To set PickerType to DatePicker is Calendar or Timer Or Both */
5745
5801
  this.PickerType = PickerType.Calendar;
5746
5802
  /**To set StartView to DatePicker is Year or Month Or Multi-Year */
@@ -5842,8 +5898,8 @@ class TextBoxOptions extends ControlOptionsBase {
5842
5898
  super(...arguments);
5843
5899
  /** set Range Number to Textbox with type number with From-Value and To-value*/
5844
5900
  this.NumberRange = new RangeNumber();
5845
- /**Prevent AutoComplete of textbox*/
5846
- this.AutoComplete = "off";
5901
+ /**Prevent AutoComplete of textbox default value is "on" available values "on" and "off"*/
5902
+ this.AutoComplete = "on";
5847
5903
  /** to set Direction of textbox if textbox is Arabic or English */
5848
5904
  this.ForceDirection = null;
5849
5905
  /** to set Language of textbox if textbox language is Arabic or English */
@@ -6956,6 +7012,8 @@ class MultiLingualTextBoxOptions extends MultilingualControlOptionsBase {
6956
7012
  this.IconPositionAR = IconPosition.right;
6957
7013
  /*multi control placement type*/
6958
7014
  this.MultiControlPlacementType = null;
7015
+ /**Prevent AutoComplete of inputs default value is "on" available values "on" and "off"*/
7016
+ this.AutoComplete = "on";
6959
7017
  }
6960
7018
  }
6961
7019