@bnsights/bbsf-controls 1.0.190 → 1.0.192

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 (20) hide show
  1. package/README.md +18 -1
  2. package/esm2022/lib/Shared/Enums/Enums.mjs +2 -1
  3. package/esm2022/lib/Shared/Models/RepeaterOptions.mjs +2 -1
  4. package/esm2022/lib/controls/ConfirmationModal/ConfirmationModal.component.mjs +1 -1
  5. package/esm2022/lib/controls/DropdownList/DropdownList.component.mjs +11 -6
  6. package/esm2022/lib/controls/FileUpload/FileUpload.component.mjs +15 -5
  7. package/esm2022/lib/controls/HtmlEditor/HtmlEditor.component.mjs +2 -2
  8. package/esm2022/lib/controls/MultiLingualHtmlEditor/MultiLingualHtmlEditor.component.mjs +74 -50
  9. package/esm2022/lib/controls/Paging/Paging.component.mjs +6 -5
  10. package/esm2022/lib/controls/Repeater/repeater-field-builder/repeater-field-builder.component.mjs +639 -148
  11. package/esm2022/lib/controls/Repeater/repeater-table/repeater-table.component.mjs +8 -6
  12. package/esm2022/lib/controls/TextArea/TextArea.component.mjs +29 -6
  13. package/fesm2022/bnsights-bbsf-controls.mjs +771 -215
  14. package/fesm2022/bnsights-bbsf-controls.mjs.map +1 -1
  15. package/lib/Shared/Enums/Enums.d.ts +1 -0
  16. package/lib/Shared/Models/RepeaterOptions.d.ts +1 -0
  17. package/lib/controls/TextArea/TextArea.component.d.ts +6 -1
  18. package/package.json +2 -2
  19. package/src/lib/assets/sass/confirmation-modal.scss +1 -5
  20. package/src/lib/assets/sass/textarea.scss +18 -0
package/fesm2022/bnsights-bbsf-controls.mjs CHANGED
@@ -1966,13 +1966,18 @@ class DropdownListComponent {
1966
1966
  this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
1967
1967
  }
1968
1968
  this.onChange.emit(originalValue);
1969
- //console.log(this.dropdownListFormControl.value)
1970
1969
  }
1971
1970
  Clear() {
1972
- // Clear the selected items
1973
- this.selectedItems = [];
1974
- this.options.selectedItems = null;
1975
- this.dropdownListFormControl.setValue(this.selectedItems);
1971
+ if (this.options.singleSelection) {
1972
+ this.selectedItems = null;
1973
+ this.options.selectedItems = null;
1974
+ this.dropdownListFormControl.setValue(null);
1975
+ }
1976
+ else {
1977
+ this.selectedItems = [];
1978
+ this.options.selectedItems = [];
1979
+ this.dropdownListFormControl.setValue([]);
1980
+ }
1976
1981
  this.onChangeService.ChangeValue(this.options.name);
1977
1982
  this.onChange.emit();
1978
1983
  if (this.DropdownTemplateVariable) {
@@ -2803,6 +2808,7 @@ class RepeaterOptions {
2803
2808
  this.disableAddButton = false;
2804
2809
  this.disableDeleteButton = false;
2805
2810
  this.isReadonly = false;
2811
+ this.enableTableNumbering = false;
2806
2812
  }
2807
2813
  }
2808
2814
 
@@ -3022,7 +3028,7 @@ class FileUploadComponent {
3022
3028
  // blob.lastModifiedDate = null;
3023
3029
  // blob.webkitRelativePath = '';
3024
3030
  let file = this.fileLikeObject;
3025
- file.url = element.fileURL;
3031
+ file.url = element.fullFileURL;
3026
3032
  files.push(file);
3027
3033
  }
3028
3034
  this.uploader.addToQueue(files);
@@ -3039,7 +3045,7 @@ class FileUploadComponent {
3039
3045
  };
3040
3046
  this.file = element;
3041
3047
  let file = this.fileLikeObject;
3042
- file.url = element.fileURL;
3048
+ file.url = element.fullFileURL;
3043
3049
  this.uploader.addToQueue([file]);
3044
3050
  if (!this.options.value.file) {
3045
3051
  this.fileUploadModel = new FileUploadModel();
@@ -3317,6 +3323,16 @@ class FileUploadComponent {
3317
3323
  return;
3318
3324
  }
3319
3325
  }
3326
+ if (!this.options.isMultipleFile && this.uploader.queue.length > 1) {
3327
+ const formControl = this.fileUploadFormControl;
3328
+ const newErrors = {
3329
+ MaxFileCountValidationKey: 1
3330
+ };
3331
+ formControl.setErrors(newErrors);
3332
+ formControl.markAsTouched();
3333
+ this.uploader.queue = [];
3334
+ return;
3335
+ }
3320
3336
  let AddedQueue = this.uploader.queue.filter((obj) => obj['some'].lastModified != null);
3321
3337
  let hasValidationError = false;
3322
3338
  let validationErrorType = '';
@@ -3616,11 +3632,11 @@ class FileUploadComponent {
3616
3632
  this.options.value = value;
3617
3633
  }
3618
3634
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
3619
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileUploadComponent, selector: "BBSF-FileUpload", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", isUploadComplete: "isUploadComplete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, 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\"\r\n 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\" id=\"{{ options.name }}\"\r\n multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n (click)=\"fileInputDropZone.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n </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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInputDropZone\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n (click)=\"fileInput.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.isReadonly && !options.value\">\r\n <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\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 <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!options.isUploadFileAsync\">\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\r\n 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\"\r\n 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\">\r\n </path>\r\n </svg>\r\n <span class=\"file-name\">{{ sanitizeFileName(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 </ng-container>\r\n </div>\r\n </div>\r\n <!--progress bar file upload-->\r\n <div *ngFor=\"let item of uploader.queue\">\r\n <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n <div class=\"upload-items-toolbar\">\r\n <h4>{{ item?.file?.name }}</h4>\r\n <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1324_13216)\">\r\n <path opacity=\"0.4\"\r\n d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1324_13216\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\" *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)\">\r\n {{ resetError() }}\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5$2.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
3635
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileUploadComponent, selector: "BBSF-FileUpload", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", isUploadComplete: "isUploadComplete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, 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\"\r\n 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\" id=\"{{ options.name }}\"\r\n multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n (click)=\"fileInputDropZone.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n </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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInputDropZone\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n (click)=\"fileInput.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.isReadonly && !options.value\">\r\n <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\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 <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n <a href=\"{{ item?.file?.rawFile['url'] }}\" *ngIf=\"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\r\n 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\"\r\n 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\">\r\n </path>\r\n </svg>\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n <span class=\"file-name\">{{ sanitizeFileName(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 </ng-container>\r\n </div>\r\n </div>\r\n <!--progress bar file upload-->\r\n <div *ngFor=\"let item of uploader.queue\">\r\n <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n <div class=\"upload-items-toolbar\">\r\n <h4>{{ item?.file?.name }}</h4>\r\n <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1324_13216)\">\r\n <path opacity=\"0.4\"\r\n d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1324_13216\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\" *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)\">\r\n {{ resetError() }}\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i5$2.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
3620
3636
  }
