@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
@@ -63,14 +63,14 @@ class ErrorMassageValidation {
63
63
  }
64
64
  // tslint:disable-next-line: deprecation
65
65
  static showerror(FormControlName) {
66
- ;
67
- let form = ErrorMassageValidation.controlContainerstatic.control;
66
+ let form = ErrorMassageValidation.controlContainerstatic
67
+ .control;
68
68
  let control = form.get(FormControlName);
69
69
  //console.log(control)
70
- control.setErrors({ 'minlength': true });
70
+ control.setErrors({ minlength: true });
71
71
  control.markAsTouched();
72
72
  }
73
- // isEmailRegisterd(Email: string)
73
+ // isEmailRegisterd(Email: string)
74
74
  // {
75
75
  // let resource:object={
76
76
  // email:Email
@@ -82,92 +82,127 @@ class ErrorMassageValidation {
82
82
  // .pipe(map(response => response.json()))
83
83
  // }
84
84
  getErrorMassageValidation(error) {
85
- ;
86
- let result = "";
85
+ let result = '';
87
86
  switch (error.key) {
88
- case "required":
89
- result = this.utilityService.getResourceValue("RequiredValidationKey");
87
+ case 'required':
88
+ result = this.utilityService.getResourceValue('RequiredValidationKey');
89
+ break;
90
+ case 'email':
91
+ result = this.utilityService.getResourceValue('EmailValidationKey');
90
92
  break;
91
- case "email":
92
- result = this.utilityService.getResourceValue("EmailValidationKey");
93
+ case 'EmailValidationKey':
94
+ result = this.utilityService.getResourceValue('EmailValidationKey');
93
95
  break;
94
- case "EmailValidationKey":
95
- result = this.utilityService.getResourceValue("EmailValidationKey");
96
+ case 'URLValidationKey':
97
+ result = this.utilityService.getResourceValue('urlValidationError');
96
98
  break;
97
- case "pattern":
98
- result = this.utilityService.getResourceValue("NumberValidationKey");
99
+ case 'pattern':
100
+ result = this.utilityService.getResourceValue('NumberValidationKey');
99
101
  break;
100
- case "maxlength":
101
- result = this.utilityService.getResourceValue("MaxLenghtValidationKey") + " " + error.value.requiredLength;
102
+ case 'maxlength':
103
+ result =
104
+ this.utilityService.getResourceValue('MaxLenghtValidationKey') +
105
+ ' ' +
106
+ error.value.requiredLength;
102
107
  break;
103
- case "minlength":
104
- result = this.utilityService.getResourceValue("MinLenghtValidationKey") + " " + error.value.requiredLength;
108
+ case 'minlength':
109
+ result =
110
+ this.utilityService.getResourceValue('MinLenghtValidationKey') +
111
+ ' ' +
112
+ error.value.requiredLength;
105
113
  break;
106
- case "min":
107
- result = this.utilityService.getResourceValue("MinValueValidationKey") + " " + error.value.min;
114
+ case 'min':
115
+ result =
116
+ this.utilityService.getResourceValue('MinValueValidationKey') +
117
+ ' ' +
118
+ error.value.min;
108
119
  break;
109
- case "max":
110
- result = this.utilityService.getResourceValue("MaxValueValidationKey") + " " + error.value.max;
120
+ case 'max':
121
+ result =
122
+ this.utilityService.getResourceValue('MaxValueValidationKey') +
123
+ ' ' +
124
+ error.value.max;
111
125
  break;
112
- case "IntegerNumberValidationKey":
113
- result = this.utilityService.getResourceValue("IntegerNumberValidationKey");
126
+ case 'IntegerNumberValidationKey':
127
+ result = this.utilityService.getResourceValue('IntegerNumberValidationKey');
114
128
  break;
115
- case "PositiveNumberValidationKey":
116
- result = this.utilityService.getResourceValue("PositiveNumberValidationKey");
129
+ case 'PositiveNumberValidationKey':
130
+ result = this.utilityService.getResourceValue('PositiveNumberValidationKey');
117
131
  break;
118
- case "validatePhoneNumber":
119
- result = this.utilityService.getResourceValue("PhoneNumberValidationKey");
132
+ case 'validatePhoneNumber':
133
+ result = this.utilityService.getResourceValue('PhoneNumberValidationKey');
120
134
  break;
121
- case "mask":
122
- result = this.utilityService.getResourceValue("MaskValidationKey") + " " + error.value.requiredMask;
135
+ case 'mask':
136
+ result =
137
+ this.utilityService.getResourceValue('MaskValidationKey') +
138
+ ' ' +
139
+ error.value.requiredMask;
123
140
  break;
124
- case "PasswordComplexityHasNumber":
125
- result = this.utilityService.getResourceValue("PasswordComplexityHasNumber");
141
+ case 'PasswordComplexityHasNumber':
142
+ result = this.utilityService.getResourceValue('PasswordComplexityHasNumber');
126
143
  break;
127
- case "ArabicLetterOnly":
128
- result = this.utilityService.getResourceValue("ArabicLetterOnly");
144
+ case 'ArabicLetterOnly':
145
+ result = this.utilityService.getResourceValue('ArabicLetterOnly');
129
146
  break;
130
- case "EnglishLetterOnly":
131
- result = this.utilityService.getResourceValue("EnglishLetterOnly");
147
+ case 'EnglishLetterOnly':
148
+ result = this.utilityService.getResourceValue('EnglishLetterOnly');
132
149
  break;
133
- case "ArabicIsRequiredAndOnly50CharactersEnglish":
134
- result = this.utilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
150
+ case 'ArabicIsRequiredAndOnly50CharactersEnglish':
151
+ result = this.utilityService.getResourceValue('ArabicIsRequiredAndOnly50CharactersEnglish');
135
152
  break;
136
- case "PasswordComplexityHasCapitalLetter":
137
- result = this.utilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
153
+ case 'PasswordComplexityHasCapitalLetter':
154
+ result = this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
138
155
  break;
139
- case "PasswordComplexityHasSmallLetter":
140
- result = this.utilityService.getResourceValue("PasswordComplexityHasSmallLetter");
156
+ case 'PasswordComplexityHasSmallLetter':
157
+ result = this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
141
158
  break;
142
- case "PasswordComplexityHasSpecialLetter":
143
- result = this.utilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
159
+ case 'PasswordComplexityHasSpecialLetter':
160
+ result = this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
144
161
  break;
145
- case "MaxWordCountValidationKey":
146
- result = this.utilityService.getResourceValue("MaxWordCountValidationKey") + " " + error.value;
162
+ case 'MaxWordCountValidationKey':
163
+ result =
164
+ this.utilityService.getResourceValue('MaxWordCountValidationKey') +
165
+ ' ' +
166
+ error.value;
147
167
  break;
148
- case "NewSelectionValidationKey":
149
- result = this.utilityService.getResourceValue("NewSelectionValidationKey");
168
+ case 'NewSelectionValidationKey':
169
+ result = this.utilityService.getResourceValue('NewSelectionValidationKey');
150
170
  break;
151
- case "MaxFileCountValidationKey":
152
- result = this.utilityService.getResourceValue("MaxFileCountValidationKey") + " " + error.value;
171
+ case 'MaxFileCountValidationKey':
172
+ result =
173
+ this.utilityService.getResourceValue('MaxFileCountValidationKey') +
174
+ ' ' +
175
+ error.value;
153
176
  break;
154
- case "MinFileCountValidationKey":
155
- result = this.utilityService.getResourceValue("MinFileCountValidationKey") + " " + error.value;
177
+ case 'MinFileCountValidationKey':
178
+ result =
179
+ this.utilityService.getResourceValue('MinFileCountValidationKey') +
180
+ ' ' +
181
+ error.value;
156
182
  break;
157
- case "MaxSizeForAllFilesInMB":
158
- result = this.utilityService.getResourceValue("MaxSizeForAllFilesInMB") + " " + error.value;
183
+ case 'MaxSizeForAllFilesInMB':
184
+ result =
185
+ this.utilityService.getResourceValue('MaxSizeForAllFilesInMB') +
186
+ ' ' +
187
+ error.value;
159
188
  break;
160
- case "FileMaxSizeInMB":
161
- result = this.utilityService.getResourceValue("FileMaxSizeInMB") + " " + error.value;
189
+ case 'FileMaxSizeInMB':
190
+ result =
191
+ this.utilityService.getResourceValue('FileMaxSizeInMB') +
192
+ ' ' +
193
+ error.value;
162
194
  break;
163
- case "ToolTipTypeError":
164
- result = this.utilityService.getResourceValue("ToolTipTypeError") + " " + error.value;
195
+ case 'ToolTipTypeError':
196
+ result =
197
+ this.utilityService.getResourceValue('ToolTipTypeError') +
198
+ ' ' +
199
+ error.value;
165
200
  break;
166
- case "InvalidEndDate":
167
- result = this.utilityService.getResourceValue("InvalidEndDate");
201
+ case 'InvalidEndDate':
202
+ result = this.utilityService.getResourceValue('InvalidEndDate');
168
203
  break;
169
- case "InvalidStartDate":
170
- result = this.utilityService.getResourceValue("InvalidStartDate");
204
+ case 'InvalidStartDate':
205
+ result = this.utilityService.getResourceValue('InvalidStartDate');
171
206
  break;
172
207
  default:
173
208
  break;
@@ -192,6 +227,7 @@ var InputType;
192
227
  InputType[InputType["Email"] = 3] = "Email";
193
228
  InputType[InputType["Number"] = 4] = "Number";
194
229
  InputType[InputType["EID"] = 5] = "EID";
230
+ InputType[InputType["URL"] = 6] = "URL";
195
231
  })(InputType || (InputType = {}));
196
232
 
197
233
  class ControlUtility {
@@ -605,7 +641,7 @@ DateInputComponent.controlContainerstatic = null;
605
641
  DateInputComponent.decorators = [
606
642
  { type: Component, args: [{
607
643
  selector: 'BBSF-DateTimePicker',
608
- 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",
644
+ 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",
609
645
  providers: [
610
646
  { provide: OwlDateTimeIntl, useClass: DefaultIntl }
611
647
  ]
@@ -1109,7 +1145,7 @@ FileUploadComponent.controlContainerstatic = null;
1109
1145
  FileUploadComponent.decorators = [
1110
1146
  { type: Component, args: [{
1111
1147
  selector: 'BBSF-FileUplaod',
1112
- 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"
1148
+ 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"
1113
1149
  },] }
1114
1150
  ];
1115
1151
  FileUploadComponent.ctorParameters = () => [
@@ -1537,7 +1573,7 @@ MultiLingualTextBoxComponent.controlContainerstatic = null;
1537
1573
  MultiLingualTextBoxComponent.decorators = [
1538
1574
  { type: Component, args: [{
1539
1575
  selector: 'BBSF-MultiLingualTextBox',
1540
- 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"
1576
+ 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"
1541
1577
  },] }
1542
1578
  ];
1543
1579
  MultiLingualTextBoxComponent.ctorParameters = () => [
@@ -1728,7 +1764,7 @@ TextAreaComponent.controlContainerstatic = null;
1728
1764
  TextAreaComponent.decorators = [
1729
1765
  { type: Component, args: [{
1730
1766
  selector: 'BBSF-TextArea',
1731
- 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"
1767
+ 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"
1732
1768
  },] }
1733
1769
  ];
1734
1770
  TextAreaComponent.ctorParameters = () => [
@@ -2148,7 +2184,7 @@ MultiLingualTextAreaComponent.controlContainerstatic = null;
2148
2184
  MultiLingualTextAreaComponent.decorators = [
2149
2185
  { type: Component, args: [{
2150
2186
  selector: 'BBSF-MultiLingualTextArea',
2151
- 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"
2187
+ 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"
2152
2188
  },] }
2153
2189
  ];
2154
2190
  MultiLingualTextAreaComponent.ctorParameters = () => [
@@ -2262,7 +2298,7 @@ CheckBoxComponent.decorators = [
2262
2298
  { type: Component, args: [{
2263
2299
  // tslint:disable-next-line: component-selector
2264
2300
  selector: 'BBSF-CheckBox',
2265
- 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"
2301
+ 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"
2266
2302
  },] }
2267
2303
  ];
2268
2304
  CheckBoxComponent.ctorParameters = () => [
@@ -2391,6 +2427,14 @@ class DropdownListComponent {
2391
2427
  }
2392
2428
  return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
2393
2429
  }
2430
+ getSelectedItemValue() {
2431
+ if (this.options.SelectedItems) {
2432
+ if (this.options.SingleSelection)
2433
+ return this.options.DataSource.filter(item => item[this.options.ItemTempletkey] == this.options.SelectedItems)[0][this.options.ItemTempletvalue];
2434
+ else
2435
+ return this.options.DataSource.filter(item => this.options.SelectedItems.includes(item[this.options.ItemTempletkey])).map(item => item[this.options.ItemTempletvalue]);
2436
+ }
2437
+ }
2394
2438
  onItemSelect() {
2395
2439
  this.onChangeService.ChangeValue(this.options.Name);
2396
2440
  let originalValue = this.options.SelectedItems;
@@ -2436,7 +2480,7 @@ DropdownListComponent.decorators = [
2436
2480
  { type: Component, args: [{
2437
2481
  // tslint:disable-next-line: component-selector
2438
2482
  selector: 'BBSF-DropdownList',
2439
- 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"
2483
+ 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"
2440
2484
  },] }
2441
2485
  ];
2442
2486
  DropdownListComponent.ctorParameters = () => [
@@ -2559,7 +2603,7 @@ PhoneComponent.controlContainerstatic = null;
2559
2603
  PhoneComponent.decorators = [
2560
2604
  { type: Component, args: [{
2561
2605
  selector: 'BBSF-Phone',
2562
- 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"
2606
+ 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"
2563
2607
  },] }
2564
2608
  ];
2565
2609
  PhoneComponent.ctorParameters = () => [
@@ -2603,6 +2647,9 @@ class ToggleslideComponent {
2603
2647
  this.SlideValue = this.options.Value == undefined ? false : this.options.Value;
2604
2648
  if (!this.options.ViewType)
2605
2649
  this.options.ViewType = this.globalSettings.ViewType;
2650
+ if (this.options.IsDisabled || this.options.IsReadonly) {
2651
+ this.ToggleslideFormControl.disable();
2652
+ }
2606
2653
  if (this.options.LabelKey != null && this.options.LabelKey != "")
2607
2654
  this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
2608
2655
  }
@@ -2640,7 +2687,7 @@ ToggleslideComponent.controlContainerstatic = null;
2640
2687
  ToggleslideComponent.decorators = [
2641
2688
  { type: Component, args: [{
2642
2689
  selector: 'BBSF-Toggleslide',
2643
- 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"
2690
+ 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"
2644
2691
  },] }
2645
2692
  ];
2646
2693
  ToggleslideComponent.ctorParameters = () => [
@@ -2861,7 +2908,7 @@ HtmlEditorComponent.controlContainerstatic = null;
2861
2908
  HtmlEditorComponent.decorators = [
2862
2909
  { type: Component, args: [{
2863
2910
  selector: 'BBSF-HtmlEditor',
2864
- 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"
2911
+ 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"
2865
2912
  },] }
2866
2913
  ];
2867
2914
  HtmlEditorComponent.ctorParameters = () => [
@@ -3282,7 +3329,7 @@ MultiLingualHtmlEditorComponent.controlContainerstatic = null;
3282
3329
  MultiLingualHtmlEditorComponent.decorators = [
3283
3330
  { type: Component, args: [{
3284
3331
  selector: 'BBSF-MultiLingualHtmlEditor',
3285
- 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"
3332
+ 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"
3286
3333
  },] }
3287
3334
  ];
3288
3335
  MultiLingualHtmlEditorComponent.ctorParameters = () => [
@@ -3618,7 +3665,7 @@ ImageUploaderComponent.controlContainerstatic = null;
3618
3665
  ImageUploaderComponent.decorators = [
3619
3666
  { type: Component, args: [{
3620
3667
  selector: 'BBSF-ImageUpload',
3621
- 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"
3668
+ 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"
3622
3669
  },] }
3623
3670
  ];
3624
3671
  ImageUploaderComponent.ctorParameters = () => [
@@ -3986,7 +4033,7 @@ ProfileImageUploaderComponent.controlContainerstatic = null;
3986
4033
  ProfileImageUploaderComponent.decorators = [
3987
4034
  { type: Component, args: [{
3988
4035
  selector: 'BBSF-ProfileImageUploader',
3989
- 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"
4036
+ 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"
3990
4037
  },] }
3991
4038
  ];
3992
4039
  ProfileImageUploaderComponent.ctorParameters = () => [
@@ -4235,7 +4282,7 @@ AutocompleteTextBoxComponent.decorators = [
4235
4282
  { type: Component, args: [{
4236
4283
  // tslint:disable-next-line: component-selector
4237
4284
  selector: 'BBSF-AutocompleteTextBox',
4238
- 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"
4285
+ 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"
4239
4286
  },] }
4240
4287
  ];
4241
4288
  AutocompleteTextBoxComponent.ctorParameters = () => [
@@ -4494,13 +4541,17 @@ class TagsInputComponent {
4494
4541
  this.tags.pop();
4495
4542
  }
4496
4543
  }
4544
+ getTagsValue() {
4545
+ if (this.tags.length > 0)
4546
+ return this.tags.map(item => item.name);
4547
+ }
4497
4548
  }
4498
4549
  TagsInputComponent.controlContainerstatic = null;
4499
4550
  TagsInputComponent.decorators = [
4500
4551
  { type: Component, args: [{
4501
4552
  // tslint:disable-next-line: component-selector
4502
4553
  selector: 'BBSF-TagsInput',
4503
- 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"
4554
+ 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"
4504
4555
  },] }
4505
4556
  ];
4506
4557
  TagsInputComponent.ctorParameters = () => [
@@ -5055,13 +5106,16 @@ class RadioButtonComponent {
5055
5106
  this.options.Value = originalValue;
5056
5107
  this.OnChange.emit(originalValue);
5057
5108
  }
5109
+ getSelectedItemValue(value) {
5110
+ return this.options.Items.filter(item => item.Value == value)[0].Text;
5111
+ }
5058
5112
  }
5059
5113
  RadioButtonComponent.controlContainerstatic = null;
5060
5114
  RadioButtonComponent.decorators = [
5061
5115
  { type: Component, args: [{
5062
5116
  // tslint:disable-next-line: component-selector
5063
5117
  selector: 'BBSF-RadioButton',
5064
- 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"
5118
+ 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"
5065
5119
  },] }
5066
5120
  ];
5067
5121
  RadioButtonComponent.ctorParameters = () => [
@@ -5094,6 +5148,7 @@ class TextboxComponent {
5094
5148
  this.controlValidationService = controlValidationService;
5095
5149
  this.globalSettings = globalSettings;
5096
5150
  this.OnChange = new EventEmitter();
5151
+ this.inputType = InputType;
5097
5152
  this.MaskPattern = '';
5098
5153
  this.WordCount = 0;
5099
5154
  this.WordCountArray = 0;
@@ -5106,7 +5161,7 @@ class TextboxComponent {
5106
5161
  this.showCharsLimitMsg = false;
5107
5162
  this.hasCharsLimitValidationError = false;
5108
5163
  this.minCharsLimit = -1; //To disable chars limit feature by default
5109
- this.maxLimitWarningMsg = "";
5164
+ this.maxLimitWarningMsg = '';
5110
5165
  this.resetError = () => {
5111
5166
  this.controlValidationService.RemoveGlobalError();
5112
5167
  };
@@ -5142,14 +5197,14 @@ class TextboxComponent {
5142
5197
  this.options.MaxLength = this.globalSettings.MaxLengthTextBox;
5143
5198
  if (!this.options.ViewType)
5144
5199
  this.options.ViewType = this.globalSettings.ViewType;
5145
- if (this.options.MaskPattern != null && this.options.MaskPattern != "") {
5200
+ if (this.options.MaskPattern != null && this.options.MaskPattern != '') {
5146
5201
  this.MaskPattern = this.options.MaskPattern;
5147
5202
  this.options.Placeholder = this.MaskPattern;
5148
5203
  }
5149
5204
  this.group.addControl(this.options.Name, new FormControl(''));
5150
5205
  this.TextBoxFormControl = this.group.controls[this.options.Name]; // new FormControl('',validationRules);
5151
5206
  this.TextBoxFormControl.setValue(this.options.Value);
5152
- if (this.options.LabelKey != null && this.options.LabelKey != "")
5207
+ if (this.options.LabelKey != null && this.options.LabelKey != '')
5153
5208
  this.options.LabelValue = this.UtilityService.getResourceValue(this.options.LabelKey);
5154
5209
  this.getCustomErrorsMassages();
5155
5210
  if (this.options.IsRequired) {
@@ -5161,17 +5216,27 @@ class TextboxComponent {
5161
5216
  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 }),
5162
5217
  ]));
5163
5218
  break;
5219
+ case InputType.URL:
5220
+ var pattern = new RegExp("(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?");
5221
+ this.validationRules.push(Validators.compose([
5222
+ this.controlUtility.patternValidator(pattern, { URLValidationKey: this.URLValidationKey }),
5223
+ ]));
5224
+ break;
5164
5225
  case InputType.EID:
5165
5226
  this.MaskPattern = '000-0000-0000000-0';
5166
5227
  this.options.Placeholder = this.MaskPattern;
5167
5228
  break;
5168
5229
  case InputType.Number:
5169
- this.validationRules.push(Validators.compose([
5170
- this.controlUtility.patternValidator(/^[0-9]*$/, { IntegerNumberValidationKey: "" }),
5171
- ]));
5172
- this.validationRules.push(Validators.compose([
5173
- this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: "" }),
5174
- ]));
5230
+ if (this.options.CustomValidation.length == 0) {
5231
+ this.validationRules.push(Validators.compose([
5232
+ this.controlUtility.patternValidator(/^[0-9]*$/, {
5233
+ IntegerNumberValidationKey: '',
5234
+ }),
5235
+ ]));
5236
+ this.validationRules.push(Validators.compose([
5237
+ this.controlUtility.patternValidator(/^[+]?([.]\d+|\d+[.]?\d*)$/, { PositiveNumberValidationKey: '' }),
5238
+ ]));
5239
+ }
5175
5240
  if (this.options.NumberRange != null) {
5176
5241
  this.validationRules.push(Validators.min(this.options.NumberRange.From));
5177
5242
  this.validationRules.push(Validators.max(this.options.NumberRange.To));
@@ -5180,10 +5245,18 @@ class TextboxComponent {
5180
5245
  case InputType.Password:
5181
5246
  if (!this.options.RemoveDefaultPasswordValidation) {
5182
5247
  this.validationRules.push(Validators.compose([
5183
- this.controlUtility.patternValidator(/\d/, { PasswordComplexityHasNumber: this.PasswordComplexityHasNumber }),
5184
- this.controlUtility.patternValidator(/[A-Z]/, { PasswordComplexityHasCapitalLetter: this.PasswordComplexityHasCapitalLetter }),
5185
- this.controlUtility.patternValidator(/[a-z]/, { PasswordComplexityHasSmallLetter: this.PasswordComplexityHasSmallLetter }),
5186
- this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, { PasswordComplexityHasSpecialLetter: this.PasswordComplexityHasSpecialLetter }),
5248
+ this.controlUtility.patternValidator(/\d/, {
5249
+ PasswordComplexityHasNumber: this.PasswordComplexityHasNumber,
5250
+ }),
5251
+ this.controlUtility.patternValidator(/[A-Z]/, {
5252
+ PasswordComplexityHasCapitalLetter: this.PasswordComplexityHasCapitalLetter,
5253
+ }),
5254
+ this.controlUtility.patternValidator(/[a-z]/, {
5255
+ PasswordComplexityHasSmallLetter: this.PasswordComplexityHasSmallLetter,
5256
+ }),
5257
+ this.controlUtility.patternValidator(/[!@#$%^&*(),.?":{}|<>]/, {
5258
+ PasswordComplexityHasSpecialLetter: this.PasswordComplexityHasSpecialLetter,
5259
+ }),
5187
5260
  Validators.minLength(8),
5188
5261
  ]));
5189
5262
  }
@@ -5192,7 +5265,9 @@ class TextboxComponent {
5192
5265
  if (this.options.LanguageValidation) {
5193
5266
  if (this.options.LanguageValidation == LanguageValidation.Arabic) {
5194
5267
  this.validationRules.push(Validators.compose([
5195
- this.controlUtility.patternValidator(/^[^A-Za-z]*$/, { ArabicLetterOnly: this.ArabicLetterOnly }),
5268
+ this.controlUtility.patternValidator(/^[^A-Za-z]*$/, {
5269
+ ArabicLetterOnly: this.ArabicLetterOnly,
5270
+ }),
5196
5271
  ]));
5197
5272
  }
5198
5273
  else if (this.options.LanguageValidation == LanguageValidation.English) {
@@ -5214,8 +5289,10 @@ class TextboxComponent {
5214
5289
  if (this.options.MaxLength > 0) {
5215
5290
  this.validationRules.push(Validators.maxLength(this.options.MaxLength));
5216
5291
  if (!this.options.MaxLengthWarningLimit)
5217
- this.options.MaxLengthWarningLimit = this.globalSettings.MaxLengthWarningLimit;
5218
- this.minCharsLimit = this.options.MaxLength - this.options.MaxLengthWarningLimit;
5292
+ this.options.MaxLengthWarningLimit =
5293
+ this.globalSettings.MaxLengthWarningLimit;
5294
+ this.minCharsLimit =
5295
+ this.options.MaxLength - this.options.MaxLengthWarningLimit;
5219
5296
  }
5220
5297
  this.TextBoxFormControl.setValidators(this.validationRules);
5221
5298
  this.TextBoxFormControl.setAsyncValidators(this.validationRulesasync);
@@ -5247,7 +5324,9 @@ class TextboxComponent {
5247
5324
  trimControlValue() {
5248
5325
  let originalValue = this.controlUtility.trimControlValue(this.TextBoxFormControl.value);
5249
5326
  this.TextBoxFormControl.patchValue(originalValue);
5250
- if (this.options.PatchFunction && this.options.PatchPath && this.TextBoxFormControl.valid) {
5327
+ if (this.options.PatchFunction &&
5328
+ this.options.PatchPath &&
5329
+ this.TextBoxFormControl.valid) {
5251
5330
  this.controlUtility.patchControlValue(originalValue, this.options.PatchFunction, this.options.PatchPath);
5252
5331
  }
5253
5332
  }
@@ -5255,31 +5334,40 @@ class TextboxComponent {
5255
5334
  this.controlUtility.CopyInputMessage(inputElement);
5256
5335
  }
5257
5336
  getCustomErrorsMassages() {
5258
- this.EmailValidationKey = this.UtilityService.getResourceValue("EmailValidationKey");
5259
- this.PasswordComplexityHasCapitalLetter = this.UtilityService.getResourceValue("PasswordComplexityHasCapitalLetter");
5260
- this.PasswordComplexityHasNumber = this.UtilityService.getResourceValue("PasswordComplexityHasNumber");
5261
- this.PasswordComplexityHasSmallLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSmallLetter");
5262
- this.PasswordComplexityHasSpecialLetter = this.UtilityService.getResourceValue("PasswordComplexityHasSpecialLetter");
5263
- this.MaxWordCountValidationKey = this.UtilityService.getResourceValue("MaxWordCountValidationKey");
5264
- this.ArabicLetterOnly = this.UtilityService.getResourceValue("ArabicIsRequiredAndOnly50CharactersEnglish");
5265
- this.EnglishLetterOnly = this.UtilityService.getResourceValue("EnglishLetterOnly");
5337
+ this.EmailValidationKey =
5338
+ this.UtilityService.getResourceValue('EmailValidationKey');
5339
+ this.URLValidationKey =
5340
+ this.UtilityService.getResourceValue('urlValidationError');
5341
+ this.PasswordComplexityHasCapitalLetter =
5342
+ this.UtilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
5343
+ this.PasswordComplexityHasNumber = this.UtilityService.getResourceValue('PasswordComplexityHasNumber');
5344
+ this.PasswordComplexityHasSmallLetter =
5345
+ this.UtilityService.getResourceValue('PasswordComplexityHasSmallLetter');
5346
+ this.PasswordComplexityHasSpecialLetter =
5347
+ this.UtilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
5348
+ this.MaxWordCountValidationKey = this.UtilityService.getResourceValue('MaxWordCountValidationKey');
5349
+ this.ArabicLetterOnly = this.UtilityService.getResourceValue('ArabicIsRequiredAndOnly50CharactersEnglish');
5350
+ this.EnglishLetterOnly =
5351
+ this.UtilityService.getResourceValue('EnglishLetterOnly');
5266
5352
  }
5267
5353
  onTextChange() {
5268
5354
  if (this.options.Type == InputType.Number)
5269
5355
  if (!this.TextBoxFormControl.value) {
5270
- this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: "" });
5356
+ this.TextBoxFormControl.setErrors({ IntegerNumberValidationKey: '' });
5271
5357
  return;
5272
5358
  }
5273
- if (this.TextBoxFormControl.value == "") {
5359
+ if (this.TextBoxFormControl.value == '') {
5274
5360
  this.WordCountArray = 0;
5275
5361
  this.WordCount = 0;
5276
5362
  }
5277
5363
  else {
5278
- this.WordCountArray = this.TextBoxFormControl.value.split(" ").length;
5364
+ this.WordCountArray = this.TextBoxFormControl.value.split(' ').length;
5279
5365
  if (this.WordCountArray > 0) {
5280
5366
  if (this.WordCountArray > this.options.MaxWordCount) {
5281
5367
  this.WordCount = this.options.MaxWordCount;
5282
- this.TextBoxFormControl.setErrors({ MaxWordCountValidationKey: this.options.MaxWordCount });
5368
+ this.TextBoxFormControl.setErrors({
5369
+ MaxWordCountValidationKey: this.options.MaxWordCount,
5370
+ });
5283
5371
  this.TextBoxFormControl.markAsTouched();
5284
5372
  this.TextBoxFormControl.invalid;
5285
5373
  }
@@ -5295,9 +5383,9 @@ class TextboxComponent {
5295
5383
  this.showCharsLimitMsg = true;
5296
5384
  this.hasCharsLimitValidationError = true;
5297
5385
  if (this.currentCharsCount == this.options.MaxLength)
5298
- this.charsLimitMsgClass = "danger";
5386
+ this.charsLimitMsgClass = 'danger';
5299
5387
  else
5300
- this.charsLimitMsgClass = "warning";
5388
+ this.charsLimitMsgClass = 'warning';
5301
5389
  }
5302
5390
  else {
5303
5391
  this.showCharsLimitMsg = false;
@@ -5305,7 +5393,7 @@ class TextboxComponent {
5305
5393
  }
5306
5394
  var max = this.options.MaxLength;
5307
5395
  var current = this.currentCharsCount;
5308
- var resource = this.UtilityService.getResourceValue("MaxLengthLimitWarning");
5396
+ var resource = this.UtilityService.getResourceValue('MaxLengthLimitWarning');
5309
5397
  this.maxLimitWarningMsg = eval('`' + resource + '`');
5310
5398
  }
5311
5399
  }
@@ -5315,10 +5403,11 @@ class TextboxComponent {
5315
5403
  this.IsShowWordCount = isFocus;
5316
5404
  //onFocus
5317
5405
  if (isFocus) {
5318
- if (this.hasCharsLimitValidationError) //check if there was previous validation error
5406
+ if (this.hasCharsLimitValidationError)
5407
+ //check if there was previous validation error
5319
5408
  this.showCharsLimitMsg = true;
5320
- }
5321
- else //onFocusOut
5409
+ } //onFocusOut
5410
+ else
5322
5411
  this.showCharsLimitMsg = false;
5323
5412
  }
5324
5413
  }
@@ -5326,7 +5415,7 @@ TextboxComponent.controlContainerstatic = null;
5326
5415
  TextboxComponent.decorators = [
5327
5416
  { type: Component, args: [{
5328
5417
  selector: 'BBSF-TextBox',
5329
- 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"
5418
+ 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"
5330
5419
  },] }
5331
5420
  ];
5332
5421
  TextboxComponent.ctorParameters = () => [
@@ -5646,7 +5735,7 @@ MapAutoCompleteComponent.controlContainerstatic = null;
5646
5735
  MapAutoCompleteComponent.decorators = [
5647
5736
  { type: Component, args: [{
5648
5737
  selector: 'BBSF-MapAutoComplete',
5649
- 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"
5738
+ 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"
5650
5739
  },] }
5651
5740
  ];
5652
5741
  MapAutoCompleteComponent.ctorParameters = () => [
@@ -6194,7 +6283,7 @@ class RepeaterComponent {
6194
6283
  RepeaterComponent.decorators = [
6195
6284
  { type: Component, args: [{
6196
6285
  selector: 'BBSF-repeater',
6197
- 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"
6286
+ 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"
6198
6287
  },] }
6199
6288
  ];
6200
6289
  RepeaterComponent.ctorParameters = () => [];
@@ -8195,6 +8284,8 @@ class MultilingualControlOptionsBase {
8195
8284
  this.LanguageMode = null;
8196
8285
  /** Allow to Pass Object With Body of Function which represent CustomValidation and massage for error massage */
8197
8286
  this.CustomValidation = [];
8287
+ /** Sets an attribute readonly */
8288
+ this.IsReadonly = false;
8198
8289
  }
8199
8290
  }
8200
8291
 
@@ -8503,6 +8594,7 @@ class RepeaterOptions {
8503
8594
  this.RepeaterStructure = [];
8504
8595
  this.DisableAddButton = false;
8505
8596
  this.DisableDeleteButton = false;
8597
+ this.IsReadonly = false;
8506
8598
  }
8507
8599
  }
8508
8600