@bnsights/bbsf-controls 1.0.144 → 1.0.146

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -2101,7 +2101,7 @@ class FileUploadComponent {
         };
         FileUploadComponent.controlContainerstatic = this.controlContainer;
         this.uploader = new FileUploader({
-            disableMultipart: false, // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
+            disableMultipart: false // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
         });
         this.hasAnotherDropZoneOver = false;
     }
@@ -2121,8 +2121,7 @@ class FileUploadComponent {
         else {
             if (this.options.isMultipleFile == true) {
                 let files = [];
-                this.multipleFileUploadModel.existingFiles =
-                    this.options.value.existingFiles;
+                this.multipleFileUploadModel.existingFiles = this.options.value.existingFiles;
                 this.multipleFileUploadModel.uploadedFiles = [];
                 for (let index = 0; index < this.options.value.existingFiles.length; index++) {
                     const element = this.options.value.existingFiles[index];
@@ -2152,7 +2151,7 @@ class FileUploadComponent {
                 this.fileLikeObject = {
                     name: element.nameWithExtension,
                     type: element.mimeType,
-                    rawFile: base64,
+                    rawFile: base64
                 };
                 this.file = element;
                 let file = this.fileLikeObject;
@@ -2166,7 +2165,7 @@ class FileUploadComponent {
                     this.fileUploadModel = this.options.value;
                 this.options.value = this.fileUploadModel;
             }
-            this.uploader.queue.forEach(element => {
+            this.uploader.queue.forEach((element) => {
                 element.progress = 100;
             });
         }
@@ -2179,7 +2178,7 @@ class FileUploadComponent {
                 this.acceptedType = this.acceptedType + Type + ',';
             }
             this.acceptedTypeArray = this.acceptedType.split(',');
-            this.acceptedTypeArray = this.acceptedTypeArray.filter(value => value != "");
+            this.acceptedTypeArray = this.acceptedTypeArray.filter((value) => value != '');
             for (let index = 0; index < this.acceptedTypeArray.length; index++) {
                 const element = this.acceptedTypeArray[index];
                 for (let index = 0; index < this.acceptedTypeArray.length; index++) {
@@ -2213,63 +2212,63 @@ class FileUploadComponent {
                             if (!this.toolTipTypeArray.includes('PowerPoint'))
                                 this.toolTipTypeArray.push('PowerPoint');
                             break;
-                        case "image/png":
+                        case 'image/png':
                             if (!this.toolTipTypeArray.includes('PNG'))
                                 this.toolTipTypeArray.push('PNG');
                             break;
-                        case "image/bmp":
+                        case 'image/bmp':
                             if (!this.toolTipTypeArray.includes('BMP'))
                                 this.toolTipTypeArray.push('BMP');
                             break;
-                        case "image/jpeg":
+                        case 'image/jpeg':
                             if (!this.toolTipTypeArray.includes('JPEG'))
                                 this.toolTipTypeArray.push('JPEG');
                             break;
-                        case "application/zip":
+                        case 'application/zip':
                             if (!this.toolTipTypeArray.includes('ZIP'))
                                 this.toolTipTypeArray.push('ZIP');
                             break;
-                        case "application/x-rar-compressed":
+                        case 'application/x-rar-compressed':
                             if (!this.toolTipTypeArray.includes('RAR'))
                                 this.toolTipTypeArray.push('RAR');
                             break;
-                        case "video/mp4":
+                        case 'video/mp4':
                             if (!this.toolTipTypeArray.includes('MP4'))
                                 this.toolTipTypeArray.push('MP4');
                             break;
-                        case "video/avi":
+                        case 'video/avi':
                             if (!this.toolTipTypeArray.includes('AVI'))
                                 this.toolTipTypeArray.push('AVI');
                             break;
-                        case "video/quicktime":
+                        case 'video/quicktime':
                             if (!this.toolTipTypeArray.includes('MOV'))
                                 this.toolTipTypeArray.push('MOV');
                             break;
-                        case "video/mpeg":
+                        case 'video/mpeg':
                             if (!this.toolTipTypeArray.includes('MPEG'))
                                 this.toolTipTypeArray.push('MPEG');
                             break;
-                        case "audio/mpeg":
+                        case 'audio/mpeg':
                             if (!this.toolTipTypeArray.includes('MP3'))
                                 this.toolTipTypeArray.push('MP3');
                             break;
-                        case "video/x-flv":
+                        case 'video/x-flv':
                             if (!this.toolTipTypeArray.includes('FLV'))
                                 this.toolTipTypeArray.push('FLV');
                             break;
-                        case "video/x-ms-wmv":
+                        case 'video/x-ms-wmv':
                             if (!this.toolTipTypeArray.includes('WMV'))
                                 this.toolTipTypeArray.push('WMV');
                             break;
-                        case "image/svg+xml":
+                        case 'image/svg+xml':
                             if (!this.toolTipTypeArray.includes('SVG'))
                                 this.toolTipTypeArray.push('SVG');
                             break;
-                        case "text/plain":
+                        case 'text/plain':
                             if (!this.toolTipTypeArray.includes('Txt'))
                                 this.toolTipTypeArray.push('Txt');
                             break;
-                        case "application/BN":
+                        case 'application/BN':
                             if (!this.toolTipTypeArray.includes('License'))
                                 this.toolTipTypeArray.push('License');
                             break;
@@ -2290,7 +2289,7 @@ class FileUploadComponent {
         if (this.options.minNoOfFiles > 0) {
             this.validationMessage =
                 this.validationMessage +
-                    `<br /> ${this.UtilityService.getResourceValue("MinFileCountValidationKey") + this.options.minNoOfFiles}`;
+                    `<br /> ${this.UtilityService.getResourceValue('MinFileCountValidationKey') + this.options.minNoOfFiles}`;
         }
         if (this.options.fileUploadAcceptsTypes != null &&
             this.options.fileUploadAcceptsTypes.length > 0) {
@@ -2365,7 +2364,7 @@ class FileUploadComponent {
             this.options.minNoOfFiles > this.uploader.queue.length) {
             const formControl = this.fileUploadFormControl;
             formControl.setErrors({
-                MinFileCountValidationKey: this.options.minNoOfFiles,
+                MinFileCountValidationKey: this.options.minNoOfFiles
             });
             formControl.markAsTouched();
             this.uploader.queue = [];
@@ -2384,14 +2383,14 @@ class FileUploadComponent {
             if (AllSizeFile > MaxSizeForAllFiles) {
                 const formControl = this.fileUploadFormControl;
                 formControl.setErrors({
-                    MaxSizeForAllFilesInMB: this.options.maxSizeForAllFilesInMB + 'M',
+                    MaxSizeForAllFilesInMB: this.options.maxSizeForAllFilesInMB + 'M'
                 });
                 formControl.markAsTouched();
                 this.uploader.queue = [];
                 return;
             }
         }
-        let AddedQueue = this.uploader.queue.filter((object) => object['some'].lastModified != null);
+        let AddedQueue = this.uploader.queue.filter((obj) => obj['some'].lastModified != null);
         for (let index = 0; index < AddedQueue.length; index++) {
             const element = AddedQueue[index];
             const file = element.file;
@@ -2401,7 +2400,7 @@ class FileUploadComponent {
                 if (file.size > maxFileSize) {
                     const formControl = this.fileUploadFormControl;
                     formControl.setErrors({
-                        FileMaxSizeInMB: this.options.fileMaxSizeInMB + 'M',
+                        FileMaxSizeInMB: this.options.fileMaxSizeInMB + 'M'
                     });
                     formControl.markAsTouched();
                     this.uploader.queue = [];
@@ -2417,20 +2416,19 @@ class FileUploadComponent {
                     this.uploader.queue = [];
                     return;
                 }
-                if (this.options.isUploadFileAsync && !element._file["iD_GUID"]) {
-                    this.fileUploadService.uploadFile(element._file)
-                        .subscribe({
+                if (this.options.isUploadFileAsync && !element._file['iD_GUID']) {
+                    this.fileUploadService.uploadFile(element._file).subscribe({
                         next: (event) => {
-                            let queueIndex = this.uploader.queue.findIndex(file => file == element);
+                            let queueIndex = this.uploader.queue.findIndex((file) => file == element);
                             if (event.type === HttpEventType.UploadProgress) {
-                                let value = Math.round(100 * event.loaded / event.total);
+                                let value = Math.round((100 * event.loaded) / event.total);
                                 this.uploader.queue[queueIndex].progress = value >= 95 ? 95 : value;
                             }
                             else if (event.type === HttpEventType.Response) {
                                 this.uploader.queue[queueIndex].progress = 100;
                                 let fileID = event.body.val;
-                                this.uploader.queue[queueIndex]._file["iD_GUID"] = fileID;
-                                this.uploader.queue[queueIndex]._file["isNew"] = true;
+                                this.uploader.queue[queueIndex]._file['iD_GUID'] = fileID;
+                                this.uploader.queue[queueIndex]._file['isNew'] = true;
                                 let AddedFile = {
                                     iD_GUID: fileID,
                                     fileName: this.uploader.queue[queueIndex]._file['name'],
@@ -2453,11 +2451,10 @@ class FileUploadComponent {
                                             this.multipleFileUploadModel.removedFiles = [];
                                         }
                                     }
-                                    this.multipleFileUploadModel.correlationID_GUID = this.options.value?.correlationID_GUID;
+                                    this.multipleFileUploadModel.correlationID_GUID =
+                                        this.options.value?.correlationID_GUID;
                                     this.fileUploadFormControl.setValue(this.multipleFileUploadModel);
-                                    this.group
-                                        .get(this.options.name)
-                                        .setValue(this.multipleFileUploadModel);
+                                    this.group.get(this.options.name).setValue(this.multipleFileUploadModel);
                                     //Use this line to enable two way binding.
                                     this.options.value = this.multipleFileUploadModel;
                                     this.isUploadComplete.emit(true);
@@ -2473,10 +2470,7 @@ class FileUploadComponent {
                     reader.onload = () => {
                         let existingID_GUID = null;
                         if (!this.options.isMultipleFile && this.file)
-                            existingID_GUID =
-                                this.file.NameWithExtension == file.name
-                                    ? this.file.iD_GUID
-                                    : null;
+                            existingID_GUID = this.file.NameWithExtension == file.name ? this.file.iD_GUID : null;
                         let AddedFile = {
                             fileName: file.name,
                             fileType: file.type,
@@ -2502,11 +2496,10 @@ class FileUploadComponent {
                                     this.multipleFileUploadModel.removedFiles = [];
                                 }
                             }
-                            this.multipleFileUploadModel.correlationID_GUID = this.options.value?.correlationID_GUID;
+                            this.multipleFileUploadModel.correlationID_GUID =
+                                this.options.value?.correlationID_GUID;
                             this.fileUploadFormControl.setValue(this.multipleFileUploadModel);
-                            this.group
-                                .get(this.options.name)
-                                .setValue(this.multipleFileUploadModel);
+                            this.group.get(this.options.name).setValue(this.multipleFileUploadModel);
                             //Use this line to enable two way binding.
                             this.options.value = this.multipleFileUploadModel;
                         }
@@ -2523,9 +2516,8 @@ class FileUploadComponent {
         }
     }
     removeFromControlValue(item) {
-        if (this.options.isUploadFileAsync && item.progress == 100 && item._file["isNew"]) {
-            this.fileUploadService.deleteFile(item._file["iD_GUID"]).subscribe(res => {
-            });
+        if (this.options.isUploadFileAsync && item.progress == 100 && item._file['isNew']) {
+            this.fileUploadService.deleteFile(item._file['iD_GUID']).subscribe((res) => { });
         }
         if (this.options.isMultipleFile == false) {
             this.fileUploadModel = null;
@@ -2545,19 +2537,19 @@ class FileUploadComponent {
                 else {
                     if (this.multipleFileUploadModel.removedFiles.length == 0) {
                         let FileObject = item.file.rawFile;
-                        let DeletedItem = this.multipleFileUploadModel.existingFiles.filter((Object) => Object.nameWithExtension == FileObject.name)[0];
+                        let DeletedItem = this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension == FileObject.name)[0];
                         this.multipleFileUploadModel.existingFiles =
-                            this.multipleFileUploadModel.existingFiles.filter((Object) => Object.nameWithExtension != FileObject.name);
+                            this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension != FileObject.name);
                         this.deletedFiles.push(DeletedItem);
                         this.multipleFileUploadModel.removedFiles.push(DeletedItem.iD_GUID);
                     }
                     else {
                         let FileObject = item.file.rawFile;
-                        let deletedList = this.deletedFiles.filter((Object) => Object.nameWithExtension == FileObject.name);
+                        let deletedList = this.deletedFiles.filter((obj) => obj.nameWithExtension == FileObject.name);
                         if (deletedList.length == 0 || deletedList == undefined) {
-                            let DeletedItem = this.multipleFileUploadModel.existingFiles.filter((Object) => Object.nameWithExtension == FileObject.name)[0];
+                            let DeletedItem = this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension == FileObject.name)[0];
                             this.multipleFileUploadModel.existingFiles =
-                                this.multipleFileUploadModel.existingFiles.filter((Object) => Object.nameWithExtension != FileObject.name);
+                                this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension != FileObject.name);
                             this.deletedFiles.push(DeletedItem);
                             this.multipleFileUploadModel.removedFiles.push(DeletedItem.iD_GUID);
                         }
@@ -2569,13 +2561,14 @@ class FileUploadComponent {
                 this.multipleFileUploadModel.removedFiles = [];
             }
             this.multipleFileUploadModel.uploadedFiles =
-                this.multipleFileUploadModel.uploadedFiles.filter((Object) => (Object.nameWithExtension && Object.nameWithExtension != item._file.name) || (Object.iD_GUID != item._file["iD_GUID"]));
+                this.multipleFileUploadModel.uploadedFiles.filter((obj) => (obj.nameWithExtension && obj.nameWithExtension != item._file.name) ||
+                    obj.iD_GUID != item._file['iD_GUID']);
             if ((this.multipleFileUploadModel.uploadedFiles == null ||
                 this.multipleFileUploadModel.uploadedFiles.length == 0) &&
                 this.options.isRequired) {
                 const formControl = this.fileUploadFormControl;
                 formControl.setErrors({
-                    MinFileCountValidationKey: this.options.minNoOfFiles,
+                    MinFileCountValidationKey: this.options.minNoOfFiles
                 });
                 this.fileUploadFormControl.markAsTouched();
                 this.fileUploadFormControl.invalid;
@@ -2598,11 +2591,11 @@ class FileUploadComponent {
         return roundedMegabytes;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: FileUploadComponent, selector: "BBSF-FileUplaod", 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\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div\r\n      ng2FileDrop\r\n      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 }\"\r\n      (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\"\r\n      [uploader]=\"uploader\"\r\n      [accept]=\"acceptedType\"\r\n      id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n      aria-describedby=\"email-error\"\r\n      aria-invalid=\"true\"\r\n      type=\"file\"\r\n      #fileInput\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputControl.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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #fileInputControl\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\" (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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #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'] }}\" class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ 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\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\" (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\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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 }}\" 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\"></path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\" (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 }\" *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\r\n                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\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\"\r\n                stroke=\"#DBE1F0\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                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\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-valuenow=\"70\"\r\n          aria-valuemin=\"0\"\r\n          aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\"\r\n          [style.width.%]=\"item?.progress\"\r\n          *ngIf=\"item?.progress > 0\"></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>\r\n", 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: i7$2.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i7$2.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: FileUploadComponent, selector: "BBSF-FileUplaod", 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\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div\r\n      ng2FileDrop\r\n      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 }\"\r\n      (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\"\r\n      [uploader]=\"uploader\"\r\n      [accept]=\"acceptedType\"\r\n      id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n      aria-describedby=\"email-error\"\r\n      aria-invalid=\"true\"\r\n      type=\"file\"\r\n      #fileInput\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputControl.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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #fileInputControl\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\" (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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #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'] }}\" class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ 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\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\" (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\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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 }}\" 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\"></path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\" (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 }\" *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\r\n                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\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\"\r\n                stroke=\"#DBE1F0\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                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\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-valuenow=\"70\"\r\n          aria-valuemin=\"0\"\r\n          aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\"\r\n          [style.width.%]=\"item?.progress\"\r\n          *ngIf=\"item?.progress > 0\"></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>\r\n", 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: i7$2.FileDropDirective, selector: "[ng2FileDrop]", inputs: ["uploader"], outputs: ["fileOver", "onFileDrop"] }, { kind: "directive", type: i7$2.FileSelectDirective, selector: "[ng2FileSelect]", inputs: ["uploader"], outputs: ["onFileSelected"] }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'BBSF-FileUplaod', template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n      {{ options.labelValue }}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div\r\n      ng2FileDrop\r\n      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 }\"\r\n      (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\"\r\n      [uploader]=\"uploader\"\r\n      [accept]=\"acceptedType\"\r\n      id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n      aria-describedby=\"email-error\"\r\n      aria-invalid=\"true\"\r\n      type=\"file\"\r\n      #fileInput\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputControl.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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #fileInputControl\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\" (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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #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'] }}\" class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ 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\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\" (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\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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 }}\" 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\"></path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\" (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 }\" *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\r\n                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\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\"\r\n                stroke=\"#DBE1F0\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                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\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-valuenow=\"70\"\r\n          aria-valuemin=\"0\"\r\n          aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\"\r\n          [style.width.%]=\"item?.progress\"\r\n          *ngIf=\"item?.progress > 0\"></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>\r\n" }]
+            args: [{ selector: 'BBSF-FileUplaod', template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType == 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!--label-->\r\n    <label [hidden]=\"options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n      {{ options.labelValue }}\r\n      <!--Asterisk-->\r\n      <span *ngIf=\"((options.showAsterisk && options.isRequired) || options.isRequired) && !options.isReadonly\" class=\"text-danger\">*</span>\r\n    </label>\r\n    <!--Allow dropZone-->\r\n    <div\r\n      ng2FileDrop\r\n      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 }\"\r\n      (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\"\r\n      [uploader]=\"uploader\"\r\n      [accept]=\"acceptedType\"\r\n      id=\"{{ options.name }}\"\r\n      multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n      aria-describedby=\"email-error\"\r\n      aria-invalid=\"true\"\r\n      type=\"file\"\r\n      #fileInput\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputControl.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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #fileInputControl\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\" (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\r\n              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\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\"\r\n              stroke=\"#4B5489\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              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\r\n            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\r\n        ng2FileSelect\r\n        [uploader]=\"uploader\"\r\n        [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        multiple=\"{{ options.isMultipleFile ? 'multiple' : '' }}\"\r\n        name=\"file\"\r\n        type=\"file\"\r\n        value=\"\"\r\n        autocomplete=\"off\"\r\n        (change)=\"onFileChange()\"\r\n        [ngClass]=\"options.viewType == 1 ? '' : 'col-md-9'\"\r\n        id=\"{{ options.name }}\"\r\n        aria-describedby=\"email-error\"\r\n        aria-invalid=\"true\"\r\n        formControlName=\"{{ options.name }}\"\r\n        #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'] }}\" class=\"btn-download-file btn-sm btn-progress-upload\" download>\r\n          <span class=\"file-name\">{{ 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\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm\" (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\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              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 }}\" 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\"></path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ item?.file?.name }}</span>\r\n        </a>\r\n        <button *ngIf=\"!options.isReadonly\" class=\"btn btn-download-file btn-sm btn-danger\" (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 }\" *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\r\n                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\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n              <path\r\n                d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\"\r\n                stroke=\"#DBE1F0\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                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\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-valuenow=\"70\"\r\n          aria-valuemin=\"0\"\r\n          aria-valuemax=\"100\"\r\n          [class.file-uploaded]=\"item?.progress < 100\"\r\n          [style.width.%]=\"item?.progress\"\r\n          *ngIf=\"item?.progress > 0\"></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>\r\n" }]
         }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
                     type: Optional
                 }] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: FileUploadService }], propDecorators: { fileInput: [{
@@ -6965,6 +6958,18 @@ class RangeNumber {
 }
 
 class TextAreaOptions extends ControlOptionsBase {
+    constructor() {
+        super(...arguments);
+        /**To set  value  to Control */
+        this.value = '';
+        //** Set flag to enable or disable speech (mic) in textarea*/
+        this.enableSpeechRecognition = false;
+        //** Set array of available languages for speech to text*/
+        this.speechLanguages = undefined;
+        this.selectedSpeechLanguage = '';
+        //Enable auto save speech language into local storage
+        this.autoSaveSpeechLanguagetoLocalStorage = true;
+    }
 }
 
 class TextBoxOptions extends ControlOptionsBase {
@@ -6995,13 +7000,15 @@ class ToggleSlideOptions extends ControlOptionsBase {
 
 class TextAreaComponent {
     static { this.controlContainerstatic = null; }
-    constructor(controlUtility, controlContainer, textAreaControlHost, utilityService, controlValidationService, globalSettings) {
+    constructor(controlUtility, controlContainer, textAreaControlHost, utilityService, controlValidationService, globalSettings, speechRecognitionService, languageService) {
         this.controlUtility = controlUtility;
         this.controlContainer = controlContainer;
         this.textAreaControlHost = textAreaControlHost;
         this.utilityService = utilityService;
         this.controlValidationService = controlValidationService;
         this.globalSettings = globalSettings;
+        this.speechRecognitionService = speechRecognitionService;
+        this.languageService = languageService;
         this.onChange = new EventEmitter();
         this.wordCount = 0;
         this.wordCountArray = 0;
@@ -7015,6 +7022,7 @@ class TextAreaComponent {
         this.hasCharsLimitValidationError = false;
         this.minCharsLimit = -1; //To disable chars limit feature by default
         this.maxLimitWarningMsg = "";
+        this.isMicOn = false;
         this.resetError = () => {
             this.controlValidationService.removeGlobalError();
         };
@@ -7039,6 +7047,7 @@ class TextAreaComponent {
             this.controlUtility.isValid(this.textAreaFormControl);
         };
         TextAreaComponent.controlContainerstatic = this.controlContainer;
+        this.currentLanguage = localStorage.getItem('language');
     }
     ngOnInit() {
         if (this.options.isReadonly && !this.options.value)
@@ -7050,12 +7059,27 @@ class TextAreaComponent {
         this.controlValidationService.isCreatedBefor = false;
         this.group.addControl(this.options.name, new FormControl(''));
         this.textAreaFormControl = this.group.controls[this.options.name]; //  new FormControl('',validationRules);
+        // Initialize language form control
+        const languageControlName = this.options.name + 'Language';
+        this.group.addControl(languageControlName, new FormControl(this.options.selectedSpeechLanguage || ''));
         if (!this.options.maxLength)
             this.options.maxLength = this.globalSettings.maxLengthTextArea;
         if (!this.options.viewType)
             this.options.viewType = this.globalSettings.viewType;
         if (this.options.labelKey != null && this.options.labelKey != "")
             this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
+        if (this.options.enableSpeechRecognition) {
+            //Get all languages if not set
+            if (!this.options.speechLanguages) {
+                this.languageService.getLanguages().subscribe(result => {
+                    this.options.speechLanguages = result;
+                    this.setSpeechLanguage();
+                });
+            }
+            else {
+                this.setSpeechLanguage();
+            }
+        }
         this.textAreaFormControl.setValue(this.options.value);
         if (this.options.customValidation.length > 0) {
             let Validations = this.options.customValidation;
@@ -7165,15 +7189,97 @@ class TextAreaComponent {
         else //onFocusOut
             this.showCharsLimitMsg = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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\"\r\n      [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</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: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
+    //region Speech Recognition
+    setSpeechLanguage() {
+        const languageControlName = this.options.name + 'Language';
+        if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
+            let savedLanguage = localStorage.getItem("speechLanguage");
+            if (savedLanguage) {
+                this.options.selectedSpeechLanguage = savedLanguage;
+            }
+            else {
+                this.loadSelectedSpeechLanguage();
+                localStorage.setItem("speechLanguage", this.options.selectedSpeechLanguage);
+            }
+        }
+        else {
+            this.loadSelectedSpeechLanguage();
+        }
+        this.group.get(languageControlName).setValue(this.options.selectedSpeechLanguage);
+    }
+    loadSelectedSpeechLanguage() {
+        if (!this.options.selectedSpeechLanguage) {
+            if (this.currentLanguage == "en" && this.options.speechLanguages.some(language => language.englishName === 'English')) {
+                this.options.selectedSpeechLanguage = this.options.speechLanguages.find(language => language.englishName === 'English').dialect;
+            }
+            else if (this.currentLanguage == "ar" && this.options.speechLanguages.some(language => language.englishName === 'Arabic')) {
+                this.options.selectedSpeechLanguage = this.options.speechLanguages.find(language => language.englishName === 'Arabic').dialect;
+            }
+            else {
+                this.options.selectedSpeechLanguage = this.options.speechLanguages[0].dialect;
+            }
+        }
+    }
+    startSpeechRecognition() {
+        if (!this.speechRecognitionService.isSupported) {
+            this.utilityService.notifyErrorMessage(this.utilityService.getResourceValue("BrowserNotSupportSpeechRecognition"));
+            return;
+        }
+        this.isMicOn = true;
+        this.subscription = this.speechRecognitionService.startListening(this.options.selectedSpeechLanguage).subscribe({
+            next: (transcript) => {
+                if (this.options.value) {
+                    this.options.value += ' ';
+                }
+                let charIndex = 0;
+                const interval = setInterval(() => {
+                    this.options.value += transcript[charIndex];
+                    charIndex++;
+                    if (charIndex === transcript.length) {
+                        clearInterval(interval);
+                    }
+                }, 10);
+            },
+            error: (error) => {
+                console.error(error);
+                this.stopSpeechRecognition();
+            },
+            complete: () => {
+                this.isMicOn = false;
+            }
+        });
+    }
+    stopSpeechRecognition() {
+        if (!this.speechRecognitionService.isSupported) {
+            return;
+        }
+        this.isMicOn = false;
+        this.speechRecognitionService.stopListening();
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    ngOnDestroy() {
+        this.stopSpeechRecognition();
+    }
+    onSpeechLanguageChange(event) {
+        let selectedLang = event.target.value;
+        this.options.selectedSpeechLanguage = selectedLang;
+        const languageControlName = this.options.name + 'Language';
+        this.group.get(languageControlName).setValue(selectedLang);
+        if (this.options.autoSaveSpeechLanguagetoLocalStorage) {
+            localStorage.setItem("speechLanguage", selectedLang);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, deps: [{ token: ControlUtility }, { token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: i3.SpeechRecognitionService }, { token: i3.LanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", 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=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n            *ngIf=\"!isMicOn\">\r\n        </span>\r\n        <span class=\"svg-icon svg-icon-5\"  [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n            *ngIf=\"isMicOn\">\r\n        </span>\r\n        <select class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n          <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">{{language.displayName}}</option>\r\n        </select>\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\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n", 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.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            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\"\r\n      [ngClass]=\"options.enableCopyToClipboard? 'p-40px' : '' \">\r\n      <!--input-->\r\n      <textarea class=\"form-control {{options.extraClasses}}\" (focus)=\"onFocus(true)\" (focusout)=\"onFocus(false)\"\r\n        [dir]=\"textDir\" aria-describedby=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n    </div>\r\n    <!-- readonly -->\r\n    <div *ngIf=\"options.isReadonly\"><span class=\"readonly-view\">{{options.value}}</span>\r\n    </div>\r\n    <div class=\"subtext-container\">\r\n      <!--wordCount-->\r\n      <div class=\"bbsf-word-count\" *ngIf=\"options.maxWordCount>0&&isShowWordCount\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>" }]
+            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=\"email-error\" aria-invalid=\"true\" formControlName=\"{{options.name}}\"\r\n        [class.is-invalid]=\"textAreaFormControl.invalid && textAreaFormControl.touched\"\r\n        placeholder=\"{{options.placeholder}}\" id=\"{{options.name}}\" autocomplete=\"{{options.autoComplete}}\"\r\n        (change)=\"trimControlValue()\" rows=\"{{options.rows}}\" (keyup)=\"onTextChange()\" cols=\"{{options.cols}}\"\r\n        maxlength=\"{{options.maxLength}}\" minlength=\"{{options.minLength}}\" [(ngModel)]=\"options.value\"\r\n        (keydown)=\"wordCountArray>options.maxWordCount&&$event.keyCode !=8?$event.preventDefault():null\"\r\n        #TextAreainput></textarea>\r\n      <!--CopyToClipboard-->\r\n      <div class=\"copy-clipboard\" *ngIf=\"options.enableCopyToClipboard\" (click)=\"copyInputMessage(TextAreainput)\">\r\n        <i class=\"fas fa-copy\"></i>\r\n      </div>\r\n      <div [ngClass]=\"{'expanded': isFocused}\" class=\"language-container {{options.extraClassMicLanguage}}\" *ngIf=\"options.enableSpeechRecognition\">\r\n        <span class=\"svg-icon svg-icon-5\" [inlineSVG]=\"options.iconMic? options.iconMic : './src/assets/images/mic.svg'\" (click)=\"startSpeechRecognition()\"\r\n            *ngIf=\"!isMicOn\">\r\n        </span>\r\n        <span class=\"svg-icon svg-icon-5\"  [inlineSVG]=\"options.iconMicOff? options.iconMicOff : './src/assets/images/mic-off.svg'\" (click)=\"stopSpeechRecognition()\"\r\n            *ngIf=\"isMicOn\">\r\n        </span>\r\n        <select class=\"language-select\" [formControlName]=\"options.name + 'Language'\" (change)=\"onSpeechLanguageChange($event)\">\r\n          <option *ngFor=\"let language of options.speechLanguages\" [value]=\"language.dialect\">{{language.displayName}}</option>\r\n        </select>\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\">\r\n        {{wordCount}}/{{options.maxWordCount}} Words</div>\r\n      <!-- CharsLimitMsg-->\r\n      <div class=\"bbsf-character-count\" *ngIf=\"showCharsLimitMsg\"\r\n        [ngClass]=\"{'badge-light-warning': charsLimitMsgClass === 'warning', 'badge-light-danger' : charsLimitMsgClass === 'danger' }\">\r\n        {{maxLimitWarningMsg}}\r\n      </div>\r\n      <!-- LabelDescription-->\r\n      <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription!=null\">{{options.labelDescription}}</div>\r\n      <!-- requiredText-->\r\n      <div class=\"bbsf-validation\" [dir]=\"textDir\" *ngIf=\"(textAreaFormControl.invalid && textAreaFormControl.touched)\">\r\n        {{getErrorValidation(textAreaFormControl.errors|keyvalue)}}\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"(group.valid&&group.dirty&&group.touched )||(group.untouched&&group.invalid&&group.dirty) \">\r\n      {{resetError()}}</div>\r\n  </div>\r\n" }]
         }], ctorParameters: () => [{ type: ControlUtility }, { type: i2.ControlContainer, decorators: [{
                     type: Optional
-                }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }], propDecorators: { group: [{
+                }] }, { type: i2.FormGroupDirective }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: i3.SpeechRecognitionService }, { type: i3.LanguageService }], propDecorators: { group: [{
                 type: Input
             }], options: [{
                 type: Input