@bnsights/bbsf-controls 1.0.94 → 1.0.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +5 -1
  2. package/bnsights-bbsf-controls-1.0.95.tgz +0 -0
  3. package/bnsights-bbsf-controls.metadata.json +1 -1
  4. package/bundles/bnsights-bbsf-controls.umd.js +209 -116
  5. package/bundles/bnsights-bbsf-controls.umd.js.map +1 -1
  6. package/esm2015/lib/Shared/Enums/InputType.js +2 -1
  7. package/esm2015/lib/Shared/Models/MultilingualControlOptionsBase.js +4 -2
  8. package/esm2015/lib/Shared/Models/RepeaterOptions.js +2 -1
  9. package/esm2015/lib/Shared/services/validationErrorMassage.service.js +123 -88
  10. package/esm2015/lib/controls/AutocompleteTextBox/AutocompleteTextBox.component.js +2 -2
  11. package/esm2015/lib/controls/CheckBox/CheckBox.component.js +2 -2
  12. package/esm2015/lib/controls/DateTimePicker/DateTimePicker.component.js +2 -2
  13. package/esm2015/lib/controls/DropdownList/DropdownList.component.js +10 -2
  14. package/esm2015/lib/controls/FileUplaod/FileUplaod.component.js +2 -2
  15. package/esm2015/lib/controls/HtmlEditor/HtmlEditor.component.js +2 -2
  16. package/esm2015/lib/controls/ImageUpload/ImageUpload.component.js +2 -2
  17. package/esm2015/lib/controls/MapAutoComplete/MapAutoComplete.component.js +2 -2
  18. package/esm2015/lib/controls/MultiLingualHtmlEditor/MultiLingualHtmlEditor.component.js +2 -2
  19. package/esm2015/lib/controls/MultiLingualTextArea/MultiLingualTextArea.component.js +2 -2
  20. package/esm2015/lib/controls/MultiLingualTextBox/MultiLingualTextBox.component.js +2 -2
  21. package/esm2015/lib/controls/Phone/Phone.component.js +2 -2
  22. package/esm2015/lib/controls/ProfileImageUploader/ProfileImageUploader.component.js +2 -2
  23. package/esm2015/lib/controls/RadioButton/RadioButton.component.js +5 -2
  24. package/esm2015/lib/controls/Repeater/repeater/repeater.component.js +2 -2
  25. package/esm2015/lib/controls/TagsInput/TagsInput.component.js +6 -2
  26. package/esm2015/lib/controls/TextArea/TextArea.component.js +2 -2
  27. package/esm2015/lib/controls/TextBox/TextBox.component.js +75 -40
  28. package/esm2015/lib/controls/Toggleslide/toggleslide.component.js +5 -2
  29. package/fesm2015/bnsights-bbsf-controls.js +208 -116
  30. package/fesm2015/bnsights-bbsf-controls.js.map +1 -1
  31. package/lib/Shared/Enums/InputType.d.ts +2 -1
  32. package/lib/Shared/Models/MultilingualControlOptionsBase.d.ts +11 -9
  33. package/lib/Shared/Models/RepeaterOptions.d.ts +1 -0
  34. package/lib/controls/DropdownList/DropdownList.component.d.ts +1 -0
  35. package/lib/controls/RadioButton/RadioButton.component.d.ts +1 -0
  36. package/lib/controls/TagsInput/TagsInput.component.d.ts +1 -0
  37. package/lib/controls/TextBox/TextBox.component.d.ts +3 -0
  38. package/lib/controls/Toggleslide/toggleslide.component.d.ts +1 -1
  39. package/package.json +1 -1
  40. package/src/lib/assets/sass/base.scss +7 -0
  41. package/bnsights-bbsf-controls-1.0.94.tgz +0 -0
@@ -45,14 +45,14 @@
45
45
  }
46
46
  // tslint:disable-next-line: deprecation
47
47
  ErrorMassageValidation.showerror = function (FormControlName) {
48
- ;
49
- var form = ErrorMassageValidation.controlContainerstatic.control;
48
+ var form = ErrorMassageValidation.controlContainerstatic
49
+ .control;
50
50
  var control = form.get(FormControlName);
51
51
  //console.log(control)
52
- control.setErrors({ 'minlength': true });
52
+ control.setErrors({ minlength: true });
53
53
  control.markAsTouched();
54
54
  };
55
- // isEmailRegisterd(Email: string)
55
+ // isEmailRegisterd(Email: string)
56
56
  // {
57
57
  // let resource:object={
58
58
  // email:Email
@@ -64,92 +64,127 @@
64
64
  // .pipe(map(response => response.json()))
65
65
  // }
66
66
  ErrorMassageValidation.prototype.getErrorMassageValidation = function (error) {
67
- ;
68
- var result = "";
67
+ var result = '';
69
68
  switch (error.key) {
70
- case "required":
71
- result = this.utilityService.getResourceValue("RequiredValidationKey");
69
+ case 'required':
70
+ result = this.utilityService.getResourceValue('RequiredValidationKey');
72
71
  break;
73
- case "email":
74
- result = this.utilityService.getResourceValue("EmailValidationKey");
72
+ case 'email':
73
+ result = this.utilityService.getResourceValue('EmailValidationKey');
75
74
  break;
76
- case "EmailValidationKey":
77
- result = this.utilityService.getResourceValue("EmailValidationKey");
75
+ case 'EmailValidationKey':
76
+ result = this.utilityService.getResourceValue('EmailValidationKey');
78
77
  break;
79
- case "pattern":
80
- result = this.utilityService.getResourceValue("NumberValidationKey");
78
+ case 'URLValidationKey':
79
+ result = this.utilityService.getResourceValue('urlValidationError');
81
80
  break;
82
- case "maxlength":
83
- result = this.utilityService.getResourceValue("MaxLenghtValidationKey") + " " + error.value.requiredLength;
81
+ case 'pattern':
82
+ result = this.utilityService.getResourceValue('NumberValidationKey');
84
83
  break;
85
- case "minlength":
86
- result = this.utilityService.getResourceValue("MinLenghtValidationKey") + " " + error.value.requiredLength;
84
+ case 'maxlength':
85
+ result =
86
+ this.utilityService.getResourceValue('MaxLenghtValidationKey') +
87
+ ' ' +
88
+ error.value.requiredLength;
87
89
  break;
88
- case "min":
89
- result = this.utilityService.getResourceValue("MinValueValidationKey") + " " + error.value.min;
90
+ case 'minlength':
91
+ result =
92
+ this.utilityService.getResourceValue('MinLenghtValidationKey') +
93
+ ' ' +
94
+ error.value.requiredLength;
90
95
  break;
91
- case "max":
92
- result = this.utilityService.getResourceValue("MaxValueValidationKey") + " " + error.value.max;
96
+ case 'min':
97
+ result =
98
+ this.utilityService.getResourceValue('MinValueValidationKey') +
99
+ ' ' +
100
+ error.value.min;
93
101
  break;
94
- case "IntegerNumberValidationKey":
95
- result = this.utilityService.getResourceValue("IntegerNumberValidationKey");
102
+ case 'max':
103
+ result =
104
+ this.utilityService.getResourceValue('MaxValueValidationKey') +
105
+ ' ' +
106
+ error.value.max;
96
107
  break;
97
- case "PositiveNumberValidationKey":
98
- result = this.utilityService.getResourceValue("PositiveNumberValidationKey");
108
+ case 'IntegerNumberValidationKey':
109
+ result = this.utilityService.getResourceValue('IntegerNumberValidationKey');
99
110
  break;
100
- case "validatePhoneNumber":
101
- result = this.utilityService.getResourceValue("PhoneNumberValidationKey");
111
+ case 'PositiveNumberValidationKey':
112
+ result = this.utilityService.getResourceValue('PositiveNumberValidationKey');
102
113
  break;
103
- case "mask":
104
- result = this.utilityService.getResourceValue("MaskValidationKey") + " " + error.value.requiredMask;
114
+ case 'validatePhoneNumber':
115
+ result = this.utilityService.getResourceValue('PhoneNumberValidationKey');
105
116
  break;
106
- case "PasswordComplexityHasNumber":
107
- result = this.utilityService.getResourceValue("PasswordComplexityHasNumber");
117
+ case 'mask':
118
+ result =
119
+ this.utilityService.getResourceValue('MaskValidationKey') +
120
+ ' ' +
121
+ error.value.requiredMask;
108
122
  break;
109
- case "ArabicLetterOnly":
110
- result = this.utilityService.getResourceValue("ArabicLetterOnly");
123
+ case 'PasswordComplexityHasNumber':
124
+ result = this.utilityService.getResourceValue('PasswordComplexityHasNumber');
111
125
  break;
112
- case "EnglishLetterOnly":
113
- result = this.utilityService.getResourceValue("EnglishLetterOnly");
126
+ case 'ArabicLetterOnly':
127
+ result = this.utilityService.getResourceValue('ArabicLetterOnly');
114
128
  break;
115
- case "ArabicIsRequiredAndOnly50CharactersEnglish":
116
- result = this.utilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
129
+ case 'EnglishLetterOnly':
130
+ result = this.utilityService.getResourceValue('EnglishLetterOnly');
117
131
  break;
118
- case "PasswordComplexityHasCapitalLetter":
119
- result = this.utilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
132
+ case 'ArabicIsRequiredAndOnly50CharactersEnglish':
133
+ result = this.utilityService.getResourceValue('ArabicIsRequiredAndOnly50CharactersEnglish');
120
134
  break;
121
- case "PasswordComplexityHasSmallLetter":
122
- result = this.utilityService.getResourceValue("PasswordComplexityHasSmallLetter");
135
+ case 'PasswordComplexityHasCapitalLetter':
136
+ result = this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
123
137
  break;
124
- case "PasswordComplexityHasSpecialLetter":
125
- result = this.utilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
138
+ case 'PasswordComplexityHasSmallLetter':
139
+ result = this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
126
140
  break;
127
- case "MaxWordCountValidationKey":
128
- result = this.utilityService.getResourceValue("MaxWordCountValidationKey") + " " + error.value;
141
+ case 'PasswordComplexityHasSpecialLetter':
142
+ result = this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
129
143
  break;
130
- case "NewSelectionValidationKey":
131
- result = this.utilityService.getResourceValue("NewSelectionValidationKey");
144
+ case 'MaxWordCountValidationKey':
145
+ result =
146
+ this.utilityService.getResourceValue('MaxWordCountValidationKey') +
147
+ ' ' +
148
+ error.value;
132
149
  break;
133
- case "MaxFileCountValidationKey":
134
- result = this.utilityService.getResourceValue("MaxFileCountValidationKey") + " " + error.value;
150
+ case 'NewSelectionValidationKey':
151
+ result = this.utilityService.getResourceValue('NewSelectionValidationKey');
135
152
  break;
136
- case "MinFileCountValidationKey":
137
- result = this.utilityService.getResourceValue("MinFileCountValidationKey") + " " + error.value;
153
+ case 'MaxFileCountValidationKey':
154
+ result =
155
+ this.utilityService.getResourceValue('MaxFileCountValidationKey') +
156
+ ' ' +
157
+ error.value;
138
158
  break;
139
- case "MaxSizeForAllFilesInMB":
140
- result = this.utilityService.getResourceValue("MaxSizeForAllFilesInMB") + " " + error.value;
159
+ case 'MinFileCountValidationKey':
160
+ result =
161
+ this.utilityService.getResourceValue('MinFileCountValidationKey') +
162
+ ' ' +
163
+ error.value;
141
164
  break;
142
- case "FileMaxSizeInMB":
143
- result = this.utilityService.getResourceValue("FileMaxSizeInMB") + " " + error.value;
165
+ case 'MaxSizeForAllFilesInMB':
166
+ result =
167
+ this.utilityService.getResourceValue('MaxSizeForAllFilesInMB') +
168
+ ' ' +
169
+ error.value;
144
170
  break;
145
- case "ToolTipTypeError":
146
- result = this.utilityService.getResourceValue("ToolTipTypeError") + " " + error.value;
171
+ case 'FileMaxSizeInMB':
172
+ result =
173
+ this.utilityService.getResourceValue('FileMaxSizeInMB') +
174
+ ' ' +
175
+ error.value;
147
176
  break;
148
- case "InvalidEndDate":
149
- result = this.utilityService.getResourceValue("InvalidEndDate");
177
+ case 'ToolTipTypeError':
178
+ result =
179
+ this.utilityService.getResourceValue('ToolTipTypeError') +
180
+ ' ' +
181
+ error.value;
150
182
  break;
151
- case "InvalidStartDate":
152
- result = this.utilityService.getResourceValue("InvalidStartDate");
183
+ case 'InvalidEndDate':
184
+ result = this.utilityService.getResourceValue('InvalidEndDate');
185
+ break;
186
+ case 'InvalidStartDate':
187
+ result = this.utilityService.getResourceValue('InvalidStartDate');
153
188
  break;
154
189
  default:
155
190
  break;
@@ -175,6 +210,7 @@
175
210
  InputType[InputType["Email"] = 3] = "Email";
176
211
  InputType[InputType["Number"] = 4] = "Number";
177
212
  InputType[InputType["EID"] = 5] = "EID";
213
+ InputType[InputType["URL"] = 6] = "URL";
178
214
  })(exports.InputType || (exports.InputType = {}));