3621
3637
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, decorators: [{
3622
3638
  type: Component,
3623
- args: [{ selector: 'BBSF-FileUpload', standalone: false, 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\"\r\n 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\" id=\"{{ options.name }}\"\r\n multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n (click)=\"fileInputDropZone.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n </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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInputDropZone\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n (click)=\"fileInput.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.isReadonly && !options.value\">\r\n <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\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 <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!options.isUploadFileAsync\">\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\r\n 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\"\r\n 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\">\r\n </path>\r\n </svg>\r\n <span class=\"file-name\">{{ sanitizeFileName(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 </ng-container>\r\n </div>\r\n </div>\r\n <!--progress bar file upload-->\r\n <div *ngFor=\"let item of uploader.queue\">\r\n <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n <div class=\"upload-items-toolbar\">\r\n <h4>{{ item?.file?.name }}</h4>\r\n <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1324_13216)\">\r\n <path opacity=\"0.4\"\r\n d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1324_13216\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\" *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)\">\r\n {{ resetError() }}\r\n </div>\r\n </div>\r\n</div>" }]
3639
+ args: [{ selector: 'BBSF-FileUpload', standalone: false, 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\"\r\n 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\" id=\"{{ options.name }}\"\r\n multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\" aria-invalid=\"true\" type=\"file\"\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n (click)=\"fileInputDropZone.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <!--Validation text-->\r\n <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n {{ UtilityService.getResourceValue('DragAndDropHere') }}\r\n </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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInputDropZone\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!--Not allowed dropZone-->\r\n <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n (click)=\"fileInput.click()\">\r\n <div class=\"dropzone-label\">\r\n <div class=\"svg-and-validation\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\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\"\r\n *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n [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=\"\" autocomplete=\"off\"\r\n (change)=\"onFileChange()\" [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\" id=\"{{ options.name }}\"\r\n aria-invalid=\"true\" #fileInput\r\n [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n </div>\r\n <!-- readonly -->\r\n <div *ngIf=\"options.isReadonly && !options.value\">\r\n <span class=\"readonly-view\">{{ UtilityService.getResourceValue('NA') }}</span>\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 <ng-container *ngIf=\"item?.progress == 100 && options.isUploadFileAsync\">\r\n <a *ngIf=\"item?.file?.rawFile['url']\" href=\"{{ item?.file?.rawFile['url'] }}\"\r\n class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\"\r\n (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path opacity=\"0.4\"\r\n d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n <a href=\"{{ item?.file?.rawFile['url'] }}\" *ngIf=\"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\r\n 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\"\r\n 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\">\r\n </path>\r\n </svg>\r\n <span class=\"file-name\">{{ sanitizeFileName(item?.file?.name || '') }}</span>\r\n </a>\r\n <a *ngIf=\"item?.file?.rawFile['url'] == null\" class=\"btn-download-file btn-sm btn-progress-upload\">\r\n <span class=\"file-name\">{{ sanitizeFileName(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 </ng-container>\r\n </div>\r\n </div>\r\n <!--progress bar file upload-->\r\n <div *ngFor=\"let item of uploader.queue\">\r\n <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile == true }\"\r\n *ngIf=\"item?.progress < 100 && options.isUploadFileAsync\">\r\n <div class=\"upload-items-toolbar\">\r\n <h4>{{ item?.file?.name }}</h4>\r\n <span (click)=\"item.remove(); removeFromControlValue(item)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1324_13216)\">\r\n <path opacity=\"0.4\"\r\n d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1324_13216\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"progress\">\r\n <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\"\r\n [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\" *ngIf=\"item?.progress > 0\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!-- required text-->\r\n <div class=\"bbsf-validation\" *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)\">\r\n {{ resetError() }}\r\n </div>\r\n </div>\r\n</div>" }]
3624
3640
  }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
3625
3641
  type: Optional
3626
3642
  }] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: FileUploadService }], propDecorators: { fileInput: [{
@@ -3809,7 +3825,7 @@ class HtmlEditorComponent {
3809
3825
  tag: 'h1',
3810
3826
  },
3811
3827
  ],
3812
- uploadUrl: 'v1/image',
3828
+ // uploadUrl: 'v1/image', this line comment so the editor will convert image to base64 when enable upload the api should return full url for file
3813
3829
  uploadWithCredentials: false,
3814
3830
  sanitize: false,
3815
3831
  toolbarPosition: 'top',
@@ -4739,7 +4755,7 @@ class MultiLingualHtmlEditorComponent {
4739
4755
  this.controlValidationService = controlValidationService;
4740
4756
  this.globalSettings = globalSettings;
4741
4757
  this.OnChange = new EventEmitter();
4742
- this.currentLanguage = "";
4758
+ this.currentLanguage = '';
4743
4759
  this.arabicValidationRules = [];
4744
4760
  this.arabicValidationRulesasync = [];
4745
4761
  this.englishValidationRules = [];
@@ -4747,8 +4763,8 @@ class MultiLingualHtmlEditorComponent {
4747
4763
  this.markAllAsTouched = false;
4748
4764
  this.validationRules = [];
4749
4765
  this.validationRulesasync = [];
4750
- this.arabicLetterOnly = "";
4751
- this.englishLetterOnly = "";
4766
+ this.arabicLetterOnly = '';
4767
+ this.englishLetterOnly = '';
4752
4768
  this.englishValue = null;
4753
4769
  this.arabicValue = null;
4754
4770
  this.resetError = () => {
@@ -4781,10 +4797,9 @@ class MultiLingualHtmlEditorComponent {
4781
4797
  };
4782
4798
  MultiLingualHtmlEditorComponent.controlContainerstatic = this.controlContainer;
4783
4799
  }
4784
- ;
4785
4800
  getCustomErrorsMassages() {
4786
- this.arabicLetterOnly = this.utilityService.getResourceValue("ArabicLetterOnly");
4787
- this.englishLetterOnly = this.utilityService.getResourceValue("EnglishLetterOnly");
4801
+ this.arabicLetterOnly = this.utilityService.getResourceValue('ArabicLetterOnly');
4802
+ this.englishLetterOnly = this.utilityService.getResourceValue('EnglishLetterOnly');
4788
4803
  }
4789
4804
  async ngOnInit() {
4790
4805
  if (!this.options.viewType)
@@ -4815,7 +4830,7 @@ class MultiLingualHtmlEditorComponent {
4815
4830
  customClasses: [
4816
4831
  {
4817
4832
  name: 'quote',
4818
- class: 'quote',
4833
+ class: 'quote'
4819
4834
  },
4820
4835
  {
4821
4836
  name: 'redText',
@@ -4824,10 +4839,10 @@ class MultiLingualHtmlEditorComponent {
4824
4839
  {
4825
4840
  name: 'titleText',
4826
4841
  class: 'titleText',
4827
- tag: 'h1',
4828
- },
4842
+ tag: 'h1'
4843
+ }
4829
4844
  ],
4830
- uploadUrl: 'v1/image',
4845
+ // uploadUrl: 'v1/image', this line comment so the editor will convert image to base64 when enable upload the api should return full url for file
4831
4846
  uploadWithCredentials: false,
4832
4847
  sanitize: false,
4833
4848
  toolbarPosition: 'top',
@@ -4857,7 +4872,7 @@ class MultiLingualHtmlEditorComponent {
4857
4872
  customClasses: [
4858
4873
  {
4859
4874
  name: 'quote',
4860
- class: 'quote',
4875
+ class: 'quote'
4861
4876
  },
4862
4877
  {
4863
4878
  name: 'redText',
@@ -4866,10 +4881,10 @@ class MultiLingualHtmlEditorComponent {
4866
4881
  {
4867
4882
  name: 'titleText',
4868
4883
  class: 'titleText',
4869
- tag: 'h1',
4870
- },
4884
+ tag: 'h1'
4885
+ }
4871
4886
  ],
4872
- uploadUrl: 'v1/image',
4887
+ // uploadUrl: 'v1/image', this line comment so the editor will convert image to base64 when enable upload the api should return full url for file
4873
4888
  uploadWithCredentials: false,
4874
4889
  sanitize: false,
4875
4890
  toolbarPosition: 'top',
@@ -4911,20 +4926,23 @@ class MultiLingualHtmlEditorComponent {
4911
4926
  // fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times']
4912
4927
  // }
4913
4928
  this.multilingualHtmlEditorgroup = new FormGroup({});
4914
- ;
4915
- this.multilingualHtmlEditorgroup.addControl("Arabic", new FormControl(''));
4916
- this.multilingualHtmlEditorgroup.addControl("English", new FormControl(''));
4917
- this.arabicHtmlEditorFormControl = this.multilingualHtmlEditorgroup.controls["Arabic"]; // new FormControl('',validationRules);
4918
- this.englishHtmlEditorFormControl = this.multilingualHtmlEditorgroup.controls["English"]; // new FormControl('',validationRules);
4929
+ this.multilingualHtmlEditorgroup.addControl('Arabic', new FormControl(''));
4930
+ this.multilingualHtmlEditorgroup.addControl('English', new FormControl(''));
4931
+ this.arabicHtmlEditorFormControl = this.multilingualHtmlEditorgroup.controls['Arabic']; // new FormControl('',validationRules);
4932
+ this.englishHtmlEditorFormControl = this.multilingualHtmlEditorgroup.controls['English']; // new FormControl('',validationRules);
4919
4933
  this.group.addControl(this.options.name, new FormGroup(this.multilingualHtmlEditorgroup.controls));
4920
4934
  this.getCustomErrorsMassages();
4921
4935
  switch (this.options.type) {
4922
4936
  case InputType.Email:
4923
4937
  this.englishValidationRules.push(Validators.compose([
4924
- this.controlUtility.patternValidator(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/, { EmailValidationKey: "" }),
4938
+ this.controlUtility.patternValidator(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/, {
4939
+ EmailValidationKey: ''
4940
+ })
4925
4941
  ]));
4926
4942
  this.arabicValidationRules.push(Validators.compose([
4927
- this.controlUtility.patternValidator(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/, { EmailValidationKey: "" }),
4943
+ this.controlUtility.patternValidator(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/, {
4944
+ EmailValidationKey: ''
4945
+ })
4928
4946
  ]));
4929
4947
  break;
4930
4948
  case InputType.Number:
@@ -4948,22 +4966,30 @@ class MultiLingualHtmlEditorComponent {
4948
4966
  this.englishValidationRules.push(Validators.maxLength(this.options.maxLength));
4949
4967
  this.arabicValidationRules.push(Validators.maxLength(this.options.maxLength));
4950
4968
  }
4951
- if (this.options.labelKey != null && this.options.labelKey != "") {
4952
- this.options.arabicLabelValue = this.utilityService.getResourceValue(this.options.labelKey) + " " + this.utilityService.getResourceValue("InArabic");
4953
- this.options.englishLabelValue = this.utilityService.getResourceValue(this.options.labelKey) + " " + this.utilityService.getResourceValue("InEnglish");
4969
+ if (this.options.labelKey != null && this.options.labelKey != '') {
4970
+ this.options.arabicLabelValue =
4971
+ this.utilityService.getResourceValue(this.options.labelKey) +
4972
+ ' ' +
4973
+ this.utilityService.getResourceValue('InArabic');
4974
+ this.options.englishLabelValue =
4975
+ this.utilityService.getResourceValue(this.options.labelKey) +
4976
+ ' ' +
4977
+ this.utilityService.getResourceValue('InEnglish');
4954
4978
  }
4955
4979
  else {
4956
- if (this.options.arabicLabelKey != null && this.options.arabicLabelKey != "")
4980
+ if (this.options.arabicLabelKey != null && this.options.arabicLabelKey != '')
4957
4981
  this.options.arabicLabelValue = this.utilityService.getResourceValue(this.options.arabicLabelKey);
4958
- if (this.options.englishLabelKey != null && this.options.englishLabelKey != "")
4982
+ if (this.options.englishLabelKey != null && this.options.englishLabelKey != '')
4959
4983
  this.options.englishLabelValue = this.utilityService.getResourceValue(this.options.englishLabelKey);
4960
4984
  }
4961
4985
  this.showInputUsingLanguageMode();
4962
4986
  this.arabicValidationRules.push(Validators.compose([
4963
- this.controlUtility.patternValidator(/^[\u0621-\u064A\u0660-\u0669 ]+$/, { ArabicLetterOnly: this.arabicLetterOnly }),
4987
+ this.controlUtility.patternValidator(/^[\u0621-\u064A\u0660-\u0669 ]+$/, {
4988
+ ArabicLetterOnly: this.arabicLetterOnly
4989
+ })
4964
4990
  ]));
4965
4991
  this.englishValidationRules.push(Validators.compose([
4966
- this.controlUtility.patternValidator(/^[~`!@#$%^&*()‘’“”_+=[\]\\{}|;':",.\/<>?a-zA-Z0-9- ]*$/, { EnglishLetterOnly: this.englishLetterOnly }),
4992
+ this.controlUtility.patternValidator(/^[~`!@#$%^&*()‘’“”_+=[\]\\{}|;':",.\/<>?a-zA-Z0-9- ]*$/, { EnglishLetterOnly: this.englishLetterOnly })
4967
4993
  ]));
4968
4994
  // this.arabicHtmlEditorFormControl.setValidators(this.ArabicValidationRules);
4969
4995
  // this.arabicHtmlEditorFormControl.setAsyncValidators(this.ArabicValidationRulesasync);
@@ -4981,48 +5007,62 @@ class MultiLingualHtmlEditorComponent {
4981
5007
  });
4982
5008
  }
4983
5009
  ngAfterViewChecked() {
4984
- let dir = this.utilityService.getCurrentLanguage() == "en" ? "ltr" : "rtl";
4985
- var angularEditor = document.getElementsByClassName("angular-editor-toolbar ng-star-inserted");
5010
+ let dir = this.utilityService.getCurrentLanguage() == 'en' ? 'ltr' : 'rtl';
5011
+ var angularEditor = document.getElementsByClassName('angular-editor-toolbar ng-star-inserted');
4986
5012
  for (let index = 0; index < angularEditor.length; index++) {
4987
5013
  const element = angularEditor[index];
4988
- element.setAttribute("dir", dir);
5014
+ element.setAttribute('dir', dir);
4989
5015
  }
4990
5016
  }
4991
5017
  onTextChange(type) {
4992
- if (type == "en") {
4993
- this.multilingualHtmlEditorgroup.controls["English"].setValue(this.multilingualHtmlEditorgroup.controls["English"].value.trim());
4994
- this.englishValue = this.multilingualHtmlEditorgroup.controls["English"].value == null ? "" : this.multilingualHtmlEditorgroup.controls["English"].value;
5018
+ if (type == 'en') {
5019
+ this.multilingualHtmlEditorgroup.controls['English'].setValue(this.multilingualHtmlEditorgroup.controls['English'].value.trim());
5020
+ this.englishValue =
5021
+ this.multilingualHtmlEditorgroup.controls['English'].value == null
5022
+ ? ''
5023
+ : this.multilingualHtmlEditorgroup.controls['English'].value;
4995
5024
  if (this.englishValue) {
4996
5025
  this.englishHtmlEditorFormControl.setValue(this.englishValue);
4997
5026
  let originalValue = this.englishValue;
4998
- if (this.options.patchFunction && this.options.patchPath && this.englishHtmlEditorFormControl.valid) {
5027
+ if (this.options.patchFunction &&
5028
+ this.options.patchPath &&
5029
+ this.englishHtmlEditorFormControl.valid) {
4999
5030
  this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
5000
5031
  }
5001
5032
  }
5002
- let EngliswordCountArray = this.englishHtmlEditorFormControl.value.split(" ").length;
5033
+ let EngliswordCountArray = this.englishHtmlEditorFormControl.value.split(' ').length;
5003
5034
  if (EngliswordCountArray > 0) {
5004
5035
  if (EngliswordCountArray > this.options.maxWordCount)
5005
- this.multilingualHtmlEditorgroup.controls["English"].setErrors({ MaxWordCountValidationKey: this.options.maxWordCount });
5006
- this.multilingualHtmlEditorgroup.controls["English"].markAsTouched();
5007
- this.multilingualHtmlEditorgroup.controls["English"].invalid;
5036
+ this.multilingualHtmlEditorgroup.controls['English'].setErrors({
5037
+ MaxWordCountValidationKey: this.options.maxWordCount
5038
+ });
5039
+ this.multilingualHtmlEditorgroup.controls['English'].markAsTouched();
5040
+ this.multilingualHtmlEditorgroup.controls['English'].invalid;
5008
5041
  }
5009
5042
  }
5010
- if (type == "ar") {
5011
- this.multilingualHtmlEditorgroup.controls["Arabic"].setValue(this.multilingualHtmlEditorgroup.controls["Arabic"].value.trim());
5012
- this.arabicValue = this.multilingualHtmlEditorgroup.controls["Arabic"].value == null ? "" : this.multilingualHtmlEditorgroup.controls["Arabic"].value;
5043
+ if (type == 'ar') {
5044
+ this.multilingualHtmlEditorgroup.controls['Arabic'].setValue(this.multilingualHtmlEditorgroup.controls['Arabic'].value.trim());
5045
+ this.arabicValue =
5046
+ this.multilingualHtmlEditorgroup.controls['Arabic'].value == null
5047
+ ? ''
5048
+ : this.multilingualHtmlEditorgroup.controls['Arabic'].value;
5013
5049
  if (this.arabicValue) {
5014
5050
  this.arabicHtmlEditorFormControl.setValue(this.arabicValue);
5015
5051
  let originalValue = this.arabicValue;
5016
- if (this.options.patchFunction && this.options.patchPath && this.arabicHtmlEditorFormControl.valid) {
5052
+ if (this.options.patchFunction &&
5053
+ this.options.patchPath &&
5054
+ this.arabicHtmlEditorFormControl.valid) {
5017
5055
  this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
5018
5056
  }
5019
5057
  }
5020
- let ArabicwordCountArray = this.arabicHtmlEditorFormControl.value.split(" ").length;
5058
+ let ArabicwordCountArray = this.arabicHtmlEditorFormControl.value.split(' ').length;
5021
5059
  if (ArabicwordCountArray > 0) {
5022
5060
  if (ArabicwordCountArray > this.options.maxWordCount)
5023
- this.multilingualHtmlEditorgroup.controls["Arabic"].setErrors({ MaxWordCountValidationKey: this.options.maxWordCount });
5024
- this.multilingualHtmlEditorgroup.controls["Arabic"].markAsTouched();
5025
- this.multilingualHtmlEditorgroup.controls["Arabic"].invalid;
5061
+ this.multilingualHtmlEditorgroup.controls['Arabic'].setErrors({
5062
+ MaxWordCountValidationKey: this.options.maxWordCount
5063
+ });
5064
+ this.multilingualHtmlEditorgroup.controls['Arabic'].markAsTouched();
5065
+ this.multilingualHtmlEditorgroup.controls['Arabic'].invalid;
5026
5066
  }
5027
5067
  }
5028
5068
  let mulitLangModel = new EnglishArabicDTO();
@@ -5045,8 +5085,8 @@ class MultiLingualHtmlEditorComponent {
5045
5085
  return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
5046
5086
  }
5047
5087
  showInputUsingLanguageMode() {
5048
- this.arabicValidationRules = this.arabicValidationRules.filter(item => item !== Validators.required);
5049
- this.englishValidationRules = this.englishValidationRules.filter(item => item !== Validators.required);
5088
+ this.arabicValidationRules = this.arabicValidationRules.filter((item) => item !== Validators.required);
5089
+ this.englishValidationRules = this.englishValidationRules.filter((item) => item !== Validators.required);
5050
5090
  this.arabicHtmlEditorFormControl.clearValidators();
5051
5091
  this.englishHtmlEditorFormControl.clearValidators();
5052
5092
  this.arabicHtmlEditorFormControl.updateValueAndValidity();
@@ -6053,6 +6093,7 @@ var DataType;
6053
6093
  DataType["Text"] = "7F35E246-7C93-4666-8031-3CE9D2262DB9";
6054
6094
  DataType["Email"] = "E4F974F6-682F-4CAC-8597-C94E8BF60539";
6055
6095
  DataType["Number"] = "962060E2-539C-4257-88E5-0259EB8A64F4";
6096
+ DataType["URL"] = "4A2E8C91-B7D3-4F5E-A9C2-1D6E3F8B4C7A";
6056
6097
  DataType["Name"] = "54FE6A3E-1F71-42B8-8C99-06279ED8AA2F";
6057
6098
  DataType["Mobile"] = "266E2903-D105-4847-AC9B-002AE884A31E";
6058
6099
  DataType["MultilineText"] = "97F904E0-991B-4F68-B227-217A7B87B8B3";
@@ -7582,11 +7623,11 @@ class PagingComponent {
7582
7623
  return filters;
7583
7624
  }
7584
7625
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, deps: [{ token: i3.UtilityService }, { token: i1.HttpClient }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i5.Location }, { token: OnPagingFiltersChangeService }, { token: i3.RequestHandlerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
7585
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n </div>\r\n <!--page count-->\r\n <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n <option>10</option>\r\n <option>20</option>\r\n <option>50</option>\r\n <option>100</option>\r\n <option>200</option>\r\n </select>\r\n <div class=\"bssf-items\">\r\n <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n {{Pages}}</strong> {{pagesText}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--load more-->\r\n <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n </div>\r\n <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
7626
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PagingComponent, selector: "BBSF-Paging", inputs: { options: "options", group: "group" }, outputs: { Items: "Items", pageStateRestored: "pageStateRestored" }, host: { listeners: { "window:popstate": "onPopState($event)" } }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n </div>\r\n <!--page count-->\r\n <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n <option>10</option>\r\n <option>20</option>\r\n <option>50</option>\r\n <option>100</option>\r\n <option>200</option>\r\n </select>\r\n <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n {{Pages}}</strong> {{pagesText}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--load more-->\r\n <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n </div>\r\n <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n *ngIf=\"!(result.length==totalRow)\"\r\n [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: JwPaginationComponent, selector: "jw-pagination", inputs: ["items", "initialPage", "pageSize", "maxPages", "ShowFirstAndLast"], outputs: ["changePage"] }] }); }
7586
7627
  }
7587
7628
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PagingComponent, decorators: [{
7588
7629
  type: Component,
7589
- args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n </div>\r\n <!--page count-->\r\n <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\">\r\n <option>10</option>\r\n <option>20</option>\r\n <option>50</option>\r\n <option>100</option>\r\n <option>200</option>\r\n </select>\r\n <div class=\"bssf-items\">\r\n <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n {{Pages}}</strong> {{pagesText}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--load more-->\r\n <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n </div>\r\n <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n *ngIf=\"!(result.length==totalRow)\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n </div>\r\n</div>" }]
7630
+ args: [{ selector: 'BBSF-Paging', template: "<div class=\"form-group bbsf-control bbsf-paging\" *ngIf=\"(result.length > 0)\" role=\"navigation\" [attr.aria-label]=\"utilityService.getResourceValue('Pagination')\">\r\n <!--paging container-->\r\n <div class=\"bbsf-paging-container\" *ngIf=\"!options.isLoadMoreControl\">\r\n <!--items-->\r\n <div class=\"bbsf-pagination\">\r\n <jw-pagination [items]=\"items\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\"\r\n (changePage)=\"onChangePage($event)\" [pageSize]=\"options.pageSize\" [ShowFirstAndLast]=\"options.showFirstAndLast\"\r\n [initialPage]=\"currentPage\" [maxPages]=\"10\"></jw-pagination>\r\n </div>\r\n <!--page count-->\r\n <div class=\"bbsf-pages\" *ngIf=\"!((Pages==1)&&options.hidePaginationWhenPageSizeEqualOne)\">\r\n <select (change)=\"changePageSize($event)\" *ngIf=\"options.showPageSizeOption\" \r\n [attr.aria-label]=\"utilityService.getResourceValue('SelectPageSize')\" \r\n [ngbTooltip]=\"utilityService.getResourceValue('SelectPageSize')\">\r\n <option>10</option>\r\n <option>20</option>\r\n <option>50</option>\r\n <option>100</option>\r\n <option>200</option>\r\n </select>\r\n <div class=\"bssf-items\" [attr.aria-label]=\"utilityService.getResourceValue('PageInfo')\">\r\n <strong>{{totalRow}}</strong> {{itemsText}} {{utilityService.getResourceValue(\"In\")}} <strong>\r\n {{Pages}}</strong> {{pagesText}}\r\n </div>\r\n </div>\r\n </div>\r\n <!--load more-->\r\n <div class=\"bbsf-loadmore\" *ngIf=\"options.isLoadMoreControl\">\r\n <div class=\"search-results\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance\"\r\n [infiniteScrollUpDistance]=\"scrollUpDistance\" [infiniteScrollThrottle]=\"throttle\"\r\n (scrolled)=\"options.isInfiniteScroll==true?onScrollDown():null\" [scrollWindow]=\"options.scrollWindow\"\r\n [infiniteScrollContainer]=\"options.infiniteScrollContainer\">\r\n </div>\r\n <button class=\"btn btn-sm btn-primary\" (click)=\"onScrollDown()\"\r\n *ngIf=\"!(result.length==totalRow)\"\r\n [attr.aria-label]=\"utilityService.getResourceValue('LoadMore')\"\r\n [ngbTooltip]=\"utilityService.getResourceValue('LoadMore')\">{{utilityService.getResourceValue(\"LoadMore\")}}</button>\r\n </div>\r\n</div>" }]
7590
7631
  }], ctorParameters: () => [{ type: i3.UtilityService }, { type: i1.HttpClient }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i5.Location }, { type: OnPagingFiltersChangeService }, { type: i3.RequestHandlerService }, { type: i0.ChangeDetectorRef }], propDecorators: { Items: [{
7591
7632
  type: Output
7592
7633
  }], pageStateRestored: [{
@@ -8332,6 +8373,8 @@ class TextAreaComponent {
8332
8373
  this.maxLimitWarningMsg = '';
8333
8374
  this.isMicOn = false;
8334
8375
  this.selectedSpeechLanguageDisplayText = '';
8376
+ this.isLanguageSelectFocusVisible = false;
8377
+ this.isMicFocusVisible = false;
8335
8378
  // Accessibility properties
8336
8379
  this.ariaDescribedBy = '';
8337
8380
  this.errorMessageId = '';
@@ -8789,6 +8832,26 @@ class TextAreaComponent {
8789
8832
  }
8790
8833
  }
8791
8834
  }
8835
+ onLanguageSelectFocus(isFocused) {
8836
+ if (!this.options.enableSpeechRecognition) {
8837
+ return;
8838
+ }
8839
+ this.isLanguageSelectFocusVisible = isFocused;
8840
+ }
8841
+ onLanguageSelectKeydown(event) {
8842
+ if (!this.options.enableSpeechRecognition) {
8843
+ return;
8844
+ }
8845
+ if (event.key === 'Tab') {
8846
+ this.isLanguageSelectFocusVisible = true;
8847
+ }
8848
+ }
8849
+ onMicFocus(isFocused) {
8850
+ if (!this.options.enableSpeechRecognition) {
8851
+ return;
8852
+ }
8853
+ this.isMicFocusVisible = isFocused;
8854
+ }
8792
8855
  onCopyKeydown(event, inputElement) {
8793
8856
  if (event.key === 'Enter' || event.key === ' ') {
8794
8857
  event.preventDefault();
@@ -8828,11 +8891,11 @@ class TextAreaComponent {
8828
8891
  }
8829
8892
  }
8830
8893
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true, skipSelf: true }, { token: i2.FormGroupDirective, optional: true }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i3.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
8831
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextAreaComponent, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, 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\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n 'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n 'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n 'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n }\">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n 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 [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n [attr.aria-label]=\"'Copy text to clipboard'\" title=\"Copy text to clipboard\" tabindex=\"0\">\r\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n *ngIf=\"options.enableSpeechRecognition\" role=\"region\" [attr.aria-label]=\"'Speech recognition controls'\">\r\n\r\n <!-- Start Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\"\r\n [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n (keydown)=\"onMicKeydown($event, 'start')\" *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n [attr.aria-label]=\"'Start speech recognition'\" title=\"Start speech recognition\" tabindex=\"0\"\r\n [attr.aria-pressed]=\"false\">\r\n </button>\r\n\r\n <!-- Stop Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\"\r\n [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"'Stop speech recognition'\"\r\n title=\"Stop speech recognition\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n </button>\r\n\r\n <div class=\"language-controls\">\r\n <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n Select speech recognition language\r\n </label>\r\n <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n (change)=\"onSpeechLanguageChange($event)\" [attr.aria-describedby]=\"options.name + '-language-display'\">\r\n <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n {{language.name}}\r\n </option>\r\n </select>\r\n </div>\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\" [attr.id]=\"wordCountId\"\r\n aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n {{wordCount}}/{{options.maxWordCount}} Words\r\n </div>\r\n\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n [attr.aria-atomic]=\"true\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n {{options.labelDescription}}\r\n </div>\r\n\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\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) \">\r\n {{resetError()}}</div>\r\n </div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
8894
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextAreaComponent, selector: "BBSF-TextArea", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, 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\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n 'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n 'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n 'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n }\">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n 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 [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n [attr.aria-label]=\"utilityService.getResourceValue('CopyTextToClipboard')\" [ngbTooltip]=\"utilityService.getResourceValue('CopyTextToClipboard')\" tabindex=\"0\">\r\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n *ngIf=\"options.enableSpeechRecognition\" role=\"region\">\r\n\r\n <!-- Start Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n (keydown)=\"onMicKeydown($event, 'start')\" (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n [attr.aria-label]=\"utilityService.getResourceValue('StartSpeechRecognition')\" [ngbTooltip]=\"utilityService.getResourceValue('StartSpeechRecognition')\" tabindex=\"0\"\r\n [attr.aria-pressed]=\"false\">\r\n </button>\r\n\r\n <!-- Stop Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"utilityService.getResourceValue('StopSpeechRecognition')\"\r\n [ngbTooltip]=\"utilityService.getResourceValue('StopSpeechRecognition')\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n </button>\r\n\r\n <div class=\"language-controls\" [class.focus-visible]=\"isLanguageSelectFocusVisible\">\r\n <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n Select speech recognition language\r\n </label>\r\n <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n (change)=\"onSpeechLanguageChange($event)\" (focus)=\"onLanguageSelectFocus(true)\"\r\n (blur)=\"onLanguageSelectFocus(false)\" (keydown)=\"onLanguageSelectKeydown($event)\"\r\n [attr.aria-describedby]=\"options.name + '-language-display'\" [attr.aria-label]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n [ngbTooltip]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n triggers=\"focus:blur\">\r\n <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n {{language.name}}\r\n </option>\r\n </select>\r\n </div>\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\" [attr.id]=\"wordCountId\"\r\n aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n {{wordCount}}/{{options.maxWordCount}} Words\r\n </div>\r\n\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n [attr.aria-atomic]=\"true\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n {{options.labelDescription}}\r\n </div>\r\n\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\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) \">\r\n {{resetError()}}</div>\r\n </div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i7.NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8$3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
8832
8895
  }
8833
8896
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
8834
8897
  type: Component,
8835
- args: [{ selector: 'BBSF-TextArea', 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\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n 'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n 'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n 'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n }\">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n 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 [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n [attr.aria-label]=\"'Copy text to clipboard'\" title=\"Copy text to clipboard\" tabindex=\"0\">\r\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n *ngIf=\"options.enableSpeechRecognition\" role=\"region\" [attr.aria-label]=\"'Speech recognition controls'\">\r\n\r\n <!-- Start Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\"\r\n [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n (keydown)=\"onMicKeydown($event, 'start')\" *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n [attr.aria-label]=\"'Start speech recognition'\" title=\"Start speech recognition\" tabindex=\"0\"\r\n [attr.aria-pressed]=\"false\">\r\n </button>\r\n\r\n <!-- Stop Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\"\r\n [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"'Stop speech recognition'\"\r\n title=\"Stop speech recognition\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n </button>\r\n\r\n <div class=\"language-controls\">\r\n <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n Select speech recognition language\r\n </label>\r\n <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n (change)=\"onSpeechLanguageChange($event)\" [attr.aria-describedby]=\"options.name + '-language-display'\">\r\n <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n {{language.name}}\r\n </option>\r\n </select>\r\n </div>\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\" [attr.id]=\"wordCountId\"\r\n aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n {{wordCount}}/{{options.maxWordCount}} Words\r\n </div>\r\n\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n [attr.aria-atomic]=\"true\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n {{options.labelDescription}}\r\n </div>\r\n\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\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) \">\r\n {{resetError()}}</div>\r\n </div>" }]
8898
+ args: [{ selector: 'BBSF-TextArea', 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\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\" [ngClass]=\"{\r\n 'p-120px': options.enableSpeechRecognition && options.enableCopyToClipboard,\r\n 'p-80px': options.enableSpeechRecognition && !options.enableCopyToClipboard,\r\n 'p-40px': !options.enableSpeechRecognition && options.enableCopyToClipboard\r\n }\">\r\n <!--input-->\r\n <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n [dir]=\"textDir\" [attr.aria-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\" [attr.aria-label]=\"options.labelValue || options.placeholder\"\r\n 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 [attr.minlength]=\"options.minLength\" [(ngModel)]=\"options.value\" (keydown)=\"onKeyDown($event)\"\r\n [attr.maxlength]=\"options.maxLength\" role=\"textbox\" [attr.aria-multiline]=\"true\" #TextAreainput></textarea>\r\n <!--CopyToClipboard-->\r\n <button type=\"button\" class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(TextAreainput)\" (keydown)=\"onCopyKeydown($event, TextAreainput)\"\r\n [attr.aria-label]=\"utilityService.getResourceValue('CopyTextToClipboard')\" [ngbTooltip]=\"utilityService.getResourceValue('CopyTextToClipboard')\" tabindex=\"0\">\r\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\r\n </button>\r\n <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\"\r\n *ngIf=\"options.enableSpeechRecognition\" role=\"region\">\r\n\r\n <!-- Start Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n [inlineSVG]=\"options.iconMic || 'assets/bbsf-controls/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n (keydown)=\"onMicKeydown($event, 'start')\" (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n *ngIf=\"options.enableSpeechRecognition && !isMicOn\"\r\n [attr.aria-label]=\"utilityService.getResourceValue('StartSpeechRecognition')\" [ngbTooltip]=\"utilityService.getResourceValue('StartSpeechRecognition')\" tabindex=\"0\"\r\n [attr.aria-pressed]=\"false\">\r\n </button>\r\n\r\n <!-- Stop Speech Recognition Button -->\r\n <button type=\"button\" class=\"svg-icon svg-icon-5 speech-control-btn\" [class.focus-visible]=\"isMicFocusVisible\"\r\n [inlineSVG]=\"options.iconMicOff || 'assets/bbsf-controls/images/mic-off.svg'\"\r\n (click)=\"stopSpeechRecognition()\" (keydown)=\"onMicKeydown($event, 'stop')\"\r\n (focus)=\"onMicFocus(true)\" (blur)=\"onMicFocus(false)\"\r\n *ngIf=\"options.enableSpeechRecognition && isMicOn\" [attr.aria-label]=\"utilityService.getResourceValue('StopSpeechRecognition')\"\r\n [ngbTooltip]=\"utilityService.getResourceValue('StopSpeechRecognition')\" tabindex=\"0\" [attr.aria-pressed]=\"true\">\r\n </button>\r\n\r\n <div class=\"language-controls\" [class.focus-visible]=\"isLanguageSelectFocusVisible\">\r\n <span class=\"language-text\" [attr.id]=\"options.name + '-language-display'\"\r\n aria-live=\"polite\">{{ options.enableSpeechRecognition ? selectedSpeechLanguageDisplayText : '' }}</span>\r\n\r\n <label [for]=\"'Language_'+options.name\" class=\"sr-only\">\r\n Select speech recognition language\r\n </label>\r\n <select class=\"language-select\" [formControlName]=\"'Language_'+options.name\" [id]=\"'Language_'+options.name\"\r\n (change)=\"onSpeechLanguageChange($event)\" (focus)=\"onLanguageSelectFocus(true)\"\r\n (blur)=\"onLanguageSelectFocus(false)\" (keydown)=\"onLanguageSelectKeydown($event)\"\r\n [attr.aria-describedby]=\"options.name + '-language-display'\" [attr.aria-label]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n [ngbTooltip]=\"utilityService.getResourceValue('SelectSpeechRecognitionLanguage')\"\r\n triggers=\"focus:blur\">\r\n <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">\r\n {{language.name}}\r\n </option>\r\n </select>\r\n </div>\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\" [attr.id]=\"wordCountId\"\r\n aria-live=\"polite\" [attr.aria-label]=\"'Word count: ' + wordCount + ' of ' + options.maxWordCount + ' words'\">\r\n {{wordCount}}/{{options.maxWordCount}} Words\r\n </div>\r\n\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\" [attr.id]=\"characterCountId\" aria-live=\"polite\"\r\n [attr.aria-atomic]=\"true\"\r\n [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n {{maxLimitWarningMsg}}\r\n </div>\r\n\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\" [attr.id]=\"options.name + '-description'\">\r\n {{options.labelDescription}}\r\n </div>\r\n\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\"\r\n [attr.id]=\"errorMessageId\" role=\"alert\" aria-live=\"assertive\" [attr.aria-atomic]=\"true\">\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) \">\r\n {{resetError()}}</div>\r\n </div>" }]
8836
8899
  }], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
8837
8900
  type: Optional
8838
8901
  }, {
@@ -8854,15 +8917,15 @@ class RepeaterFieldBuilderComponent {
8854
8917
  this.itemsValue = [];
8855
8918
  this.itemValue = null;
8856
8919
  }
8857
- ngOnInit() {
8858
- }
8920
+ ngOnInit() { }
8859
8921
  ngAfterViewInit() {
8860
8922
  setTimeout(() => {
8861
8923
  if (this.itemsValue.length > 0)
8862
8924
  this.itemValue = this.itemsValue[this.itemNumber];
8863
8925
  if (this.itemValue) {
8864
8926
  for (const key in this.itemValue) {
8865
- if (Object.prototype.hasOwnProperty.call(this.itemValue, key) && key == this.repeaterField.controlOptions.name) {
8927
+ if (Object.prototype.hasOwnProperty.call(this.itemValue, key) &&
8928
+ key == this.repeaterField.controlOptions.name) {
8866
8929
  const element = this.itemValue[key];
8867
8930
  this.value = element;
8868
8931
  }
@@ -8873,12 +8936,19 @@ class RepeaterFieldBuilderComponent {
8873
8936
  //#region TextBox
8874
8937
  case DataType.Text:
8875
8938
  let Text = new TextBoxOptions();
8876
- Text.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
8939
+ Text.name =
8940
+ this.repeaterField.controlOptions.name +
8941
+ '.' +
8942
+ this.itemNumber.toString() +
8943
+ '.' +
8944
+ this.controlNumber.toString();
8877
8945
  Text.hideLabel = this.repeaterField.controlOptions.hideLabel;
8878
8946
  Text.labelKey = this.repeaterField.controlOptions.labelKey;
8879
8947
  Text.isRequired = this.repeaterField.controlOptions.isRequired;
8880
8948
  Text.viewType = this.repeaterField.controlOptions.viewType;
8881
- Text.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
8949
+ Text.labelDescription = this.repeaterField.controlOptions.labelDescription
8950
+ ? this.repeaterField.controlOptions.labelDescription
8951
+ : '';
8882
8952
  Text.type = InputType.Text;
8883
8953
  Text.languageValidation = this.repeaterField.controlOptions.languageValidation;
8884
8954
  if (this.repeaterField.controlOptions.maxLength)
@@ -8887,47 +8957,77 @@ class RepeaterFieldBuilderComponent {
8887
8957
  Text.minLength = this.repeaterField.controlOptions.minLength;
8888
8958
  Text.value = this.value;
8889
8959
  Text.isReadonly = this.repeaterField.controlOptions.isReadonly;
8960
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
8961
+ Text.customValidation = this.repeaterField.controlOptions.customValidation;
8962
+ }
8890
8963
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, Text);
8891
8964
  break;
8892
8965
  case DataType.Name:
8893
8966
  let name = new TextBoxOptions();
8894
- name.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
8967
+ name.name =
8968
+ this.repeaterField.controlOptions.name +
8969
+ '.' +
8970
+ this.itemNumber.toString() +
8971
+ '.' +
8972
+ this.controlNumber.toString();
8895
8973
  name.hideLabel = this.repeaterField.controlOptions.hideLabel;
8896
8974
  name.labelKey = this.repeaterField.controlOptions.labelKey;
8897
8975
  name.isRequired = this.repeaterField.controlOptions.isRequired;
8898
8976
  name.viewType = this.repeaterField.controlOptions.viewType;
8899
8977
  name.languageValidation = this.repeaterField.controlOptions.languageValidation;
8900
- name.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
8978
+ name.labelDescription = this.repeaterField.controlOptions.labelDescription
8979
+ ? this.repeaterField.controlOptions.labelDescription
8980
+ : '';
8901
8981
  if (this.repeaterField.controlOptions.maxLength)
8902
8982
  name.maxLength = this.repeaterField.controlOptions.maxLength;
8903
8983
  if (this.repeaterField.controlOptions.minLength)
8904
8984
  name.minLength = this.repeaterField.controlOptions.minLength;
8905
8985
  name.type = InputType.Text;
8906
8986
  name.value = this.value;
8987
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
8988
+ name.customValidation = this.repeaterField.controlOptions.customValidation;
8989
+ }
8907
8990
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, name);
8908
8991
  break;
8909
8992
  case DataType.Email:
8910
8993
  let email = new TextBoxOptions();
8911
- email.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
8994
+ email.name =
8995
+ this.repeaterField.controlOptions.name +
8996
+ '.' +
8997
+ this.itemNumber.toString() +
8998
+ '.' +
8999
+ this.controlNumber.toString();
8912
9000
  email.hideLabel = this.repeaterField.controlOptions.hideLabel;
8913
9001
  email.labelKey = this.repeaterField.controlOptions.labelKey;
8914
9002
  email.isRequired = this.repeaterField.controlOptions.isRequired;
8915
9003
  email.viewType = this.repeaterField.controlOptions.viewType;
8916
9004
  email.languageValidation = this.repeaterField.controlOptions.languageValidation;
8917
- email.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9005
+ email.labelDescription = this.repeaterField.controlOptions.labelDescription
9006
+ ? this.repeaterField.controlOptions.labelDescription
9007
+ : '';
8918
9008
  email.type = InputType.Email;
8919
9009
  email.value = this.value;
9010
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9011
+ email.customValidation = this.repeaterField.controlOptions.customValidation;
9012
+ }
8920
9013
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, email);
8921
9014
  break;
8922
9015
  case DataType.Number:
8923
9016
  let number = new TextBoxOptions();
8924
- number.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9017
+ number.name =
9018
+ this.repeaterField.controlOptions.name +
9019
+ '.' +
9020
+ this.itemNumber.toString() +
9021
+ '.' +
9022
+ this.controlNumber.toString();
8925
9023
  number.hideLabel = this.repeaterField.controlOptions.hideLabel;
8926
9024
  number.labelKey = this.repeaterField.controlOptions.labelKey;
8927
9025
  number.isRequired = this.repeaterField.controlOptions.isRequired;
8928
9026
  number.viewType = this.repeaterField.controlOptions.viewType;
8929
9027
  number.languageValidation = this.repeaterField.controlOptions.languageValidation;
8930
- number.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9028
+ number.labelDescription = this.repeaterField.controlOptions.labelDescription
9029
+ ? this.repeaterField.controlOptions.labelDescription
9030
+ : '';
8931
9031
  number.type = InputType.Number;
8932
9032
  let rangeNumber = new RangeNumber();
8933
9033
  if (this.repeaterField.controlOptions.numberRange) {
@@ -8937,228 +9037,390 @@ class RepeaterFieldBuilderComponent {
8937
9037
  number.numberRange = rangeNumber;
8938
9038
  number.value = this.value;
8939
9039
  number.isReadonly = this.repeaterField.controlOptions.isReadonly;
9040
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9041
+ number.customValidation = this.repeaterField.controlOptions.customValidation;
9042
+ }
8940
9043
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, number);
8941
9044
  break;
9045
+ case DataType.URL:
9046
+ let url = new TextBoxOptions();
9047
+ url.name = `${this.repeaterField.controlOptions.name}.${this.itemNumber}.${this.controlNumber}`;
9048
+ url.hideLabel = this.repeaterField.controlOptions.hideLabel;
9049
+ url.labelKey = this.repeaterField.controlOptions.labelKey;
9050
+ url.isRequired = this.repeaterField.controlOptions.isRequired;
9051
+ url.viewType = this.repeaterField.controlOptions.viewType;
9052
+ url.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
9053
+ url.type = InputType.URL;
9054
+ url.value = this.value;
9055
+ this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, url);
9056
+ break;
8942
9057
  //#endregion
8943
9058
  //#region DateTime
8944
9059
  case DataType.Date:
8945
9060
  let date = new DatePickerOptions();
8946
- date.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9061
+ date.name =
9062
+ this.repeaterField.controlOptions.name +
9063
+ '.' +
9064
+ this.itemNumber.toString() +
9065
+ '.' +
9066
+ this.controlNumber.toString();
8947
9067
  date.hideLabel = this.repeaterField.controlOptions.hideLabel;
8948
9068
  date.labelKey = this.repeaterField.controlOptions.labelKey;
8949
9069
  date.isRequired = this.repeaterField.controlOptions.isRequired;
8950
9070
  date.viewType = this.repeaterField.controlOptions.viewType;
8951
- date.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9071
+ date.labelDescription = this.repeaterField.controlOptions.labelDescription
9072
+ ? this.repeaterField.controlOptions.labelDescription
9073
+ : '';
8952
9074
  date.pickerType = PickerType.Calendar;
8953
9075
  date.selectMode = SelectMode.Single;
8954
9076
  date.startView = StartView.Month;
8955
9077
  date.value = this.value;
9078
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9079
+ date.customValidation = this.repeaterField.controlOptions.customValidation;
9080
+ }
8956
9081
  this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, date);
8957
9082
  break;
8958
9083
  case DataType.DateTime:
8959
9084
  let dateTime = new DatePickerOptions();
8960
- dateTime.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9085
+ dateTime.name =
9086
+ this.repeaterField.controlOptions.name +
9087
+ '.' +
9088
+ this.itemNumber.toString() +
9089
+ '.' +
9090
+ this.controlNumber.toString();
8961
9091
  dateTime.hideLabel = this.repeaterField.controlOptions.hideLabel;
8962
9092
  dateTime.labelKey = this.repeaterField.controlOptions.labelKey;
8963
9093
  dateTime.isRequired = this.repeaterField.controlOptions.isRequired;
8964
9094
  dateTime.viewType = this.repeaterField.controlOptions.viewType;
8965
- dateTime.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9095
+ dateTime.labelDescription = this.repeaterField.controlOptions.labelDescription
9096
+ ? this.repeaterField.controlOptions.labelDescription
9097
+ : '';
8966
9098
  dateTime.pickerType = PickerType.Both;
8967
9099
  dateTime.selectMode = SelectMode.Single;
8968
9100
  dateTime.startView = StartView.Month;
8969
9101
  dateTime.value = this.value;
9102
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9103
+ dateTime.customValidation = this.repeaterField.controlOptions.customValidation;
9104
+ }
8970
9105
  this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, dateTime);
8971
9106
  break;
8972
9107
  case DataType.Time:
8973
9108
  let time = new DatePickerOptions();
8974
- time.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9109
+ time.name =
9110
+ this.repeaterField.controlOptions.name +
9111
+ '.' +
9112
+ this.itemNumber.toString() +
9113
+ '.' +
9114
+ this.controlNumber.toString();
8975
9115
  time.hideLabel = this.repeaterField.controlOptions.hideLabel;
8976
9116
  time.labelKey = this.repeaterField.controlOptions.labelKey;
8977
9117
  time.isRequired = this.repeaterField.controlOptions.isRequired;
8978
9118
  time.viewType = this.repeaterField.controlOptions.viewType;
8979
- time.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9119
+ time.labelDescription = this.repeaterField.controlOptions.labelDescription
9120
+ ? this.repeaterField.controlOptions.labelDescription
9121
+ : '';
8980
9122
  time.pickerType = PickerType.Timer;
8981
9123
  time.selectMode = SelectMode.Single;
8982
9124
  time.startView = StartView.Month;
8983
9125
  time.value = this.value;
9126
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9127
+ time.customValidation = this.repeaterField.controlOptions.customValidation;
9128
+ }
8984
9129
  this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, time);
8985
9130
  break;
8986
9131
  //#endregion
8987
9132
  //#region Dropdown
8988
9133
  case DataType.SingleSelect:
8989
9134
  let singleSelect = new DropdownOptions();
8990
- singleSelect.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9135
+ singleSelect.name =
9136
+ this.repeaterField.controlOptions.name +
9137
+ '.' +
9138
+ this.itemNumber.toString() +
9139
+ '.' +
9140
+ this.controlNumber.toString();
8991
9141
  singleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
8992
9142
  singleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
8993
9143
  singleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
8994
9144
  singleSelect.viewType = this.repeaterField.controlOptions.viewType;
8995
- singleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9145
+ singleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription
9146
+ ? this.repeaterField.controlOptions.labelDescription
9147
+ : '';
8996
9148
  singleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
8997
9149
  singleSelect.singleSelection = true;
8998
9150
  singleSelect.showCheckbox = false;
8999
9151
  singleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9000
9152
  singleSelect.selectedItems = this.value;
9153
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9154
+ singleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
9155
+ }
9001
9156
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, singleSelect);
9002
9157
  break;
9003
9158
  case DataType.MulipleSelect:
9004
9159
  let mulipleSelect = new DropdownOptions();
9005
- mulipleSelect.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9160
+ mulipleSelect.name =
9161
+ this.repeaterField.controlOptions.name +
9162
+ '.' +
9163
+ this.itemNumber.toString() +
9164
+ '.' +
9165
+ this.controlNumber.toString();
9006
9166
  mulipleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
9007
9167
  mulipleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
9008
9168
  mulipleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
9009
9169
  mulipleSelect.viewType = this.repeaterField.controlOptions.viewType;
9010
- mulipleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9170
+ mulipleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription
9171
+ ? this.repeaterField.controlOptions.labelDescription
9172
+ : '';
9011
9173
  mulipleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
9012
9174
  mulipleSelect.singleSelection = false;
9013
9175
  mulipleSelect.showCheckbox = false;
9014
9176
  mulipleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9015
9177
  mulipleSelect.selectedItems = this.value;
9178
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9179
+ mulipleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
9180
+ }
9016
9181
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, mulipleSelect);
9017
9182
  break;
9018
9183
  case DataType.Goal:
9019
9184
  let goal = new DropdownOptions();
9020
- goal.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9185
+ goal.name =
9186
+ this.repeaterField.controlOptions.name +
9187
+ '.' +
9188
+ this.itemNumber.toString() +
9189
+ '.' +
9190
+ this.controlNumber.toString();
9021
9191
  goal.hideLabel = this.repeaterField.controlOptions.hideLabel;
9022
9192
  goal.labelKey = this.repeaterField.controlOptions.labelKey;
9023
9193
  goal.isRequired = this.repeaterField.controlOptions.isRequired;
9024
9194
  goal.viewType = this.repeaterField.controlOptions.viewType;
9025
- goal.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9195
+ goal.labelDescription = this.repeaterField.controlOptions.labelDescription
9196
+ ? this.repeaterField.controlOptions.labelDescription
9197
+ : '';
9026
9198
  goal.dataSource = this.repeaterField.controlOptions.dataSource;
9027
9199
  goal.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9028
9200
  goal.showCheckbox = false;
9029
9201
  goal.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9030
9202
  goal.selectedItems = this.value;
9203
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9204
+ goal.customValidation = this.repeaterField.controlOptions.customValidation;
9205
+ }
9031
9206
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, goal);
9032
9207
  break;
9033
9208
  case DataType.Challenge:
9034
9209
  let challenge = new DropdownOptions();
9035
- challenge.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9210
+ challenge.name =
9211
+ this.repeaterField.controlOptions.name +
9212
+ '.' +
9213
+ this.itemNumber.toString() +
9214
+ '.' +
9215
+ this.controlNumber.toString();
9036
9216
  challenge.hideLabel = this.repeaterField.controlOptions.hideLabel;
9037
9217
  challenge.labelKey = this.repeaterField.controlOptions.labelKey;
9038
9218
  challenge.isRequired = this.repeaterField.controlOptions.isRequired;
9039
9219
  challenge.viewType = this.repeaterField.controlOptions.viewType;
9040
- challenge.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9220
+ challenge.labelDescription = this.repeaterField.controlOptions.labelDescription
9221
+ ? this.repeaterField.controlOptions.labelDescription
9222
+ : '';
9041
9223
  challenge.dataSource = this.repeaterField.controlOptions.dataSource;
9042
9224
  challenge.dataSource = this.repeaterField.controlOptions.dataSource;
9043
9225
  challenge.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9044
9226
  challenge.showCheckbox = false;
9045
9227
  challenge.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9046
9228
  challenge.selectedItems = this.value;
9229
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9230
+ challenge.customValidation = this.repeaterField.controlOptions.customValidation;
9231
+ }
9047
9232
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, challenge);
9048
9233
  break;
9049
9234
  case DataType.InnovationLab:
9050
9235
  let innovationLab = new DropdownOptions();
9051
- innovationLab.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9236
+ innovationLab.name =
9237
+ this.repeaterField.controlOptions.name +
9238
+ '.' +
9239
+ this.itemNumber.toString() +
9240
+ '.' +
9241
+ this.controlNumber.toString();
9052
9242
  innovationLab.hideLabel = this.repeaterField.controlOptions.hideLabel;
9053
9243
  innovationLab.labelKey = this.repeaterField.controlOptions.labelKey;
9054
9244
  innovationLab.isRequired = this.repeaterField.controlOptions.isRequired;
9055
9245
  innovationLab.viewType = this.repeaterField.controlOptions.viewType;
9056
- innovationLab.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9246
+ innovationLab.labelDescription = this.repeaterField.controlOptions.labelDescription
9247
+ ? this.repeaterField.controlOptions.labelDescription
9248
+ : '';
9057
9249
  innovationLab.dataSource = this.repeaterField.controlOptions.dataSource;
9058
9250
  innovationLab.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9059
9251
  innovationLab.showCheckbox = false;
9060
9252
  innovationLab.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9061
9253
  innovationLab.selectedItems = this.value;
9254
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9255
+ innovationLab.customValidation = this.repeaterField.controlOptions.customValidation;
9256
+ }
9062
9257
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, innovationLab);
9063
9258
  break;
9064
9259
  case DataType.Country:
9065
9260
  let country = new DropdownOptions();
9066
- country.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9261
+ country.name =
9262
+ this.repeaterField.controlOptions.name +
9263
+ '.' +
9264
+ this.itemNumber.toString() +
9265
+ '.' +
9266
+ this.controlNumber.toString();
9067
9267
  country.hideLabel = this.repeaterField.controlOptions.hideLabel;
9068
9268
  country.labelKey = this.repeaterField.controlOptions.labelKey;
9069
9269
  country.isRequired = this.repeaterField.controlOptions.isRequired;
9070
9270
  country.viewType = this.repeaterField.controlOptions.viewType;
9071
- country.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9271
+ country.labelDescription = this.repeaterField.controlOptions.labelDescription
9272
+ ? this.repeaterField.controlOptions.labelDescription
9273
+ : '';
9072
9274
  country.dataSource = this.repeaterField.controlOptions.dataSource;
9073
9275
  country.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9074
9276
  country.showCheckbox = false;
9075
9277
  country.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9076
9278
  country.selectedItems = this.value;
9279
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9280
+ country.customValidation = this.repeaterField.controlOptions.customValidation;
9281
+ }
9077
9282
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, country);
9078
9283
  break;
