@bnsights/bbsf-controls 1.0.182 → 1.0.183
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/esm2022/lib/controls/FileUpload/FileUpload.component.mjs +14 -11
- package/esm2022/lib/controls/MultiLingualTextBox/MultiLingualTextBox.component.mjs +3 -3
- package/esm2022/lib/controls/TextArea/TextArea.component.mjs +140 -5
- package/fesm2022/bnsights-bbsf-controls.mjs +154 -16
- package/fesm2022/bnsights-bbsf-controls.mjs.map +1 -1
- package/lib/controls/FileUpload/FileUpload.component.d.ts +0 -8
- package/lib/controls/TextArea/TextArea.component.d.ts +9 -0
- package/package.json +1 -1
- package/src/lib/assets/sass/textarea.scss +59 -2
|
@@ -3343,6 +3343,17 @@ class FileUploadComponent {
|
|
|
3343
3343
|
this.pendingValidationErrors = errorObj; // Store errors to reapply later
|
|
3344
3344
|
formControl.setErrors(errorObj);
|
|
3345
3345
|
formControl.markAsTouched();
|
|
3346
|
+
// Auto-clear FileMaxSizeInMB error after 5 seconds (similar to DuplicateFileError)
|
|
3347
|
+
if (validationErrorType === 'FileMaxSizeInMB') {
|
|
3348
|
+
setTimeout(() => {
|
|
3349
|
+
// Only clear if the current error is still the FileMaxSizeInMB error we set
|
|
3350
|
+
const currentErrors = formControl.errors;
|
|
3351
|
+
if (currentErrors && currentErrors['FileMaxSizeInMB'] === errorObj['FileMaxSizeInMB']) {
|
|
3352
|
+
formControl.setErrors(null);
|
|
3353
|
+
this.pendingValidationErrors = null;
|
|
3354
|
+
}
|
|
3355
|
+
}, 5000);
|
|
3356
|
+
}
|
|
3346
3357
|
// Don't return here, continue processing valid files
|
|
3347
3358
|
}
|
|
3348
3359
|
// Re-filter the queue to get only valid files for processing
|
|
@@ -3531,10 +3542,6 @@ class FileUploadComponent {
|
|
|
3531
3542
|
// Remove potentially dangerous characters from file names
|
|
3532
3543
|
return fileName.replace(/[<>:"/\\|?*]/g, '_').trim();
|
|
3533
3544
|
}
|
|
3534
|
-
/**
|
|
3535
|
-
* Find duplicate files in the current upload queue
|
|
3536
|
-
* @returns Array of newly added duplicate FileItem objects that should be rejected
|
|
3537
|
-
*/
|
|
3538
3545
|
findDuplicateFiles() {
|
|
3539
3546
|
const duplicateFiles = [];
|
|
3540
3547
|
const existingFileNames = new Set();
|
|
@@ -3559,10 +3566,6 @@ class FileUploadComponent {
|
|
|
3559
3566
|
}
|
|
3560
3567
|
return duplicateFiles;
|
|
3561
3568
|
}
|
|
3562
|
-
/**
|
|
3563
|
-
* Remove duplicate files from the uploader queue
|
|
3564
|
-
* @param duplicateFiles Array of duplicate FileItem objects to remove
|
|
3565
|
-
*/
|
|
3566
3569
|
removeDuplicateFilesFromQueue(duplicateFiles) {
|
|
3567
3570
|
for (const duplicateFile of duplicateFiles) {
|
|
3568
3571
|
const index = this.uploader.queue.indexOf(duplicateFile);
|
|
@@ -3600,11 +3603,11 @@ class FileUploadComponent {
|
|
|
3600
3603
|
this.options.value = value;
|
|
3601
3604
|
}
|
|
3602
3605
|
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 }); }
|
|
3603
|
-
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-describedby=\"email-error\" aria-invalid=\"true\"\r\n type=\"file\" [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-describedby=\"email-error\" 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-describedby=\"email-error\" 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" }] }); }
|
|
3606
|
+
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" }] }); }
|
|
3604
3607
|
}
|
|
3605
3608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3606
3609
|
type: Component,
|
|
3607
|
-
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-describedby=\"email-error\" aria-invalid=\"true\"\r\n type=\"file\" [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-describedby=\"email-error\" 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-describedby=\"email-error\" 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>" }]
|
|
3610
|
+
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>" }]
|
|
3608
3611
|
}], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
|
|
3609
3612
|
type: Optional
|
|
3610
3613
|
}] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: FileUploadService }], propDecorators: { fileInput: [{
|
|
@@ -6057,11 +6060,11 @@ class MultiLingualTextBoxComponent {
|
|
|
6057
6060
|
this.showEnglishCharsLimitMsg = false;
|
|
6058
6061
|
}
|
|
6059
6062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualTextBoxComponent, deps: [{ token: i2.FormGroupDirective }, { token: i2.ControlContainer, optional: true }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.BBSFTranslateService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiLingualTextBoxComponent, selector: "BBSF-MultiLingualTextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n <div class=\"row\">\r\n <!--#region English textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n *ngIf=\"options.icon!=null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-describedby=\"email-error\" aria-invalid=\"true\"\r\n formControlName=\"English\" [hidden]=\"options.isHideEnglishFields\" maxlength=\"{{options.maxLength}}\"\r\n minlength=\"{{options.minLength}}\"\r\n [class.is-invalid]=\"englishFormControl.invalid && englishFormControl.touched\"\r\n placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n (paste)=\"onPaste($event, 'En')\"\r\n (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n autocomplete=\"{{options.autoComplete}}\" id=\"{{options.name}}.English\" [(ngModel)]=\"options.value.english\"\r\n #userInputEnglish>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInputEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n {{englishWordCount}}/{{options.maxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n </div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(englishFormControl.invalid && englishFormControl.touched)\">\r\n {{getErrorValidation(englishFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!--#region Arabic textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==ControlLayout.Vertical)?'col-md-12':'col-md-6'\"\r\n *ngIf=\"showArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==ControlLayout.Vertical)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'right-icon':'left-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"rtl\" (focus)=\"onArabicFocus(true)\"\r\n (focusout)=\"onArabicFocus(false); onBlur('Ar')\" [hidden]=\"options.isHideArabicFields\"\r\n aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"Arabic\"\r\n [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n [class.is-invalid]=\"arabicFormControl.invalid && arabicFormControl.touched\"\r\n placeholder=\"{{options.arabicPlaceholder}}\" (keyup)=\"onTextChange()\" (paste)=\"onPaste($event, 'Ar')\"\r\n (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n [(ngModel)]=\"options.value.arabic\" [autocomplete]=\"options.autoComplete\" [id]=\"options.name+'.Arabic'\"\r\n (change)=\"trimControlValue('Ar')\" #userInputArabic>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInputArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n {{arabicWordCount}}/{{options.maxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n </div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(arabicFormControl.invalid && arabicFormControl.touched)\">\r\n {{getErrorValidation(arabicFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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" }] }); }
|
|
6063
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiLingualTextBoxComponent, selector: "BBSF-MultiLingualTextBox", inputs: { group: "group", options: "options" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n <div class=\"row\">\r\n <!--#region English textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n *ngIf=\"options.icon!=null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-invalid=\"true\" formControlName=\"English\"\r\n [hidden]=\"options.isHideEnglishFields\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\"\r\n [class.is-invalid]=\"englishFormControl.invalid && englishFormControl.touched\"\r\n placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n (paste)=\"onPaste($event, 'En')\"\r\n (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n autocomplete=\"{{options.autoComplete}}\" id=\"{{options.name}}.English\" [(ngModel)]=\"options.value.english\"\r\n #userInputEnglish>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInputEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n {{englishWordCount}}/{{options.maxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n </div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(englishFormControl.invalid && englishFormControl.touched)\">\r\n {{getErrorValidation(englishFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!--#region Arabic textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==ControlLayout.Vertical)?'col-md-12':'col-md-6'\"\r\n *ngIf=\"showArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==ControlLayout.Vertical)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'right-icon':'left-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"rtl\" (focus)=\"onArabicFocus(true)\"\r\n (focusout)=\"onArabicFocus(false); onBlur('Ar')\" [hidden]=\"options.isHideArabicFields\" aria-invalid=\"true\"\r\n formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n [class.is-invalid]=\"arabicFormControl.invalid && arabicFormControl.touched\"\r\n placeholder=\"{{options.arabicPlaceholder}}\" (keyup)=\"onTextChange()\" (paste)=\"onPaste($event, 'Ar')\"\r\n (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n [(ngModel)]=\"options.value.arabic\" [autocomplete]=\"options.autoComplete\" [id]=\"options.name+'.Arabic'\"\r\n (change)=\"trimControlValue('Ar')\" #userInputArabic>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInputArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n {{arabicWordCount}}/{{options.maxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n </div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(arabicFormControl.invalid && arabicFormControl.touched)\">\r\n {{getErrorValidation(arabicFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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" }] }); }
|
|
6061
6064
|
}
|
|
6062
6065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiLingualTextBoxComponent, decorators: [{
|
|
6063
6066
|
type: Component,
|
|
6064
|
-
args: [{ selector: 'BBSF-MultiLingualTextBox', template: "<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n <div class=\"row\">\r\n <!--#region English textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n *ngIf=\"options.icon!=null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-
|
|
6067
|
+
args: [{ selector: 'BBSF-MultiLingualTextBox', template: "<div [formGroup]=\"group\">\r\n <div class=\"bbsf-control bbsf-multilang-textbox form-group mb-0\" [formGroup]=\"multiLanguageGroup\">\r\n <div class=\"row\">\r\n <!--#region English textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==1)?'col-md-12':'col-md-6'\" *ngIf=\"showEnglishTextBox\"\r\n class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==1)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideEnglishLabel\">\r\n {{(options.englishLabelValue!=null&&options.englishLabelValue!=\"\")?options.englishLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired)&&isShowAsteriskInEnglish))&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'left-icon':'right-icon'\"\r\n *ngIf=\"options.icon!=null\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"ltr\" (focus)=\"onEnglishFocus(true)\"\r\n (focusout)=\"onEnglishFocus(false); onBlur('En')\" aria-invalid=\"true\" formControlName=\"English\"\r\n [hidden]=\"options.isHideEnglishFields\" maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\"\r\n [class.is-invalid]=\"englishFormControl.invalid && englishFormControl.touched\"\r\n placeholder=\"{{options.englishPlaceholder}}\" (change)=\"trimControlValue('En')\" (keyup)=\"onTextChange()\"\r\n (paste)=\"onPaste($event, 'En')\"\r\n (keydown)=\"englishWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n autocomplete=\"{{options.autoComplete}}\" id=\"{{options.name}}.English\" [(ngModel)]=\"options.value.english\"\r\n #userInputEnglish>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.isHideEnglishFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInputEnglish)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.english\"></span>\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowEnglishWordCount\">\r\n {{englishWordCount}}/{{options.maxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showEnglishCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': englishCharsLimitMsgClass === 'warning', 'badge-light-danger' : englishCharsLimitMsgClass === 'danger' }\">\r\n {{englishMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='') ||(options.englishLabelDescription!=null&&options.englishLabelDescription!='')\">\r\n {{(options.englishLabelDescription!=null&&options.englishLabelDescription!=\"\")?options.englishLabelDescription:options.labelDescription}}\r\n </div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(englishFormControl.invalid && englishFormControl.touched)\">\r\n {{getErrorValidation(englishFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!--#region Arabic textbox-->\r\n <div [ngClass]=\"(options.multiControlPlacementType==ControlLayout.Vertical)?'col-md-12':'col-md-6'\"\r\n *ngIf=\"showArabicTextBox\" class=\"bbsf-multilang-form-group\">\r\n <div [ngClass]=\"(options.viewType==ControlLayout.Vertical)?'bbsf-vertical':'bbsf-horizontal'\">\r\n <!--label-->\r\n <label class=\"bbsf-label {{options.labelExtraClasses}}\" [hidden]=\"options.isHideArabicLabel\">\r\n {{(options.arabicLabelValue!=null&&options.arabicLabelValue!=\"\")?options.arabicLabelValue:options.labelValue}}\r\n <!--Asterisk-->\r\n <span\r\n *ngIf=\"(((options.showAsterisk&&options.isRequired)||(options.isRequired))&&isShowAsteriskInArabic)&&!options.isReadonly\"\r\n class=\"text-danger\">*</span>\r\n </label>\r\n <div *ngIf=\"!options.isReadonly\" class=\"bbsf-input-container\"\r\n [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n <!--Icon-->\r\n <div *ngIf=\"options.icon!=null\" class=\"svg svg-icon-grey bbsf-icon\"\r\n [ngClass]=\"(options.iconPositionEN==IconPosition.left)?'right-icon':'left-icon'\">\r\n <span [inlineSVG]=\"options.icon\"></span>\r\n </div>\r\n <!--input-->\r\n <input class=\"form-control\" dir=\"rtl\" (focus)=\"onArabicFocus(true)\"\r\n (focusout)=\"onArabicFocus(false); onBlur('Ar')\" [hidden]=\"options.isHideArabicFields\" aria-invalid=\"true\"\r\n formControlName=\"Arabic\" [maxlength]=\"options.maxLength\" [minlength]=\"options.minLength\"\r\n [class.is-invalid]=\"arabicFormControl.invalid && arabicFormControl.touched\"\r\n placeholder=\"{{options.arabicPlaceholder}}\" (keyup)=\"onTextChange()\" (paste)=\"onPaste($event, 'Ar')\"\r\n (keydown)=\"arabicWordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n [(ngModel)]=\"options.value.arabic\" [autocomplete]=\"options.autoComplete\" [id]=\"options.name+'.Arabic'\"\r\n (change)=\"trimControlValue('Ar')\" #userInputArabic>\r\n <!--CopyToClipboard-->\r\n <div class=\"copy-clipboard\" [hidden]=\"options.isHideArabicFields\" *ngIf=\"options.enableCopyToClipboard\"\r\n (click)=\"copyInputMessage(userInputArabic)\">\r\n <i class=\"fas fa-copy\"></i>\r\n </div>\r\n </div>\r\n <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\" [innerHTML]=\"options.value.arabic\"></span>\r\n\r\n </div>\r\n <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n <!--wordCount-->\r\n <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowArabicWordCount\">\r\n {{arabicWordCount}}/{{options.maxWordCount}}\r\n Words</div>\r\n <!-- CharsLimitMsg-->\r\n <div class=\"bbsf-character-count\" *ngIf=\"showArabicCharsLimitMsg\"\r\n [ngClass]=\"{'badge-light-warning': arabicCharsLimitMsgClass === 'warning', 'badge-light-danger' : arabicCharsLimitMsgClass === 'danger' }\">\r\n {{arabicMaxLimitWarningMsg}}\r\n </div>\r\n <!-- LabelDescription-->\r\n <div class=\"bbsf-control-desc\"\r\n *ngIf=\"(options.labelDescription!=null&&options.labelDescription!='')||(options.arabicLabelDescription!=null&&options.arabicLabelDescription!='')\">\r\n {{(options.arabicLabelDescription!=null&&options.arabicLabelDescription!=\"\")?options.arabicLabelDescription:options.labelDescription}}\r\n </div>\r\n <!-- requiredText-->\r\n <div class=\"bbsf-validation\" *ngIf=\"(arabicFormControl.invalid && arabicFormControl.touched)\">\r\n {{getErrorValidation(arabicFormControl.errors|keyvalue)}}\r\n </div>\r\n <div *ngIf=\"group.valid\">{{resetError()}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n</div>" }]
|
|
6065
6068
|
}], ctorParameters: () => [{ type: i2.FormGroupDirective }, { type: i2.ControlContainer, decorators: [{
|
|
6066
6069
|
type: Optional
|
|
6067
6070
|
}] }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.BBSFTranslateService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
|
|
@@ -8324,6 +8327,12 @@ class TextAreaComponent {
|
|
|
8324
8327
|
this.minCharsLimit = -1; //To disable chars limit feature by default
|
|
8325
8328
|
this.maxLimitWarningMsg = '';
|
|
8326
8329
|
this.isMicOn = false;
|
|
8330
|
+
this.selectedSpeechLanguageDisplayText = '';
|
|
8331
|
+
// Accessibility properties
|
|
8332
|
+
this.ariaDescribedBy = '';
|
|
8333
|
+
this.errorMessageId = '';
|
|
8334
|
+
this.characterCountId = '';
|
|
8335
|
+
this.wordCountId = '';
|
|
8327
8336
|
this.resetError = () => {
|
|
8328
8337
|
this.controlValidationService.removeGlobalError();
|
|
8329
8338
|
};
|
|
@@ -8350,6 +8359,20 @@ class TextAreaComponent {
|
|
|
8350
8359
|
this.currentLanguage = localStorage.getItem('language');
|
|
8351
8360
|
}
|
|
8352
8361
|
ngOnInit() {
|
|
8362
|
+
// Initialize accessibility IDs
|
|
8363
|
+
this.errorMessageId = `${this.options.name}-error`;
|
|
8364
|
+
this.characterCountId = `${this.options.name}-char-count`;
|
|
8365
|
+
this.wordCountId = `${this.options.name}-word-count`;
|
|
8366
|
+
this.updateAriaDescribedBy();
|
|
8367
|
+
// Initialize speech recognition properties only if enabled
|
|
8368
|
+
if (this.options.enableSpeechRecognition) {
|
|
8369
|
+
this.isMicOn = false;
|
|
8370
|
+
this.selectedSpeechLanguageDisplayText = '';
|
|
8371
|
+
}
|
|
8372
|
+
else {
|
|
8373
|
+
// Reset speech-related properties when disabled
|
|
8374
|
+
this.resetSpeechProperties();
|
|
8375
|
+
}
|
|
8353
8376
|
if (this.options.isReadonly && !this.options.value)
|
|
8354
8377
|
this.options.value = this.utilityService.getResourceValue('NA');
|
|
8355
8378
|
if (this.options.forceDirection)
|
|
@@ -8441,6 +8464,55 @@ class TextAreaComponent {
|
|
|
8441
8464
|
getInputType(type) {
|
|
8442
8465
|
return this.controlUtility.getInputType(type);
|
|
8443
8466
|
}
|
|
8467
|
+
// Accessibility helper methods
|
|
8468
|
+
updateAriaDescribedBy() {
|
|
8469
|
+
const describedByIds = [];
|
|
8470
|
+
if (this.options.labelDescription) {
|
|
8471
|
+
describedByIds.push(`${this.options.name}-description`);
|
|
8472
|
+
}
|
|
8473
|
+
if (this.options.maxWordCount > 0) {
|
|
8474
|
+
describedByIds.push(this.wordCountId);
|
|
8475
|
+
}
|
|
8476
|
+
if (this.showCharsLimitMsg) {
|
|
8477
|
+
describedByIds.push(this.characterCountId);
|
|
8478
|
+
}
|
|
8479
|
+
if (this.textAreaFormControl?.invalid && this.textAreaFormControl?.touched) {
|
|
8480
|
+
describedByIds.push(this.errorMessageId);
|
|
8481
|
+
}
|
|
8482
|
+
// Only add speech-related descriptions if speech recognition is enabled
|
|
8483
|
+
if (this.options.enableSpeechRecognition && this.selectedSpeechLanguageDisplayText) {
|
|
8484
|
+
describedByIds.push(`${this.options.name}-language-display`);
|
|
8485
|
+
}
|
|
8486
|
+
this.ariaDescribedBy = describedByIds.join(' ');
|
|
8487
|
+
}
|
|
8488
|
+
announceToScreenReader(message) {
|
|
8489
|
+
// Create temporary element for screen reader announcement
|
|
8490
|
+
const announcement = document.createElement('div');
|
|
8491
|
+
announcement.setAttribute('aria-live', 'polite');
|
|
8492
|
+
announcement.setAttribute('aria-atomic', 'true');
|
|
8493
|
+
announcement.className = 'sr-only';
|
|
8494
|
+
announcement.textContent = message;
|
|
8495
|
+
document.body.appendChild(announcement);
|
|
8496
|
+
// Remove after announcement
|
|
8497
|
+
setTimeout(() => {
|
|
8498
|
+
document.body.removeChild(announcement);
|
|
8499
|
+
}, 1000);
|
|
8500
|
+
}
|
|
8501
|
+
resetSpeechProperties() {
|
|
8502
|
+
// Reset all speech-related properties when speech recognition is disabled
|
|
8503
|
+
this.isMicOn = false;
|
|
8504
|
+
this.selectedSpeechLanguageDisplayText = '';
|
|
8505
|
+
// Clean up any active speech recognition subscriptions
|
|
8506
|
+
if (this.subscription) {
|
|
8507
|
+
this.subscription.unsubscribe();
|
|
8508
|
+
this.subscription = null;
|
|
8509
|
+
}
|
|
8510
|
+
// Remove speech language form control if it exists
|
|
8511
|
+
const languageControlName = 'Language_' + this.options.name;
|
|
8512
|
+
if (this.group?.get(languageControlName)) {
|
|
8513
|
+
this.group.removeControl(languageControlName);
|
|
8514
|
+
}
|
|
8515
|
+
}
|
|
8444
8516
|
trimControlValue() {
|
|
8445
8517
|
let originalValue = this.controlUtility.trimControlValue(this.textAreaFormControl.value);
|
|
8446
8518
|
this.textAreaFormControl.patchValue(originalValue);
|
|
@@ -8493,6 +8565,8 @@ class TextAreaComponent {
|
|
|
8493
8565
|
}
|
|
8494
8566
|
copyInputMessage(inputElement) {
|
|
8495
8567
|
this.controlUtility.CopyInputMessage(inputElement);
|
|
8568
|
+
// Announce to screen readers
|
|
8569
|
+
this.announceToScreenReader('Text copied to clipboard');
|
|
8496
8570
|
}
|
|
8497
8571
|
onTextChange() {
|
|
8498
8572
|
if (this.textAreaFormControl.value == '') {
|
|
@@ -8551,6 +8625,12 @@ class TextAreaComponent {
|
|
|
8551
8625
|
}
|
|
8552
8626
|
}
|
|
8553
8627
|
this.onChange.emit(this.textAreaFormControl.value);
|
|
8628
|
+
// Update accessibility attributes
|
|
8629
|
+
this.updateAriaDescribedBy();
|
|
8630
|
+
// Announce character limit warnings to screen readers
|
|
8631
|
+
if (this.showCharsLimitMsg && this.charsLimitMsgClass === 'danger') {
|
|
8632
|
+
this.announceToScreenReader(`Character limit reached: ${this.maxLimitWarningMsg}`);
|
|
8633
|
+
}
|
|
8554
8634
|
}
|
|
8555
8635
|
onFocus(isFocus) {
|
|
8556
8636
|
this.isShowWordCount = isFocus;
|
|
@@ -8565,6 +8645,10 @@ class TextAreaComponent {
|
|
|
8565
8645
|
}
|
|
8566
8646
|
//region Speech Recognition
|
|
8567
8647
|
setSpeechLanguage() {
|
|
8648
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8649
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8650
|
+
return;
|
|
8651
|
+
}
|
|
8568
8652
|
const languageControlName = 'Language_' + this.options.name;
|
|
8569
8653
|
if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
|
|
8570
8654
|
let savedLanguage = localStorage.getItem('speechLanguage');
|
|
@@ -8584,6 +8668,10 @@ class TextAreaComponent {
|
|
|
8584
8668
|
this.selectedSpeechLanguageDisplayText = language?.prefix || '';
|
|
8585
8669
|
}
|
|
8586
8670
|
loadSelectedSpeechLanguage() {
|
|
8671
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8672
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8673
|
+
return;
|
|
8674
|
+
}
|
|
8587
8675
|
if (!this.options.selectedSpeechLanguage) {
|
|
8588
8676
|
if (this.currentLanguage == 'en' &&
|
|
8589
8677
|
this.options.speechLanguages.some((language) => language.englishName === 'English')) {
|
|
@@ -8599,13 +8687,21 @@ class TextAreaComponent {
|
|
|
8599
8687
|
}
|
|
8600
8688
|
}
|
|
8601
8689
|
startSpeechRecognition() {
|
|
8690
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8691
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8692
|
+
return;
|
|
8693
|
+
}
|
|
8602
8694
|
if (!this.speechRecognitionService.isSupported) {
|
|
8603
|
-
this.utilityService.
|
|
8695
|
+
const errorMessage = this.utilityService.getResourceValue('BrowserNotSupportSpeechRecognition');
|
|
8696
|
+
this.utilityService.notifyErrorMessage(errorMessage);
|
|
8697
|
+
this.announceToScreenReader(errorMessage);
|
|
8604
8698
|
return;
|
|
8605
8699
|
}
|
|
8606
8700
|
//Disable Select Language
|
|
8607
8701
|
this.enableOrDisableLanguageSelect(false);
|
|
8608
8702
|
this.isMicOn = true;
|
|
8703
|
+
// Announce to screen readers
|
|
8704
|
+
this.announceToScreenReader('Speech recognition started. Speak now.');
|
|
8609
8705
|
this.subscription = this.speechRecognitionService
|
|
8610
8706
|
.startListening(this.options.selectedSpeechLanguage)
|
|
8611
8707
|
.subscribe({
|
|
@@ -8634,10 +8730,15 @@ class TextAreaComponent {
|
|
|
8634
8730
|
//Enable Select Language
|
|
8635
8731
|
this.enableOrDisableLanguageSelect();
|
|
8636
8732
|
this.isMicOn = false;
|
|
8733
|
+
this.announceToScreenReader('Speech recognition stopped.');
|
|
8637
8734
|
}
|
|
8638
8735
|
});
|
|
8639
8736
|
}
|
|
8640
8737
|
stopSpeechRecognition() {
|
|
8738
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8739
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8740
|
+
return;
|
|
8741
|
+
}
|
|
8641
8742
|
this.enableOrDisableLanguageSelect();
|
|
8642
8743
|
if (!this.speechRecognitionService.isSupported) {
|
|
8643
8744
|
return;
|
|
@@ -8647,6 +8748,8 @@ class TextAreaComponent {
|
|
|
8647
8748
|
if (this.subscription) {
|
|
8648
8749
|
this.subscription.unsubscribe();
|
|
8649
8750
|
}
|
|
8751
|
+
// Announce to screen readers
|
|
8752
|
+
this.announceToScreenReader('Speech recognition stopped.');
|
|
8650
8753
|
}
|
|
8651
8754
|
fireOnChange(text) {
|
|
8652
8755
|
if (this.onChange) {
|
|
@@ -8661,9 +8764,38 @@ class TextAreaComponent {
|
|
|
8661
8764
|
if (this.valueChangesSubscription) {
|
|
8662
8765
|
this.valueChangesSubscription.unsubscribe();
|
|
8663
8766
|
}
|
|
8664
|
-
|
|
8767
|
+
// Only call speech recognition cleanup if it was enabled
|
|
8768
|
+
if (this.options.enableSpeechRecognition) {
|
|
8769
|
+
this.stopSpeechRecognition();
|
|
8770
|
+
}
|
|
8771
|
+
}
|
|
8772
|
+
// Keyboard accessibility for speech recognition controls
|
|
8773
|
+
onMicKeydown(event, action) {
|
|
8774
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8775
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8776
|
+
return;
|
|
8777
|
+
}
|
|
8778
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
8779
|
+
event.preventDefault();
|
|
8780
|
+
if (action === 'start') {
|
|
8781
|
+
this.startSpeechRecognition();
|
|
8782
|
+
}
|
|
8783
|
+
else {
|
|
8784
|
+
this.stopSpeechRecognition();
|
|
8785
|
+
}
|
|
8786
|
+
}
|
|
8787
|
+
}
|
|
8788
|
+
onCopyKeydown(event, inputElement) {
|
|
8789
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
8790
|
+
event.preventDefault();
|
|
8791
|
+
this.copyInputMessage(inputElement);
|
|
8792
|
+
}
|
|
8665
8793
|
}
|
|
8666
8794
|
onSpeechLanguageChange(event) {
|
|
8795
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8796
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8797
|
+
return;
|
|
8798
|
+
}
|
|
8667
8799
|
let selectedLang_Dialect = event.target.value;
|
|
8668
8800
|
const language = this.options.speechLanguages?.find((l) => l.dialect == selectedLang_Dialect);
|
|
8669
8801
|
this.selectedSpeechLanguageDisplayText = language?.prefix || '';
|
|
@@ -8674,8 +8806,14 @@ class TextAreaComponent {
|
|
|
8674
8806
|
if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
|
|
8675
8807
|
localStorage.setItem('speechLanguage', selectedLang_Dialect);
|
|
8676
8808
|
}
|
|
8809
|
+
// Announce language change to screen readers
|
|
8810
|
+
this.announceToScreenReader(`Speech recognition language changed to ${language?.name || selectedLang_Dialect}`);
|
|
8677
8811
|
}
|
|
8678
8812
|
enableOrDisableLanguageSelect(isEnabled = true) {
|
|
8813
|
+
// Guard: Only execute if speech recognition is enabled
|
|
8814
|
+
if (!this.options.enableSpeechRecognition) {
|
|
8815
|
+
return;
|
|
8816
|
+
}
|
|
8679
8817
|
const languageControlName = 'Language_' + this.options.name;
|
|
8680
8818
|
let select = this.group.get(languageControlName);
|
|
8681
8819
|
if (isEnabled) {
|
|
@@ -8686,11 +8824,11 @@ class TextAreaComponent {
|
|
|
8686
8824
|
}
|
|
8687
8825
|
}
|
|
8688
8826
|
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 }); }
|
|
8689
|
-
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\" aria-describedby=\"
|
|
8827
|
+
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" }] }); }
|
|
8690
8828
|
}
|
|
8691
8829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
|
|
8692
8830
|
type: Component,
|
|
8693
|
-
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\" aria-describedby=\"
|
|
8831
|
+
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>" }]
|
|
8694
8832
|
}], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
|
|
8695
8833
|
type: Optional
|
|
8696
8834
|
}, {
|