179
215
 
180
216
  var ControlUtility = /** @class */ (function () {
@@ -917,7 +953,7 @@
917
953
  DateInputComponent.decorators = [
918
954
  { type: i0.Component, args: [{
919
955
  selector: 'BBSF-DateTimePicker',
920
- template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label\r\n {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n </label>\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n class=\"text-danger\"\r\n aria-required=\"true\">*</span>\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n [dir]=\"textDir\" class=\"form-control bnsights-control\r\n {{options.ExtraClasses}} \"\r\n [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\"\r\n [owlDateTimeTrigger]=\"dt1\"\r\n [class.is-invalid]=\"DatePickerFormControl.invalid &&\r\n DatePickerFormControl.touched\"\r\n [min]=\"options.StartDate\" [max]=\"options.EndDate\"\r\n [hour12Timer]=\"options.Hour12Timer\"\r\n [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]=\"startView\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n <!--icon-->\r\n <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n <span class=\"svg-icon\">\r\n <svg id=\"Group_356\" data-name=\"Group 356\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0\r\n 0 48 48\">\r\n <path id=\"Path_6737\" data-name=\"Path 6737\"\r\n d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n <path id=\"Path_6738\" data-name=\"Path 6738\"\r\n d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n <path id=\"Path_6739\" data-name=\"Path 6739\"\r\n d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\"\r\n fill=\"#d5d5d5\"></path>\r\n <path id=\"Path_6740\" data-name=\"Path 6740\"\r\n 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\"\r\n fill=\"#595959\"></path>\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(DatePickerFormControl.invalid &&\r\n DatePickerFormControl.touched)\">\r\n {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n",
956
+ template: "\r\n<div class=\"form-group bbsf-control bbsf-datetime-picker\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label\r\n {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n </label>\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\"\r\n class=\"text-danger\"\r\n aria-required=\"true\">*</span>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n <!--input-->\r\n <input autocomplete=\"off\" (dateTimeChange)=\"onDateSelect($event)\"\r\n [dir]=\"textDir\" class=\"form-control bnsights-control\r\n {{options.ExtraClasses}} \"\r\n [ngClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"{{options.Name}}\" [owlDateTime]=\"dt1\"\r\n [owlDateTimeTrigger]=\"dt1\"\r\n [class.is-invalid]=\"DatePickerFormControl.invalid &&\r\n DatePickerFormControl.touched\"\r\n [min]=\"options.StartDate\" [max]=\"options.EndDate\"\r\n [hour12Timer]=\"options.Hour12Timer\"\r\n [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]=\"startView\" [firstDayOfWeek]=\"options.FirstDayOfWeek\"\r\n [hour12Timer]=\"options.Hour12Timer\" #dt1></owl-date-time>\r\n <!--icon-->\r\n <span class=\"copy-clipboard\" [owlDateTimeTrigger]=\"dt1\">\r\n <span class=\"svg-icon\">\r\n <svg id=\"Group_356\" data-name=\"Group 356\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0\r\n 0 48 48\">\r\n <path id=\"Path_6737\" data-name=\"Path 6737\"\r\n d=\"M11.583,1a1,1,0,0,0-2,0V5.7h2Z\" style=\"\"></path>\r\n <path id=\"Path_6738\" data-name=\"Path 6738\"\r\n d=\"M38.417,1a1,1,0,0,0-2,0V5.7h2Z\"></path>\r\n <path id=\"Path_6739\" data-name=\"Path 6739\"\r\n d=\"M0,43.146C0,45.822,1.826,48,4.07,48H43.928C46.174,48,48,45.822,48,43.146V17.121H0Z\"\r\n fill=\"#d5d5d5\"></path>\r\n <path id=\"Path_6740\" data-name=\"Path 6740\"\r\n 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\"\r\n fill=\"#595959\"></path>\r\n </svg>\r\n </span>\r\n </span>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{options.Value| date:'MMM d, y, h:mm a'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(DatePickerFormControl.invalid &&\r\n DatePickerFormControl.touched)\">\r\n {{getErrorValidation(DatePickerFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n",
921
957
  providers: [
922
958
  { provide: ngPickDatetime.OwlDateTimeIntl, useClass: DefaultIntl }
923
959
  ]
@@ -1436,7 +1472,7 @@
1436
1472
  FileUploadComponent.decorators = [
1437
1473
  { type: i0.Component, args: [{
1438
1474
  selector: 'BBSF-FileUplaod',
1439
- template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div ng2FileDrop class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n *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 (change)=\"onFileChange()\" id=\"{{options.Name}}\" multiple=\"{{options.IsMultipleFile?'multiple':''}}\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" type=\"file\" formControlName=\"{{options.Name}}\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())\" (click)=\"fileInput.click();\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n </div>\r\n </div>\r\n <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\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\"\r\n formControlName=\"{{options.Name}}\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n </div>\r\n </div>\r\n <!--items uploaded-->\r\n <div class=\"uploaded-items\">\r\n <div class=\"btn-group\" *ngFor=\"let item of uploader.queue\">\r\n <button type=\"button\" class=\"btn btn-download-file btn-sm\" download>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\" fill=\"currentColor\"></path>\r\n <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\"></path>\r\n </svg>\r\n <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n </button>\r\n <button class=\"btn btn-download-file btn-sm btn-danger\"\r\n (click)=\"item.remove();removeFromControlValue(item)\">\r\n <i class=\"fa fa-times px-0\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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\r\n</div>\r\n\r\n"
1475
+ template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div ng2FileDrop class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n *ngIf=\"(options.IsDropZone)&&(!((options.IsMultipleFile==false)&&(uploader.queue.length)>0))&&!options.IsReadonly\"\r\n [ngClass]=\"{'another-file-over-class': hasAnotherDropZoneOver}\" (onFileDrop)=\"onFileChange()\"\r\n (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"AcceptedType\"\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}}\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"DragAndDropHere\")}} </div>\r\n <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"(!options.IsDropZone)&&!(isHideInput())&&!options.IsReadonly\" (click)=\"fileInput.click();\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg text-center\">{{UtilityService.getResourceValue(\"Upload\")}} </div>\r\n <div class=\"bbsf-validation-msg text-center\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n <div class=\"bbsf-validation-msg ng-star-inserted text-center text-danger\" *ngIf=\"ValidationCountMessage &&options.IsMultipleFile &&options.MaxNoOfFiles>0\" [innerHTML]=\"ValidationCountMessage\"></div>\r\n </div>\r\n </div>\r\n <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"AcceptedType\"\r\n class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\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\"\r\n formControlName=\"{{options.Name}}\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n </div>\r\n </div>\r\n <!--items uploaded-->\r\n <div class=\"uploaded-items\">\r\n <div class=\"btn-group\" *ngFor=\"let item of uploader.queue\">\r\n <a href=\"{{ item?.file?.rawFile?.url }}\" class=\"btn btn-download-file btn-sm\" download>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\" fill=\"currentColor\"></path>\r\n <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\"></path>\r\n </svg>\r\n <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n </a>\r\n <button *ngIf=\"!options.IsReadonly\" class=\"btn btn-download-file btn-sm btn-danger\"\r\n (click)=\"item.remove();removeFromControlValue(item)\">\r\n <i class=\"fa fa-times px-0\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(fileUploadFormControl.invalid && fileUploadFormControl.touched)\">\r\n {{getErrorValidation(fileUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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\r\n</div>\r\n\r\n"
1440
1476
  },] }
1441
1477
  ];
1442
1478
  FileUploadComponent.ctorParameters = function () { return [
@@ -1881,7 +1917,7 @@
1881
1917
  MultiLingualTextBoxComponent.decorators = [
1882
1918
  { type: i0.Component, args: [{
1883
1919
  selector: 'BBSF-MultiLingualTextBox',
1884
- template: "\r\n<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"MultiLanguagegroup\">\r\n <div class=\"row\">\r\n <!--English textbox-->\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\" [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-->\r\n <input class=\"form-control\" dir=\"ltr\"\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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n\r\n <!--Arabic textbox-->\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\"(click)=\"copyInputMessage(userinputArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
1920
+ template: "\r\n<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\"\r\n [formGroup]=\"MultiLanguagegroup\">\r\n <div class=\"row\">\r\n <!--English textbox-->\r\n <div\r\n [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\"\r\n *ngIf=\"ShowEnglishTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\"\r\n [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish))&&!options.IsReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.IconPositionEN==1)?'left-icon':'right-icon'\"\r\n *ngIf=\"options.Icon!=null\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"ltr\"\r\n (focus)=\"onEnglishFocus(true)\" (focusout)=\"onEnglishFocus(false)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"English\"\r\n [hidden]=\"options.IsHideEnglishFields\"\r\n maxlength=\"{{options.MaxLength}}\"\r\n minlength=\"{{options.MinLength}}\"\r\n [class.is-invalid]=\"EnglishFormControl.invalid && EnglishFormControl.touched\"\r\n placeholder=\"{{options.EnglishPlaceholder}}\"\r\n (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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\"\r\n *ngIf=\"options.EnableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userinputEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"\r\n [innerHTML]=\"options.Value.English\"></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\"\r\n *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(EnglishFormControl.invalid && EnglishFormControl.touched)\">\r\n {{getErrorValidation(EnglishFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!--Arabic textbox-->\r\n <div\r\n [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\"\r\n *ngIf=\"ShowArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\"\r\n [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic)&&!options.IsReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.IconPositionEN==1)?'right-icon':'left-icon'\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"rtl\"\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\" maxlength=\"{{options.MaxLength}}\"\r\n minlength=\"{{options.MinLength}}\"\r\n [class.is-invalid]=\"ArabicFormControl.invalid && ArabicFormControl.touched\"\r\n placeholder=\"{{options.ArabicPlaceholder}}\"\r\n (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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\"\r\n *ngIf=\"options.EnableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userinputArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\"\r\n [innerHTML]=\"options.Value.Arabic\"></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\"\r\n *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ArabicFormControl.invalid && ArabicFormControl.touched)\">\r\n {{getErrorValidation(ArabicFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n"
1885
1921
  },] }
1886
1922
  ];
1887
1923
  MultiLingualTextBoxComponent.ctorParameters = function () { return [
@@ -2075,7 +2111,7 @@
2075
2111
  TextAreaComponent.decorators = [
2076
2112
  { type: i0.Component, args: [{
2077
2113
  selector: 'BBSF-TextArea',
2078
- template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" 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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\"\r\n *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n </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"
2114
+ template: "<div class=\"form-group bbsf-control bbsf-textarea\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.ExtraClasses}}\"\r\n (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" 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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" >{{options.Value}}</span>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\"\r\n *ngIf=\"(TextAreaFormControl.invalid && TextAreaFormControl.touched)\">\r\n {{getErrorValidation(TextAreaFormControl.errors|keyvalue)}}\r\n </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"
2079
2115
  },] }
2080
2116
  ];
2081
2117
  TextAreaComponent.ctorParameters = function () { return [
@@ -2508,7 +2544,7 @@
2508
2544
  MultiLingualTextAreaComponent.decorators = [
2509
2545
  { type: i0.Component, args: [{
2510
2546
  selector: 'BBSF-MultiLingualTextArea',
2511
- template: "<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n <div class=\"row\">\r\n <!--English textarea-->\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}} <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\r\n <textarea class=\"form-control\" dir=\"ltr\" 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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\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 </div>\r\n <!--Arabic textbox-->\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n"
2547
+ template: "<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textarea form-group mb-0\" [formGroup]=\"MultiLanguageTextAreagroup\">\r\n <div class=\"row\">\r\n <!--English textarea-->\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowEngishTextArea\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}} <!--Asterisk-->\r\n <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInEnglish)&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\r\n <textarea class=\"form-control\" dir=\"ltr\" 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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideEnglishFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value.English\" ></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowEnglishWordCount\">{{EnglishWordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(EnglishTextAreaFormControl.invalid && EnglishTextAreaFormControl.touched)\">\r\n {{getErrorValidation(EnglishTextAreaFormControl.errors|keyvalue)}}\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 </div>\r\n </div>\r\n <!--Arabic textbox-->\r\n <div [ngClass]=\"(options.MultiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"ShowArabicTextArea\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic)&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--input-->\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 <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.IsHideArabicFields\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinputTextAreaArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value.Arabic\" ></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowArabicWordCount\">{{ArabicWordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(ArabicTextAreaFormControl.invalid && ArabicTextAreaFormControl.touched)\">\r\n {{getErrorValidation(ArabicTextAreaFormControl.errors|keyvalue)}}\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n"
2512
2548
  },] }
2513
2549
  ];
2514
2550
  MultiLingualTextAreaComponent.ctorParameters = function () { return [
@@ -2625,7 +2661,7 @@
2625
2661
  { type: i0.Component, args: [{
2626
2662
  // tslint:disable-next-line: component-selector
2627
2663
  selector: 'BBSF-CheckBox',
2628
- template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <input class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" [dir]=\"textDir\" [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\r\n <div class=\"label-subtext-container\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n </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"
2664
+ template: "<div class=\"form-group bbsf-control bbsf-checkbox\" [formGroup]=\"group\">\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <input *ngIf=\"!options.IsReadonly\" class=\"bbsf-checkbox-input {{options.ExtraClasses}}\" [dir]=\"textDir\" [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\r\n <div class=\"label-subtext-container\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{options.Value}}</span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(CheckBoxFormControl.invalid && CheckBoxFormControl.touched)\">\r\n {{getErrorValidation(CheckBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n </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"
2629
2665
  },] }
2630
2666
  ];
2631
2667
  CheckBoxComponent.ctorParameters = function () { return [
@@ -2756,6 +2792,15 @@
2756
2792
  }
2757
2793
  return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
2758
2794
  };
2795
+ DropdownListComponent.prototype.getSelectedItemValue = function () {
2796
+ var _this = this;
2797
+ if (this.options.SelectedItems) {
2798
+ if (this.options.SingleSelection)
2799
+ return this.options.DataSource.filter(function (item) { return item[_this.options.ItemTempletkey] == _this.options.SelectedItems; })[0][this.options.ItemTempletvalue];
2800
+ else
2801
+ return this.options.DataSource.filter(function (item) { return _this.options.SelectedItems.includes(item[_this.options.ItemTempletkey]); }).map(function (item) { return item[_this.options.ItemTempletvalue]; });
2802
+ }
2803
+ };
2759
2804
  DropdownListComponent.prototype.onItemSelect = function () {
2760
2805
  this.onChangeService.ChangeValue(this.options.Name);
2761
2806
  var originalValue = this.options.SelectedItems;
@@ -2802,7 +2847,7 @@
2802
2847
  { type: i0.Component, args: [{
2803
2848
  // tslint:disable-next-line: component-selector
2804
2849
  selector: 'BBSF-DropdownList',
2805
- template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\"\r\n aria-required=\"true\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <!--input enabled bootstrap select-->\r\n <ng-select class=\"form-control\" *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 <!--No checkbox-->\r\n <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.key}}>{{item.value}}</label>\r\n </ng-template>\r\n <!--checkbox-->\r\n <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <div class=\" bbsf-checkbox\">\r\n <div class=\"bbsf-input-container align-items-center\">\r\n <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n <div class=\"label-subtext-container\">\r\n <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-select>\r\n <!--input disabled bootstrap select-->\r\n <select *ngIf=\"options.DisableBootstrapSelect\" class=\"form-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 <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n </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 </div>\r\n </div>\r\n"
2850
+ template: "<div class=\"form-group bbsf-control bbsf-dropdown\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\"\r\n aria-required=\"true\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <!--input enabled bootstrap select-->\r\n <ng-select class=\"form-control\" *ngIf=\"options.DisableBootstrapSelect==false&&!options.IsReadonly\" 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 <!--No checkbox-->\r\n <ng-template *ngIf=\"!options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <label class=\"bbsf-label\" title=\"{{item.disabled ? options.DisabledItemsTooltipValue : ''}}\" id={{item.key}}>{{item.value}}</label>\r\n </ng-template>\r\n <!--checkbox-->\r\n <ng-template *ngIf=\"options.ShowCheckbox\" ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <div class=\" bbsf-checkbox\">\r\n <div class=\"bbsf-input-container align-items-center\">\r\n <input class=\"bbsf-checkbox-input\" id=\"item-{{index}}\" type=\"checkbox\" [ngModelOptions]=\"{standalone: true}\" [ngModel]=\"item$.selected\" />\r\n <div class=\"label-subtext-container\">\r\n <label class=\"bbsf-label\" id={{item.key}}>{{item.value}}</label>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-select>\r\n <!--input disabled bootstrap select-->\r\n <select *ngIf=\"options.DisableBootstrapSelect&&!options.IsReadonly\" class=\"form-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 <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{getSelectedItemValue()}}</span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(DropdownListFormControl.invalid && DropdownListFormControl.touched)\">\r\n {{getErrorValidation(DropdownListFormControl.errors|keyvalue)}}\r\n </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 </div>\r\n </div>\r\n"
2806
2851
  },] }
2807
2852
  ];
2808
2853
  DropdownListComponent.ctorParameters = function () { return [
@@ -2928,7 +2973,7 @@
2928
2973
  PhoneComponent.decorators = [
2929
2974
  { type: i0.Component, args: [{
2930
2975
  selector: 'BBSF-Phone',
2931
- template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label\r\n {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <!--input-->\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':'ltr'}}\"\r\n [cssClass]=\"options.ExtraClasses\"\r\n [preferredCountries]=\"options.PreferredCountries\"\r\n [onlyCountries]=\"options.OnlyCountries\"\r\n [enableAutoCountrySelect]=\"true\"\r\n [enablePlaceholder]=\"options.EnablePlaceholder\"\r\n [searchCountryFlag]=\"options.AllowSearch\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2,\r\n SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"options.SelectFirstCountry\"\r\n [selectedCountryISO]=\"getSelectedCountry(options.SelectedCountryISO)\"\r\n [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 &&\r\n PhoneFormControl.touched\" aria-invalid=\"true\"\r\n class=\"form-control\">\r\n </ngx-intl-tel-input>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(PhoneFormControl.invalid &&\r\n PhoneFormControl.touched)\">\r\n {{getErrorValidation(PhoneFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
2976
+ template: "\r\n<div class=\"form-group bbsf-control bbsf-phone\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label\r\n {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <!--input-->\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n <!--input-->\r\n <ngx-intl-tel-input dir=\"{{options.ForceDirection==2?'rtl':'ltr'}}\"\r\n [cssClass]=\"options.ExtraClasses\"\r\n [preferredCountries]=\"options.PreferredCountries\"\r\n [onlyCountries]=\"options.OnlyCountries\"\r\n [enableAutoCountrySelect]=\"true\"\r\n [enablePlaceholder]=\"options.EnablePlaceholder\"\r\n [searchCountryFlag]=\"options.AllowSearch\"\r\n [searchCountryField]=\"[SearchCountryField.Iso2,\r\n SearchCountryField.Name]\"\r\n [selectFirstCountry]=\"options.SelectFirstCountry\"\r\n [selectedCountryISO]=\"getSelectedCountry(options.SelectedCountryISO)\"\r\n [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 &&\r\n PhoneFormControl.touched\" aria-invalid=\"true\"\r\n class=\"form-control\">\r\n </ngx-intl-tel-input>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><a href=\"tel:{{options.Value}}\">{{options.Value}}</a>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(PhoneFormControl.invalid &&\r\n PhoneFormControl.touched)\">\r\n {{getErrorValidation(PhoneFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"(group.valid&&group.dirty&&group.touched\r\n )||(group.untouched&&group.invalid&&group.dirty) \">{{resetError()}}</div>\r\n</div>\r\n"
2932
2977
  },] }
2933
2978
  ];
2934
2979
  PhoneComponent.ctorParameters = function () { return [
@@ -2972,6 +3017,9 @@
2972
3017
  this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
2973
3018
  if (!this.options.ViewType)
2974
3019
  this.options.ViewType = this.globalSettings.ViewType;
3020
+ if (this.options.IsDisabled || this.options.IsReadonly) {
3021
+ this.ToggleslideFormControl.disable();
3022
+ }
2975
3023
  if (this.options.LabelKey != null && this.options.LabelKey != "")
2976
3024
  this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
2977
3025
  };
@@ -3010,7 +3058,7 @@
3010
3058
  ToggleslideComponent.decorators = [
3011
3059
  { type: i0.Component, args: [{
3012
3060
  selector: 'BBSF-Toggleslide',
3013
- template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <mat-slide-toggle [(ngModel)]=\"SlideValue\" [dir]=\"textDir\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n formControlName=\"{{options.Name}}\" disableRipple=\"true\" [disabled]=\"options.IsDisabled\" (change)=\"changeValueToggle()\">\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n </div>\r\n</div>\r\n"
3061
+ template: "<div class=\"form-group bbsf-control bbsf-toggleslide\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\"class=\"bbsf-input-container\">\r\n <!--input-->\r\n <mat-slide-toggle [(ngModel)]=\"SlideValue\" [dir]=\"textDir\" [cssClass]=\"(options.ViewType==1)?'':'col-md-9'\"\r\n formControlName=\"{{options.Name}}\" disableRipple=\"true\" [disabled]=\"options.IsDisabled\" (change)=\"changeValueToggle()\">\r\n </mat-slide-toggle>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\">\r\n <span class=\"readonly-view\" *ngIf=\"options.Value\">{{UtilityService.getResourceValue(\"Yes\")}}</span>\r\n <span class=\"readonly-view\" *ngIf=\"!options.Value\">{{UtilityService.getResourceValue(\"No\")}}</span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n </div>\r\n</div>\r\n"
3014
3062
  },] }
3015
3063
  ];
3016
3064
  ToggleslideComponent.ctorParameters = function () { return [
@@ -3234,7 +3282,7 @@
3234
3282
  HtmlEditorComponent.decorators = [
3235
3283
  { type: i0.Component, args: [{
3236
3284
  selector: 'BBSF-HtmlEditor',
3237
- template: "\r\n<div class=\"form-group bbsf-control bbsf-htmleditor\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <angular-editor\r\n (change)=\"onValueChanged()\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n class=\"{{options.ExtraClasses}}\"\r\n [dir]=\"textDir\" formControlName=\"{{options.Name}}\"\r\n [config]=\"editorConfig\"></angular-editor>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(HtmlEditorFormControl.errors|keyvalue)}}\r\n </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"
3285
+ template: "\r\n<div class=\"form-group bbsf-control bbsf-htmleditor\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n <angular-editor\r\n (change)=\"onValueChanged()\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched\"\r\n class=\"{{options.ExtraClasses}}\"\r\n [dir]=\"textDir\" formControlName=\"{{options.Name}}\"\r\n [config]=\"editorConfig\"></angular-editor>\r\n </div>\r\n\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value\"></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(HtmlEditorFormControl.invalid && HtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(HtmlEditorFormControl.errors|keyvalue)}}\r\n </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"
3238
3286
  },] }
3239
3287
  ];
3240
3288
  HtmlEditorComponent.ctorParameters = function () { return [
@@ -3668,7 +3716,7 @@
3668
3716
  MultiLingualHtmlEditorComponent.decorators = [
3669
3717
  { type: i0.Component, args: [{
3670
3718
  selector: 'BBSF-MultiLingualHtmlEditor',
3671
- template: "\r\n<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n <div class=\"row\">\r\n <!--English htmleditor-->\r\n <div [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish)\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\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 </div>\r\n\r\n <!--Arabic htmleditor-->\r\n <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\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 </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
3719
+ template: "\r\n<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control form-group bbsf-multilang-htmleditor mb-0\" [formGroup]=\"MultilingualHtmlEditorgroup\">\r\n <div class=\"row\">\r\n <!--English htmleditor-->\r\n <div [ngClass] =\"ShowArabicHtmlEditor? 'col-md-6' : 'col-md-12'\" *ngIf=\"ShowEnglishHtmlEditor\" class=\" bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideEnglishLabel\">\r\n {{(options.EnglishLabelValue!=null&&options.EnglishLabelValue!=\"\")?options.EnglishLabelValue:options.LabelValue+\"in English\"}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)&&IsShowAsteriskInEnglish))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--input-->\r\n <angular-editor class=\"{{options.ExtraClasses_EN}}\" (change)=\"onTextChange('en')\" [class.is-invalid]=\"EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched\"\r\n formControlName=\"English\" [config]=\"editorEnglishConfig\"></angular-editor>\r\n </div>\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value.English\" ></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(EnglishHtmlEditorFormControl.invalid && EnglishHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(EnglishHtmlEditorFormControl.errors|keyvalue)}}\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 </div>\r\n</div>\r\n <!--Arabic htmleditor-->\r\n <div *ngIf=\"ShowArabicHtmlEditor\" [ngClass] =\"ShowEnglishHtmlEditor? 'col-md-6' : 'col-md-12'\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.LabelExtraClasses}}\" [hidden]=\"options.IsHideArabicLabel\">\r\n {{(options.ArabicLabelValue!=null&&options.ArabicLabelValue!=\"\")?options.ArabicLabelValue:options.LabelValue+\"in Arabic\"}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&IsShowAsteriskInArabic)&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--input-->\r\n <angular-editor dir=\"rtl\" class=\"{{options.ExtraClasses_AR}} \" (change)=\"onTextChange('ar')\" [class.is-invalid]=\"ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched\"\r\n formControlName=\"Arabic\" [config]=\"editorArabicConfig\"></angular-editor>\r\n </div>\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.Value.Arabic\" ></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(ArabicHtmlEditorFormControl.invalid && ArabicHtmlEditorFormControl.touched)\">\r\n {{getErrorValidation(ArabicHtmlEditorFormControl.errors|keyvalue)}}\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 </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n"
3672
3720
  },] }
3673
3721
  ];
3674
3722
  MultiLingualHtmlEditorComponent.ctorParameters = function () { return [
@@ -4017,7 +4065,7 @@
4017
4065
  ImageUploaderComponent.decorators = [
4018
4066
  { type: i0.Component, args: [{
4019
4067
  selector: 'BBSF-ImageUpload',
4020
- template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"dropzone-label\">\r\n <img *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div *ngIf=\"!options.AllowDropZone\">\r\n <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n <div #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <div class=\"d-none {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n </div>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- image cropper modal-->\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body\">\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 class=\"cropper-btns\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomIn\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomOut\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveLeft\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveRight\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveUp\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveDown\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateLeft\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateRight\")}}'>\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
4068
+ template: "<div class=\"form-group bbsf-control bbsf-image-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div *ngIf=\"options.AllowDropZone&&!options.IsReadonly\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"dropzone-label\">\r\n <img *ngIf=\"ImageSource\" [src]=\"ImageSource\" style=\"align-items: center;border-radius: 5px;display: flex;height: 100px;justify-content: center;margin: 10px;max-width: 180px;min-height: 100px;min-width: 180px;padding: 0px 20px;position: relative;\" />\r\n <div class=\"svg-and-validation\" *ngIf=\"!ImageSource\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div *ngIf=\"!options.AllowDropZone&&!options.IsReadonly\">\r\n <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n <div #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <div class=\"d-none {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n [multiple]=\"options.IsMultiple\"\r\n (change)=\"onFileChange($event)\"\r\n ngDefaultControl\r\n formControlName=\"{{options.Name}}\"\r\n [maxFileSize]=\"maxFileSize\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ImageUploadFormControl.invalid && ImageUploadFormControl.touched\">\r\n </div>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n\r\n <ngx-dropzone-label *ngIf=\"files.length==0&&options.IsReadonly\">\r\n <div #element >\r\n <img [src]=\"ImageSource\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ImageUploadFormControl.invalid && ImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ImageUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- image cropper modal-->\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body\">\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 class=\"cropper-btns\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomIn\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"ZoomOut\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveLeft\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveRight\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveUp\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"MoveDown\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateLeft\")}}'>\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip='{{UtilityService.getResourceValue(\"RotateRight\")}}'>\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
4021
4069
  },] }
4022
4070
  ];
4023
4071
  ImageUploaderComponent.ctorParameters = function () { return [
@@ -4400,7 +4448,7 @@
4400
4448
  ProfileImageUploaderComponent.decorators = [
4401
4449
  { type: i0.Component, args: [{
4402
4450
  selector: 'BBSF-ProfileImageUploader',
4403
- template: "<div class=\"form-group bbsf-control bbsf-profile-image-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div *ngIf=\"options.AllowDropZone\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\"\r\n aria-invalid=\"true\"\r\n ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div *ngIf=\"!options.AllowDropZone\" style=\"width:fit-content\">\r\n <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n <div #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" class=\"profile-upload-img\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <div class=\"d-none {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n </div>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- image cropper modal-->\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body\">\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 class=\"cropper-btns\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Zoom out\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move left\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move right\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move up\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move down\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate left\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate right\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
4451
+ template: "<div class=\"form-group bbsf-control bbsf-profile-image-upload\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Allow dropZone-->\r\n <div *ngIf=\"options.AllowDropZone&&!options.IsReadonly\" class=\"bbsf-input-container {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\"\r\n aria-invalid=\"true\"\r\n ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n <ngx-dropzone-label class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 50px; height: 50px;\">\r\n <path opacity=\"0.3\" d=\"M5 16C3.3 16 2 14.7 2 13C2 11.3 3.3 10 5 10H5.1C5 9.7 5 9.3 5 9C5 6.2 7.2 4 10 4C11.9 4 13.5 5 14.3 6.5C14.8 6.2 15.4 6 16 6C17.7 6 19 7.3 19 9C19 9.4 18.9 9.7 18.8 10C18.9 10 18.9 10 19 10C20.7 10 22 11.3 22 13C22 14.7 20.7 16 19 16H5ZM8 13.6H16L12.7 10.3C12.3 9.89999 11.7 9.89999 11.3 10.3L8 13.6Z\" fill=\"currentColor\" style=\"fill: #a1a1a1;\"></path>\r\n <path d=\"M11 13.6V19C11 19.6 11.4 20 12 20C12.6 20 13 19.6 13 19V13.6H11Z\" fill=\"currentColor\" style=\"fill: #989898;\"></path>\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n </ngx-dropzone-label>\r\n <ngx-dropzone-image-preview class=\"dropzone-preview\" *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div *ngIf=\"!options.AllowDropZone&&!options.IsReadonly\" style=\"width:fit-content\">\r\n <ngx-dropzone-label *ngIf=\"files.length==0\">\r\n <div #element (click)=\"showImageUploader(element)\">\r\n <img [src]=\"ImageSource\" class=\"profile-upload-img\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n <div class=\"d-none {{options.ExtraClasses}}\"\r\n ngx-dropzone\r\n [disabled]=\"options.IsDisabled\"\r\n [accept]=\"AcceptedType\"\r\n (change)=\"onFileChange($event)\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n ngDefaultControl formControlName=\"{{options.Name}}\"\r\n id=\"{{options.Name}}\"\r\n [class.is-invalid]=\"ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched\">\r\n </div>\r\n <ngx-dropzone-image-preview *ngFor=\"let f of files\" [file]=\"f\" [removable]=\"true\" (removed)=\"removeFromControlValue(f)\" ngProjectAs=\"ngx-dropzone-preview\">\r\n </ngx-dropzone-image-preview>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg\" *ngIf=\"ValidationMessage\" [innerHTML]=\"ValidationMessage\"></div>\r\n </div>\r\n\r\n <ngx-dropzone-label *ngIf=\"files.length==0&&options.IsReadonly\">\r\n <div #element >\r\n <img [src]=\"ImageSource\" />\r\n </div>\r\n </ngx-dropzone-label>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(ProfileImageUploadFormControl.invalid && ProfileImageUploadFormControl.touched)\">\r\n {{getErrorValidation(ProfileImageUploadFormControl.errors|keyvalue)}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-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 <!-- image cropper modal-->\r\n <div id=\"mdlSample\" class=\"modal bbsf-cropper-modal\" role=\"dialog\" [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\" data-dismiss=\"modal\" (click)=\"openModal(false)\"></button>\r\n </div>\r\n <div class=\"modal-body\">\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 class=\"cropper-btns\">\r\n <div class=\"btn-group\">\r\n <button type=\"button\" (click)=\"zoomImage(0.1)\" class=\"btn btn-default\" ngbTooltip=\"Zoom in\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Zoom out\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move left\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move right\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move up\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Move down\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate left\">\r\n <span class=\"docs-tooltip\">\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\" ngbTooltip=\"Rotate right\">\r\n <span class=\"docs-tooltip\">\r\n <span class=\"fa fa-redo-alt\"></span>\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"modal-footer\" align=\"right\">\r\n <button type=\"button\" id=\"btnClose\" class=\"btn btn-sm btn-light\" (click)=\"openModal(false)\">\r\n {{UtilityService.getResourceValue(\"CancelLabel\")}}\r\n </button>\r\n <button type=\"button\" (click)=\"cropImage()\" id=\"btnOK\" class=\"btn btn-sm btn-brand\">\r\n {{UtilityService.getResourceValue(\"Crop\")}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n"
4404
4452
  },] }
4405
4453
  ];
4406
4454
  ProfileImageUploaderComponent.ctorParameters = function () { return [
@@ -4662,7 +4710,7 @@
4662
4710
  { type: i0.Component, args: [{
4663
4711
  // tslint:disable-next-line: component-selector
4664
4712
  selector: 'BBSF-AutocompleteTextBox',
4665
- template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Input container-->\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *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 [dir]=\"textDir\"\r\n formControlName=\"{{options.Name}}\"\r\n 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 class=\"form-control {{options.ExtraClasses}}\" *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 [dir]=\"textDir\"\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 <ng-template #itemTemplate let-item>\r\n <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n <a [innerHTML]=\"item.value\"></a>\r\n </ng-template>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n </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"
4713
+ template: "\r\n<div class=\"form-group bbsf-control bbsf-autocomplete-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--Input container-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n <!--input-->\r\n <ng-autocomplete class=\"form-control {{options.ExtraClasses}}\" *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 [dir]=\"textDir\"\r\n formControlName=\"{{options.Name}}\"\r\n 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 class=\"form-control {{options.ExtraClasses}}\" *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 [dir]=\"textDir\"\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 <ng-template #itemTemplate let-item>\r\n <img *ngIf=\"options.ItemWithImage\" src=\"{{(item.image?item.image:avatarImage)}}\" />\r\n <a [innerHTML]=\"item.value\"></a>\r\n </ng-template>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{AutocompleteTextBoxControl.value.value}}</span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(AutocompleteTextBoxControl.invalid && AutocompleteTextBoxControl.touched)\">\r\n {{getErrorValidation(AutocompleteTextBoxControl.errors|keyvalue)}}\r\n </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"
4666
4714
  },] }
4667
4715
  ];
4668
4716
  AutocompleteTextBoxComponent.ctorParameters = function () { return [
@@ -4934,6 +4982,10 @@
4934
4982
  this.tags.pop();
4935
4983
  }
4936
4984
  };
4985
+ TagsInputComponent.prototype.getTagsValue = function () {
4986
+ if (this.tags.length > 0)
4987
+ return this.tags.map(function (item) { return item.name; });
4988
+ };
4937
4989
  return TagsInputComponent;
4938
4990
  }());
4939
4991
  TagsInputComponent.controlContainerstatic = null;
@@ -4941,7 +4993,7 @@
4941
4993
  { type: i0.Component, args: [{
4942
4994
  // tslint:disable-next-line: component-selector
4943
4995
  selector: 'BBSF-TagsInput',
4944
- template: "\r\n<div [formGroup]=\"group\">\r\n <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--input-->\r\n <div class=\"bbsf-input-container\">\r\n <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n [dir]=\"textDir\" [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>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n </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"
4996
+ template: "\r\n<div [formGroup]=\"group\">\r\n <div class=\"form-group bbsf-control bbsf-tags-input\" [formGroup]=\"TagsFormGroup\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--input-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n <b-tags-input type=\"text\" class=\"form-control {{options.ExtraClasses}}\"\r\n [dir]=\"textDir\" [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>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{getTagsValue()}}</span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(TagsFormControl.invalid && TagsFormControl.touched)\">\r\n {{getErrorValidation(TagsFormControl.errors|keyvalue)}}\r\n </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"
4945
4997
  },] }
4946
4998
  ];
4947
4999
  TagsInputComponent.ctorParameters = function () { return [
@@ -5488,6 +5540,9 @@
5488
5540
  this.options.Value = originalValue;
5489
5541
  this.OnChange.emit(originalValue);
5490
5542
  };
5543
+ RadioButtonComponent.prototype.getSelectedItemValue = function (value) {
5544
+ return this.options.Items.filter(function (item) { return item.Value == value; })[0].Text;
5545
+ };
5491
5546
  return RadioButtonComponent;
5492
5547
  }());
5493
5548
  RadioButtonComponent.controlContainerstatic = null;
@@ -5495,7 +5550,7 @@
5495
5550
  { type: i0.Component, args: [{
5496
5551
  // tslint:disable-next-line: component-selector
5497
5552
  selector: 'BBSF-RadioButton',
5498
- template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <div class=\"bbsf-input-container\">\r\n <!--input-->\r\n <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n class=\"{{options.ExtraClasses}}\"\r\n [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n (change)=\"onValueChanged()\"\r\n aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n formControlName=\"{{options.Name}}\">\r\n <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n </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"
5553
+ template: "<div class=\"form-group bbsf-control bbsf-radio-button\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label [hidden]=\"options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"bbsf-input-container\">\r\n <!--input-->\r\n <div class=\"radio-container\" *ngFor=\"let item of options.Items\">\r\n <input type=\"radio\" id=\"{{options.Name}}{{item.Value}}\"\r\n class=\"{{options.ExtraClasses}}\"\r\n [value]=\"item.Value\" checked=\"{{(options.Value!=null)&&(options.Value.Value == item.Value)}}\"\r\n (change)=\"onValueChanged()\"\r\n aria-describedby=\"email-error\"\r\n aria-invalid=\"true\" [(ngModel)]=\"options.Value\"\r\n formControlName=\"{{options.Name}}\">\r\n <label class=\"radio-input-label\" for=\"{{options.Name}}{{item.Value}}\">{{item.Text}}</label>\r\n </div>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{getSelectedItemValue(options.Value)}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!options.IsReadonly\" class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(RadioButtonFormControl.invalid && RadioButtonFormControl.touched)\">\r\n {{getErrorValidation(RadioButtonFormControl.errors|keyvalue)}}\r\n </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"
5499
5554
  },] }
5500
5555
  ];
5501
5556
  RadioButtonComponent.ctorParameters = function () { return [
@@ -5529,6 +5584,7 @@
5529
5584
  this.controlValidationService = controlValidationService;
5530
5585
  this.globalSettings = globalSettings;
5531
5586
  this.OnChange = new i0.EventEmitter();
5587
+ this.inputType = exports.InputType;
5532
5588
  this.MaskPattern = '';
5533
5589
  this.WordCount = 0;
5534
5590
  this.WordCountArray = 0;
@@ -5541,7 +5597,7 @@
5541
5597
  this.showCharsLimitMsg = false;
5542
5598
  this.hasCharsLimitValidationError = false;
5543
5599
  this.minCharsLimit = -1; //To disable chars limit feature by default
5544
- this.maxLimitWarningMsg = "";
5600
+ this.maxLimitWarningMsg = '';
5545
5601
  this.resetError = function () {
5546
5602
  _this.controlValidationService.RemoveGlobalError();
5547
5603
  };
@@ -5578,14 +5634,14 @@
5578
5634
  this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
5579
5635
  if (!this.options.ViewType)
5580
5636
  this.options.ViewType = this.globalSettings.ViewType;
5581
- if (this.options.MaskPattern != null && this.options.MaskPattern != "") {
5637
+ if (this.options.MaskPattern != null && this.options.MaskPattern != '') {
5582
5638
  this.MaskPattern = this.options.MaskPattern;
5583
5639
  this.options.Placeholder = this.MaskPattern;
5584
5640
  }
5585
5641
  this.group.addControl(this.options.Name, new forms.FormControl(''));
5586
5642
  this.TextBoxFormControl = this.group.controls[this.options.Name]; // new FormControl('',validationRules);
5587
5643
  this.TextBoxFormControl.setValue(this.options.Value);
5588
- if (this.options.LabelKey != null && this.options.LabelKey != "")
5644
+ if (this.options.LabelKey != null && this.options.LabelKey != '')
5589
5645
  this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
5590
5646
  this.getCustomErrorsMassages();
5591
5647
  if (this.options.IsRequired) {
@@ -5597,17 +5653,27 @@
5597
5653
  this.controlUtility.patternValidator(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, { EmailValidationKey: this.EmailValidationKey }),
5598
5654
  ]));
5599
5655
  break;
5656
+ case exports.InputType.URL:
5657
+ var pattern = new RegExp("(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?");
5658
+ this.validationRules.push(forms.Validators.compose([
5659
+ this.controlUtility.patternValidator(pattern, { URLValidationKey: this.URLValidationKey }),
5660
+ ]));
5661
+ break;
5600
5662
  case exports.InputType.EID:
5601
5663
  this.MaskPattern = '000-0000-0000000-0';
5602
5664
  this.options.Placeholder = this.MaskPattern;
5603
5665
  break;
5604
5666
  case exports.InputType.Number:
5605
- this.validationRules.push(forms.Validators.compose([
5606
- this.controlUtility.patternValidator(/^[0-9]*$/, { IntegerNumberValidationKey: "" }),
5607
- ]));
5608
- this.validationRules.push(forms.Validators.compose([
5609
- this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: "" }),
5610
- ]));
5667
+ if (this.options.CustomValidation.length == 0) {
5668
+ this.validationRules.push(forms.Validators.compose([
5669
+ this.controlUtility.patternValidator(/^[0-9]*$/, {
5670
+ IntegerNumberValidationKey: '',
5671
+ }),
5672
+ ]));
5673
+ this.validationRules.push(forms.Validators.compose([
5674
+ this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: '' }),
5675
+ ]));
5676
+ }
5611
5677
  if (this.options.NumberRange != null) {
5612
5678
  this.validationRules.push(forms.Validators.min(this.options.NumberRange.From));
5613
5679
  this.validationRules.push(forms.Validators.max(this.options.NumberRange.To));
@@ -5616,10 +5682,18 @@
5616
5682
  case exports.InputType.Password:
5617
5683
  if (!this.options.RemoveDefaultPasswordValidation) {
5618
5684
  this.validationRules.push(forms.Validators.compose([
5619
- this.controlUtility.patternValidator(/\d/, { PasswordComplexityHasNumber: this.PasswordComplexityHasNumber }),
5620
- this.controlUtility.patternValidator(/[A-Z]/, { PasswordComplexityHasCapitalLetter: this.PasswordComplexityHasCapitalLetter }),
5621
- this.controlUtility.patternValidator(/[a-z]/, { PasswordComplexityHasSmallLetter: this.PasswordComplexityHasSmallLetter }),
5622
- this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, { PasswordComplexityHasSpecialLetter: this.PasswordComplexityHasSpecialLetter }),
5685
+ this.controlUtility.patternValidator(/\d/, {
5686
+ PasswordComplexityHasNumber: this.PasswordComplexityHasNumber,
5687
+ }),
5688
+ this.controlUtility.patternValidator(/[A-Z]/, {
5689
+ PasswordComplexityHasCapitalLetter: this.PasswordComplexityHasCapitalLetter,
5690
+ }),
5691
+ this.controlUtility.patternValidator(/[a-z]/, {
5692
+ PasswordComplexityHasSmallLetter: this.PasswordComplexityHasSmallLetter,
5693
+ }),
5694
+ this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, {
5695
+ PasswordComplexityHasSpecialLetter: this.PasswordComplexityHasSpecialLetter,
5696
+ }),
5623
5697
  forms.Validators.minLength(8),
5624
5698
  ]));
5625
5699
  }
@@ -5628,7 +5702,9 @@
5628
5702
  if (this.options.LanguageValidation) {
5629
5703
  if (this.options.LanguageValidation == exports.LanguageValidation.Arabic) {
5630
5704
  this.validationRules.push(forms.Validators.compose([
5631
- this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
5705
+ this.controlUtility.patternValidator(/^[^A-Za-z]*$/, {
5706
+ ArabicLetterOnly: this.ArabicLetterOnly,
5707
+ }),
5632
5708
  ]));
5633
5709
  }
5634
5710
  else if (this.options.LanguageValidation == exports.LanguageValidation.English) {
@@ -5650,8 +5726,10 @@
5650
5726
  if (this.options.MaxLength > 0) {
5651
5727
  this.validationRules.push(forms.Validators.maxLength(this.options.MaxLength));
5652
5728
  if (!this.options.MaxLengthWarningLimit)
5653
- this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
5654
- this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
5729
+ this.options.MaxLengthWarningLimit =
5730
+ this.globalSettings.MaxLengthWarningLimit;
5731
+ this.minCharsLimit =
5732
+ this.options.MaxLength - this.options.MaxLengthWarningLimit;
5655
5733
  }
5656
5734
  this.TextBoxFormControl.setValidators(this.validationRules);
5657
5735
  this.TextBoxFormControl.setAsyncValidators(this.validationRulesasync);
@@ -5683,7 +5761,9 @@
5683
5761
  TextboxComponent.prototype.trimControlValue = function () {
5684
5762
  var originalValue = this.controlUtility.trimControlValue(this.TextBoxFormControl.value);
5685
5763
  this.TextBoxFormControl.patchValue(originalValue);
5686
- if (this.options.PatchFunction && this.options.PatchPath && this.TextBoxFormControl.valid) {
5764
+ if (this.options.PatchFunction &&
5765
+ this.options.PatchPath &&
5766
+ this.TextBoxFormControl.valid) {
5687
5767
  this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
5688
5768
  }
5689
5769
  };
@@ -5691,31 +5771,40 @@
5691
5771
  this.controlUtility.CopyInputMessage(inputElement);
5692
5772
  };
5693
5773
  TextboxComponent.prototype.getCustomErrorsMassages = function () {
5694
- this.EmailValidationKey = this.UtilityService.getResourceValue("EmailValidationKey");
5695
- this.PasswordComplexityHasCapitalLetter = this.UtilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
5696
- this.PasswordComplexityHasNumber = this.UtilityService.getResourceValue("PasswordComplexityHasNumber");
5697
- this.PasswordComplexityHasSmallLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSmallLetter");
5698
- this.PasswordComplexityHasSpecialLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
5699
- this.MaxWordCountValidationKey = this.UtilityService.getResourceValue("MaxWordCountValidationKey");
5700
- this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
5701
- this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
5774
+ this.EmailValidationKey =
5775
+ this.UtilityService.getResourceValue('EmailValidationKey');
5776
+ this.URLValidationKey =
5777
+ this.UtilityService.getResourceValue('urlValidationError');
5778
+ this.PasswordComplexityHasCapitalLetter =
5779
+ this.UtilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
5780
+ this.PasswordComplexityHasNumber = this.UtilityService.getResourceValue('PasswordComplexityHasNumber');
5781
+ this.PasswordComplexityHasSmallLetter =
5782
+ this.UtilityService.getResourceValue('PasswordComplexityHasSmallLetter');
5783
+ this.PasswordComplexityHasSpecialLetter =
5784
+ this.UtilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
5785
+ this.MaxWordCountValidationKey = this.UtilityService.getResourceValue('MaxWordCountValidationKey');
5786
+ this.ArabicLetterOnly = this.UtilityService.getResourceValue('ArabicIsRequiredAndOnly50CharactersEnglish');
5787
+ this.EnglishLetterOnly =
5788
+ this.UtilityService.getResourceValue('EnglishLetterOnly');
5702
5789
  };
5703
5790
  TextboxComponent.prototype.onTextChange = function () {
5704
5791
  if (this.options.Type == exports.InputType.Number)
5705
5792
  if (!this.TextBoxFormControl.value) {
5706
- this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: "" });
5793
+ this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: '' });
5707
5794
  return;
5708
5795
  }
5709
- if (this.TextBoxFormControl.value == "") {
5796
+ if (this.TextBoxFormControl.value == '') {
5710
5797
  this.WordCountArray = 0;
5711
5798
  this.WordCount = 0;
5712
5799
  }
5713
5800
  else {
5714
- this.WordCountArray = this.TextBoxFormControl.value.split(" ").length;
5801
+ this.WordCountArray = this.TextBoxFormControl.value.split(' ').length;
5715
5802
  if (this.WordCountArray > 0) {
5716
5803
  if (this.WordCountArray > this.options.MaxWordCount) {
5717
5804
  this.WordCount = this.options.MaxWordCount;
5718
- this.TextBoxFormControl.setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
5805
+ this.TextBoxFormControl.setErrors({
5806
+ MaxWordCountValidationKey: this.options.MaxWordCount,
5807
+ });
5719
5808
  this.TextBoxFormControl.markAsTouched();
5720
5809
  this.TextBoxFormControl.invalid;
5721
5810
  }
@@ -5731,9 +5820,9 @@
5731
5820
  this.showCharsLimitMsg = true;
5732
5821
  this.hasCharsLimitValidationError = true;
5733
5822
  if (this.currentCharsCount == this.options.MaxLength)
5734
- this.charsLimitMsgClass = "danger";
5823
+ this.charsLimitMsgClass = 'danger';
5735
5824
  else
5736
- this.charsLimitMsgClass = "warning";
5825
+ this.charsLimitMsgClass = 'warning';
5737
5826
  }
5738
5827
  else {
5739
5828
  this.showCharsLimitMsg = false;
@@ -5741,7 +5830,7 @@
5741
5830
  }
5742
5831
  var max = this.options.MaxLength;
5743
5832
  var current = this.currentCharsCount;
5744
- var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
5833
+ var resource = this.UtilityService.getResourceValue('MaxLengthLimitWarning');
5745
5834
  this.maxLimitWarningMsg = eval('`' + resource + '`');
5746
5835
  }
5747
5836
  }
@@ -5751,10 +5840,11 @@
5751
5840
  this.IsShowWordCount = isFocus;
5752
5841
  //onFocus
5753
5842
  if (isFocus) {
5754
- if (this.hasCharsLimitValidationError) //check if there was previous validation error
5843
+ if (this.hasCharsLimitValidationError)
5844
+ //check if there was previous validation error
5755
5845
  this.showCharsLimitMsg = true;
5756
- }
5757
- else //onFocusOut
5846
+ } //onFocusOut
5847
+ else
5758
5848
  this.showCharsLimitMsg = false;
5759
5849
  };
5760
5850
  return TextboxComponent;
@@ -5763,7 +5853,7 @@
5763
5853
  TextboxComponent.decorators = [
5764
5854
  { type: i0.Component, args: [{
5765
5855
  selector: 'BBSF-TextBox',
5766
- template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--MaskPattern-->\r\n <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{options.ExtraClasses}}\"\r\n [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\" [validation]=\"true\"\r\n [dir]=\"textDir\"\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 <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!--NoMaskPattern-->\r\n <div *ngIf=\"MaskPattern==null||MaskPattern==''\" class=\"bbsf-input-container\" [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\" [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\" *ngIf=\"options.Icon!=null\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{options.ExtraClasses}} \"\r\n [dir]=\"textDir\"\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 <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\" *ngIf=\"options.EnableCopyToClipboard\" (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}} Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\"\r\n *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n </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"
5856
+ template: "<div class=\"form-group bbsf-control bbsf-textbox\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\"\r\n class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <!--MaskPattern-->\r\n <div *ngIf=\"MaskPattern!=null&&MaskPattern!=''&&!options.IsReadonly\"\r\n class=\"bbsf-input-container\"\r\n [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.Icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{options.ExtraClasses}}\"\r\n [mask]=\"MaskPattern\" placeHolderCharacter=\" \" [showMaskTyped]=\"true\"\r\n [validation]=\"true\"\r\n [dir]=\"textDir\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n 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}}\"\r\n autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n [readonly]=\"options.IsReadonly\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n #userinput>\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\"\r\n *ngIf=\"options.EnableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!--NoMaskPattern-->\r\n <div *ngIf=\"MaskPattern==null||MaskPattern==''&&!options.IsReadonly\"\r\n class=\"bbsf-input-container\"\r\n [ngClass]=\"options.EnableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.IconPosition==1)?'bbsf-left-icon':'bbsf-right-icon'\"\r\n *ngIf=\"options.Icon!=null\">\r\n <span [inlineSVG]=\"options.Icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control {{options.ExtraClasses}} \"\r\n [dir]=\"textDir\"\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}}\"\r\n type=\"{{getInputType(options.Type)}}\"\r\n [class.is-invalid]=\"TextBoxFormControl.invalid && TextBoxFormControl.touched\"\r\n placeholder=\"{{options.Placeholder}}\" id=\"{{options.Name}}\"\r\n autocomplete=\"{{options.AutoComplete}}\"\r\n (change)=\"trimControlValue()\" (keyup)=\"onTextChange()\"\r\n [(ngModel)]=\"options.Value\"\r\n (keydown)=\"WordCountArray>options.MaxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n [readonly]=\"options.IsReadonly\"\r\n #userinput>\r\n <!--CopyToClipboard-->\r\n <span class=\"copy-clipboard\" ngbTooltip=\"Copied!\" triggers=\"click:blur\"\r\n *ngIf=\"options.EnableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userinput)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </span>\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\">\r\n <a *ngIf=\"options.Type==inputType.Email\" href = \"mailto: {{options.Value}}\">{{options.Value}}</a>\r\n <a *ngIf=\"options.Type==inputType.URL\" href = \"{{options.Value}}\" target=\"_blank\" >{{options.Value}}</a>\r\n <span *ngIf=\"options.Type!=inputType.URL&&options.Type!=inputType.Email\"class=\"readonly-view\">{{options.Value}}</span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.MaxWordCount>0&&IsShowWordCount\">{{WordCount}}/{{options.MaxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\"\r\n *ngIf=\"(TextBoxFormControl.invalid && TextBoxFormControl.touched)\">\r\n {{getErrorValidation(TextBoxFormControl.errors|keyvalue)}}\r\n </div>\r\n </div>\r\n <div\r\n *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty)\">{{resetError()}}</div>\r\n</div>\r\n"
5767
5857
  },] }
5768
5858
  ];
5769
5859
  TextboxComponent.ctorParameters = function () { return [
@@ -6093,7 +6183,7 @@
6093
6183
  MapAutoCompleteComponent.decorators = [
6094
6184
  { type: i0.Component, args: [{
6095
6185
  selector: 'BBSF-MapAutoComplete',
6096
- template: "\r\n<div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"(options.ShowAsterisk&&options.IsRequired)||(options.IsRequired)\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--input-->\r\n <div class=\"bbsf-input-container\">\r\n <input class=\"form-control{{options.ExtraClasses}}\"\r\n [value]=\"MapAutoCompleteModel.Text\"\r\n [address]=\"MapAutoCompleteModel.Text\"\r\n value=\"{{MapAutoCompleteModel.Text}}\"\r\n 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\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n </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"
6186
+ template: "\r\n<div class=\"form-group bbsf-control bbsf-maps\" [formGroup]=\"group\">\r\n <div [ngClass]=\"(options.ViewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label *ngIf=\"!options.HideLabel\" class=\"bbsf-label {{options.LabelExtraClasses}}\">\r\n {{options.LabelValue}}\r\n <!--Asterisk-->\r\n <span *ngIf=\"((options.ShowAsterisk&&options.IsRequired)||(options.IsRequired))&&!options.IsReadonly\" class=\"text-danger\">*</span>\r\n </label>\r\n <!--input-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.IsReadonly\">\r\n <input class=\"form-control{{options.ExtraClasses}}\"\r\n [value]=\"MapAutoCompleteModel.Text\"\r\n [address]=\"MapAutoCompleteModel.Text\"\r\n value=\"{{MapAutoCompleteModel.Text}}\"\r\n 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\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.IsReadonly\"><span class=\"readonly-view\">{{MapAutoCompleteModel.Text}}</span>\r\n </div>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.IsReadonly\">\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.LabelDescription!=null\">{{options.LabelDescription}}</div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\"\r\n *ngIf=\"(MapAutoCompleteFormControl.invalid && MapAutoCompleteFormControl.touched)\">\r\n {{getErrorValidation(MapAutoCompleteFormControl.errors|keyvalue)}}\r\n </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"
6097
6187
  },] }
6098
6188
  ];
6099
6189
  MapAutoCompleteComponent.ctorParameters = function () { return [
@@ -6667,7 +6757,7 @@
6667
6757
  RepeaterComponent.decorators = [
6668
6758
  { type: i0.Component, args: [{
6669
6759
  selector: 'BBSF-repeater',
6670
- template: "<ng-container *ngFor='let item of items ; index as i'>\r\n {{setCurrentIndex(i)}}\r\n <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\">\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n let-control=\"controlIndex\">\r\n <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n <button class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #add>\r\n <button class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n <span [innerHTML]=\"options.AddButtonText\"></span>\r\n </button>\r\n</ng-template>\r\n\r\n"
6760
+ template: "<ng-container *ngFor='let item of items ; index as i'>\r\n {{setCurrentIndex(i)}}\r\n <ng-container *ngTemplateOutlet=\"currentTemplate; context: repeaterContext\">\r\n </ng-container>\r\n\r\n</ng-container>\r\n\r\n<ng-container *ngTemplateOutlet=\"add\" >\r\n</ng-container>\r\n\r\n<ng-template *ngFor=\"let RepeaterField of options.RepeaterStructure ; index as i\" name=\"R{{i}}\" let-Index=\"itemIndex\"\r\n let-control=\"controlIndex\">\r\n <repeater-field-builder *ngIf=\"RepeaterField\" [RepeaterField]=\"RepeaterField\" [itemNumber]=\"Index\"\r\n [itemsValue]=\"originalItems\" [controlNumber]=\"control\" [group]=\"repeaterGroup\">\r\n </repeater-field-builder>\r\n</ng-template>\r\n\r\n<ng-template #delete let-item=\"itemIndex\">\r\n <button *ngIf=\"!options.IsReadonly\" class=\"{{options.DeleteButtonExtraClasses}}\" type=\"button\" (click)=\"deleteItem(item)\"\r\n [disabled]=\"items.length ==options.MinRequiredItems&&options.IsRequired\">\r\n <span [innerHTML]=\"options.DeleteButtonText\"></span>\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #add >\r\n <button *ngIf=\"!options.IsReadonly\" class=\"{{options.AddButtonExtraClasses}}\" type=\"button\" (click)=\"addItem()\">\r\n <span [innerHTML]=\"options.AddButtonText\"></span>\r\n </button>\r\n</ng-template>\r\n\r\n"
6671
6761
  },] }
6672
6762
  ];
6673
6763
  RepeaterComponent.ctorParameters = function () { return []; };
@@ -8591,6 +8681,8 @@
8591
8681
  this.LanguageMode = null;
8592
8682
  /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
8593
8683
  this.CustomValidation = [];
8684
+ /** Sets an attribute readonly */
8685
+ this.IsReadonly = false;
8594
8686
  }
8595
8687
  return MultilingualControlOptionsBase;
8596
8688
  }());
@@ -8955,6 +9047,7 @@
8955
9047
  this.RepeaterStructure = [];
8956
9048
  this.DisableAddButton = false;
8957
9049
  this.DisableDeleteButton = false;
9050
+ this.IsReadonly = false;
8958
9051
  }
8959
9052
  return RepeaterOptions;
8960
9053
  }());