9079
9284
  //#endregion
9080
9285
  //#region FileUpload
9081
9286
  case DataType.File:
9082
9287
  let file = new FileUploadOptions();
9083
- file.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9288
+ file.name =
9289
+ this.repeaterField.controlOptions.name +
9290
+ '.' +
9291
+ this.itemNumber.toString() +
9292
+ '.' +
9293
+ this.controlNumber.toString();
9084
9294
  file.hideLabel = this.repeaterField.controlOptions.hideLabel;
9085
9295
  file.labelKey = this.repeaterField.controlOptions.labelKey;
9086
9296
  file.isRequired = this.repeaterField.controlOptions.isRequired;
9087
9297
  file.viewType = this.repeaterField.controlOptions.viewType;
9088
- file.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9298
+ file.labelDescription = this.repeaterField.controlOptions.labelDescription
9299
+ ? this.repeaterField.controlOptions.labelDescription
9300
+ : '';
9089
9301
  file.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9090
9302
  file.value = this.value;
9303
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9304
+ file.customValidation = this.repeaterField.controlOptions.customValidation;
9305
+ }
9091
9306
  this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, file);
9092
9307
  break;
9093
9308
  case DataType.MultiFile:
9094
9309
  let multiFile = new FileUploadOptions();
9095
- file.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9310
+ file.name =
9311
+ this.repeaterField.controlOptions.name +
9312
+ '.' +
9313
+ this.itemNumber.toString() +
9314
+ '.' +
9315
+ this.controlNumber.toString();
9096
9316
  file.hideLabel = this.repeaterField.controlOptions.hideLabel;
