@bnsights/bbsf-controls 1.0.63 → 1.0.65
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 +11 -0
- package/bnsights-bbsf-controls-1.0.65.tgz +0 -0
- package/bnsights-bbsf-controls.metadata.json +1 -1
- package/bundles/bnsights-bbsf-controls.umd.js +234 -24
- package/bundles/bnsights-bbsf-controls.umd.js.map +1 -1
- package/esm2015/lib/Shared/Models/CaptchaStyle.js +3 -0
- package/esm2015/lib/Shared/Models/ConfirmationModalOptions.js +5 -1
- package/esm2015/lib/Shared/Models/ControlOptionsBase.js +1 -1
- package/esm2015/lib/Shared/Models/MultilingualControlOptionsBase.js +1 -1
- package/esm2015/lib/Shared/Models/Recaptcha.js +6 -0
- package/esm2015/lib/Shared/Models/RecaptchaOptions.js +22 -0
- package/esm2015/lib/controls/AutocompleteTextBox/AutocompleteTextBox.component.js +4 -2
- package/esm2015/lib/controls/CheckBox/CheckBox.component.js +2 -2
- package/esm2015/lib/controls/ConfirmationModal/ConfirmationModal.component.js +3 -3
- package/esm2015/lib/controls/DateTimePicker/DateTimePicker.component.js +4 -2
- package/esm2015/lib/controls/DropdownList/DropdownList.component.js +2 -2
- package/esm2015/lib/controls/FileUplaod/FileUplaod.component.js +9 -3
- package/esm2015/lib/controls/HtmlEditor/HtmlEditor.component.js +4 -2
- package/esm2015/lib/controls/ImageUpload/ImageUpload.component.js +10 -4
- package/esm2015/lib/controls/MapAutoComplete/MapAutoComplete.component.js +7 -2
- package/esm2015/lib/controls/MultiLingualHtmlEditor/MultiLingualHtmlEditor.component.js +4 -2
- package/esm2015/lib/controls/MultiLingualTextArea/MultiLingualTextArea.component.js +4 -2
- package/esm2015/lib/controls/MultiLingualTextBox/MultiLingualTextBox.component.js +4 -2
- package/esm2015/lib/controls/Phone/Phone.component.js +2 -2
- package/esm2015/lib/controls/ProfileImageUploader/ProfileImageUploader.component.js +6 -2
- package/esm2015/lib/controls/RadioButton/RadioButton.component.js +4 -2
- package/esm2015/lib/controls/Recaptcha/Recaptcha.component.js +131 -0
- package/esm2015/lib/controls/TagsInput/TagsInput.component.js +3 -2
- package/esm2015/lib/controls/TextArea/TextArea.component.js +2 -2
- package/esm2015/lib/controls/TextBox/TextBox.component.js +2 -2
- package/esm2015/lib/controls/Toggleslide/toggleslide.component.js +2 -1
- package/esm2015/lib/controls/bbsf-controls.module.js +6 -3
- package/esm2015/public-api.js +4 -1
- package/fesm2015/bnsights-bbsf-controls.js +221 -25
- package/fesm2015/bnsights-bbsf-controls.js.map +1 -1
- package/lib/Shared/Models/CaptchaStyle.d.ts +7 -0
- package/lib/Shared/Models/ConfirmationModalOptions.d.ts +2 -0
- package/lib/Shared/Models/ControlOptionsBase.d.ts +2 -0
- package/lib/Shared/Models/MultilingualControlOptionsBase.d.ts +2 -0
- package/lib/Shared/Models/Recaptcha.d.ts +6 -0
- package/lib/Shared/Models/RecaptchaOptions.d.ts +18 -0
- package/lib/controls/Recaptcha/Recaptcha.component.d.ts +37 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
- package/bnsights-bbsf-controls-1.0.63.tgz +0 -0
|
@@ -569,6 +569,8 @@ class DateInputComponent {
|
|
|
569
569
|
if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
|
|
570
570
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
571
571
|
}
|
|
572
|
+
//Use this line to enable two way binding.
|
|
573
|
+
this.options.Value = originalValue;
|
|
572
574
|
this.OnChange.emit(originalValue);
|
|
573
575
|
}
|
|
574
576
|
subscribeDateChanges() {
|
|
@@ -588,7 +590,7 @@ DateInputComponent.controlContainerstatic = null;
|
|
|
588
590
|
DateInputComponent.decorators = [
|
|
589
591
|
{ type: Component, args: [{
|
|
590
592
|
selector: 'BBSF-DateTimePicker',
|
|
591
|
-
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",
|
|
593
|
+
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 {{options.LabelExtraClasses}}\" [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",
|
|
592
594
|
providers: [
|
|
593
595
|
{ provide: OwlDateTimeIntl, useClass: DefaultIntl }
|
|
594
596
|
],
|
|
@@ -764,7 +766,6 @@ class FileUploadComponent {
|
|
|
764
766
|
let file = this.FileLikeObject;
|
|
765
767
|
file.url = element.FileURL;
|
|
766
768
|
this.uploader.addToQueue([file]);
|
|
767
|
-
console.log(this.uploader.queue);
|
|
768
769
|
}
|
|
769
770
|
}
|
|
770
771
|
if (this.options.LabelKey != null && this.options.LabelKey != "")
|
|
@@ -907,6 +908,8 @@ class FileUploadComponent {
|
|
|
907
908
|
this.fileUploadModel.File = AddedFile;
|
|
908
909
|
this.fileUploadFormControl.setValue(this.fileUploadModel);
|
|
909
910
|
this.group.get(this.options.Name).setValue(this.fileUploadModel);
|
|
911
|
+
//Use this line to enable two way binding.
|
|
912
|
+
this.options.Value = this.fileUploadModel;
|
|
910
913
|
}
|
|
911
914
|
else {
|
|
912
915
|
FilesArray.push(AddedFile);
|
|
@@ -918,6 +921,8 @@ class FileUploadComponent {
|
|
|
918
921
|
}
|
|
919
922
|
this.fileUploadFormControl.setValue(this.multipleFileUploadModel);
|
|
920
923
|
this.group.get(this.options.Name).setValue(this.multipleFileUploadModel);
|
|
924
|
+
//Use this line to enable two way binding.
|
|
925
|
+
this.options.Value = this.multipleFileUploadModel;
|
|
921
926
|
}
|
|
922
927
|
};
|
|
923
928
|
let originalValue = this.group.get(this.options.Name).value;
|
|
@@ -936,6 +941,7 @@ class FileUploadComponent {
|
|
|
936
941
|
this.fileUploadFormControl.invalid;
|
|
937
942
|
}
|
|
938
943
|
this.group.get(this.options.Name).setValue(this.fileUploadModel);
|
|
944
|
+
this.options.Value = this.fileUploadModel;
|
|
939
945
|
}
|
|
940
946
|
else {
|
|
941
947
|
if (this.options.Value != null && this.options.Value != undefined) {
|
|
@@ -974,6 +980,8 @@ class FileUploadComponent {
|
|
|
974
980
|
}
|
|
975
981
|
this.fileUploadFormControl.setValue(this.multipleFileUploadModel);
|
|
976
982
|
this.group.get(this.options.Name).setValue(this.multipleFileUploadModel);
|
|
983
|
+
//Use this line to enable two way binding.
|
|
984
|
+
this.options.Value = this.multipleFileUploadModel;
|
|
977
985
|
}
|
|
978
986
|
}
|
|
979
987
|
}
|
|
@@ -981,7 +989,7 @@ FileUploadComponent.controlContainerstatic = null;
|
|
|
981
989
|
FileUploadComponent.decorators = [
|
|
982
990
|
{ type: Component, args: [{
|
|
983
991
|
selector: 'BBSF-FileUplaod',
|
|
984
|
-
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",
|
|
992
|
+
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 {{options.LabelExtraClasses}}\" [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",
|
|
985
993
|
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"]
|
|
986
994
|
},] }
|
|
987
995
|
];
|
|
@@ -1248,6 +1256,8 @@ class MultiLingualTextBoxComponent {
|
|
|
1248
1256
|
// this.EnglishFormControl = englishValue;
|
|
1249
1257
|
this.OnChange.emit(mulitLangModel);
|
|
1250
1258
|
this.group.get(this.options.Name).setValue(mulitLangModel);
|
|
1259
|
+
//Use this line to enable two way binding.
|
|
1260
|
+
this.options.Value = mulitLangModel;
|
|
1251
1261
|
this.MultiLingualTextBoxFormControlHost.ngSubmit.subscribe((value) => {
|
|
1252
1262
|
this.group.markAllAsTouched();
|
|
1253
1263
|
this.markAllAsTouched = true;
|
|
@@ -1406,7 +1416,7 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
|
|
|
1406
1416
|
MultiLingualTextBoxComponent.decorators = [
|
|
1407
1417
|
{ type: Component, args: [{
|
|
1408
1418
|
selector: 'BBSF-MultiLingualTextBox',
|
|
1409
|
-
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)&&IsShowAsteriskInEnglish)\"\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))&&IsShowAsteriskInArabic\" 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",
|
|
1419
|
+
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 {{options.LabelExtraClasses}}\"\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)&&IsShowAsteriskInEnglish)\"\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\" [(ngModel)]=\"options.Value.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 {{options.LabelExtraClasses}}\"\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))&&IsShowAsteriskInArabic\" 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\" [(ngModel)]=\"options.Value.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",
|
|
1410
1420
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
|
|
1411
1421
|
},] }
|
|
1412
1422
|
];
|
|
@@ -1594,7 +1604,7 @@ TextAreaComponent.controlContainerstatic = null;
|
|
|
1594
1604
|
TextAreaComponent.decorators = [
|
|
1595
1605
|
{ type: Component, args: [{
|
|
1596
1606
|
selector: 'BBSF-TextArea',
|
|
1597
|
-
template: "<div class=\"b-control b-textarea\">\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 *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n <div class=\"input-group\">\r\n <textarea class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #TextAreainput></textarea>\r\n <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} words</div>\r\n </div>\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"showCharsLimitMsg\">\r\n <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </span>\r\n </div>\r\n <div class=\"control-desc text-dark\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- <div *ngIf=\"TextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
1607
|
+
template: "<div class=\"b-control b-textarea\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n <div class=\"input-group\">\r\n <textarea class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"TextAreaFormControl.invalid && TextAreaFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" rows=\"{{options.Rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.Cols}}\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\" [(ngModel)]=\"options.Value\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #TextAreainput></textarea>\r\n <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} words</div>\r\n </div>\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"showCharsLimitMsg\">\r\n <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </span>\r\n </div>\r\n <div class=\"control-desc text-dark\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- <div *ngIf=\"TextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
1598
1608
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
|
|
1599
1609
|
},] }
|
|
1600
1610
|
];
|
|
@@ -1862,6 +1872,8 @@ class MultiLingualTextAreaComponent {
|
|
|
1862
1872
|
mulitLangModel.English = englishValue;
|
|
1863
1873
|
this.OnChange.emit(mulitLangModel);
|
|
1864
1874
|
this.group.get(this.options.Name).setValue(mulitLangModel);
|
|
1875
|
+
//Use this line to enable two way binding.
|
|
1876
|
+
this.options.Value = mulitLangModel;
|
|
1865
1877
|
}
|
|
1866
1878
|
showGlobalError() {
|
|
1867
1879
|
this.controlUtility.showGlobalError();
|
|
@@ -2013,7 +2025,7 @@ MultiLingualTextAreaComponent.controlContainerstatic = null;
|
|
|
2013
2025
|
MultiLingualTextAreaComponent.decorators = [
|
|
2014
2026
|
{ type: Component, args: [{
|
|
2015
2027
|
selector: 'BBSF-MultiLingualTextArea',
|
|
2016
|
-
template: "<div class=\"b-control b-multilangual-textarea\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\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+\"in English\"}}\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\"\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\">\r\n <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n (keyup)=\"onTextChange()\"\r\n (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #userinputTextAreaEnglish>\r\n </textarea>\r\n <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n {{getErrorValidation(EnglishTextAreaFormControl.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\r\n <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</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 </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n <label class=\"b-label col-form-label col-sm-12
|
|
2028
|
+
template: "<div class=\"b-control b-multilangual-textarea\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n <div class=\"form-group row\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n <div class=\"row\" *ngIf=\"ShowEngishTextArea\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \"\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+\"in English\"}}\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\"\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\">\r\n <textarea class=\"form-control bnsights-control\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"English\" [hidden]=\"options.IsHideEnglishFields\"\r\n [class.is-invalid]=\"EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched\"\r\n placeholder=\"{{options.EnglishPlaceholder}}\" (change)=\"trimControlValue('En')\"\r\n (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.English\"\r\n (keydown)=\"EnglishWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #userinputTextAreaEnglish>\r\n </textarea>\r\n <div class=\"input-group-append\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"text-muted font-weight-500 float-end word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}</div>\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n {{getErrorValidation(EnglishTextAreaFormControl.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\r\n <!-- <div *ngIf=\"EnglishTextAreaFormControl.valid\">{{resetError()}}</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 </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\">\r\n <div class=\"row\" *ngIf=\"ShowArabicTextArea\">\r\n\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \"\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+\"in Arabic\"}}\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"\r\n 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\">\r\n <textarea class=\"form-control bnsights-control\" dir=\"rtl\" rows=\"{{options.Rows}}\" cols=\"{{options.Cols}}\"\r\n (focus)=\"onArabicFocus(true)\" (focusout)=\"onArabicFocus(false)\"\r\n [hidden]=\"options.IsHideArabicFields\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"Arabic\" rows=\"{{options.Rows}}\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n [class.is-invalid]=\"ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched\"\r\n placeholder=\"{{options.ArabicPlaceholder}}\" (change)=\"trimControlValue('Ar')\"\r\n (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value.Arabic\" \r\n (keydown)=\"ArabicWordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #userinputTextAreaArabic>\r\n </textarea>\r\n <div class=\"input-group-append\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\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\"\r\n *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n {{getErrorValidation(ArabicTextAreaFormControl.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=\"ArabicTextAreaFormControl.valid\">{{resetError()}}</div> -->\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
2017
2029
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
|
|
2018
2030
|
},] }
|
|
2019
2031
|
];
|
|
@@ -2124,7 +2136,7 @@ CheckBoxComponent.decorators = [
|
|
|
2124
2136
|
{ type: Component, args: [{
|
|
2125
2137
|
// tslint:disable-next-line: component-selector
|
|
2126
2138
|
selector: 'BBSF-CheckBox',
|
|
2127
|
-
template: "<div class=\"b-control b-checkbox\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"form-check form-check-custom form-check-solid b-label\">\r\n <input class=\"form-check-input {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\" [checked]=\"options.Value==true?true:null\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n (change)=\"onValueChanged()\"\r\n [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n <span class=\"form-check-label\">{{options.LabelValue}}</span>\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\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- <div *ngIf=\"CheckBoxFormControl.valid\">{{resetError()}} </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 </div>\r\n</div>\r\n",
|
|
2139
|
+
template: "<div class=\"b-control b-checkbox\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"form-check form-check-custom form-check-solid b-label {{options.LabelExtraClasses}}\">\r\n <input class=\"form-check-input {{options.ExtraClasses}} \" dir=\"{{options.ForceDirection==2?'rtl':''}}\" [checked]=\"options.Value==true?true:null\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n (change)=\"onValueChanged()\"\r\n [class.is-invalid]=\"CheckBoxFormControl.invalid && CheckBoxFormControl.touched\"\r\n id=\"{{options.Name}}\" type=\"checkbox\" value=\"options.Value==true?true:null\">\r\n <span class=\"form-check-label\">{{options.LabelValue}}</span>\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\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- <div *ngIf=\"CheckBoxFormControl.valid\">{{resetError()}} </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 </div>\r\n</div>\r\n",
|
|
2128
2140
|
styles: [".form-check-input{width:1.75rem;height:1.75rem;margin-top:-.125rem;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);background-size:60% 60%;transition:background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;position:initial;margin-right:1rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion: reduce){.form-check-input{transition:none}}.form-check-input[type=checkbox]{border-radius:.45em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#b5b5c3;outline:0;box-shadow:none}.form-check-input:checked{background-color:#009ef7;border-color:#009ef7}.form-check-input:checked[type=checkbox]{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23FFFFFF'/%3e%3c/svg%3e\")}.form-check-input:checked[type=radio]{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e\")}.form-check-input[type=checkbox]:indeterminate{background-color:#009ef7;border-color:#009ef7;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}\n"]
|
|
2129
2141
|
},] }
|
|
2130
2142
|
];
|
|
@@ -2295,7 +2307,7 @@ DropdownListComponent.decorators = [
|
|
|
2295
2307
|
{ type: Component, args: [{
|
|
2296
2308
|
// tslint:disable-next-line: component-selector
|
|
2297
2309
|
selector: 'BBSF-DropdownList',
|
|
2298
|
-
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]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n [closeOnSelect]=\"options.SingleSelection ? true : false\">\r\n\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 <div title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\">\r\n <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-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",
|
|
2310
|
+
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 {{options.LabelExtraClasses}} \" [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]=\"options.NotFoundText\" [maxSelectedItems]=\"options.LimitSelection\"\r\n [searchable]=\"options.AllowSearchFilter\" [multiple]=\"!options.SingleSelection\" [readonly]=\"options.IsDisabled\"\r\n [clearable]=\"true\" placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n [selectableGroup]=\"true\" [selectableGroupAsModel]=\"false\" formControlName=\"{{options.Name}}\"\r\n [(ngModel)]=\"options.SelectedItems\" (change)=\"onItemSelect()\" (clear)=\"Clear()\"\r\n [class.is-invalid]=\"DropdownListFormControl.invalid && DropdownListFormControl.touched\"\r\n [closeOnSelect]=\"options.SingleSelection ? true : false\">\r\n\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 <div title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\">\r\n <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-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",
|
|
2299
2311
|
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"]
|
|
2300
2312
|
},] }
|
|
2301
2313
|
];
|
|
@@ -2411,7 +2423,7 @@ PhoneComponent.controlContainerstatic = null;
|
|
|
2411
2423
|
PhoneComponent.decorators = [
|
|
2412
2424
|
{ type: Component, args: [{
|
|
2413
2425
|
selector: 'BBSF-Phone',
|
|
2414
|
-
template: "<div class=\"b-control b-phone\">\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 <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"options.ExtraClasses\" [preferredCountries]=\"options.PreferredCountries\"\r\n [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.EnablePlaceholder\" [searchCountryFlag]=\"options.AllowSearch\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"options.SelectFirstCountry\" [selectedCountryISO]=\"options.SelectedCountryISO\"\r\n \t\t\t\t[separateDialCode]=\"separateDialCode\"\r\n [maxLength]=\"15\"
|
|
2426
|
+
template: "<div class=\"b-control b-phone\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" [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 <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':''}}\" [cssClass]=\"options.ExtraClasses\" [preferredCountries]=\"options.PreferredCountries\"\r\n [enableAutoCountrySelect]=\"true\" [enablePlaceholder]=\"options.EnablePlaceholder\" [searchCountryFlag]=\"options.AllowSearch\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2, SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"options.SelectFirstCountry\" [selectedCountryISO]=\"options.SelectedCountryISO\"\r\n \t\t\t\t[separateDialCode]=\"separateDialCode\"\r\n [maxLength]=\"15\" [(ngModel)]=\"options.Value\"\r\n [phoneValidation]=\"options.PhoneValidation\" [id]=\"options.Name\"\r\n name=\"{{options.Name}}\" formControlName=\"{{options.Name}}\"\r\n (change)=\"onValueChanged()\"\r\n [class.is-invalid]=\"PhoneFormControl.invalid && PhoneFormControl.touched\" aria-invalid=\"true\">\r\n </ngx-intl-tel-input>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(PhoneFormControl.invalid && PhoneFormControl.touched)\">\r\n {{getErrorValidation(PhoneFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <!-- <div *ngIf=\"PhoneFormControl.valid\">{{resetError()}}</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",
|
|
2415
2427
|
styles: [".iti{width:100%}\n"]
|
|
2416
2428
|
},] }
|
|
2417
2429
|
];
|
|
@@ -2478,6 +2490,7 @@ class ToggleslideComponent {
|
|
|
2478
2490
|
}
|
|
2479
2491
|
changeValueToggle() {
|
|
2480
2492
|
this.OnChange.emit(this.SlideValue);
|
|
2493
|
+
this.options.Value = this.SlideValue;
|
|
2481
2494
|
this.ToggleslideFormControl.setValue(this.SlideValue);
|
|
2482
2495
|
if (this.options.PatchFunction && this.options.PatchPath && this.ToggleslideFormControl.valid) {
|
|
2483
2496
|
this.controlUtility.patchControlValue(this.SlideValue, this.options.PatchFunction, this.options.PatchPath);
|
|
@@ -2689,6 +2702,8 @@ class HtmlEditorComponent {
|
|
|
2689
2702
|
if (this.options.PatchFunction && this.options.PatchPath && this.HtmlEditorFormControl.valid) {
|
|
2690
2703
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
2691
2704
|
}
|
|
2705
|
+
//Use this line to enable two way binding.
|
|
2706
|
+
this.options.Value = originalValue;
|
|
2692
2707
|
this.OnChange.emit(originalValue);
|
|
2693
2708
|
}
|
|
2694
2709
|
}
|
|
@@ -2696,7 +2711,7 @@ HtmlEditorComponent.controlContainerstatic = null;
|
|
|
2696
2711
|
HtmlEditorComponent.decorators = [
|
|
2697
2712
|
{ type: Component, args: [{
|
|
2698
2713
|
selector: 'BBSF-HtmlEditor',
|
|
2699
|
-
template: "<div class=\"b-control b-html-editor\">\r\n <div class=\"form-group row validate <!--is-invalid-->\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 col-md-12\" [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 col-md-12\">\r\n <!-- <div [ngxSummernoteDisabled]=\"options.IsDisabled\" ngDefaultControl [ngxSummernote]=\"Config\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{options.Name}}\" (change)=\"onValueChanged()\"\r\n [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" \r\n ></div>\r\n -->\r\n <angular-editor (change)=\"onValueChanged()\" id=\"{{options.Name}}\" [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\" class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" [config]=\"editorConfig\"></angular-editor>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(HtmlEditorFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </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 </div>\r\n </div>\r\n</div>\r\n",
|
|
2714
|
+
template: "<div class=\"b-control b-html-editor\">\r\n <div class=\"form-group row validate <!--is-invalid-->\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 col-md-12 {{options.LabelExtraClasses}}\" [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 col-md-12\">\r\n <!-- <div [ngxSummernoteDisabled]=\"options.IsDisabled\" ngDefaultControl [ngxSummernote]=\"Config\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{options.Name}}\" (change)=\"onValueChanged()\"\r\n [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" \r\n ></div>\r\n -->\r\n <angular-editor (change)=\"onValueChanged()\" id=\"{{options.Name}}\" [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\" class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" [config]=\"editorConfig\"></angular-editor>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(HtmlEditorFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </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 </div>\r\n </div>\r\n</div>\r\n",
|
|
2700
2715
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
|
|
2701
2716
|
},] }
|
|
2702
2717
|
];
|
|
@@ -3019,6 +3034,8 @@ class MultiLingualHtmlEditorComponent {
|
|
|
3019
3034
|
this.OnChange.emit(mulitLangModel);
|
|
3020
3035
|
if (this.arabicValue && this.englishValue)
|
|
3021
3036
|
this.group.get(this.options.Name).setValue(mulitLangModel);
|
|
3037
|
+
//Use this line to enable two way binding.
|
|
3038
|
+
this.options.Value = mulitLangModel;
|
|
3022
3039
|
}
|
|
3023
3040
|
showGlobalError() {
|
|
3024
3041
|
this.controlUtility.showGlobalError();
|
|
@@ -3117,7 +3134,7 @@ MultiLingualHtmlEditorComponent.controlContainerstatic = null;
|
|
|
3117
3134
|
MultiLingualHtmlEditorComponent.decorators = [
|
|
3118
3135
|
{ type: Component, args: [{
|
|
3119
3136
|
selector: 'BBSF-MultiLingualHtmlEditor',
|
|
3120
|
-
template: "<div class=\"b-control b-multilangual-html-editor\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n <label class=\"b-label col-form-label col-sm-12 \" \r\n [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\"\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 \r\n <angular-editor class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(EnglishHtmlEditorFormControl.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 text-dark\">\r\n {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n <label class=\"b-label col-form-label col-sm-12
|
|
3137
|
+
template: "<div class=\"b-control b-multilangual-html-editor\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n\r\n <div class=\"form-group row\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n <div class=\"col-lg-6\">\r\n <div class=\"row\" *ngIf=\"ShowEnglishHtmlEditor\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" \r\n [ngClass]=\"(options.ViewType==1)?'col-md-9':'col-md-3'\"\r\n [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\"\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 \r\n <angular-editor class=\"form-control bnsights-control {{options.ExtraClasses_EN}} \" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(EnglishHtmlEditorFormControl.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 text-dark\">\r\n {{(options.EnglishLabelDescription!=null&&options.EnglishLabelDescription!=\"\")?options.EnglishLabelDescription:options.LabelDescription}}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\">\r\n <div class=\"row\" *ngIf=\"ShowArabicHtmlEditor\">\r\n\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \"\r\n [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\"\r\n [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\"\r\n 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 \r\n\r\n <angular-editor dir=\"rtl\" class=\"form-control bnsights-control {{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n \r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">\r\n {{(options.ArabicLabelDescription!=null&&options.ArabicLabelDescription!=\"\")?options.ArabicLabelDescription:options.LabelDescription}}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n</div>\r\n",
|
|
3121
3138
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}\n"]
|
|
3122
3139
|
},] }
|
|
3123
3140
|
];
|
|
@@ -3252,8 +3269,8 @@ class ImageUploaderComponent {
|
|
|
3252
3269
|
}
|
|
3253
3270
|
this.group.addControl(this.options.Name, new FormControl(''));
|
|
3254
3271
|
this.ImageUploadFormControl = this.group.controls[this.options.Name]; // new FormControl('',validationRules);
|
|
3255
|
-
if (this.options.Value != null)
|
|
3256
|
-
|
|
3272
|
+
// if (this.options.Value != null)
|
|
3273
|
+
// this.group.get(this.options.Name).setValue(this.options.Value);
|
|
3257
3274
|
if (this.options.LabelKey != null && this.options.LabelKey != "")
|
|
3258
3275
|
this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
|
|
3259
3276
|
if (this.options.CustomValidation.length > 0) {
|
|
@@ -3353,11 +3370,14 @@ class ImageUploaderComponent {
|
|
|
3353
3370
|
this.group.get(this.options.Name).setValue(FileObject);
|
|
3354
3371
|
this.files = [];
|
|
3355
3372
|
this.files.push(...event.addedFiles);
|
|
3373
|
+
this.options.Value = FileObject;
|
|
3356
3374
|
}
|
|
3357
3375
|
let originalValue = this.ImageUploadFormControl.value;
|
|
3358
3376
|
if (this.options.PatchFunction && this.options.PatchPath && this.ImageUploadFormControl.valid) {
|
|
3359
3377
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
3360
3378
|
}
|
|
3379
|
+
//Use this line to enable two way binding.
|
|
3380
|
+
this.options.Value = originalValue;
|
|
3361
3381
|
this.OnChange.emit(originalValue);
|
|
3362
3382
|
};
|
|
3363
3383
|
}
|
|
@@ -3376,6 +3396,8 @@ class ImageUploaderComponent {
|
|
|
3376
3396
|
}
|
|
3377
3397
|
this.group.get(this.options.Name).setValue(ItemList);
|
|
3378
3398
|
this.OnChange.emit(this.group.get(this.options.Name).value);
|
|
3399
|
+
//Use this line to enable two way binding.
|
|
3400
|
+
this.options.Value = this.group.get(this.options.Name).value;
|
|
3379
3401
|
}
|
|
3380
3402
|
cropImage() {
|
|
3381
3403
|
let ImageCropperObject = this.angularCropper.cropper.getCroppedCanvas({
|
|
@@ -3407,6 +3429,7 @@ class ImageUploaderComponent {
|
|
|
3407
3429
|
BlobFile.name = this.EventFile.name;
|
|
3408
3430
|
FilesArray.push(FileObject);
|
|
3409
3431
|
this.group.get(this.options.Name).setValue(FileObject);
|
|
3432
|
+
this.options.Value = FileObject;
|
|
3410
3433
|
this.files = [];
|
|
3411
3434
|
this.files.push(BlobFile);
|
|
3412
3435
|
this.openModal(false);
|
|
@@ -3429,7 +3452,7 @@ ImageUploaderComponent.controlContainerstatic = null;
|
|
|
3429
3452
|
ImageUploaderComponent.decorators = [
|
|
3430
3453
|
{ type: Component, args: [{
|
|
3431
3454
|
selector: 'BBSF-ImageUpload',
|
|
3432
|
-
template: "<div class=\"b-control b-image-upload\">\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'\" [hidden]=\"options.HideLabel\">\r\n {{options.LabelValue}}\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">* </span>\r\n\r\n <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n </i>\r\n </ejs-tooltip>\r\n </label>\r\n\r\n <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n <div *ngIf=\"options.AllowDropZone\" style=\"max-width:200px !important; max-height: 200px !important;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"h-100 m-0\" style=\"max-width: 200px !important;\">\r\n <div class=\"h-100\">\r\n <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n\r\n\r\n <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n\r\n <div class=\"ImageUploadClassSelector\" *ngIf=\"!options.AllowDropZone\">\r\n <ngx-dropzone-label class=\"h-100 m-0\" *ngIf=\"files.length==0\">\r\n <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n\r\n <div style=\"border: none !important; max-width:200px !important; max-height: 200px !important;\" class=\" fileSelector customImageUploadPlacment d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n\r\n\r\n\r\n <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{UtilityService.getResourceValue(\"CropImage\")}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" aria-hidden=\"true\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body py-5\">\r\n <div *ngIf=\"imageUrl\">\r\n <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n </angular-cropper>\r\n <img [src]=\"imgwUrl\" />\r\n </div>\r\n <div style=\"text-align:center;\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n <span class=\"fa fa-search-plus\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n <span class=\"fa fa-search-minus\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n <span class=\"fa fa-arrow-left\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n <span class=\"fa fa-arrow-right\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n <span class=\"fa fa-arrow-up\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n <span class=\"fa fa-arrow-down\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n <span class=\"fa fa-undo-alt\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n <i class=\"fa fa-times fa-fw\"></i> {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n <i class=\"fa fa-check fa-fw\"></i>\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-danger Required-text\" *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ImageUploadFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n",
|
|
3455
|
+
template: "<div class=\"b-control b-image-upload\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n {{options.LabelValue}}\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">* </span>\r\n\r\n <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\">\r\n </i>\r\n </ejs-tooltip>\r\n </label>\r\n\r\n <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n\r\n <div *ngIf=\"options.AllowDropZone\" style=\"max-width:200px !important; max-height: 200px !important;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"h-100 m-0\" style=\"max-width: 200px !important;\">\r\n <div class=\"h-100\">\r\n <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n\r\n\r\n <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n\r\n <div class=\"ImageUploadClassSelector\" *ngIf=\"!options.AllowDropZone\">\r\n <ngx-dropzone-label class=\"h-100 m-0\" *ngIf=\"files.length==0\">\r\n <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n\r\n <div style=\"border: none !important; max-width:200px !important; max-height: 200px !important;\" class=\" fileSelector customImageUploadPlacment d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" ngx-dropzone [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\" aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\" [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n\r\n\r\n\r\n <ngx-dropzone-image-preview style=\"max-width:200px !important; max-height: 200px !important;\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n ngProjectAs=\"ngx-dropzone-preview\" class=\"b-img-preview w-100 h-100 m-0\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n {{UtilityService.getResourceValue(\"CropImage\")}}\r\n </h4>\r\n <button type=\"button\" class=\"btn-close\" aria-hidden=\"true\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body py-5\">\r\n <div *ngIf=\"imageUrl\">\r\n <angular-cropper #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n </angular-cropper>\r\n <img [src]=\"imgwUrl\" />\r\n </div>\r\n <div style=\"text-align:center;\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n <span class=\"fa fa-search-plus\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n <span class=\"fa fa-search-minus\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n <span class=\"fa fa-arrow-left\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n <span class=\"fa fa-arrow-right\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n <span class=\"fa fa-arrow-up\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n <span class=\"fa fa-arrow-down\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n <span class=\"fa fa-undo-alt\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n <i class=\"fa fa-times fa-fw\"></i> {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n <i class=\"fa fa-check fa-fw\"></i>\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-danger Required-text\" *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ImageUploadFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n",
|
|
3433
3456
|
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%}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.ImageUploadClassSelector img{cursor:pointer}.d-inline-flex.h-auto.m-0.overflow-hidden.w-auto.ng-untouched.ng-pristine.ng-valid{border-radius:40px;border-color:#c7c7c7}\n"]
|
|
3434
3457
|
},] }
|
|
3435
3458
|
];
|
|
@@ -3650,6 +3673,8 @@ class ProfileImageUploaderComponent {
|
|
|
3650
3673
|
if (this.options.PatchFunction && this.options.PatchPath && this.group.get(this.options.Name).valid) {
|
|
3651
3674
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
3652
3675
|
}
|
|
3676
|
+
//Use this line to enable two way binding.
|
|
3677
|
+
this.options.Value = originalValue;
|
|
3653
3678
|
this.OnChange.emit(originalValue);
|
|
3654
3679
|
};
|
|
3655
3680
|
}
|
|
@@ -3666,6 +3691,7 @@ class ProfileImageUploaderComponent {
|
|
|
3666
3691
|
}
|
|
3667
3692
|
this.group.get(this.options.Name).setValue(ItemList);
|
|
3668
3693
|
this.OnChange.emit(this.group.get(this.options.Name).value);
|
|
3694
|
+
this.options.Value = this.group.get(this.options.Name).value;
|
|
3669
3695
|
}
|
|
3670
3696
|
cropImage() {
|
|
3671
3697
|
this.ProfilePictureDTO.FileName = this.EventFile.name;
|
|
@@ -3752,6 +3778,7 @@ class ProfileImageUploaderComponent {
|
|
|
3752
3778
|
default:
|
|
3753
3779
|
break;
|
|
3754
3780
|
}
|
|
3781
|
+
this.options.Value = this.ProfilePictureDTO;
|
|
3755
3782
|
};
|
|
3756
3783
|
}
|
|
3757
3784
|
rotateImage(degree) {
|
|
@@ -3771,7 +3798,7 @@ ProfileImageUploaderComponent.controlContainerstatic = null;
|
|
|
3771
3798
|
ProfileImageUploaderComponent.decorators = [
|
|
3772
3799
|
{ type: Component, args: [{
|
|
3773
3800
|
selector: 'BBSF-ProfileImageUploader',
|
|
3774
|
-
template: "<div class=\"b-control b-profile-image-upload\">\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'\" [hidden]=\"options.HideLabel\">\r\n {{options.LabelValue}}\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\"></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 *ngIf=\"options.AllowDropZone\" class=\"ProfileDropBox d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" style=\"width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"rounded-circle w-100 h-100 m-0\">\r\n <div class=\"h-100\">\r\n <img [src]=\"ImageSource\" class=\"w-100 rounded-circle\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n class=\"w-100 h-100 m-0\">\r\n\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n\r\n <div class=\"ProfileImageUploadClassSelector\" *ngIf=\"!options.AllowDropZone\" >\r\n <ngx-dropzone-label style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0\" *ngIf=\"files.length==0\" >\r\n <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n \r\n <div class=\"ProfileDropBox rounded-circle {{options.ExtraClasses}}\" style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n \r\n <ngx-dropzone-image-preview class=\"rounded-circle w-100 h-100 m-0\" *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n >\r\n\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n Crop Image\r\n </h4>\r\n </div>\r\n <div class=\"modal-body py-5\">\r\n <div *ngIf=\"imageUrl\">\r\n <angular-cropper class=\"ProfileDropBox\" #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n </angular-cropper>\r\n <img [src]=\"imgwUrl\" />\r\n </div>\r\n <div style=\"text-align:center;\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n <span class=\"fa fa-search-plus\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n <span class=\"fa fa-search-minus\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n <span class=\"fa fa-arrow-left\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n <span class=\"fa fa-arrow-right\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n <span class=\"fa fa-arrow-up\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n <span class=\"fa fa-arrow-down\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n <span class=\"fa fa-undo-alt\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n <i class=\"fa fa-check fa-fw\"></i>\r\n Crop\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n \r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n</div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n </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 </div>\r\n\r\n </div>\r\n</div>\r\n",
|
|
3801
|
+
template: "<div class=\"b-control b-profile-image-upload\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" [hidden]=\"options.HideLabel\">\r\n {{options.LabelValue}}\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span>\r\n\r\n <ejs-tooltip id=\"tooltip\" content='{{ValidationMessage}}' tipPointerPosition='Middle'>\r\n <i class=\"fa fa-info-circle\" data-plugin=\"tooltip\" data-html=\"true\"></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 *ngIf=\"options.AllowDropZone\" class=\"ProfileDropBox d-inline-flex h-auto w-auto overflow-hidden m-0 {{options.ExtraClasses}}\" style=\"width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"rounded-circle w-100 h-100 m-0\">\r\n <div class=\"h-100\">\r\n <img [src]=\"ImageSource\" class=\"w-100 rounded-circle\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n class=\"w-100 h-100 m-0\">\r\n\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n\r\n <div class=\"ProfileImageUploadClassSelector\" *ngIf=\"!options.AllowDropZone\" >\r\n <ngx-dropzone-label style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" class=\"d-inline-flex h-auto w-auto overflow-hidden m-0\" *ngIf=\"files.length==0\" >\r\n <div style=\"max-width:200px !important; max-height: 200px !important;\" class=\"h-100 file-fake-input\" #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" class=\"h-100 w-100\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n \r\n <div class=\"ProfileDropBox rounded-circle {{options.ExtraClasses}}\" style=\" border: none !important;width:200px;height:200px;overflow:inherit;\" ngx-dropzone\r\n [disabled]=\"options.IsDisabled\" [accept]=\"AcceptedType\" (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\" [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n \r\n <ngx-dropzone-image-preview class=\"rounded-circle w-100 h-100 m-0\" *ngFor=\"let f of files\" ngProjectAs=\"ngx-dropzone-preview\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\"\r\n >\r\n\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"mdlSample\" class=\"modal fade\" role=\"dialog\" style=\"z-index: 11 !important ;\"\r\n [ngStyle]=\"{'display': mdlSampleIsOpen ? 'block' : 'none', 'opacity': 1}\">\r\n <div class=\"modal-dialog modal-lg\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h4 class=\"modal-title\">\r\n Crop Image\r\n </h4>\r\n </div>\r\n <div class=\"modal-body py-5\">\r\n <div *ngIf=\"imageUrl\">\r\n <angular-cropper class=\"ProfileDropBox\" #angularCropper [cropperOptions]=\"config\" [imageUrl]=\"imageUrl\">\r\n </angular-cropper>\r\n <img [src]=\"imgwUrl\" />\r\n </div>\r\n <div style=\"text-align:center;\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"0.1\" title=\"Zoom In\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(0.1)\">\r\n <span class=\"fa fa-search-plus\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"zoomImage(-0.1)\" class=\"btn btn-default\" data-method=\"zoom\" data-option=\"-0.1\" title=\"Zoom Out\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.zoom(-0.1)\">\r\n <span class=\"fa fa-search-minus\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"moveImage(-10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"-10\" data-second-option=\"0\" title=\"Move Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(-10, 0)\" aria-describedby=\"tooltip631939\">\r\n <span class=\"fa fa-arrow-left\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(10,0)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"10\" data-second-option=\"0\" title=\"Move Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(10, 0)\">\r\n <span class=\"fa fa-arrow-right\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,-10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"-10\" title=\"Move Up\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, -10)\">\r\n <span class=\"fa fa-arrow-up\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"moveImage(0,10)\" class=\"btn btn-default\" data-method=\"move\" data-option=\"0\" data-second-option=\"10\" title=\"Move Down\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.move(0, 10)\">\r\n <span class=\"fa fa-arrow-down\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"rotateImage(-45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"-45\" title=\"Rotate Left\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(-45)\" aria-describedby=\"tooltip236044\">\r\n <span class=\"fa fa-undo-alt\"></span>\r\n </span>\r\n </button>\r\n <button type=\"button\" (click)=\"rotateImage(45)\" class=\"btn btn-default\" data-method=\"rotate\" data-option=\"45\" title=\"Rotate Right\">\r\n <span class=\"docs-tooltip\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"cropper.rotate(45)\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-default\" (click)=\"openModal(false)\">\r\n <i class=\"fa fa-times fa-fw\"></i> Cancel\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-success\">\r\n <i class=\"fa fa-check fa-fw\"></i>\r\n Crop\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n \r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n</div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n </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 </div>\r\n\r\n </div>\r\n</div>\r\n",
|
|
3775
3802
|
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%}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.modal-content{position:relative;background-color:#fefefe;margin:auto;padding:0;border:1px solid #888;width:80%;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}@keyframes animatetop{0%{top:-300px;opacity:0}to{top:0;opacity:1}}.close{color:#fff;float:right;font-size:28px;font-weight:bold}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.modal-body{padding:2px 16px}\n"]
|
|
3776
3803
|
},] }
|
|
3777
3804
|
];
|
|
@@ -3987,6 +4014,8 @@ class AutocompleteTextBoxComponent {
|
|
|
3987
4014
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
3988
4015
|
}
|
|
3989
4016
|
this.OnChange.emit(this.AutocompleteTextBoxControl.value);
|
|
4017
|
+
//Use this line to enable two way binding.
|
|
4018
|
+
this.options.Value = this.AutocompleteTextBoxControl.value;
|
|
3990
4019
|
}
|
|
3991
4020
|
}
|
|
3992
4021
|
}
|
|
@@ -4015,7 +4044,7 @@ AutocompleteTextBoxComponent.decorators = [
|
|
|
4015
4044
|
{ type: Component, args: [{
|
|
4016
4045
|
// tslint:disable-next-line: component-selector
|
|
4017
4046
|
selector: 'BBSF-AutocompleteTextBox',
|
|
4018
|
-
template: "<div class=\"b-control b-auto-complete-textbox\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\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\r\n <!-- <input \r\n[(ngModel)]=\"Search\"\r\n value=\"{{Search}}\" \r\n autocomplete=\"off\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n typeaheadOptionField=\"{{Value}}\"\r\n [typeahead]=\"suggestions$\"\r\n [typeaheadAsync]=\"true\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\" /> -->\r\n <!-- \r\n <input ngxTypeahead autocomplete=\"off\"\r\n value=\"{{Search}}\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\" (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n <ng-autocomplete *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n </ng-autocomplete>\r\n\r\n <ng-autocomplete *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n </ng-autocomplete>\r\n\r\n\r\n\r\n <ng-template #itemTemplate let-item>\r\n <img *ngIf=\"options.ItemWithImage\" style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n <a [innerHTML]=\"item.value\"></a>\r\n </ng-template>\r\n\r\n <ng-template #notFoundTemplate let-notFound>\r\n <div [innerHTML]=\"notFound\"></div>\r\n </ng-template>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n {{getErrorValidation(AutocompleteTextBoxControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}</div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
4047
|
+
template: "<div class=\"b-control b-auto-complete-textbox\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [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\r\n <!-- <input \r\n[(ngModel)]=\"Search\"\r\n value=\"{{Search}}\" \r\n autocomplete=\"off\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n typeaheadOptionField=\"{{Value}}\"\r\n [typeahead]=\"suggestions$\"\r\n [typeaheadAsync]=\"true\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (typeaheadOnSelect)=\"handleResultSelected($event)\" (blur)=\"onBlur($event.target.value)\" /> -->\r\n <!-- \r\n <input ngxTypeahead autocomplete=\"off\"\r\n value=\"{{Search}}\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" [taUrl]=\"options.ActionURL\"\r\n [taParams]=\"options.Params\" taQueryParam=\"{{QueryParam}}\" taApi=\"{{Api}}\" taListItemLabel=\"{{Value}}\" (taSelected)=\"handleResultSelected($event)\"> -->\r\n\r\n\r\n\r\n <ng-autocomplete *ngIf=\"!options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n [notFoundTemplate]=\"notFoundTemplate\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n </ng-autocomplete>\r\n\r\n <ng-autocomplete *ngIf=\"options.AllowNewSelection\" [data]=\"dataList\" [initialValue]=\"SelectedValue\"\r\n [searchKeyword]=\"keyword\" placeholder=\"{{options.Placeholder}}\" (selected)='selectEvent($event)'\r\n (inputChanged)='onChangeSearch($event)' historyIdentifier=\"dataList\" [itemTemplate]=\"itemTemplate\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n formControlName=\"{{options.Name}}\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n [class.is-invalid]=\"AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched\">\r\n </ng-autocomplete>\r\n\r\n\r\n\r\n <ng-template #itemTemplate let-item>\r\n <img *ngIf=\"options.ItemWithImage\" style=\"border-radius:50%; height:40px; width: 40px; float:left; margin-left:5px ; margin-top: 5px;margin-right: 5px;\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n <a [innerHTML]=\"item.value\"></a>\r\n </ng-template>\r\n\r\n <ng-template #notFoundTemplate let-notFound>\r\n <div [innerHTML]=\"notFound\"></div>\r\n </ng-template>\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n {{getErrorValidation(AutocompleteTextBoxControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}</div>\r\n\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
4019
4048
|
styles: [""]
|
|
4020
4049
|
},] }
|
|
4021
4050
|
];
|
|
@@ -4248,6 +4277,7 @@ class TagsInputComponent {
|
|
|
4248
4277
|
if (this.options.PatchFunction && this.options.PatchPath && this.TagsFormControl.valid) {
|
|
4249
4278
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
4250
4279
|
}
|
|
4280
|
+
this.options.Value = this.tags;
|
|
4251
4281
|
this.group.get(this.options.Name).setValue(this.tags);
|
|
4252
4282
|
this.TagsFormControl.updateValueAndValidity();
|
|
4253
4283
|
this.group.updateValueAndValidity();
|
|
@@ -4276,7 +4306,7 @@ TagsInputComponent.decorators = [
|
|
|
4276
4306
|
{ type: Component, args: [{
|
|
4277
4307
|
// tslint:disable-next-line: component-selector
|
|
4278
4308
|
selector: 'BBSF-TagsInput',
|
|
4279
|
-
template: "<div class=\"b-control b-tags-input\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\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 <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n <b-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" formControlName=\"tags\"\r\n [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n </b-tags-input>\r\n <div class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
4309
|
+
template: "<div class=\"b-control b-tags-input\">\r\n <div class=\"form-group validate is-invalid\" [formGroup]=\"group\">\r\n <div class=\"form-group row\" [formGroup]=\"TagsFormGroup\">\r\n\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [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 <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n <b-tags-input id=\"typeahead-http\" type=\"text\" class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\" [disabled]=\"options.IsDisabled\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" formControlName=\"tags\"\r\n [class.is-invalid]=\"TagsFormControl.invalid && TagsFormControl.touched\" placeholder=\"{{options.Placeholder}}\"\r\n id=\"{{options.Name}}\" (onTagsChanged)=\"onTagsChanged($event)\" [(ngModel)]=\"tags\"\r\n removeLastOnBackspace=\"{{options.RemoveLastOnBackspace}}\" (onNoOptionsMatch)=\"onNoOptionsMatch($event)\"\r\n [options]=\"searchFunctionFactory(SearchKey.selected)\" #SearchKey\r\n scrollableOptions=\"{{options.ScrollableOptions}}\" scrollableOptionsInView=\"{{options.MaxSearchResultsCount}}\"\r\n (keydown)=\"AddTag($event,SearchKey)\" [ViewMode]=\"options.TagInputMode\"\r\n maxTags=\"{{options.MaxNumberTags}}\" minLengthBeforeOptions=\"{{options.MinSearchLength}}\"\r\n [showDescription]=\"options.ShowDescription\" [defaultImageURL]=\"options.DefaultImgUrl\" name=\"tags\"\r\n (onBlurInput)=\"onTagsInputBlur(SearchKey)\">\r\n </b-tags-input>\r\n <div class=\"text-danger Required-text\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
4280
4310
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
|
|
4281
4311
|
},] }
|
|
4282
4312
|
];
|
|
@@ -4829,6 +4859,8 @@ class RadioButtonComponent {
|
|
|
4829
4859
|
if (this.options.PatchFunction && this.options.PatchPath && this.RadioButtonFormControl.valid) {
|
|
4830
4860
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
4831
4861
|
}
|
|
4862
|
+
//Use this line to enable two way binding.
|
|
4863
|
+
this.options.Value = originalValue;
|
|
4832
4864
|
this.OnChange.emit(originalValue);
|
|
4833
4865
|
}
|
|
4834
4866
|
}
|
|
@@ -4837,7 +4869,7 @@ RadioButtonComponent.decorators = [
|
|
|
4837
4869
|
{ type: Component, args: [{
|
|
4838
4870
|
// tslint:disable-next-line: component-selector
|
|
4839
4871
|
selector: 'BBSF-RadioButton',
|
|
4840
|
-
template: "<div class=\"b-control b-radio-button\">\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 <div class=\"col-md-12\">\r\n\r\n <!-- <label *ngFor=\"let item of options.Items\">\r\n <input type=\"radio\" value=\"{{item.Value}}\"\r\n [checked]=\"options.Value!= null&&(options.Value.Value == item.Value)\"\r\n class=\"{{options.ExtraClasses}}\r\n \"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"RadioButtonFormControl.invalid && RadioButtonFormControl.touched\"\r\n id=\"{{options.Name}}\">\r\n <span class=\"ml-2\">{{item.Text}}</span>\r\n </label> -->\r\n\r\n <div class=\"custom-control custom-radio custom-control-inline\" *ngFor=\"let item of options.Items\">\r\n <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\" class=\"custom-control-input {{options.ExtraClasses}}\"\r\n [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\" (change)=\"onValueChanged()\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\">\r\n <label class=\"custom-control-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n </div>\r\n\r\n <!-- <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span> -->\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n",
|
|
4872
|
+
template: "<div class=\"b-control b-radio-button\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [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 <div class=\"col-md-12\">\r\n\r\n <!-- <label *ngFor=\"let item of options.Items\">\r\n <input type=\"radio\" value=\"{{item.Value}}\"\r\n [checked]=\"options.Value!= null&&(options.Value.Value == item.Value)\"\r\n class=\"{{options.ExtraClasses}}\r\n \"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n [class.is-invalid]=\"RadioButtonFormControl.invalid && RadioButtonFormControl.touched\"\r\n id=\"{{options.Name}}\">\r\n <span class=\"ml-2\">{{item.Text}}</span>\r\n </label> -->\r\n\r\n <div class=\"custom-control custom-radio custom-control-inline\" *ngFor=\"let item of options.Items\">\r\n <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\" class=\"custom-control-input {{options.ExtraClasses}}\"\r\n [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\" (change)=\"onValueChanged()\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" [(ngModel)]=\"options.Value\" formControlName=\"{{options.Name}}\">\r\n <label class=\"custom-control-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n </div>\r\n\r\n <!-- <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger Required-text\" aria-required=\"true\">*</span> -->\r\n\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"control-desc text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n",
|
|
4841
4873
|
styles: [".kt-checkbox-list .kt-checkbox{text-align:left;display:block}.form-group label{font-size:1rem;font-weight:400}.kt-checkbox{position:relative;padding-left:30px;margin-bottom:10px;cursor:pointer;transition:all .3s ease}.custom-radio .custom-control-label:after{top:3px;left:-20px}\n"]
|
|
4842
4874
|
},] }
|
|
4843
4875
|
];
|
|
@@ -5099,7 +5131,7 @@ TextboxComponent.controlContainerstatic = null;
|
|
|
5099
5131
|
TextboxComponent.decorators = [
|
|
5100
5132
|
{ type: Component, args: [{
|
|
5101
5133
|
selector: 'BBSF-TextBox',
|
|
5102
|
-
template: "<div class=\"b-control b-textbox\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n <label class=\"b-label col-form-label col-sm-12 \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern!=null&&MaskPattern!=''\">\r\n <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <input [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n type=\"{{getInputType(options.Type)}}\"\r\n [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #userinput>\r\n <div class=\"input-group-append\">\r\n <span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n </div>\r\n\r\n <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern==null||MaskPattern==''\">\r\n <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==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 {{options.ExtraClasses}} \"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n #userinput>\r\n <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n </div>\r\n <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"showCharsLimitMsg\">\r\n <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </span>\r\n </div>\r\n <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
5134
|
+
template: "<div class=\"b-control b-textbox\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern!=null&&MaskPattern!=''\">\r\n <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==1)?'left-icon':'right-icon'\" *ngIf=\"options.Icon!=null\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <input [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n class=\"form-control bnsights-control {{options.ExtraClasses}}\"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.Name}}\"\r\n type=\"{{getInputType(options.Type)}}\" [(ngModel)]=\"options.Value\"\r\n [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [readonly]=\"options.IsReadonly\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #userinput>\r\n <div class=\"input-group-append\">\r\n <span class=\"input-group-text\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <div class=\"text-muted font-weight-500 word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n\r\n </div>\r\n\r\n <div class=\"input-group align-items-center\" *ngIf=\"MaskPattern==null||MaskPattern==''\">\r\n <div class=\"svg svg-icon-grey\" [ngClass]=\"(options.IconPosition==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 {{options.ExtraClasses}} \"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n maxlength=\"{{options.MaxLength}}\" minlength=\"{{options.MinLength}}\"\r\n aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"{{getInputType(options.Type)}}\"\r\n [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\" [(ngModel)]=\"options.Value\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\" [readonly]=\"options.IsReadonly\"\r\n #userinput>\r\n <div class=\"input-group-append\" *ngIf=\"options.EnableCopyToClipboard\">\r\n <span class=\"input-group-text\" (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <div class=\"text-muted font-weight-500 word-count float-end\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n </div>\r\n <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"showCharsLimitMsg\">\r\n <span class=\"badge b-character-warning float-end\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </span>\r\n </div>\r\n <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n</div>\r\n",
|
|
5103
5135
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
|
|
5104
5136
|
},] }
|
|
5105
5137
|
];
|
|
@@ -5391,12 +5423,15 @@ class MapAutoCompleteComponent {
|
|
|
5391
5423
|
if (this.options.PatchFunction && this.options.PatchPath && this.MapAutoCompleteFormControl.valid) {
|
|
5392
5424
|
this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
|
|
5393
5425
|
}
|
|
5426
|
+
//Use this line to enable two way binding.
|
|
5427
|
+
this.options.Value = this.MapAutoCompleteModel;
|
|
5394
5428
|
}
|
|
5395
5429
|
GermanAddressMapped(result) {
|
|
5396
5430
|
if (result.type) {
|
|
5397
5431
|
if (result.target.value == "") {
|
|
5398
5432
|
this.MapAutoCompleteFormControl.setValue(result);
|
|
5399
5433
|
this.group.controls[this.options.Name].setValue(result);
|
|
5434
|
+
this.options.Value = result;
|
|
5400
5435
|
}
|
|
5401
5436
|
return;
|
|
5402
5437
|
}
|
|
@@ -5409,13 +5444,15 @@ class MapAutoCompleteComponent {
|
|
|
5409
5444
|
this.MapAutoCompleteFormControl.setValue(this.MapAutoCompleteModel);
|
|
5410
5445
|
this.group.controls[this.options.Name].setValue(this.MapAutoCompleteModel);
|
|
5411
5446
|
this.OnChange.emit(this.MapAutoCompleteFormControl.value);
|
|
5447
|
+
//Use this line to enable two way binding.
|
|
5448
|
+
this.options.Value = this.MapAutoCompleteModel;
|
|
5412
5449
|
}
|
|
5413
5450
|
}
|
|
5414
5451
|
MapAutoCompleteComponent.controlContainerstatic = null;
|
|
5415
5452
|
MapAutoCompleteComponent.decorators = [
|
|
5416
5453
|
{ type: Component, args: [{
|
|
5417
5454
|
selector: 'BBSF-MapAutoComplete',
|
|
5418
|
-
template: "<div class=\"b-control b-map-auto-complete\">\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 <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n <input class=\"form-control bnsights-control {{options.ExtraClasses}} \" [value]=\"MapAutoCompleteModel.Text\"\r\n [address]=\"MapAutoCompleteModel.Text\" value=\"{{MapAutoCompleteModel.Text}}\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\"\r\n [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(MapAutoCompleteFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}</div>\r\n\r\n </div>\r\n </div>\r\n</div>",
|
|
5455
|
+
template: "<div class=\"b-control b-map-auto-complete\">\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}}\" [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 <div class=\"col-sm-12\" [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\">\r\n <input class=\"form-control bnsights-control {{options.ExtraClasses}} \" [value]=\"MapAutoCompleteModel.Text\"\r\n [address]=\"MapAutoCompleteModel.Text\" value=\"{{MapAutoCompleteModel.Text}}\" aria-describedby=\"email-error\"\r\n aria-invalid=\"true\"\r\n [class.is-invalid]=\"MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" (keyup)=\"GermanAddressMapped($event)\"\r\n matGoogleMapsAutocomplete #search (onAutocompleteSelected)=\"AutocompleteSelected($event)\"\r\n (onLocationSelected)=\"LocationSelected($event)\" (onGermanAddressMapped)=\"GermanAddressMapped($event)\" />\r\n <div class=\"text-danger Required-text\"\r\n *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(MapAutoCompleteFormControl.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 text-dark\">{{options.LabelDescription}}</div>\r\n </div>\r\n\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n {{resetError()}}</div>\r\n\r\n </div>\r\n </div>\r\n</div>",
|
|
5419
5456
|
styles: [".example-form{min-width:150px;max-width:500px;width:100%}.example-full-width{width:100%}.flip_V{transform:scaleY(-1)}\n"]
|
|
5420
5457
|
},] }
|
|
5421
5458
|
];
|
|
@@ -5755,12 +5792,12 @@ class ConfirmationModalComponent {
|
|
|
5755
5792
|
text: this.options.ConfirmationBody,
|
|
5756
5793
|
icon: this.icon,
|
|
5757
5794
|
iconColor: this.btnColor,
|
|
5758
|
-
showCancelButton: true,
|
|
5759
5795
|
confirmButtonColor: this.btnColor,
|
|
5760
5796
|
cancelButtonColor: '#f5f8fa',
|
|
5761
5797
|
cancelButtonText: this.utilityService.getResourceValue("CancelLabel"),
|
|
5762
5798
|
confirmButtonText: this.options.SubmitButtonText,
|
|
5763
|
-
|
|
5799
|
+
showCancelButton: this.options.showCancelButton,
|
|
5800
|
+
showCloseButton: this.options.showCloseButton,
|
|
5764
5801
|
}).then((result) => {
|
|
5765
5802
|
if (result.isConfirmed) {
|
|
5766
5803
|
this.submit();
|
|
@@ -7390,6 +7427,139 @@ BTagsInputComponent.propDecorators = {
|
|
|
7390
7427
|
onBlurInput: [{ type: Output }]
|
|
7391
7428
|
};
|
|
7392
7429
|
|
|
7430
|
+
class RecaptchaModel {
|
|
7431
|
+
constructor() {
|
|
7432
|
+
this.ImageJpeg = [];
|
|
7433
|
+
}
|
|
7434
|
+
}
|
|
7435
|
+
|
|
7436
|
+
class CaptchaStyle {
|
|
7437
|
+
}
|
|
7438
|
+
|
|
7439
|
+
class RecaptchaComponent {
|
|
7440
|
+
constructor(controlUtility, requestHandlerService, recaptchaControlHost, UtilityService, controlValidationService, globalSettings) {
|
|
7441
|
+
this.controlUtility = controlUtility;
|
|
7442
|
+
this.requestHandlerService = requestHandlerService;
|
|
7443
|
+
this.recaptchaControlHost = recaptchaControlHost;
|
|
7444
|
+
this.UtilityService = UtilityService;
|
|
7445
|
+
this.controlValidationService = controlValidationService;
|
|
7446
|
+
this.globalSettings = globalSettings;
|
|
7447
|
+
this.OnChange = new EventEmitter();
|
|
7448
|
+
this.validationRules = [];
|
|
7449
|
+
this.validationRulesAsync = [];
|
|
7450
|
+
this.recaptchaModel = new RecaptchaModel();
|
|
7451
|
+
this.resetError = () => {
|
|
7452
|
+
this.controlValidationService.RemoveGlobalError();
|
|
7453
|
+
};
|
|
7454
|
+
//External Method
|
|
7455
|
+
this.RemoveRequiredValidation = () => {
|
|
7456
|
+
this.controlUtility.RemoveRequiredValidation(this.ReCaptchaFormControl, this.validationRules, this.options);
|
|
7457
|
+
};
|
|
7458
|
+
//External Method
|
|
7459
|
+
this.AddRequiredValidation = () => {
|
|
7460
|
+
this.controlUtility.AddRequiredValidation(this.ReCaptchaFormControl, this.validationRules, this.options);
|
|
7461
|
+
};
|
|
7462
|
+
//External Method
|
|
7463
|
+
this.RemoveCustomValidation = (CustomValidation) => {
|
|
7464
|
+
this.controlUtility.RemoveCustomValidation(this.ReCaptchaFormControl, this.validationRules, CustomValidation);
|
|
7465
|
+
};
|
|
7466
|
+
//External Method
|
|
7467
|
+
this.AddCustomValidation = (CustomValidation) => {
|
|
7468
|
+
this.controlUtility.AddCustomValidation(this.ReCaptchaFormControl, this.validationRules, CustomValidation);
|
|
7469
|
+
};
|
|
7470
|
+
//External Method
|
|
7471
|
+
this.IsValid = () => {
|
|
7472
|
+
this.controlUtility.IsValid(this.ReCaptchaFormControl);
|
|
7473
|
+
};
|
|
7474
|
+
}
|
|
7475
|
+
ngOnInit() {
|
|
7476
|
+
this.controlValidationService.isCreatedBefor = false;
|
|
7477
|
+
this.loadImage();
|
|
7478
|
+
if (!this.options.ViewType)
|
|
7479
|
+
this.options.ViewType = this.globalSettings.ViewType;
|
|
7480
|
+
this.group.addControl(this.options.Name, new FormControl(''));
|
|
7481
|
+
this.ReCaptchaFormControl = this.group.controls[this.options.Name]; // new FormControl('',validationRules);
|
|
7482
|
+
if (this.options.LabelKey != null && this.options.LabelKey != "")
|
|
7483
|
+
this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
|
|
7484
|
+
if (this.options.IsRequired) {
|
|
7485
|
+
this.validationRules.push(Validators.required);
|
|
7486
|
+
}
|
|
7487
|
+
if (this.options.CustomValidation.length > 0) {
|
|
7488
|
+
let Validations = this.options.CustomValidation;
|
|
7489
|
+
for (let index = 0; index < Validations.length; index++) {
|
|
7490
|
+
const Validation = Validations[index];
|
|
7491
|
+
this.validationRules.push(Validation.functionBody);
|
|
7492
|
+
}
|
|
7493
|
+
}
|
|
7494
|
+
this.ReCaptchaFormControl.setValidators(this.validationRules);
|
|
7495
|
+
this.ReCaptchaFormControl.setAsyncValidators(this.validationRulesAsync);
|
|
7496
|
+
if (this.options.IsDisabled) {
|
|
7497
|
+
this.ReCaptchaFormControl.disable();
|
|
7498
|
+
}
|
|
7499
|
+
this.recaptchaControlHost.ngSubmit.subscribe((value) => {
|
|
7500
|
+
this.group.markAllAsTouched();
|
|
7501
|
+
this.markAllAsTouched = true;
|
|
7502
|
+
});
|
|
7503
|
+
}
|
|
7504
|
+
loadImage() {
|
|
7505
|
+
let style = new CaptchaStyle();
|
|
7506
|
+
style.BackgroundColorPrimary = this.options.BackgroundColorPrimary;
|
|
7507
|
+
style.BackgroundColorSecondary = this.options.BackgroundColorSecondary;
|
|
7508
|
+
style.TextColorPrimary = this.options.TextColorPrimary;
|
|
7509
|
+
style.TextColorSecondary = this.options.TextColorSecondary;
|
|
7510
|
+
style.FontSize = this.options.FontSize;
|
|
7511
|
+
let requestOptionsModel = new RequestOptionsModel();
|
|
7512
|
+
requestOptionsModel.disableBlockUI = true;
|
|
7513
|
+
requestOptionsModel.disableSuccessNotification = true;
|
|
7514
|
+
this.requestHandlerService.post(this.options.ActionURL, style, null, null, requestOptionsModel).subscribe((res) => {
|
|
7515
|
+
let model = res;
|
|
7516
|
+
this.recaptchaModel.ID = model.id;
|
|
7517
|
+
this.recaptchaModel.EncryptedText = model.encryptedText;
|
|
7518
|
+
this.recaptchaModel.ImageJpeg = model.imageJpeg;
|
|
7519
|
+
this.image = 'data:image/jpeg;base64,' + this.recaptchaModel.ImageJpeg;
|
|
7520
|
+
});
|
|
7521
|
+
}
|
|
7522
|
+
ngAfterViewInit() {
|
|
7523
|
+
this.controlUtility.setAttributeForControl(this.options);
|
|
7524
|
+
}
|
|
7525
|
+
showGlobalError() {
|
|
7526
|
+
this.controlUtility.showGlobalError();
|
|
7527
|
+
}
|
|
7528
|
+
getErrorValidation(ErrorList) {
|
|
7529
|
+
if (this.markAllAsTouched && this.group.invalid) {
|
|
7530
|
+
this.showGlobalError();
|
|
7531
|
+
this.markAllAsTouched = false;
|
|
7532
|
+
}
|
|
7533
|
+
return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
|
|
7534
|
+
}
|
|
7535
|
+
onTextChange(valueText) {
|
|
7536
|
+
let value = valueText.target.value;
|
|
7537
|
+
this.recaptchaModel.Text = value;
|
|
7538
|
+
this.group.get(this.options.Name).setValue(this.recaptchaModel);
|
|
7539
|
+
this.options.Value = this.recaptchaModel;
|
|
7540
|
+
this.OnChange.emit(this.ReCaptchaFormControl.value);
|
|
7541
|
+
}
|
|
7542
|
+
}
|
|
7543
|
+
RecaptchaComponent.decorators = [
|
|
7544
|
+
{ type: Component, args: [{
|
|
7545
|
+
selector: 'BBSF-Recaptcha',
|
|
7546
|
+
template: "<div class=\"b-control b-recaptcha\">\r\n <img class=\"h-100 w-100 mb-3\" [src]=\"image\" />\r\n <button class=\"btn btn-sm btn-icon\" type=\"button\" ngbTooltip=\"{{UtilityService.getResourceValue('ReloadCaptcha')}}\" (click)=\"loadImage()\">\r\n <i class=\"fas fa-refresh\"></i>\r\n </button>\r\n\r\n <div class=\"form-group row validate is-invalid\" [formGroup]=\"group\" [ngClass]=\"(options.NoMargin==true)?'':'NoMargin'\">\r\n <label class=\"b-label col-form-label col-sm-12 {{options.LabelExtraClasses}} \" [ngClass]=\"(options.ViewType==1)?'col-md-12':'col-md-3'\" *ngIf=\"!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)?'': ((options.HideLabel)?'col-md-12':'col-md-9')\">\r\n <div class=\"input-group align-items-center\" >\r\n <input class=\"form-control bnsights-control {{options.ExtraClasses}} \"\r\n dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n aria-describedby=\"email-error\" value=\"{{options.Value.Text}}\"\r\n aria-invalid=\"true\" formControlName=\"{{options.Name}}\" type=\"text\" \r\n [class.is-invalid]=\"ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\" autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"onTextChange($event)\" [readonly]=\"options.IsReadonly\"/>\r\n </div>\r\n <div class=\"text-danger Required-text\" dir=\"{{options.ForceDirection==2?'rtl':''}}\"\r\n *ngIf=\"(ReCaptchaFormControl.invalid && ReCaptchaFormControl.touched)\">\r\n {{getErrorValidation(ReCaptchaFormControl.errors|keyvalue)}}\r\n </div>\r\n <div class=\"control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n</div>\r\n"
|
|
7547
|
+
},] }
|
|
7548
|
+
];
|
|
7549
|
+
RecaptchaComponent.ctorParameters = () => [
|
|
7550
|
+
{ type: ControlUtility },
|
|
7551
|
+
{ type: RequestHandlerService },
|
|
7552
|
+
{ type: FormGroupDirective },
|
|
7553
|
+
{ type: UtilityService },
|
|
7554
|
+
{ type: ControlValidationService },
|
|
7555
|
+
{ type: GlobalSettings }
|
|
7556
|
+
];
|
|
7557
|
+
RecaptchaComponent.propDecorators = {
|
|
7558
|
+
group: [{ type: Input }],
|
|
7559
|
+
options: [{ type: Input }],
|
|
7560
|
+
OnChange: [{ type: Output }]
|
|
7561
|
+
};
|
|
7562
|
+
|
|
7393
7563
|
let options;
|
|
7394
7564
|
let AppInjector;
|
|
7395
7565
|
FullCalendarModule.registerPlugins([
|
|
@@ -7440,7 +7610,8 @@ BBSFControlsModule.decorators = [
|
|
|
7440
7610
|
RepeaterTableComponent,
|
|
7441
7611
|
BBSFDateTimePipe,
|
|
7442
7612
|
BBSFDatePipe,
|
|
7443
|
-
BTagsInputComponent
|
|
7613
|
+
BTagsInputComponent,
|
|
7614
|
+
RecaptchaComponent
|
|
7444
7615
|
],
|
|
7445
7616
|
imports: [
|
|
7446
7617
|
CommonModule,
|
|
@@ -7539,7 +7710,8 @@ BBSFControlsModule.decorators = [
|
|
|
7539
7710
|
RepeaterItemFieldComponent,
|
|
7540
7711
|
RepeaterTableComponent,
|
|
7541
7712
|
BBSFDateTimePipe,
|
|
7542
|
-
BBSFDatePipe
|
|
7713
|
+
BBSFDatePipe,
|
|
7714
|
+
RecaptchaComponent
|
|
7543
7715
|
]
|
|
7544
7716
|
},] }
|
|
7545
7717
|
];
|
|
@@ -7560,6 +7732,26 @@ const environment = Object.assign({}, window.Environment);
|
|
|
7560
7732
|
*/
|
|
7561
7733
|
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
|
7562
7734
|
|
|
7735
|
+
class RecaptchaOptions extends ControlOptionsBase {
|
|
7736
|
+
constructor() {
|
|
7737
|
+
super(...arguments);
|
|
7738
|
+
/**To set value to Control */
|
|
7739
|
+
this.Value = new RecaptchaModel();
|
|
7740
|
+
this.ForceDirection = null;
|
|
7741
|
+
/**Prevent AutoComplete of control default value is "on" available values "on" and "off"*/
|
|
7742
|
+
this.AutoComplete = "on";
|
|
7743
|
+
this.NoMargin = false;
|
|
7744
|
+
/**the url of a remote server that supports jsonp calls */
|
|
7745
|
+
this.ActionURL = "/api/Home/GetReCaptchaModel";
|
|
7746
|
+
/*Pass hexa-color primary background color*/
|
|
7747
|
+
this.BackgroundColorPrimary = "";
|
|
7748
|
+
/*Pass hexa-color secondary background color*/
|
|
7749
|
+
this.BackgroundColorSecondary = "";
|
|
7750
|
+
/*Pass font Size */
|
|
7751
|
+
this.FontSize = 0;
|
|
7752
|
+
}
|
|
7753
|
+
}
|
|
7754
|
+
|
|
7563
7755
|
class MultilingualControlOptionsBase {
|
|
7564
7756
|
constructor() {
|
|
7565
7757
|
/** to set type of view if MultipleLanguageText is Vertical or Horizontal */
|
|
@@ -7873,6 +8065,10 @@ class ConfirmationModalOptions {
|
|
|
7873
8065
|
this.DisableErrorNotification = false;
|
|
7874
8066
|
//If ="true" disable prevent modal from dismiss automatically
|
|
7875
8067
|
this.DisableModalDismiss = false;
|
|
8068
|
+
//If ="false" prevent modal to show cancel button
|
|
8069
|
+
this.showCancelButton = true;
|
|
8070
|
+
//If ="false" prevent modal to show close button
|
|
8071
|
+
this.showCloseButton = true;
|
|
7876
8072
|
}
|
|
7877
8073
|
}
|
|
7878
8074
|
|
|
@@ -8214,5 +8410,5 @@ var FileType;
|
|
|
8214
8410
|
* Generated bundle index. Do not edit.
|
|
8215
8411
|
*/
|
|
8216
8412
|
|
|
8217
|
-
export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0, BTagsInputComponent as ɵa };
|
|
8413
|
+
export { AppInjector, Attribute, AutocompleteDTO, AutocompleteOptions, AutocompleteTextBoxComponent, BBSFControlsModule, BBSFDatePipe, BBSFDateTimePipe, CalendarComponent, CalendarEventDTO, CalendarOptions, CalendarView, CancelDTO, CheckBoxComponent, CheckBoxOptions, ConfirmationModalComponent, ConfirmationModalOptions, ControlLayout, ControlOptionsBase, ControlUtility, Country, CustomValidation, CustomValidator, DataType, DateInputComponent, DatePickerOptions, DefaultIntl, DropdownListComponent, DropdownListItem, DropdownOptions, EditPersonalImage, EnglishArabicDTO, ErrorMassageValidation, FileType, FileUploadComponent, FileUploadModel, FileUploadOptions, FilterItem, FilterType, FontSize, ForceDirection, FormComponent, FormOptions, GlobalSettings, HtmlEditorComponent, HtmlEditorOptions, IconPosition, ImageType, ImageUploadOptions, ImageUploaderComponent, InputType, Insert, JwPaginationComponent, LanguageMode, LanguageValidation, MapAutoCompleteComponent, MapAutoCompleteOptions, MapAutocompleteDTO, MenuListType, Misc, MultiLingualHtmlEditorComponent, MultiLingualHtmlEditorOptions, MultiLingualTextAreaComponent, MultiLingualTextAreaOptions, MultiLingualTextBoxComponent, MultiLingualTextBoxOptions, MultilingualControlOptionsBase, MultipleFileUploadModel, NgTemplateNameDirective, OnPagingFiltersChangeService, PagingActionMode, PagingComponent, PagingDTO, PagingOptions, Para, PermissionSets, PhoneComponent, PhoneOptions, PickerType, ProfileImageUploadOptions, ProfileImageUploaderComponent, ProfilePictureDTO, RadioButtonComponent, RadioButtonItem, RadioButtonOptions, RangeNumber, RecaptchaComponent, RecaptchaModel, RecaptchaOptions, RenderComponentService, RepeaterComponent, RepeaterField, RepeaterFieldBuilderComponent, RepeaterItemFieldComponent, RepeaterOptions, RepeaterTableComponent, SaveDTO, SelectMode, StartView, Style, StyleConfirmationMode, TagInputView, TagsInputComponent, TagsInputDTO, TagsInputOptions, TextAreaComponent, TextAreaOptions, TextBoxOptions, TextboxComponent, ToggleSlideOptions, ToggleslideComponent, UploadPersonalImage, environment, options, ɵ0, BTagsInputComponent as ɵa };
|
|
8218
8414
|
//# sourceMappingURL=bnsights-bbsf-controls.js.map
|