@bnsights/bbsf-controls 1.0.42 → 1.0.45
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.
- package/README.md +13 -0
- package/bnsights-bbsf-controls-1.0.45.tgz +0 -0
- package/bnsights-bbsf-controls.metadata.json +1 -1
- package/bundles/bnsights-bbsf-controls.umd.js +125 -52
- package/bundles/bnsights-bbsf-controls.umd.js.map +1 -1
- package/esm2015/lib/Shared/Models/ControlOptionsBase.js +3 -1
- package/esm2015/lib/Shared/Models/DropdownOptions.js +1 -1
- package/esm2015/lib/Shared/Models/FileDTO.js +1 -1
- package/esm2015/lib/Shared/Models/MultilingualTextBoxOptions.js +3 -1
- package/esm2015/lib/Shared/Models/MultipleFileUploadModel.js +1 -1
- package/esm2015/lib/Shared/Models/PagingPayload.js +3 -0
- package/esm2015/lib/Shared/Models/TextBoxOptions.js +3 -3
- package/esm2015/lib/Shared/Models/datePickerOptions.js +3 -1
- package/esm2015/lib/Shared/services/render-component-service.service.js +13 -2
- package/esm2015/lib/controls/DateTimePicker/DateTimePicker.component.js +2 -2
- package/esm2015/lib/controls/DropdownList/DropdownList.component.js +4 -4
- package/esm2015/lib/controls/FileUplaod/FileUplaod.component.js +50 -33
- package/esm2015/lib/controls/Form/Form.component.js +10 -2
- package/esm2015/lib/controls/MultiLingualTextBox/MultiLingualTextBox.component.js +2 -2
- package/esm2015/lib/controls/Paging/Paging.component.js +41 -9
- package/esm2015/lib/controls/TagsInput/TagsInput.component.js +2 -2
- package/esm2015/lib/controls/Toggleslide/toggleslide.component.js +2 -5
- package/fesm2015/bnsights-bbsf-controls.js +123 -52
- package/fesm2015/bnsights-bbsf-controls.js.map +1 -1
- package/lib/Shared/Models/DropdownOptions.d.ts +1 -1
- package/lib/Shared/Models/FileDTO.d.ts +1 -1
- package/lib/Shared/Models/MultilingualTextBoxOptions.d.ts +2 -0
- package/lib/Shared/Models/MultipleFileUploadModel.d.ts +1 -1
- package/lib/Shared/Models/PagingPayload.d.ts +5 -0
- package/lib/Shared/Models/TextBoxOptions.d.ts +1 -1
- package/lib/Shared/services/render-component-service.service.d.ts +1 -1
- package/lib/controls/DropdownList/DropdownList.component.d.ts +2 -2
- package/lib/controls/FileUplaod/FileUplaod.component.d.ts +3 -0
- package/lib/controls/Form/Form.component.d.ts +4 -1
- package/lib/controls/Paging/Paging.component.d.ts +3 -0
- 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
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
blob
|
|
715
|
-
blob.
|
|
716
|
-
blob.
|
|
717
|
-
|
|
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
|
|
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.
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
rawFile: element.FileBase64,
|
|
732
|
+
name: element.NameWithExtension,
|
|
733
|
+
type: element.MimeType,
|
|
734
|
+
rawFile: base64,
|
|
728
735
|
});
|
|
729
|
-
this.
|
|
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
|
|
907
|
-
this.
|
|
908
|
-
this.
|
|
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.
|
|
929
|
+
let deletedList = this.deletedFiles.filter(Object => Object.NameWithExtension == FileObject.name);
|
|
913
930
|
if (deletedList.length == 0 || deletedList == undefined) {
|
|
914
|
-
let
|
|
915
|
-
this.
|
|
916
|
-
this.
|
|
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
|
-
|
|
925
|
-
|
|
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
|
|
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
|
];
|
|
@@ -2164,9 +2181,9 @@ class DropdownListComponent {
|
|
|
2164
2181
|
}
|
|
2165
2182
|
return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
|
|
2166
2183
|
}
|
|
2167
|
-
onItemSelect(
|
|
2184
|
+
onItemSelect() {
|
|
2168
2185
|
this.onChangeService.ChangeValue(this.options.Name);
|
|
2169
|
-
let originalValue =
|
|
2186
|
+
let originalValue = this.options.SelectedItems;
|
|
2170
2187
|
if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
|
|
2171
2188
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
2172
2189
|
}
|
|
@@ -2209,7 +2226,7 @@ DropdownListComponent.decorators = [
|
|
|
2209
2226
|
{ type: Component, args: [{
|
|
2210
2227
|
// tslint:disable-next-line: component-selector
|
|
2211
2228
|
selector: 'BBSF-DropdownList',
|
|
2212
|
-
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(
|
|
2229
|
+
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",
|
|
2213
2230
|
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"]
|
|
2214
2231
|
},] }
|
|
2215
2232
|
];
|
|
@@ -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\"\
|
|
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
|
];
|
|
@@ -4093,7 +4107,7 @@ class TagsInputComponent {
|
|
|
4093
4107
|
this.TagsFormControl.invalid;
|
|
4094
4108
|
}
|
|
4095
4109
|
}
|
|
4096
|
-
let originalValue = this.TagsFormControl.value;
|
|
4110
|
+
let originalValue = this.TagsFormControl.value.map(function (a) { return a.key; });
|
|
4097
4111
|
if (this.options.PatchFunction && this.options.PatchPath && this.TagsFormControl.valid) {
|
|
4098
4112
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
4099
4113
|
}
|
|
@@ -4296,7 +4310,7 @@ class PagingComponent {
|
|
|
4296
4310
|
pagingDTO.CurrentPageNumber = page;
|
|
4297
4311
|
pagingDTO.TotalCount = this.totalRow;
|
|
4298
4312
|
pagingDTO.IsFilterUpdated = IsFilterUpdated;
|
|
4299
|
-
let
|
|
4313
|
+
let filters = {};
|
|
4300
4314
|
if (this.options.Filters != null && this.options.Filters != []) {
|
|
4301
4315
|
for (let index = 0; index < this.options.Filters.length; index++) {
|
|
4302
4316
|
if (this.options.Filters[index].FormControlName != null && this.options.Filters[index].FormControlName != "") {
|
|
@@ -4307,11 +4321,11 @@ class PagingComponent {
|
|
|
4307
4321
|
if (Array.isArray(ControlValue)) {
|
|
4308
4322
|
for (let element = 0; element < ControlValue.length; element++) {
|
|
4309
4323
|
const value = ControlValue[element];
|
|
4310
|
-
|
|
4324
|
+
filters[this.options.Filters[index].ActionParameterName] = value;
|
|
4311
4325
|
}
|
|
4312
4326
|
}
|
|
4313
4327
|
else {
|
|
4314
|
-
|
|
4328
|
+
filters[this.options.Filters[index].ActionParameterName] = ControlValue;
|
|
4315
4329
|
}
|
|
4316
4330
|
}
|
|
4317
4331
|
else {
|
|
@@ -4319,7 +4333,7 @@ class PagingComponent {
|
|
|
4319
4333
|
ControlValue = JSON.stringify(ControlValue);
|
|
4320
4334
|
if (this.options.Filters[index].FilterType == FilterType.TagInput)
|
|
4321
4335
|
ControlValue = JSON.stringify(ControlValue);
|
|
4322
|
-
|
|
4336
|
+
filters[this.options.Filters[index].ActionParameterName] = ControlValue;
|
|
4323
4337
|
}
|
|
4324
4338
|
}
|
|
4325
4339
|
}
|
|
@@ -4327,11 +4341,16 @@ class PagingComponent {
|
|
|
4327
4341
|
const ElementjQuerySelector = this.options.Filters[index].jQuerySelector;
|
|
4328
4342
|
let ElementValue = document.querySelector(ElementjQuerySelector).value;
|
|
4329
4343
|
if (ElementValue != undefined && ElementValue != null)
|
|
4330
|
-
|
|
4344
|
+
filters[this.options.Filters[index].ActionParameterName] = ElementValue;
|
|
4331
4345
|
}
|
|
4332
4346
|
}
|
|
4333
4347
|
}
|
|
4334
|
-
|
|
4348
|
+
//Set Filters object that sent to action URL
|
|
4349
|
+
let filtersDTO = {
|
|
4350
|
+
PagingDTO: pagingDTO,
|
|
4351
|
+
Filters: filters
|
|
4352
|
+
};
|
|
4353
|
+
this.requestHandlerService.post(this.options.ActionPostURL, this.options.Filters && this.options.Filters.length > 0 ? filtersDTO : pagingDTO)
|
|
4335
4354
|
.subscribe((responseData) => {
|
|
4336
4355
|
this.result = responseData.items; //this.castItems(responseData.items);
|
|
4337
4356
|
let castedResult = plainToClass(this.options.TypeOfResponse, this.result, { excludeExtraneousValues: true });
|
|
@@ -4341,6 +4360,7 @@ class PagingComponent {
|
|
|
4341
4360
|
this.items = [];
|
|
4342
4361
|
this.Pages = Math.ceil((this.totalRow / this.options.PageSize));
|
|
4343
4362
|
this.items = Array(this.totalRow);
|
|
4363
|
+
this.setText(this.Pages, this.totalRow);
|
|
4344
4364
|
}
|
|
4345
4365
|
}, (error) => {
|
|
4346
4366
|
if (error.status == 401)
|
|
@@ -4364,11 +4384,37 @@ class PagingComponent {
|
|
|
4364
4384
|
}
|
|
4365
4385
|
return originalArray;
|
|
4366
4386
|
}
|
|
4387
|
+
setText(pagesNumber, itemsNumber) {
|
|
4388
|
+
if (this.utilityService.isCurrentLanguageArabic()) {
|
|
4389
|
+
//Set pages text
|
|
4390
|
+
if (pagesNumber < 3 || pagesNumber > 10)
|
|
4391
|
+
this.pagesText = this.utilityService.getResourceValue("Page");
|
|
4392
|
+
else
|
|
4393
|
+
this.pagesText = this.utilityService.getResourceValue("Pages");
|
|
4394
|
+
//Set items text
|
|
4395
|
+
if (itemsNumber < 3 || itemsNumber > 10)
|
|
4396
|
+
this.itemsText = this.utilityService.getResourceValue("Item");
|
|
4397
|
+
else
|
|
4398
|
+
this.itemsText = this.utilityService.getResourceValue("Items");
|
|
4399
|
+
}
|
|
4400
|
+
else {
|
|
4401
|
+
//Set pages text
|
|
4402
|
+
if (pagesNumber > 1)
|
|
4403
|
+
this.pagesText = this.utilityService.getResourceValue("Pages");
|
|
4404
|
+
else
|
|
4405
|
+
this.pagesText = this.utilityService.getResourceValue("Page");
|
|
4406
|
+
//Set items text
|
|
4407
|
+
if (itemsNumber > 1)
|
|
4408
|
+
this.itemsText = this.utilityService.getResourceValue("Items");
|
|
4409
|
+
else
|
|
4410
|
+
this.itemsText = this.utilityService.getResourceValue("Item");
|
|
4411
|
+
}
|
|
4412
|
+
}
|
|
4367
4413
|
}
|
|
4368
4414
|
PagingComponent.decorators = [
|
|
4369
4415
|
{ type: Component, args: [{
|
|
4370
4416
|
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(\"
|
|
4417
|
+
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
4418
|
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
4419
|
},] }
|
|
4374
4420
|
];
|
|
@@ -5343,10 +5389,17 @@ class FormComponent {
|
|
|
5343
5389
|
this.modalService = modalService;
|
|
5344
5390
|
this.ngbActiveModal = ngbActiveModal;
|
|
5345
5391
|
this.router = router;
|
|
5392
|
+
this.isChange = null;
|
|
5393
|
+
this.OnChange = new EventEmitter();
|
|
5346
5394
|
}
|
|
5347
5395
|
ngOnInit() {
|
|
5348
5396
|
this.fromName = this.randomString(5);
|
|
5349
5397
|
}
|
|
5398
|
+
ngAfterViewInit() {
|
|
5399
|
+
this.options.FormGroup.valueChanges.subscribe((es) => {
|
|
5400
|
+
this.OnChange.emit(true);
|
|
5401
|
+
});
|
|
5402
|
+
}
|
|
5350
5403
|
submit() {
|
|
5351
5404
|
this.options.FormGroup.markAllAsTouched();
|
|
5352
5405
|
if (this.options.FormGroup.invalid) {
|
|
@@ -5421,6 +5474,7 @@ FormComponent.ctorParameters = () => [
|
|
|
5421
5474
|
{ type: Router }
|
|
5422
5475
|
];
|
|
5423
5476
|
FormComponent.propDecorators = {
|
|
5477
|
+
OnChange: [{ type: Output }],
|
|
5424
5478
|
options: [{ type: Input }]
|
|
5425
5479
|
};
|
|
5426
5480
|
|
|
@@ -5729,6 +5783,8 @@ var ForceDirection;
|
|
|
5729
5783
|
|
|
5730
5784
|
class ControlOptionsBase {
|
|
5731
5785
|
constructor() {
|
|
5786
|
+
/** Sets an attribute disable="disabled" */
|
|
5787
|
+
this.IsDisabled = false;
|
|
5732
5788
|
/** to set type of view if Control is Vertical or Horizontal */
|
|
5733
5789
|
this.ViewType = null;
|
|
5734
5790
|
/** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
|
|
@@ -5741,6 +5797,8 @@ class DatePickerOptions extends ControlOptionsBase {
|
|
|
5741
5797
|
super(...arguments);
|
|
5742
5798
|
/**To set First Day Of Week to DatePicker */
|
|
5743
5799
|
this.FirstDayOfWeek = 1;
|
|
5800
|
+
/**To set Hour12Timer to DatePicker is 12 Hour or 24 Hour*/
|
|
5801
|
+
this.Hour12Timer = true;
|
|
5744
5802
|
/**To set PickerType to DatePicker is Calendar or Timer Or Both */
|
|
5745
5803
|
this.PickerType = PickerType.Calendar;
|
|
5746
5804
|
/**To set StartView to DatePicker is Year or Month Or Multi-Year */
|
|
@@ -5842,8 +5900,8 @@ class TextBoxOptions extends ControlOptionsBase {
|
|
|
5842
5900
|
super(...arguments);
|
|
5843
5901
|
/** set Range Number to Textbox with type number with From-Value and To-value*/
|
|
5844
5902
|
this.NumberRange = new RangeNumber();
|
|
5845
|
-
/**Prevent AutoComplete of textbox*/
|
|
5846
|
-
this.AutoComplete = "
|
|
5903
|
+
/**Prevent AutoComplete of textbox default value is "on" available values "on" and "off"*/
|
|
5904
|
+
this.AutoComplete = "on";
|
|
5847
5905
|
/** to set Direction of textbox if textbox is Arabic or English */
|
|
5848
5906
|
this.ForceDirection = null;
|
|
5849
5907
|
/** to set Language of textbox if textbox language is Arabic or English */
|
|
@@ -5867,11 +5925,22 @@ class RenderComponentService {
|
|
|
5867
5925
|
constructor(componentFactoryResolver) {
|
|
5868
5926
|
this.componentFactoryResolver = componentFactoryResolver;
|
|
5869
5927
|
}
|
|
5870
|
-
renderDynamicComponent(viewContainerRef, component, group, options) {
|
|
5928
|
+
renderDynamicComponent(viewContainerRef, component, group, options, size = 0) {
|
|
5871
5929
|
let factory = this.componentFactoryResolver.resolveComponentFactory(component);
|
|
5872
5930
|
const componentRef = viewContainerRef.createComponent(factory);
|
|
5873
5931
|
componentRef.instance.group = group;
|
|
5874
5932
|
componentRef.instance.options = options;
|
|
5933
|
+
if (size > 0) {
|
|
5934
|
+
let htmlElement = componentRef.hostView.rootNodes[0];
|
|
5935
|
+
// `element` is the element you want to wrap
|
|
5936
|
+
var parent = htmlElement.parentNode;
|
|
5937
|
+
var wrapper = document.createElement('div');
|
|
5938
|
+
wrapper.className = `col-md-${size}`;
|
|
5939
|
+
// set the wrapper as child (instead of the element)
|
|
5940
|
+
parent.replaceChild(wrapper, htmlElement);
|
|
5941
|
+
// set element as child of wrapper
|
|
5942
|
+
wrapper.appendChild(htmlElement);
|
|
5943
|
+
}
|
|
5875
5944
|
}
|
|
5876
5945
|
}
|
|
5877
5946
|
RenderComponentService.decorators = [
|
|
@@ -6956,6 +7025,8 @@ class MultiLingualTextBoxOptions extends MultilingualControlOptionsBase {
|
|
|
6956
7025
|
this.IconPositionAR = IconPosition.right;
|
|
6957
7026
|
/*multi control placement type*/
|
|
6958
7027
|
this.MultiControlPlacementType = null;
|
|
7028
|
+
/**Prevent AutoComplete of inputs default value is "on" available values "on" and "off"*/
|
|
7029
|
+
this.AutoComplete = "on";
|
|
6959
7030
|
}
|
|
6960
7031
|
}
|
|
6961
7032
|
|