9097
9317
  file.labelKey = this.repeaterField.controlOptions.labelKey;
9098
9318
  file.isRequired = this.repeaterField.controlOptions.isRequired;
9099
9319
  file.viewType = this.repeaterField.controlOptions.viewType;
9100
- file.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9320
+ file.labelDescription = this.repeaterField.controlOptions.labelDescription
9321
+ ? this.repeaterField.controlOptions.labelDescription
9322
+ : '';
9101
9323
  multiFile.maxSizeForAllFilesInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9102
9324
  multiFile.maxNoOfFiles = this.repeaterField.controlOptions.maxFileCount;
9103
9325
  multiFile.isMultipleFile = true;
9104
9326
  multiFile.value = this.value;
9327
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9328
+ multiFile.customValidation = this.repeaterField.controlOptions.customValidation;
9329
+ }
9105
9330
  this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, multiFile);
9106
9331
  break;
9107
9332
  //#endregion
9108
9333
  //#region ImageUpload
9109
9334
  case DataType.Image:
9110
9335
  let image = new ImageUploadOptions();
9111
- image.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9336
+ image.name =
9337
+ this.repeaterField.controlOptions.name +
9338
+ '.' +
9339
+ this.itemNumber.toString() +
9340
+ '.' +
9341
+ this.controlNumber.toString();
9112
9342
  image.hideLabel = this.repeaterField.controlOptions.hideLabel;
9113
9343
  image.labelKey = this.repeaterField.controlOptions.labelKey;
9114
9344
  image.isRequired = this.repeaterField.controlOptions.isRequired;
9115
9345
  image.viewType = this.repeaterField.controlOptions.viewType;
9116
- image.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9346
+ image.labelDescription = this.repeaterField.controlOptions.labelDescription
9347
+ ? this.repeaterField.controlOptions.labelDescription
9348
+ : '';
9117
9349
  if (this.repeaterField.controlOptions.maxFileSizeInMB)
9118
9350
  image.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9119
9351
  image.value = this.value;
9352
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9353
+ image.customValidation = this.repeaterField.controlOptions.customValidation;
9354
+ }
9120
9355
  this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, image);
9121
9356
  break;
9122
9357
  case DataType.CoverPhoto:
9123
9358
  let coverPhoto = new ImageUploadOptions();
9124
- coverPhoto.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9359
+ coverPhoto.name =
9360
+ this.repeaterField.controlOptions.name +
9361
+ '.' +
9362
+ this.itemNumber.toString() +
9363
+ '.' +
9364
+ this.controlNumber.toString();
9125
9365
  coverPhoto.hideLabel = this.repeaterField.controlOptions.hideLabel;
9126
9366
  coverPhoto.labelKey = this.repeaterField.controlOptions.labelKey;
9127
9367
  coverPhoto.isRequired = this.repeaterField.controlOptions.isRequired;
9128
9368
  coverPhoto.viewType = this.repeaterField.controlOptions.viewType;
9129
- coverPhoto.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9369
+ coverPhoto.labelDescription = this.repeaterField.controlOptions.labelDescription
9370
+ ? this.repeaterField.controlOptions.labelDescription
9371
+ : '';
9130
9372
  if (this.repeaterField.controlOptions.maxFileSizeInMB)
9131
9373
  coverPhoto.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9132
9374
  coverPhoto.value = this.value;
9375
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9376
+ coverPhoto.customValidation = this.repeaterField.controlOptions.customValidation;
9377
+ }
9133
9378
  this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, coverPhoto);
9134
9379
  break;
9135
9380
  //#endregion
9136
9381
  //#region Mobile
9137
9382
  case DataType.Mobile:
9138
9383
  let mobile = new PhoneOptions();
9139
- mobile.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9384
+ mobile.name =
9385
+ this.repeaterField.controlOptions.name +
9386
+ '.' +
9387
+ this.itemNumber.toString() +
9388
+ '.' +
9389
+ this.controlNumber.toString();
9140
9390
  mobile.hideLabel = this.repeaterField.controlOptions.hideLabel;
9141
9391
  mobile.labelKey = this.repeaterField.controlOptions.labelKey;
9142
9392
  mobile.isRequired = this.repeaterField.controlOptions.isRequired;
9143
9393
  mobile.viewType = this.repeaterField.controlOptions.viewType;
9144
- mobile.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9394
+ mobile.labelDescription = this.repeaterField.controlOptions.labelDescription
9395
+ ? this.repeaterField.controlOptions.labelDescription
9396
+ : '';
9145
9397
  mobile.allowSearch = true;
9146
9398
  mobile.phoneValidation = true;
9147
9399
  mobile.selectFirstCountry = true;
9148
9400
  mobile.enablePlaceholder = true;
9149
9401
  mobile.value = this.value;
9402
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9403
+ mobile.customValidation = this.repeaterField.controlOptions.customValidation;
9404
+ }
9150
9405
  this.renderComponentService.renderDynamicComponent(this.item, PhoneComponent, this.group, mobile);
9151
9406
  break;
9152
9407
  //#endregion
9153
9408
  //#region MultilineText
9154
9409
  case DataType.MultilineText:
9155
9410
  let multilineText = new TextAreaOptions();
9156
- multilineText.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9411
+ multilineText.name =
9412
+ this.repeaterField.controlOptions.name +
9413
+ '.' +
9414
+ this.itemNumber.toString() +
9415
+ '.' +
9416
+ this.controlNumber.toString();
9157
9417
  multilineText.hideLabel = this.repeaterField.controlOptions.hideLabel;
9158
9418
  multilineText.labelKey = this.repeaterField.controlOptions.labelKey;
9159
9419
  multilineText.isRequired = this.repeaterField.controlOptions.isRequired;
9160
9420
  multilineText.viewType = this.repeaterField.controlOptions.viewType;
9161
- multilineText.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9421
+ multilineText.labelDescription = this.repeaterField.controlOptions.labelDescription
9422
+ ? this.repeaterField.controlOptions.labelDescription
9423
+ : '';
9162
9424
  if (this.repeaterField.controlOptions.maxLength)
9163
9425
  multilineText.maxLength = this.repeaterField.controlOptions.maxLength;
9164
9426
  if (this.repeaterField.controlOptions.minLength)
@@ -9166,63 +9428,106 @@ class RepeaterFieldBuilderComponent {
9166
9428
  multilineText.rows = this.repeaterField.controlOptions.rows;
9167
9429
  multilineText.forceDirection = this.repeaterField.controlOptions.forceDirection;
9168
9430
  multilineText.value = this.value;
9431
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9432
+ multilineText.customValidation = this.repeaterField.controlOptions.customValidation;
9433
+ }
9169
9434
  this.renderComponentService.renderDynamicComponent(this.item, TextAreaComponent, this.group, multilineText);
9170
9435
  break;
9171
9436
  //#endregion
9172
9437
  //#region HTML
9173
9438
  case DataType.HTML:
9174
- let HTML = new HtmlEditorOptions();
9175
- HTML.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9176
- HTML.hideLabel = this.repeaterField.controlOptions.hideLabel;
9177
- HTML.labelKey = this.repeaterField.controlOptions.labelKey;
9178
- HTML.isRequired = this.repeaterField.controlOptions.isRequired;
9179
- HTML.viewType = this.repeaterField.controlOptions.viewType;
9180
- HTML.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9439
+ let html = new HtmlEditorOptions();
9440
+ html.name =
9441
+ this.repeaterField.controlOptions.name +
9442
+ '.' +
9443
+ this.itemNumber.toString() +
9444
+ '.' +
9445
+ this.controlNumber.toString();
9446
+ html.hideLabel = this.repeaterField.controlOptions.hideLabel;
9447
+ html.labelKey = this.repeaterField.controlOptions.labelKey;
9448
+ html.isRequired = this.repeaterField.controlOptions.isRequired;
9449
+ html.viewType = this.repeaterField.controlOptions.viewType;
9450
+ html.labelDescription = this.repeaterField.controlOptions.labelDescription
9451
+ ? this.repeaterField.controlOptions.labelDescription
9452
+ : '';
9181
9453
  if (this.repeaterField.controlOptions.maxLength)
9182
- HTML.maxLength = this.repeaterField.controlOptions.maxLength;
9454
+ html.maxLength = this.repeaterField.controlOptions.maxLength;
9183
9455
  if (this.repeaterField.controlOptions.minLength)
9184
- HTML.minLength = this.repeaterField.controlOptions.minLength;
9185
- HTML.height = this.repeaterField.controlOptions.rows;
9186
- HTML.forceDirection = this.repeaterField.controlOptions.forceDirection;
9187
- HTML.value = this.value;
9188
- this.renderComponentService.renderDynamicComponent(this.item, HtmlEditorComponent, this.group, HTML);
9456
+ html.minLength = this.repeaterField.controlOptions.minLength;
9457
+ html.height = this.repeaterField.controlOptions.rows;
9458
+ html.forceDirection = this.repeaterField.controlOptions.forceDirection;
9459
+ html.value = this.value;
9460
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9461
+ html.customValidation = this.repeaterField.controlOptions.customValidation;
9462
+ }
9463
+ this.renderComponentService.renderDynamicComponent(this.item, HtmlEditorComponent, this.group, html);
9189
9464
  break;
9190
9465
  //#endregion
9191
9466
  //#region Boolean
9192
9467
  case DataType.Boolean:
9193
9468
  let boolean = new ToggleSlideOptions();
9194
- boolean.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9469
+ boolean.name =
9470
+ this.repeaterField.controlOptions.name +
9471
+ '.' +
9472
+ this.itemNumber.toString() +
9473
+ '.' +
9474
+ this.controlNumber.toString();
9195
9475
  boolean.hideLabel = this.repeaterField.controlOptions.hideLabel;
9196
9476
  boolean.labelKey = this.repeaterField.controlOptions.labelKey;
9197
9477
  boolean.viewType = this.repeaterField.controlOptions.viewType;
9198
9478
  boolean.value = this.value;
9199
- boolean.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9479
+ boolean.labelDescription = this.repeaterField.controlOptions.labelDescription
9480
+ ? this.repeaterField.controlOptions.labelDescription
9481
+ : '';
9482
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9483
+ boolean.customValidation = this.repeaterField.controlOptions.customValidation;
9484
+ }
9200
9485
  this.renderComponentService.renderDynamicComponent(this.item, ToggleslideComponent, this.group, boolean);
9201
9486
  break;
9202
9487
  //#endregion
9203
9488
  //#region Location
9204
9489
  case DataType.Location:
9205
9490
  let location = new MapAutoCompleteOptions();
9206
- location.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9491
+ location.name =
9492
+ this.repeaterField.controlOptions.name +
9493
+ '.' +
9494
+ this.itemNumber.toString() +
9495
+ '.' +
9496
+ this.controlNumber.toString();
9207
9497
  location.hideLabel = this.repeaterField.controlOptions.hideLabel;
9208
9498
  location.labelKey = this.repeaterField.controlOptions.labelKey;
9209
9499
  location.isRequired = this.repeaterField.controlOptions.isRequired;
9210
9500
  location.viewType = this.repeaterField.controlOptions.viewType;
9211
9501
  location.value = this.value;
9212
- location.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9502
+ location.labelDescription = this.repeaterField.controlOptions.labelDescription
9503
+ ? this.repeaterField.controlOptions.labelDescription
9504
+ : '';
9505
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9506
+ location.customValidation = this.repeaterField.controlOptions.customValidation;
9507
+ }
9213
9508
  this.renderComponentService.renderDynamicComponent(this.item, MapAutoCompleteComponent, this.group, location);
9214
9509
  break;
9215
9510
  //#endregion
9216
9511
  //#region CheckBox
9217
9512
  case DataType.CheckBox:
9218
9513
  let checkBox = new CheckBoxOptions();
9219
- checkBox.name = this.repeaterField.controlOptions.name + "." + this.itemNumber.toString() + "." + this.controlNumber.toString();
9514
+ checkBox.name =
9515
+ this.repeaterField.controlOptions.name +
9516
+ '.' +
9517
+ this.itemNumber.toString() +
9518
+ '.' +
9519
+ this.controlNumber.toString();
9220
9520
  checkBox.hideLabel = this.repeaterField.controlOptions.hideLabel;
9221
9521
  checkBox.labelKey = this.repeaterField.controlOptions.labelKey;
9222
9522
  checkBox.viewType = this.repeaterField.controlOptions.viewType;
9223
9523
  checkBox.outputFunction = this.repeaterField.controlOptions.outputFunction;
9224
- checkBox.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9524
+ checkBox.labelDescription = this.repeaterField.controlOptions.labelDescription
9525
+ ? this.repeaterField.controlOptions.labelDescription
9526
+ : '';
9225
9527
  checkBox.value = this.value;
9528
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9529
+ checkBox.customValidation = this.repeaterField.controlOptions.customValidation;
9530
+ }
9226
9531
  this.renderComponentService.renderDynamicComponent(this.item, CheckBoxComponent, this.group, checkBox);
9227
9532
  break;
9228
9533
  //#endregion
@@ -9234,7 +9539,11 @@ class RepeaterFieldBuilderComponent {
9234
9539
  ngOnChanges(changes) {
9235
9540
  if (changes.itemNumber)
9236
9541
  if (changes.itemNumber.previousValue) {
9237
- let name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.previousValue.toString() + "." + this.controlNumber.toString();
9542
+ let name = this.repeaterField.controlOptions.name +
9543
+ '.' +
9544
+ changes.itemNumber.previousValue.toString() +
9545
+ '.' +
9546
+ this.controlNumber.toString();
9238
9547
  let value = this.group.controls[name].value;
9239
9548
  this.item.clear();
9240
9549
  this.group.removeControl(name);
@@ -9242,284 +9551,486 @@ class RepeaterFieldBuilderComponent {
9242
9551
  //#region TextBox
9243
9552
  case DataType.Text:
9244
9553
  let text = new TextBoxOptions();
9245
- text.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9554
+ text.name =
9555
+ this.repeaterField.controlOptions.name +
9556
+ '.' +
9557
+ changes.itemNumber.currentValue +
9558
+ '.' +
9559
+ this.controlNumber.toString();
9246
9560
  text.hideLabel = this.repeaterField.controlOptions.hideLabel;
9247
9561
  text.labelKey = this.repeaterField.controlOptions.labelKey;
9248
9562
  text.isRequired = this.repeaterField.controlOptions.isRequired;
9249
9563
  text.viewType = this.repeaterField.controlOptions.viewType;
9250
- text.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9564
+ text.labelDescription = this.repeaterField.controlOptions.labelDescription
9565
+ ? this.repeaterField.controlOptions.labelDescription
9566
+ : '';
9251
9567
  text.type = InputType.Text;
9252
9568
  if (this.repeaterField.controlOptions.maxLength)
9253
9569
  text.maxLength = this.repeaterField.controlOptions.maxLength;
9254
9570
  if (this.repeaterField.controlOptions.minLength)
9255
9571
  text.minLength = this.repeaterField.controlOptions.minLength;
9256
9572
  text.value = value;
9573
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9574
+ text.customValidation = this.repeaterField.controlOptions.customValidation;
9575
+ }
9257
9576
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, text);
9258
9577
  break;
9259
9578
  case DataType.Name:
9260
9579
  let name = new TextBoxOptions();
9261
- name.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9580
+ name.name =
9581
+ this.repeaterField.controlOptions.name +
9582
+ '.' +
9583
+ changes.itemNumber.currentValue +
9584
+ '.' +
9585
+ this.controlNumber.toString();
9262
9586
  name.hideLabel = this.repeaterField.controlOptions.hideLabel;
9263
9587
  name.labelKey = this.repeaterField.controlOptions.labelKey;
9264
9588
  name.isRequired = this.repeaterField.controlOptions.isRequired;
9265
9589
  name.viewType = this.repeaterField.controlOptions.viewType;
9266
- name.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9590
+ name.labelDescription = this.repeaterField.controlOptions.labelDescription
9591
+ ? this.repeaterField.controlOptions.labelDescription
9592
+ : '';
9267
9593
  if (this.repeaterField.controlOptions.maxLength)
9268
9594
  name.maxLength = this.repeaterField.controlOptions.maxLength;
9269
9595
  if (this.repeaterField.controlOptions.minLength)
9270
9596
  name.minLength = this.repeaterField.controlOptions.minLength;
9271
9597
  name.type = InputType.Text;
9272
9598
  name.value = value;
9599
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9600
+ name.customValidation = this.repeaterField.controlOptions.customValidation;
9601
+ }
9273
9602
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, name);
9274
9603
  break;
9275
9604
  case DataType.Email:
9276
9605
  let email = new TextBoxOptions();
9277
- email.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9606
+ email.name =
9607
+ this.repeaterField.controlOptions.name +
9608
+ '.' +
9609
+ changes.itemNumber.currentValue +
9610
+ '.' +
9611
+ this.controlNumber.toString();
9278
9612
  email.hideLabel = this.repeaterField.controlOptions.hideLabel;
9279
9613
  email.labelKey = this.repeaterField.controlOptions.labelKey;
9280
9614
  email.isRequired = this.repeaterField.controlOptions.isRequired;
9281
9615
  email.viewType = this.repeaterField.controlOptions.viewType;
9282
- email.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9616
+ email.labelDescription = this.repeaterField.controlOptions.labelDescription
9617
+ ? this.repeaterField.controlOptions.labelDescription
9618
+ : '';
9283
9619
  email.type = InputType.Email;
9284
9620
  email.value = value;
9621
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9622
+ email.customValidation = this.repeaterField.controlOptions.customValidation;
9623
+ }
9285
9624
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, email);
9286
9625
  break;
9287
9626
  case DataType.Number:
9288
9627
  let number = new TextBoxOptions();
9289
- number.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9628
+ number.name =
9629
+ this.repeaterField.controlOptions.name +
9630
+ '.' +
9631
+ changes.itemNumber.currentValue +
9632
+ '.' +
9633
+ this.controlNumber.toString();
9290
9634
  number.hideLabel = this.repeaterField.controlOptions.hideLabel;
9291
9635
  number.labelKey = this.repeaterField.controlOptions.labelKey;
9292
9636
  number.isRequired = this.repeaterField.controlOptions.isRequired;
9293
9637
  number.viewType = this.repeaterField.controlOptions.viewType;
9294
- number.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9638
+ number.labelDescription = this.repeaterField.controlOptions.labelDescription
9639
+ ? this.repeaterField.controlOptions.labelDescription
9640
+ : '';
9295
9641
  number.type = InputType.Number;
9296
9642
  let rangeNumber = new RangeNumber();
9297
9643
  rangeNumber.to = this.repeaterField.controlOptions.maxLength;
9298
9644
  rangeNumber.from = this.repeaterField.controlOptions.minLength;
9299
9645
  number.numberRange = rangeNumber;
9300
9646
  number.value = value;
9647
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9648
+ number.customValidation = this.repeaterField.controlOptions.customValidation;
9649
+ }
9301
9650
  this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, number);
9302
9651
  break;
9652
+ case DataType.URL:
9653
+ let url = new TextBoxOptions();
9654
+ url.name = `${this.repeaterField.controlOptions.name}.${changes.itemNumber.currentValue}.${this.controlNumber}`;
9655
+ url.hideLabel = this.repeaterField.controlOptions.hideLabel;
9656
+ url.labelKey = this.repeaterField.controlOptions.labelKey;
9657
+ url.isRequired = this.repeaterField.controlOptions.isRequired;
9658
+ url.viewType = this.repeaterField.controlOptions.viewType;
9659
+ url.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : '';
9660
+ url.type = InputType.URL;
9661
+ url.value = value;
9662
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9663
+ url.customValidation = this.repeaterField.controlOptions.customValidation;
9664
+ }
9665
+ this.renderComponentService.renderDynamicComponent(this.item, TextboxComponent, this.group, url);
9666
+ break;
9303
9667
  //#endregion
9304
9668
  //#region DateTime
9305
9669
  case DataType.Date:
9306
- let Date = new DatePickerOptions();
9307
- Date.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9308
- Date.hideLabel = this.repeaterField.controlOptions.hideLabel;
9309
- Date.labelKey = this.repeaterField.controlOptions.labelKey;
9310
- Date.isRequired = this.repeaterField.controlOptions.isRequired;
9311
- Date.viewType = this.repeaterField.controlOptions.viewType;
9312
- Date.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9313
- Date.pickerType = PickerType.Calendar;
9314
- Date.selectMode = SelectMode.Single;
9315
- Date.startView = StartView.Month;
9316
- Date.value = value;
9317
- this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, Date);
9670
+ let date = new DatePickerOptions();
9671
+ date.name =
9672
+ this.repeaterField.controlOptions.name +
9673
+ '.' +
9674
+ changes.itemNumber.currentValue +
9675
+ '.' +
9676
+ this.controlNumber.toString();
9677
+ date.hideLabel = this.repeaterField.controlOptions.hideLabel;
9678
+ date.labelKey = this.repeaterField.controlOptions.labelKey;
9679
+ date.isRequired = this.repeaterField.controlOptions.isRequired;
9680
+ date.viewType = this.repeaterField.controlOptions.viewType;
9681
+ date.labelDescription = this.repeaterField.controlOptions.labelDescription
9682
+ ? this.repeaterField.controlOptions.labelDescription
9683
+ : '';
9684
+ date.pickerType = PickerType.Calendar;
9685
+ date.selectMode = SelectMode.Single;
9686
+ date.startView = StartView.Month;
9687
+ date.value = value;
9688
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9689
+ date.customValidation = this.repeaterField.controlOptions.customValidation;
9690
+ }
9691
+ this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, date);
9318
9692
  break;
9319
9693
  case DataType.DateTime:
9320
9694
  let dateTime = new DatePickerOptions();
9321
- dateTime.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9695
+ dateTime.name =
9696
+ this.repeaterField.controlOptions.name +
9697
+ '.' +
9698
+ changes.itemNumber.currentValue +
9699
+ '.' +
9700
+ this.controlNumber.toString();
9322
9701
  dateTime.hideLabel = this.repeaterField.controlOptions.hideLabel;
9323
9702
  dateTime.labelKey = this.repeaterField.controlOptions.labelKey;
9324
9703
  dateTime.isRequired = this.repeaterField.controlOptions.isRequired;
9325
9704
  dateTime.viewType = this.repeaterField.controlOptions.viewType;
9326
- dateTime.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9705
+ dateTime.labelDescription = this.repeaterField.controlOptions.labelDescription
9706
+ ? this.repeaterField.controlOptions.labelDescription
9707
+ : '';
9327
9708
  dateTime.pickerType = PickerType.Both;
9328
9709
  dateTime.selectMode = SelectMode.Single;
9329
9710
  dateTime.startView = StartView.Month;
9330
9711
  dateTime.value = value;
9712
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9713
+ dateTime.customValidation = this.repeaterField.controlOptions.customValidation;
9714
+ }
9331
9715
  this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, dateTime);
9332
9716
  break;
9333
9717
  case DataType.Time:
9334
9718
  let time = new DatePickerOptions();
9335
- time.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9719
+ time.name =
9720
+ this.repeaterField.controlOptions.name +
9721
+ '.' +
9722
+ changes.itemNumber.currentValue +
9723
+ '.' +
9724
+ this.controlNumber.toString();
9336
9725
  time.hideLabel = this.repeaterField.controlOptions.hideLabel;
9337
9726
  time.labelKey = this.repeaterField.controlOptions.labelKey;
9338
9727
  time.isRequired = this.repeaterField.controlOptions.isRequired;
9339
9728
  time.viewType = this.repeaterField.controlOptions.viewType;
9340
- time.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9729
+ time.labelDescription = this.repeaterField.controlOptions.labelDescription
9730
+ ? this.repeaterField.controlOptions.labelDescription
9731
+ : '';
9341
9732
  time.pickerType = PickerType.Timer;
9342
9733
  time.selectMode = SelectMode.Single;
9343
9734
  time.startView = StartView.Month;
9344
9735
  time.value = value;
9736
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9737
+ time.customValidation = this.repeaterField.controlOptions.customValidation;
9738
+ }
9345
9739
  this.renderComponentService.renderDynamicComponent(this.item, DateInputComponent, this.group, time);
9346
9740
  break;
9347
9741
  //#endregion
9348
9742
  //#region Dropdown
9349
9743
  case DataType.SingleSelect:
9350
9744
  let singleSelect = new DropdownOptions();
9351
- singleSelect.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9745
+ singleSelect.name =
9746
+ this.repeaterField.controlOptions.name +
9747
+ '.' +
9748
+ changes.itemNumber.currentValue +
9749
+ '.' +
9750
+ this.controlNumber.toString();
9352
9751
  singleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
9353
9752
  singleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
9354
9753
  singleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
9355
9754
  singleSelect.viewType = this.repeaterField.controlOptions.viewType;
9356
- singleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9755
+ singleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription
9756
+ ? this.repeaterField.controlOptions.labelDescription
9757
+ : '';
9357
9758
  singleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
9358
9759
  singleSelect.singleSelection = true;
9359
9760
  singleSelect.showCheckbox = false;
9360
9761
  singleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9361
9762
  singleSelect.selectedItems = value;
9763
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9764
+ singleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
9765
+ }
9362
9766
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, singleSelect);
9363
9767
  break;
9364
9768
  case DataType.MulipleSelect:
9365
9769
  let mulipleSelect = new DropdownOptions();
9366
- mulipleSelect.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9770
+ mulipleSelect.name =
9771
+ this.repeaterField.controlOptions.name +
9772
+ '.' +
9773
+ changes.itemNumber.currentValue +
9774
+ '.' +
9775
+ this.controlNumber.toString();
9367
9776
  mulipleSelect.hideLabel = this.repeaterField.controlOptions.hideLabel;
9368
9777
  mulipleSelect.labelKey = this.repeaterField.controlOptions.labelKey;
9369
9778
  mulipleSelect.isRequired = this.repeaterField.controlOptions.isRequired;
9370
9779
  mulipleSelect.viewType = this.repeaterField.controlOptions.viewType;
9371
- mulipleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9780
+ mulipleSelect.labelDescription = this.repeaterField.controlOptions.labelDescription
9781
+ ? this.repeaterField.controlOptions.labelDescription
9782
+ : '';
9372
9783
  mulipleSelect.dataSource = this.repeaterField.controlOptions.dataSource;
9373
9784
  mulipleSelect.singleSelection = false;
9374
9785
  mulipleSelect.showCheckbox = false;
9375
9786
  mulipleSelect.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9376
9787
  mulipleSelect.selectedItems = value;
9788
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9789
+ mulipleSelect.customValidation = this.repeaterField.controlOptions.customValidation;
9790
+ }
9377
9791
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, mulipleSelect);
9378
9792
  break;
9379
9793
  case DataType.Goal:
9380
- let Goal = new DropdownOptions();
9381
- Goal.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9382
- Goal.hideLabel = this.repeaterField.controlOptions.hideLabel;
9383
- Goal.labelKey = this.repeaterField.controlOptions.labelKey;
9384
- Goal.isRequired = this.repeaterField.controlOptions.isRequired;
9385
- Goal.viewType = this.repeaterField.controlOptions.viewType;
9386
- Goal.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9387
- Goal.dataSource = this.repeaterField.controlOptions.dataSource;
9388
- Goal.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9389
- Goal.showCheckbox = false;
9390
- Goal.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9391
- Goal.selectedItems = value;
9392
- this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, Goal);
9794
+ let goal = new DropdownOptions();
9795
+ goal.name =
9796
+ this.repeaterField.controlOptions.name +
9797
+ '.' +
9798
+ changes.itemNumber.currentValue +
9799
+ '.' +
9800
+ this.controlNumber.toString();
9801
+ goal.hideLabel = this.repeaterField.controlOptions.hideLabel;
9802
+ goal.labelKey = this.repeaterField.controlOptions.labelKey;
9803
+ goal.isRequired = this.repeaterField.controlOptions.isRequired;
9804
+ goal.viewType = this.repeaterField.controlOptions.viewType;
9805
+ goal.labelDescription = this.repeaterField.controlOptions.labelDescription
9806
+ ? this.repeaterField.controlOptions.labelDescription
9807
+ : '';
9808
+ goal.dataSource = this.repeaterField.controlOptions.dataSource;
9809
+ goal.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9810
+ goal.showCheckbox = false;
9811
+ goal.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9812
+ goal.selectedItems = value;
9813
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9814
+ goal.customValidation = this.repeaterField.controlOptions.customValidation;
9815
+ }
9816
+ this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, goal);
9393
9817
  break;
9394
9818
  case DataType.Challenge:
9395
9819
  let challenge = new DropdownOptions();
9396
- challenge.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9820
+ challenge.name =
9821
+ this.repeaterField.controlOptions.name +
9822
+ '.' +
9823
+ changes.itemNumber.currentValue +
9824
+ '.' +
9825
+ this.controlNumber.toString();
9397
9826
  challenge.hideLabel = this.repeaterField.controlOptions.hideLabel;
9398
9827
  challenge.labelKey = this.repeaterField.controlOptions.labelKey;
9399
9828
  challenge.isRequired = this.repeaterField.controlOptions.isRequired;
9400
9829
  challenge.viewType = this.repeaterField.controlOptions.viewType;
9401
- challenge.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9830
+ challenge.labelDescription = this.repeaterField.controlOptions.labelDescription
9831
+ ? this.repeaterField.controlOptions.labelDescription
9832
+ : '';
9402
9833
  challenge.dataSource = this.repeaterField.controlOptions.dataSource;
9403
9834
  challenge.dataSource = this.repeaterField.controlOptions.dataSource;
9404
9835
  challenge.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9405
9836
  challenge.showCheckbox = false;
9406
9837
  challenge.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9407
9838
  challenge.selectedItems = value;
9839
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9840
+ challenge.customValidation = this.repeaterField.controlOptions.customValidation;
9841
+ }
9408
9842
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, challenge);
9409
9843
  break;
9410
9844
  case DataType.InnovationLab:
9411
9845
  let innovationLab = new DropdownOptions();
9412
- innovationLab.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9846
+ innovationLab.name =
9847
+ this.repeaterField.controlOptions.name +
9848
+ '.' +
9849
+ changes.itemNumber.currentValue +
9850
+ '.' +
9851
+ this.controlNumber.toString();
9413
9852
  innovationLab.hideLabel = this.repeaterField.controlOptions.hideLabel;
9414
9853
  innovationLab.labelKey = this.repeaterField.controlOptions.labelKey;
9415
9854
  innovationLab.isRequired = this.repeaterField.controlOptions.isRequired;
9416
9855
  innovationLab.viewType = this.repeaterField.controlOptions.viewType;
9417
- innovationLab.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9856
+ innovationLab.labelDescription = this.repeaterField.controlOptions.labelDescription
9857
+ ? this.repeaterField.controlOptions.labelDescription
9858
+ : '';
9418
9859
  innovationLab.dataSource = this.repeaterField.controlOptions.dataSource;
9419
9860
  innovationLab.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9420
9861
  innovationLab.showCheckbox = false;
9421
9862
  innovationLab.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9422
9863
  innovationLab.selectedItems = value;
9864
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9865
+ innovationLab.customValidation = this.repeaterField.controlOptions.customValidation;
9866
+ }
9423
9867
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, innovationLab);
9424
9868
  break;
9425
9869
  case DataType.Country:
9426
9870
  let country = new DropdownOptions();
9427
- country.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9871
+ country.name =
9872
+ this.repeaterField.controlOptions.name +
9873
+ '.' +
9874
+ changes.itemNumber.currentValue +
9875
+ '.' +
9876
+ this.controlNumber.toString();
9428
9877
  country.hideLabel = this.repeaterField.controlOptions.hideLabel;
9429
9878
  country.labelKey = this.repeaterField.controlOptions.labelKey;
9430
9879
  country.isRequired = this.repeaterField.controlOptions.isRequired;
9431
9880
  country.viewType = this.repeaterField.controlOptions.viewType;
9432
- country.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9881
+ country.labelDescription = this.repeaterField.controlOptions.labelDescription
9882
+ ? this.repeaterField.controlOptions.labelDescription
9883
+ : '';
9433
9884
  country.dataSource = this.repeaterField.controlOptions.dataSource;
9434
9885
  country.singleSelection = !this.repeaterField.controlOptions.isMultiple;
9435
9886
  country.showCheckbox = false;
9436
9887
  country.allowSearchFilter = this.repeaterField.controlOptions.hasSearch;
9437
9888
  country.selectedItems = value;
9889
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9890
+ country.customValidation = this.repeaterField.controlOptions.customValidation;
9891
+ }
9438
9892
  this.renderComponentService.renderDynamicComponent(this.item, DropdownListComponent, this.group, country);
9439
9893
  break;
9440
9894
  //#endregion
9441
9895
  //#region FileUpload
9442
9896
  case DataType.File:
9443
9897
  let file = new FileUploadOptions();
9444
- file.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9898
+ file.name =
9899
+ this.repeaterField.controlOptions.name +
9900
+ '.' +
9901
+ changes.itemNumber.currentValue +
9902
+ '.' +
9903
+ this.controlNumber.toString();
9445
9904
  file.hideLabel = this.repeaterField.controlOptions.hideLabel;
9446
9905
  file.labelKey = this.repeaterField.controlOptions.labelKey;
9447
9906
  file.isRequired = this.repeaterField.controlOptions.isRequired;
9448
9907
  file.viewType = this.repeaterField.controlOptions.viewType;
9449
- file.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9908
+ file.labelDescription = this.repeaterField.controlOptions.labelDescription
9909
+ ? this.repeaterField.controlOptions.labelDescription
9910
+ : '';
9450
9911
  file.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9451
9912
  file.value = value;
9913
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9914
+ file.customValidation = this.repeaterField.controlOptions.customValidation;
9915
+ }
9452
9916
  this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, file);
9453
9917
  break;
9454
9918
  case DataType.MultiFile:
9455
9919
  let multiFile = new FileUploadOptions();
9456
- file.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9920
+ file.name =
9921
+ this.repeaterField.controlOptions.name +
9922
+ '.' +
9923
+ changes.itemNumber.currentValue +
9924
+ '.' +
9925
+ this.controlNumber.toString();
9457
9926
  file.hideLabel = this.repeaterField.controlOptions.hideLabel;
9458
9927
  file.labelKey = this.repeaterField.controlOptions.labelKey;
9459
9928
  file.isRequired = this.repeaterField.controlOptions.isRequired;
9460
9929
  file.viewType = this.repeaterField.controlOptions.viewType;
9461
- file.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9930
+ file.labelDescription = this.repeaterField.controlOptions.labelDescription
9931
+ ? this.repeaterField.controlOptions.labelDescription
9932
+ : '';
9462
9933
  multiFile.maxSizeForAllFilesInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9463
9934
  multiFile.maxNoOfFiles = this.repeaterField.controlOptions.maxFileCount;
9464
9935
  multiFile.isMultipleFile = true;
9465
9936
  multiFile.value = value;
9937
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9938
+ multiFile.customValidation = this.repeaterField.controlOptions.customValidation;
9939
+ }
9466
9940
  this.renderComponentService.renderDynamicComponent(this.item, FileUploadComponent, this.group, multiFile);
9467
9941
  break;
9468
9942
  //#endregion
9469
9943
  //#region ImageUpload
9470
9944
  case DataType.Image:
9471
9945
  let image = new ImageUploadOptions();
9472
- image.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9946
+ image.name =
9947
+ this.repeaterField.controlOptions.name +
9948
+ '.' +
9949
+ changes.itemNumber.currentValue +
9950
+ '.' +
9951
+ this.controlNumber.toString();
9473
9952
  image.hideLabel = this.repeaterField.controlOptions.hideLabel;
9474
9953
  image.labelKey = this.repeaterField.controlOptions.labelKey;
9475
9954
  image.isRequired = this.repeaterField.controlOptions.isRequired;
9476
9955
  image.viewType = this.repeaterField.controlOptions.viewType;
9477
- image.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9956
+ image.labelDescription = this.repeaterField.controlOptions.labelDescription
9957
+ ? this.repeaterField.controlOptions.labelDescription
9958
+ : '';
9478
9959
  if (this.repeaterField.controlOptions.maxFileSizeInMB)
9479
9960
  image.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9480
9961
  image.value = value;
9962
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9963
+ image.customValidation = this.repeaterField.controlOptions.customValidation;
9964
+ }
9481
9965
  this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, image);
9482
9966
  break;
9483
9967
  case DataType.CoverPhoto:
9484
9968
  let coverPhoto = new ImageUploadOptions();
9485
- coverPhoto.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9969
+ coverPhoto.name =
9970
+ this.repeaterField.controlOptions.name +
9971
+ '.' +
9972
+ changes.itemNumber.currentValue +
9973
+ '.' +
9974
+ this.controlNumber.toString();
9486
9975
  coverPhoto.hideLabel = this.repeaterField.controlOptions.hideLabel;
9487
9976
  coverPhoto.labelKey = this.repeaterField.controlOptions.labelKey;
9488
9977
  coverPhoto.isRequired = this.repeaterField.controlOptions.isRequired;
9489
9978
  coverPhoto.viewType = this.repeaterField.controlOptions.viewType;
9490
- coverPhoto.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9979
+ coverPhoto.labelDescription = this.repeaterField.controlOptions.labelDescription
9980
+ ? this.repeaterField.controlOptions.labelDescription
9981
+ : '';
9491
9982
  if (this.repeaterField.controlOptions.maxFileSizeInMB)
9492
9983
  coverPhoto.fileMaxSizeInMB = this.repeaterField.controlOptions.maxFileSizeInMB;
9493
9984
  coverPhoto.value = value;
9985
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
9986
+ coverPhoto.customValidation = this.repeaterField.controlOptions.customValidation;
9987
+ }
9494
9988
  this.renderComponentService.renderDynamicComponent(this.item, ImageUploaderComponent, this.group, coverPhoto);
9495
9989
  break;
9496
9990
  //#endregion
9497
9991
  //#region Mobile
9498
9992
  case DataType.Mobile:
9499
9993
  let mobile = new PhoneOptions();
9500
- mobile.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9994
+ mobile.name =
9995
+ this.repeaterField.controlOptions.name +
9996
+ '.' +
9997
+ changes.itemNumber.currentValue +
9998
+ '.' +
9999
+ this.controlNumber.toString();
9501
10000
  mobile.hideLabel = this.repeaterField.controlOptions.hideLabel;
9502
10001
  mobile.labelKey = this.repeaterField.controlOptions.labelKey;
9503
10002
  mobile.isRequired = this.repeaterField.controlOptions.isRequired;
9504
10003
  mobile.viewType = this.repeaterField.controlOptions.viewType;
9505
- mobile.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
10004
+ mobile.labelDescription = this.repeaterField.controlOptions.labelDescription
10005
+ ? this.repeaterField.controlOptions.labelDescription
10006
+ : '';
9506
10007
  mobile.allowSearch = true;
9507
10008
  mobile.phoneValidation = true;
9508
10009
  mobile.selectFirstCountry = true;
9509
10010
  mobile.enablePlaceholder = true;
9510
10011
  mobile.value = value;
10012
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
10013
+ mobile.customValidation = this.repeaterField.controlOptions.customValidation;
10014
+ }
9511
10015
  this.renderComponentService.renderDynamicComponent(this.item, PhoneComponent, this.group, mobile);
9512
10016
  break;
9513
10017
  //#endregion
9514
10018
  //#region MultilineText
9515
10019
  case DataType.MultilineText:
9516
10020
  let multilineText = new TextAreaOptions();
9517
- multilineText.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
10021
+ multilineText.name =
10022
+ this.repeaterField.controlOptions.name +
10023
+ '.' +
10024
+ changes.itemNumber.currentValue +
10025
+ '.' +
10026
+ this.controlNumber.toString();
9518
10027
  multilineText.hideLabel = this.repeaterField.controlOptions.hideLabel;
9519
10028
  multilineText.labelKey = this.repeaterField.controlOptions.labelKey;
9520
10029
  multilineText.isRequired = this.repeaterField.controlOptions.isRequired;
9521
10030
  multilineText.viewType = this.repeaterField.controlOptions.viewType;
9522
- multilineText.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
10031
+ multilineText.labelDescription = this.repeaterField.controlOptions.labelDescription
10032
+ ? this.repeaterField.controlOptions.labelDescription
10033
+ : '';
9523
10034
  if (this.repeaterField.controlOptions.maxLength)
9524
10035
  multilineText.maxLength = this.repeaterField.controlOptions.maxLength;
9525
10036
  if (this.repeaterField.controlOptions.minLength)
@@ -9527,63 +10038,106 @@ class RepeaterFieldBuilderComponent {
9527
10038
  multilineText.rows = this.repeaterField.controlOptions.rows;
9528
10039
  multilineText.forceDirection = this.repeaterField.controlOptions.forceDirection;
9529
10040
  multilineText.value = value;
10041
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
10042
+ multilineText.customValidation = this.repeaterField.controlOptions.customValidation;
10043
+ }
9530
10044
  this.renderComponentService.renderDynamicComponent(this.item, TextAreaComponent, this.group, multilineText);
9531
10045
  break;
9532
10046
  //#endregion
9533
10047
  //#region HTML
9534
10048
  case DataType.HTML:
9535
- let HTML = new HtmlEditorOptions();
9536
- HTML.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9537
- HTML.hideLabel = this.repeaterField.controlOptions.hideLabel;
9538
- HTML.labelKey = this.repeaterField.controlOptions.labelKey;
9539
- HTML.isRequired = this.repeaterField.controlOptions.isRequired;
9540
- HTML.viewType = this.repeaterField.controlOptions.viewType;
9541
- HTML.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
10049
+ let html = new HtmlEditorOptions();
10050
+ html.name =
10051
+ this.repeaterField.controlOptions.name +
10052
+ '.' +
10053
+ changes.itemNumber.currentValue +
10054
+ '.' +
10055
+ this.controlNumber.toString();
10056
+ html.hideLabel = this.repeaterField.controlOptions.hideLabel;
10057
+ html.labelKey = this.repeaterField.controlOptions.labelKey;
10058
+ html.isRequired = this.repeaterField.controlOptions.isRequired;
10059
+ html.viewType = this.repeaterField.controlOptions.viewType;
10060
+ html.labelDescription = this.repeaterField.controlOptions.labelDescription
10061
+ ? this.repeaterField.controlOptions.labelDescription
10062
+ : '';
9542
10063
  if (this.repeaterField.controlOptions.maxLength)
9543
- HTML.maxLength = this.repeaterField.controlOptions.maxLength;
10064
+ html.maxLength = this.repeaterField.controlOptions.maxLength;
9544
10065
  if (this.repeaterField.controlOptions.minLength)
9545
- HTML.minLength = this.repeaterField.controlOptions.minLength;
9546
- HTML.height = this.repeaterField.controlOptions.rows;
9547
- HTML.forceDirection = this.repeaterField.controlOptions.forceDirection;
9548
- HTML.value = value;
9549
- this.renderComponentService.renderDynamicComponent(this.item, HtmlEditorComponent, this.group, HTML);
10066
+ html.minLength = this.repeaterField.controlOptions.minLength;
10067
+ html.height = this.repeaterField.controlOptions.rows;
10068
+ html.forceDirection = this.repeaterField.controlOptions.forceDirection;
10069
+ html.value = value;
10070
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
10071
+ html.customValidation = this.repeaterField.controlOptions.customValidation;
10072
+ }
10073
+ this.renderComponentService.renderDynamicComponent(this.item, HtmlEditorComponent, this.group, html);
9550
10074
  break;
9551
10075
  //#endregion
9552
10076
  //#region Boolean
9553
10077
  case DataType.Boolean:
9554
10078
  let boolean = new ToggleSlideOptions();
9555
- boolean.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
10079
+ boolean.name =
10080
+ this.repeaterField.controlOptions.name +
10081
+ '.' +
10082
+ changes.itemNumber.currentValue +
10083
+ '.' +
10084
+ this.controlNumber.toString();
9556
10085
  boolean.hideLabel = this.repeaterField.controlOptions.hideLabel;
9557
10086
  boolean.labelKey = this.repeaterField.controlOptions.labelKey;
9558
10087
  boolean.viewType = this.repeaterField.controlOptions.viewType;
9559
- boolean.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
10088
+ boolean.labelDescription = this.repeaterField.controlOptions.labelDescription
10089
+ ? this.repeaterField.controlOptions.labelDescription
10090
+ : '';
9560
10091
  boolean.value = value;
10092
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
10093
+ boolean.customValidation = this.repeaterField.controlOptions.customValidation;
10094
+ }
9561
10095
  this.renderComponentService.renderDynamicComponent(this.item, ToggleslideComponent, this.group, boolean);
9562
10096
  break;
9563
10097
  //#endregion
9564
10098
  //#region Location
9565
10099
  case DataType.Location:
9566
- let Location = new MapAutoCompleteOptions();
9567
- Location.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
9568
- Location.hideLabel = this.repeaterField.controlOptions.hideLabel;
9569
- Location.labelKey = this.repeaterField.controlOptions.labelKey;
9570
- Location.isRequired = this.repeaterField.controlOptions.isRequired;
9571
- Location.viewType = this.repeaterField.controlOptions.viewType;
9572
- Location.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
9573
- Location.value = value;
9574
- this.renderComponentService.renderDynamicComponent(this.item, MapAutoCompleteComponent, this.group, Location);
10100
+ let location = new MapAutoCompleteOptions();
10101
+ location.name =
10102
+ this.repeaterField.controlOptions.name +
10103
+ '.' +
10104
+ changes.itemNumber.currentValue +
10105
+ '.' +
10106
+ this.controlNumber.toString();
10107
+ location.hideLabel = this.repeaterField.controlOptions.hideLabel;
10108
+ location.labelKey = this.repeaterField.controlOptions.labelKey;
10109
+ location.isRequired = this.repeaterField.controlOptions.isRequired;
10110
+ location.viewType = this.repeaterField.controlOptions.viewType;
10111
+ location.labelDescription = this.repeaterField.controlOptions.labelDescription
10112
+ ? this.repeaterField.controlOptions.labelDescription
10113
+ : '';
10114
+ location.value = value;
10115
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
10116
+ location.customValidation = this.repeaterField.controlOptions.customValidation;
10117
+ }
10118
+ this.renderComponentService.renderDynamicComponent(this.item, MapAutoCompleteComponent, this.group, location);
9575
10119
  break;
9576
10120
  //#endregion
9577
10121
  //#region CheckBox
9578
10122
  case DataType.CheckBox:
9579
10123
  let checkBox = new CheckBoxOptions();
9580
- checkBox.name = this.repeaterField.controlOptions.name + "." + changes.itemNumber.currentValue + "." + this.controlNumber.toString();
10124
+ checkBox.name =
10125
+ this.repeaterField.controlOptions.name +
10126
+ '.' +
10127
+ changes.itemNumber.currentValue +
10128
+ '.' +
10129
+ this.controlNumber.toString();
9581
10130
  checkBox.hideLabel = this.repeaterField.controlOptions.hideLabel;
9582
10131
  checkBox.labelKey = this.repeaterField.controlOptions.labelKey;
9583
10132
  checkBox.viewType = this.repeaterField.controlOptions.viewType;
9584
- checkBox.labelDescription = this.repeaterField.controlOptions.labelDescription ? this.repeaterField.controlOptions.labelDescription : "";
10133
+ checkBox.labelDescription = this.repeaterField.controlOptions.labelDescription
10134
+ ? this.repeaterField.controlOptions.labelDescription
10135
+ : '';
9585
10136
  checkBox.outputFunction = this.repeaterField.controlOptions.outputFunction;
9586
10137
  checkBox.value = value;
10138
+ if (this.repeaterField.controlOptions.customValidation.length > 0) {
10139
+ checkBox.customValidation = this.repeaterField.controlOptions.customValidation;
10140
+ }
9587
10141
  this.renderComponentService.renderDynamicComponent(this.item, CheckBoxComponent, this.group, checkBox);
9588
10142
  break;
9589
10143
  //#endregion
@@ -9600,7 +10154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
9600
10154
  args: [{ selector: 'repeater-field-builder', template: "<ng-container #Item></ng-container>\r\n" }]
9601
10155
  }], ctorParameters: () => [{ type: RenderComponentService }, { type: i2.FormGroupDirective }], propDecorators: { item: [{
9602
10156
  type: ViewChild,
9603
- args: ["Item", { read: ViewContainerRef }]
10157
+ args: ['Item', { read: ViewContainerRef }]
9604
10158
  }], group: [{
9605
10159
  type: Input
9606
10160
  }], itemNumber: [{
@@ -9659,7 +10213,9 @@ class RepeaterTableComponent {
9659
10213
  if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
9660
10214
  const keySplitArr = key.split('.');
9661
10215
  let item = {
9662
- [keySplitArr[1]]: { [keySplitArr[0]]: this.group.controls[this.options.name].value[key] }
10216
+ [keySplitArr[1]]: {
10217
+ [keySplitArr[0]]: this.group.controls[this.options.name].value[key]
10218
+ }
9663
10219
  };
9664
10220
  addItems.push(item);
9665
10221
  if (!rowNumber.includes(keySplitArr[1]))
@@ -9669,7 +10225,7 @@ class RepeaterTableComponent {
9669
10225
  for (let index = 0; index < rowNumber.length; index++) {
9670
10226
  const row = rowNumber[index];
9671
10227
  let addObject = {};
9672
- let filteredElements = addItems.filter(item => item[row]);
10228
+ let filteredElements = addItems.filter((item) => item[row]);
9673
10229
  for (let index = 0; index < filteredElements.length; index++) {
9674
10230
  const filteredElement = filteredElements[index];
9675
10231
  for (const key in filteredElement) {
@@ -9694,7 +10250,7 @@ class RepeaterTableComponent {
9694
10250
  if (this.items.length == this.options.minRequiredItems && this.options.isRequired)
9695
10251
  return;
9696
10252
  let deletedControls = [];
9697
- let controlNames = this.options.repeaterStructure.map(e => e.controlOptions.name);
10253
+ let controlNames = this.options.repeaterStructure.map((e) => e.controlOptions.name);
9698
10254
  for (const key in this.repeaterGroup.controls) {
9699
10255
  if (Object.prototype.hasOwnProperty.call(this.repeaterGroup.controls, key)) {
9700
10256
  for (let index = 0; index < controlNames.length; index++) {
@@ -9724,11 +10280,11 @@ class RepeaterTableComponent {
9724
10280
  this.items.push(this.items[this.items.length - 1] + 1);
9725
10281
  }
9726
10282
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterTableComponent, deps: [{ token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
9727
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RepeaterTableComponent, selector: "BBSF-repeater-table", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n <!--table-->\r\n <div class=\"table-responsive\">\r\n <table class=\"bbsf-repeater-table table {{options.repeaterTableExtraClasses}}\">\r\n <thead class=\"table-head\">\r\n <tr class=\"{{options.repeaterTableRowExtraClasses}}\">\r\n <th *ngFor=\"let item of options.repeaterStructure\" [hidden]=\"item.isHiddenInput\">{{item.headerTitle}}</th>\r\n <th *ngIf=\"!options.disableDeleteButton\" class=\"text-center\">\r\n {{utilityService.getResourceValue(options.actionLabelKey)}}</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-body\">\r\n <tr *ngFor=\"let item of items ; index as i\">\r\n <td *ngFor=\"let repeaterField of options.repeaterStructure ; index as r\" [hidden]=\"repeaterField.isHiddenInput\">\r\n <repeater-field-builder [repeaterField]=\"repeaterField\" [itemNumber]=\"i\" [itemsValue]=\"originalItems\" [controlNumber]=\"r\"\r\n [group]=\"repeaterGroup\">\r\n </repeater-field-builder>\r\n </td>\r\n <td *ngIf=\"!options.disableDeleteButton\" class=\"td-delete\">\r\n <button class=\"{{options.deleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\" (click)=\"deleteItem(i)\"\r\n [disabled]=\"(items.length ==options.minRequiredItems&&options.isRequired)\">\r\n <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!--add button-->\r\n <div class=\"repeater-add-btn\" *ngIf=\"!options.disableAddButton\">\r\n <button class=\"{{options.addButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n <span [innerHTML]=\"options.addButtonText\"></span>\r\n </button>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: ["group", "itemNumber", "controlNumber", "repeaterField", "itemsValue"] }] }); }
10283
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RepeaterTableComponent, selector: "BBSF-repeater-table", inputs: { group: "group", options: "options" }, ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n <!--table-->\r\n <div class=\"table-responsive\">\r\n <table class=\"bbsf-repeater-table table {{options.repeaterTableExtraClasses}}\">\r\n <thead class=\"table-head\">\r\n <tr class=\"{{options.repeaterTableRowExtraClasses}}\">\r\n <td *ngIf=\"options.enableTableNumbering\">\r\n <span>#</span>\r\n </td>\r\n <th *ngFor=\"let item of options.repeaterStructure\" [hidden]=\"item.isHiddenInput\">{{item.headerTitle}}</th>\r\n <th *ngIf=\"!options.disableDeleteButton\" class=\"text-center\">\r\n {{utilityService.getResourceValue(options.actionLabelKey)}}</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-body\">\r\n <tr *ngFor=\"let item of items ; index as i\">\r\n <td *ngIf=\"options.enableTableNumbering\">{{i+1}}</td>\r\n <td *ngFor=\"let repeaterField of options.repeaterStructure ; index as r\"\r\n [hidden]=\"repeaterField.isHiddenInput\">\r\n <repeater-field-builder [repeaterField]=\"repeaterField\" [itemNumber]=\"i\" [itemsValue]=\"originalItems\"\r\n [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n </repeater-field-builder>\r\n </td>\r\n <td *ngIf=\"!options.disableDeleteButton\" class=\"td-delete\">\r\n <button class=\"{{options.deleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\"\r\n (click)=\"deleteItem(i)\" [disabled]=\"(items.length ==options.minRequiredItems&&options.isRequired)\">\r\n <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!--add button-->\r\n <div class=\"repeater-add-btn\" *ngIf=\"!options.disableAddButton\">\r\n <button class=\"{{options.addButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n <span [innerHTML]=\"options.addButtonText\"></span>\r\n </button>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RepeaterFieldBuilderComponent, selector: "repeater-field-builder", inputs: ["group", "itemNumber", "controlNumber", "repeaterField", "itemsValue"] }] }); }
9728
10284
  }
9729
10285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RepeaterTableComponent, decorators: [{
9730
10286
  type: Component,
9731
- args: [{ selector: 'BBSF-repeater-table', template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n <!--table-->\r\n <div class=\"table-responsive\">\r\n <table class=\"bbsf-repeater-table table {{options.repeaterTableExtraClasses}}\">\r\n <thead class=\"table-head\">\r\n <tr class=\"{{options.repeaterTableRowExtraClasses}}\">\r\n <th *ngFor=\"let item of options.repeaterStructure\" [hidden]=\"item.isHiddenInput\">{{item.headerTitle}}</th>\r\n <th *ngIf=\"!options.disableDeleteButton\" class=\"text-center\">\r\n {{utilityService.getResourceValue(options.actionLabelKey)}}</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-body\">\r\n <tr *ngFor=\"let item of items ; index as i\">\r\n <td *ngFor=\"let repeaterField of options.repeaterStructure ; index as r\" [hidden]=\"repeaterField.isHiddenInput\">\r\n <repeater-field-builder [repeaterField]=\"repeaterField\" [itemNumber]=\"i\" [itemsValue]=\"originalItems\" [controlNumber]=\"r\"\r\n [group]=\"repeaterGroup\">\r\n </repeater-field-builder>\r\n </td>\r\n <td *ngIf=\"!options.disableDeleteButton\" class=\"td-delete\">\r\n <button class=\"{{options.deleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\" (click)=\"deleteItem(i)\"\r\n [disabled]=\"(items.length ==options.minRequiredItems&&options.isRequired)\">\r\n <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!--add button-->\r\n <div class=\"repeater-add-btn\" *ngIf=\"!options.disableAddButton\">\r\n <button class=\"{{options.addButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n <span [innerHTML]=\"options.addButtonText\"></span>\r\n </button>\r\n </div>\r\n</div>" }]
10287
+ args: [{ selector: 'BBSF-repeater-table', template: "<div class=\"form-group bbsf-control bbsf-repeater\">\r\n <!--table-->\r\n <div class=\"table-responsive\">\r\n <table class=\"bbsf-repeater-table table {{options.repeaterTableExtraClasses}}\">\r\n <thead class=\"table-head\">\r\n <tr class=\"{{options.repeaterTableRowExtraClasses}}\">\r\n <td *ngIf=\"options.enableTableNumbering\">\r\n <span>#</span>\r\n </td>\r\n <th *ngFor=\"let item of options.repeaterStructure\" [hidden]=\"item.isHiddenInput\">{{item.headerTitle}}</th>\r\n <th *ngIf=\"!options.disableDeleteButton\" class=\"text-center\">\r\n {{utilityService.getResourceValue(options.actionLabelKey)}}</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"table-body\">\r\n <tr *ngFor=\"let item of items ; index as i\">\r\n <td *ngIf=\"options.enableTableNumbering\">{{i+1}}</td>\r\n <td *ngFor=\"let repeaterField of options.repeaterStructure ; index as r\"\r\n [hidden]=\"repeaterField.isHiddenInput\">\r\n <repeater-field-builder [repeaterField]=\"repeaterField\" [itemNumber]=\"i\" [itemsValue]=\"originalItems\"\r\n [controlNumber]=\"r\" [group]=\"repeaterGroup\">\r\n </repeater-field-builder>\r\n </td>\r\n <td *ngIf=\"!options.disableDeleteButton\" class=\"td-delete\">\r\n <button class=\"{{options.deleteButtonExtraClasses}} btn btn-icon btn-sm btn-danger\" type=\"button\"\r\n (click)=\"deleteItem(i)\" [disabled]=\"(items.length ==options.minRequiredItems&&options.isRequired)\">\r\n <span [innerHTML]=\"options.deleteButtonText\"></span>\r\n </button>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <!--add button-->\r\n <div class=\"repeater-add-btn\" *ngIf=\"!options.disableAddButton\">\r\n <button class=\"{{options.addButtonExtraClasses}} btn btn-sm btn-brand\" type=\"button\" (click)=\"addItem()\">\r\n <span [innerHTML]=\"options.addButtonText\"></span>\r\n </button>\r\n </div>\r\n</div>" }]
9732
10288
  }], ctorParameters: () => [{ type: i3.UtilityService }], propDecorators: { group: [{
9733
10289
  type: Input
9734
10290
  }], options: [{