@bnsights/bbsf-controls 1.0.175 → 1.0.177

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -27,7 +27,7 @@ import * as i2$1 from 'ngx-toastr';
 import { ToastrModule } from 'ngx-toastr';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i5 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, DatePipe, KeyValuePipe } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpEventType, HttpClientModule } from '@angular/common/http';
 import * as i0 from '@angular/core';
@@ -52,7 +52,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
 import * as i3 from '@bnsights/bbsf-utilities';
 import { RequestOptionsModel, environment as environment$1, BBSFUtilitiesModule, UtilityService, ConfigurationService, EnvironmentService, AuthService } from '@bnsights/bbsf-utilities';
-import { Subject, Observable, noop as noop$1, of, EMPTY, Subscription, switchMap as switchMap$1 } from 'rxjs';
+import { Subject, Observable, noop as noop$1, of, Subscription, EMPTY, switchMap as switchMap$1 } from 'rxjs';
 import { switchMap, map, tap } from 'rxjs/operators';
 import * as i6 from '@angular/cdk/bidi';
 import dayGridPlugin from '@fullcalendar/daygrid';
@@ -2107,563 +2107,1023 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [{ type: i3.RequestHandlerService }] });
 
 class FileUploadComponent {
-    static { this.controlContainerstatic = null; }
-    constructor(controlContainer, MultipleFileUplaodControlHost, controlUtility, UtilityService, controlValidationService, globalSettings, fileUploadService) {
+    static { this.controlContainerStatic = null; }
+    constructor(controlContainer, multipleFileUploadControlHost, controlUtility, utilityService, controlValidationService, globalSettings, fileUploadService) {
         this.controlContainer = controlContainer;
-        this.MultipleFileUplaodControlHost = MultipleFileUplaodControlHost;
+        this.multipleFileUploadControlHost = multipleFileUploadControlHost;
         this.controlUtility = controlUtility;
-        this.UtilityService = UtilityService;
+        this.utilityService = utilityService;
         this.controlValidationService = controlValidationService;
         this.globalSettings = globalSettings;
         this.fileUploadService = fileUploadService;
+        this.BYTES_TO_MB = 1024 * 1024;
+        this.PROGRESS_COMPLETE = 100;
+        this.PROGRESS_NEAR_COMPLETE = 95;
+        this.ERROR_DISPLAY_DURATION = 5000;
+        this.MAX_MEMORY_USAGE = 100 * 1024 * 1024; // 100MB limit
+        this.currentMemoryUsage = 0;
+        this.isSubmitted = false;
         this.OnChange = new EventEmitter();
         this.isUploadComplete = new EventEmitter();
         this.validationMessage = '';
         this.validationCountMessage = '';
+        this.hasAnotherDropZoneOver = false;
         this.acceptedType = '';
         this.acceptedTypeArray = [];
         this.toolTipTypeArray = [];
         this.markAllAsTouched = false;
         this.validationRules = [];
-        this.validationRulesasync = [];
+        this.validationRulesAsync = [];
+        this.file = null;
         this.deletedFiles = [];
+        this.subscriptions = new Subscription();
         this.resetError = () => {
             this.controlValidationService.removeGlobalError();
         };
-        //External Method
         this.removeRequiredValidation = () => {
             this.controlUtility.removeRequiredValidation(this.fileUploadFormControl, this.validationRules, this.options);
         };
-        //External Method
         this.addRequiredValidation = () => {
             this.controlUtility.addRequiredValidation(this.fileUploadFormControl, this.validationRules, this.options);
         };
-        //External Method
         this.removeCustomValidation = (customValidation) => {
             this.controlUtility.removeCustomValidation(this.fileUploadFormControl, this.validationRules, customValidation);
         };
-        //External Method
         this.addCustomValidation = (customValidation) => {
             this.controlUtility.addCustomValidation(this.fileUploadFormControl, this.validationRules, customValidation);
         };
-        //External Method
         this.isValid = () => {
             this.controlUtility.isValid(this.fileUploadFormControl);
+            return this.fileUploadFormControl.valid;
         };
-        FileUploadComponent.controlContainerstatic = this.controlContainer;
+        FileUploadComponent.controlContainerStatic = this.controlContainer;
+        this.initializeUploader();
+    }
+    initializeUploader() {
         this.uploader = new FileUploader({
-            disableMultipart: false // 'DisableMultipart' must be 'true' for formatDataFunction to be called.
+            disableMultipart: false
         });
-        this.hasAnotherDropZoneOver = false;
     }
     ngOnInit() {
+        this.initializeModels();
+        this.setViewType();
+        this.processInitialValue();
+        this.setupLabels();
+        this.setupFileTypeValidation();
+        this.setupFormControl();
+        this.setupSubscriptions();
+    }
+    initializeModels() {
         this.fileUploadModel = new FileUploadModel();
         this.multipleFileUploadModel = new MultipleFileUploadModel();
-        if (!this.options.viewType)
+    }
+    setViewType() {
+        if (!this.options.viewType) {
             this.options.viewType = this.globalSettings.viewType;
+        }
+    }
+    processInitialValue() {
         if (this.options.value == null) {
-            if (this.options.isMultipleFile == true) {
-                //this.options.Value=this.multipleFileUploadModel
-            }
-            else {
-                // this.options.Value=this.fileUploadModel
-            }
+            return;
+        }
+        if (this.options.isMultipleFile) {
+            this.processMultipleFileValue();
         }
         else {
-            if (this.options.isMultipleFile == true) {
-                let files = [];
-                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];
-                    var bytes = new Uint8Array(element.bytes);
-                    var base64 = btoa(String.fromCharCode(null, bytes));
-                    this.fileLikeObject = {
-                        name: element.nameWithExtension,
-                        type: element.mimeType,
-                        rawFile: base64
-                    };
-                    // let blob: any;
-                    // blob = new Blob(['']) as any;
-                    // blob.name = element.FileName;
-                    // blob.lastModifiedDate = null;
-                    // blob.webkitRelativePath = '';
-                    let file = this.fileLikeObject;
-                    file.url = element.fileURL;
-                    files.push(file);
-                }
-                this.uploader.addToQueue(files);
-                console.log(this.uploader.queue);
-            }
-            else {
-                const element = this.options.value.file ?? this.options.value;
-                var bytes = new Uint8Array(element.bytes);
-                var base64 = btoa(String.fromCharCode(null, bytes));
-                this.fileLikeObject = {
-                    name: element.nameWithExtension,
-                    type: element.mimeType,
-                    rawFile: base64
-                };
-                this.file = element;
-                let file = this.fileLikeObject;
-                file.url = element.fileURL;
-                this.uploader.addToQueue([file]);
-                if (!this.options.value.file) {
-                    this.fileUploadModel = new FileUploadModel();
-                    this.fileUploadModel.file = this.options.value;
-                }
-                else
-                    this.fileUploadModel = this.options.value;
-                this.options.value = this.fileUploadModel;
-            }
-            this.uploader.queue.forEach((element) => {
-                element.progress = 100;
-            });
+            this.processSingleFileValue();
         }
-        if (this.options.labelKey != null && this.options.labelKey != '')
-            this.options.labelValue = this.UtilityService.getResourceValue(this.options.labelKey);
-        if (this.options.fileUploadAcceptsTypes != null &&
-            this.options.fileUploadAcceptsTypes.length > 0) {
-            for (let index = 0; index < this.options.fileUploadAcceptsTypes.length; index++) {
-                const Type = this.options.fileUploadAcceptsTypes[index];
-                this.acceptedType = this.acceptedType + Type + ',';
-            }
-            this.acceptedTypeArray = this.acceptedType.split(',');
-            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++) {
-                    const element = this.acceptedTypeArray[index];
-                    switch (element) {
-                        case 'application/pdf':
-                            if (!this.toolTipTypeArray.includes('PDF'))
-                                this.toolTipTypeArray.push('PDF');
-                            break;
-                        case 'application/msword':
-                            if (!this.toolTipTypeArray.includes('Word'))
-                                this.toolTipTypeArray.push('Word');
-                            break;
-                        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-                            if (!this.toolTipTypeArray.includes('Word'))
-                                this.toolTipTypeArray.push('Word');
-                            break;
-                        case 'application/vnd.ms-excel':
-                            if (!this.toolTipTypeArray.includes('Excel'))
-                                this.toolTipTypeArray.push('Excel');
-                            break;
-                        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-                            if (!this.toolTipTypeArray.includes('Excel'))
-                                this.toolTipTypeArray.push('Excel');
-                            break;
-                        case 'application/vnd.ms-powerpoint':
-                            if (!this.toolTipTypeArray.includes('PowerPoint'))
-                                this.toolTipTypeArray.push('PowerPoint');
-                            break;
-                        case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-                            if (!this.toolTipTypeArray.includes('PowerPoint'))
-                                this.toolTipTypeArray.push('PowerPoint');
-                            break;
-                        case 'image/png':
-                            if (!this.toolTipTypeArray.includes('PNG'))
-                                this.toolTipTypeArray.push('PNG');
-                            break;
-                        case 'image/bmp':
-                            if (!this.toolTipTypeArray.includes('BMP'))
-                                this.toolTipTypeArray.push('BMP');
-                            break;
-                        case 'image/jpeg':
-                            if (!this.toolTipTypeArray.includes('JPEG'))
-                                this.toolTipTypeArray.push('JPEG');
-                            break;
-                        case 'application/zip':
-                            if (!this.toolTipTypeArray.includes('ZIP'))
-                                this.toolTipTypeArray.push('ZIP');
-                            break;
-                        case 'application/x-rar-compressed':
-                            if (!this.toolTipTypeArray.includes('RAR'))
-                                this.toolTipTypeArray.push('RAR');
-                            break;
-                        case 'video/mp4':
-                            if (!this.toolTipTypeArray.includes('MP4'))
-                                this.toolTipTypeArray.push('MP4');
-                            break;
-                        case 'video/avi':
-                            if (!this.toolTipTypeArray.includes('AVI'))
-                                this.toolTipTypeArray.push('AVI');
-                            break;
-                        case 'video/quicktime':
-                            if (!this.toolTipTypeArray.includes('MOV'))
-                                this.toolTipTypeArray.push('MOV');
-                            break;
-                        case 'video/mpeg':
-                            if (!this.toolTipTypeArray.includes('MPEG'))
-                                this.toolTipTypeArray.push('MPEG');
-                            break;
-                        case 'audio/mpeg':
-                            if (!this.toolTipTypeArray.includes('MP3'))
-                                this.toolTipTypeArray.push('MP3');
-                            break;
-                        case 'video/x-flv':
-                            if (!this.toolTipTypeArray.includes('FLV'))
-                                this.toolTipTypeArray.push('FLV');
-                            break;
-                        case 'video/x-ms-wmv':
-                            if (!this.toolTipTypeArray.includes('WMV'))
-                                this.toolTipTypeArray.push('WMV');
-                            break;
-                        case 'image/svg+xml':
-                            if (!this.toolTipTypeArray.includes('SVG'))
-                                this.toolTipTypeArray.push('SVG');
-                            break;
-                        case 'text/plain':
-                            if (!this.toolTipTypeArray.includes('Txt'))
-                                this.toolTipTypeArray.push('Txt');
-                            break;
-                        case 'application/BN':
-                            if (!this.toolTipTypeArray.includes('License'))
-                                this.toolTipTypeArray.push('License');
-                            break;
-                        default:
-                            break;
-                    }
-                }
+        this.uploader.queue.forEach((element) => {
+            element.progress = this.PROGRESS_COMPLETE;
+        });
+    }
+    processMultipleFileValue() {
+        const files = [];
+        this.multipleFileUploadModel.existingFiles = this.options.value.existingFiles;
+        this.multipleFileUploadModel.uploadedFiles = [];
+        for (const element of this.options.value.existingFiles) {
+            const fileLikeObject = this.createFileLikeObject(element);
+            files.push(fileLikeObject);
+        }
+        this.uploader.addToQueue(files);
+    }
+    processSingleFileValue() {
+        const element = this.options.value.file ?? this.options.value;
+        const fileLikeObject = this.createFileLikeObject(element);
+        this.file = element;
+        this.uploader.addToQueue([fileLikeObject]);
+        if (!this.options.value.file) {
+            this.fileUploadModel = new FileUploadModel();
+            this.fileUploadModel.file = this.options.value;
+        }
+        else {
+            this.fileUploadModel = this.options.value;
+        }
+        this.options.value = this.fileUploadModel;
+    }
+    createFileLikeObject(element) {
+        const bytes = new Uint8Array(element.bytes);
+        const base64 = btoa(String.fromCharCode(...bytes));
+        return {
+            name: element.nameWithExtension || element.fileName,
+            type: element.mimeType || element.fileType,
+            rawFile: base64,
+            size: element.fileSizeInMB ? element.fileSizeInMB * this.BYTES_TO_MB : 0,
+            lastModifiedDate: new Date(),
+            url: element.fullFileURL
+        };
+    }
+    setupLabels() {
+        if (this.options.labelKey) {
+            this.options.labelValue = this.utilityService.getResourceValue(this.options.labelKey);
+        }
+    }
+    setupFileTypeValidation() {
+        if (this.options.fileUploadAcceptsTypes?.length) {
+            this.processAcceptedTypes();
+            this.buildValidationMessage();
+        }
+    }
+    processAcceptedTypes() {
+        this.acceptedType = this.options.fileUploadAcceptsTypes.join(',');
+        this.acceptedTypeArray = this.options.fileUploadAcceptsTypes.filter(type => type.trim());
+        const mimeTypeMap = this.getMimeTypeMap();
+        for (const type of this.acceptedTypeArray) {
+            const displayType = mimeTypeMap[type];
+            if (displayType && !this.toolTipTypeArray.includes(displayType)) {
+                this.toolTipTypeArray.push(displayType);
             }
-            this.validationMessage =
-                this.validationMessage +
-                    `${this.UtilityService.getResourceValue('Extensions')} (${this.toolTipTypeArray}) `;
+        }
+    }
+    getMimeTypeMap() {
+        return {
+            'application/pdf': 'PDF',
+            'application/msword': 'Word',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
+            'application/vnd.ms-excel': 'Excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
+            'application/vnd.ms-powerpoint': 'PowerPoint',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PowerPoint',
+            'image/png': 'PNG',
+            'image/bmp': 'BMP',
+            'image/jpeg': 'JPEG',
+            'application/zip': 'ZIP',
+            'application/x-rar-compressed': 'RAR',
+            'video/mp4': 'MP4',
+            'video/avi': 'AVI',
+            'video/quicktime': 'MOV',
+            'video/mpeg': 'MPEG',
+            'audio/mpeg': 'MP3',
+            'video/x-flv': 'FLV',
+            'video/x-ms-wmv': 'WMV',
+            'image/svg+xml': 'SVG',
+            'text/plain': 'Txt',
+            'application/BN': 'License'
+        };
+    }
+    buildValidationMessage() {
+        const messages = [];
+        if (this.toolTipTypeArray.length) {
+            messages.push(`${this.utilityService.getResourceValue('Extensions')} (${this.toolTipTypeArray.join(', ')})`);
         }
         if (this.options.fileMaxSizeInMB > 0) {
-            this.validationMessage =
-                this.validationMessage +
-                    `<br />  ${this.UtilityService.getResourceValue('FileMaxSizeInMB') + this.options.fileMaxSizeInMB} `;
+            messages.push(`${this.utilityService.getResourceValue('FileMaxSizeInMB')}${this.options.fileMaxSizeInMB}`);
         }
         if (this.options.minNoOfFiles > 0) {
-            this.validationMessage =
-                this.validationMessage +
-                    `<br /> ${this.UtilityService.getResourceValue('MinFileCountValidationKey') + this.options.minNoOfFiles}`;
+            messages.push(`${this.utilityService.getResourceValue('MinFileCountValidationKey')}${this.options.minNoOfFiles}`);
         }
         if (this.options.maxNoOfFiles > 0) {
-            this.validationMessage =
-                this.validationMessage +
-                    `<br /> ${this.UtilityService.getResourceValue('MaxFileCountValidationKey') + this.options.maxNoOfFiles}`;
-        }
-        if (this.options.fileUploadAcceptsTypes != null &&
-            this.options.fileUploadAcceptsTypes.length > 0) {
+            messages.push(`${this.utilityService.getResourceValue('MaxFileCountValidationKey')}${this.options.maxNoOfFiles}`);
         }
+        this.validationMessage = messages.join('<br/>');
+    }
+    setupFormControl() {
         this.group.addControl(this.options.name, new FormControl(''));
-        this.fileUploadFormControl = this.group.controls[this.options.name]; //  new FormControl('',validationRules);
-        if (this.options.customValidation.length > 0) {
-            let Validations = this.options.customValidation;
-            for (let index = 0; index < Validations.length; index++) {
-                const Validation = Validations[index];
-                this.validationRules.push(Validation.functionBody);
+        this.fileUploadFormControl = this.group.controls[this.options.name];
+        this.setupValidators();
+        this.setupCountMessage();
+        this.applyValidatorsAndState();
+        this.fileUploadFormControl.setValue(this.options.value, { emitEvent: false });
+    }
+    setupValidators() {
+        if (this.options.customValidation?.length) {
+            for (const validation of this.options.customValidation) {
+                this.validationRules.push(validation.functionBody);
             }
         }
-        if (this.options.isMultipleFile && this.options.maxNoOfFiles > 0) {
-            this.validationCountMessage = `${this.UtilityService.getResourceValue('MaxFilesCount')} : ${this.options.maxNoOfFiles}`;
-        }
         if (this.options.isRequired) {
             this.validationRules.push(Validators.required);
         }
+    }
+    setupCountMessage() {
+        if (this.options.isMultipleFile && this.options.maxNoOfFiles > 0) {
+            this.validationCountMessage = `${this.utilityService.getResourceValue('MaxFilesCount')} : ${this.options.maxNoOfFiles}`;
+        }
+    }
+    applyValidatorsAndState() {
         this.fileUploadFormControl.setValidators(this.validationRules);
-        this.fileUploadFormControl.setAsyncValidators(this.validationRulesasync);
+        if (this.validationRulesAsync.length > 0) {
+            this.fileUploadFormControl.setAsyncValidators(this.validationRulesAsync);
+        }
         if (this.options.isDisabled) {
             this.fileUploadFormControl.disable();
         }
-        this.MultipleFileUplaodControlHost.ngSubmit.subscribe((value) => {
+    }
+    setupSubscriptions() {
+        this.multipleFileUploadControlHost.ngSubmit.subscribe(() => {
             this.group.markAllAsTouched();
             this.markAllAsTouched = true;
         });
-        this.fileUploadFormControl.setValue(this.options.value);
     }
     ngAfterViewInit() {
-        if (this.options.attributeList != null) {
-            var element = document.getElementById(this.options.name);
-            for (let index = 0; index < this.options.attributeList.length; index++) {
-                element.setAttribute(this.options.attributeList[index].key, this.options.attributeList[index].value);
+        this.applyAttributes();
+    }
+    applyAttributes() {
+        if (!this.options.attributeList?.length) {
+            return;
+        }
+        const element = document.getElementById(this.options.name);
+        if (element) {
+            for (const attribute of this.options.attributeList) {
+                element.setAttribute(attribute.key, attribute.value);
             }
         }
     }
     showGlobalError() {
         this.controlUtility.showGlobalError();
     }
-    getErrorValidation(ErrorList) {
+    getErrorValidation(errorList) {
         if (this.markAllAsTouched && this.group.invalid) {
             this.showGlobalError();
             this.markAllAsTouched = false;
         }
-        return this.controlUtility.getErrorValidationMassage(ErrorList, this.group, this.options);
+        if (errorList && errorList.length > 0) {
+            for (const error of errorList) {
+                if (error.key === 'InvalidFiles') {
+                    return error.value;
+                }
+            }
+        }
+        return this.controlUtility.getErrorValidationMassage(errorList, this.group, this.options);
     }
     fileOverAnother(event) {
-        this.hasAnotherDropZoneOver = event;
+        this.hasAnotherDropZoneOver = !!event;
     }
     isHideInput() {
         if (this.options.isMultipleFile) {
-            if (this.options.maxNoOfFiles != null &&
-                this.options.maxNoOfFiles > 0 &&
-                this.options.maxNoOfFiles == this.uploader.queue.length) {
-                return true;
+            return this.options.maxNoOfFiles > 0 &&
+                this.options.maxNoOfFiles === this.uploader.queue.length;
+        }
+        return this.uploader.queue.length > 0;
+    }
+    onFileChange() {
+        this.validateFileConstraints();
+        const fileProcessingResult = this.processNewlyAddedFiles();
+        this.handleFileValidationResults(fileProcessingResult);
+        this.processValidFilesForUpload();
+    }
+    processNewlyAddedFiles() {
+        const addedQueue = this.getNewlyAddedFiles();
+        const validationResult = this.validateFilesInQueue(addedQueue);
+        return {
+            validFiles: addedQueue.filter(file => !validationResult.invalidFiles.includes(file)),
+            invalidFiles: validationResult.invalidFiles,
+            errors: validationResult.errors
+        };
+    }
+    getNewlyAddedFiles() {
+        return this.uploader.queue.filter((obj) => obj['some']?.lastModified != null);
+    }
+    validateFilesInQueue(fileQueue) {
+        const validationErrors = [];
+        const invalidFiles = [];
+        const processedDuplicateNames = new Set();
+        for (const element of fileQueue) {
+            const file = element.file;
+            if (!file)
+                continue;
+            const fileValidation = this.validateSingleFile(file, element, processedDuplicateNames);
+            if (!fileValidation.isValid) {
+                invalidFiles.push(element);
+                validationErrors.push(...fileValidation.errors);
             }
         }
-        else {
-            if (this.uploader.queue.length > 0) {
-                return true;
+        return {
+            isValid: invalidFiles.length === 0,
+            errors: validationErrors,
+            invalidFiles
+        };
+    }
+    validateSingleFile(file, element, processedDuplicateNames) {
+        const errors = [];
+        const sizeValid = this.validateIndividualFileSize(file);
+        const typeValid = this.validateIndividualFileType(file);
+        const nameValid = this.validateDuplicateFileName(file, element);
+        if (!sizeValid) {
+            errors.push(this.createFileSizeErrorMessage(file.name));
+        }
+        if (!typeValid) {
+            errors.push(this.createFileTypeErrorMessage(file.name));
+        }
+        if (!nameValid) {
+            const duplicateError = this.createDuplicateFileErrorMessage(file.name, processedDuplicateNames);
+            if (duplicateError) {
+                errors.push(duplicateError);
             }
         }
-        return false;
+        return {
+            isValid: sizeValid && typeValid && nameValid,
+            errors,
+            invalidFiles: []
+        };
     }
-    onFileChange() {
-        let FilesArray = [];
-        if (this.options.isMultipleFile &&
-            this.options.minNoOfFiles != null &&
-            this.options.minNoOfFiles > 0 &&
-            this.options.minNoOfFiles > this.uploader.queue.length) {
-            const formControl = this.fileUploadFormControl;
-            formControl.setErrors({
-                MinFileCountValidationKey: this.options.minNoOfFiles
-            });
-            formControl.markAsTouched();
-            this.uploader.queue = [];
-            return;
+    createFileSizeErrorMessage(fileName) {
+        return this.utilityService.getResourceValue('FileExceedsMaxSize')
+            .replace('{fileName}', fileName)
+            .replace('{maxSize}', this.options.fileMaxSizeInMB.toString());
+    }
+    createFileTypeErrorMessage(fileName) {
+        return this.utilityService.getResourceValue('FileTypeNotAccepted')
+            .replace('{fileName}', fileName);
+    }
+    createDuplicateFileErrorMessage(fileName, processedDuplicateNames) {
+        const fileNameLower = fileName.toLowerCase();
+        if (processedDuplicateNames.has(fileNameLower)) {
+            return null;
+        }
+        processedDuplicateNames.add(fileNameLower);
+        let duplicateErrorMsg = this.utilityService.getResourceValue('DuplicateFileName');
+        if (!duplicateErrorMsg || duplicateErrorMsg === 'DuplicateFileName') {
+            duplicateErrorMsg = `File '{fileName}' already exists. Please choose a different file or rename it.`;
+        }
+        return duplicateErrorMsg.replace('{fileName}', fileName);
+    }
+    handleFileValidationResults(result) {
+        if (result.invalidFiles.length > 0) {
+            this.removeInvalidFiles(result.invalidFiles);
+        }
+        if (result.errors.length > 0) {
+            this.showValidationErrors(result.errors);
+        }
+    }
+    processValidFilesForUpload() {
+        const filesArray = [];
+        const validQueue = this.getNewlyAddedFiles();
+        for (const element of validQueue) {
+            const file = element.file;
+            if (!file)
+                continue;
+            if (this.shouldUseAsyncUpload(element)) {
+                this.handleAsyncFileUpload(element, filesArray);
+            }
+            else {
+                this.handleSyncFileUpload(file, filesArray);
+            }
         }
-        if (this.options.isMultipleFile &&
-            this.options.maxNoOfFiles != null &&
-            this.options.maxNoOfFiles > 0 &&
-            this.options.maxNoOfFiles < this.uploader.queue.length) {
-            const formControl = this.fileUploadFormControl;
-            formControl.setErrors({
-                MaxFileCountValidationKey: this.options.maxNoOfFiles
+    }
+    shouldUseAsyncUpload(element) {
+        return this.options.isUploadFileAsync && !element._file['iD_GUID'];
+    }
+    validateFileConstraints() {
+        if (this.options.isMultipleFile) {
+            if (!this.validateMinFileCount() || !this.validateMaxFileCount() || !this.validateTotalFileSize()) {
+                return false;
+            }
+        }
+        return true;
+    }
+    validateMinFileCount() {
+        if (this.options.minNoOfFiles > 0 && this.options.minNoOfFiles > this.uploader.queue.length) {
+            const minFileMsg = this.utilityService.getResourceValue('MinimumFilesRequired')
+                .replace('{count}', this.options.minNoOfFiles.toString());
+            this.showFileCountError('MinFileCountValidationKey', minFileMsg);
+            return false;
+        }
+        return true;
+    }
+    validateMaxFileCount() {
+        if (this.options.maxNoOfFiles > 0 && this.options.maxNoOfFiles < this.uploader.queue.length) {
+            const maxFileMsg = this.utilityService.getResourceValue('MaximumFilesExceeded') ||
+                `Maximum {maxCount} files allowed. You have selected {currentCount} files.`;
+            const finalMsg = maxFileMsg
+                .replace('{maxCount}', this.options.maxNoOfFiles.toString())
+                .replace('{currentCount}', this.uploader.queue.length.toString());
+            this.showFileCountError('MaxFileCountValidationKey', finalMsg);
+            return false;
+        }
+        return true;
+    }
+    showFileCountError(errorKey, message) {
+        const currentErrors = this.fileUploadFormControl.errors || {};
+        currentErrors[errorKey] = message;
+        this.fileUploadFormControl.setErrors(currentErrors);
+        this.fileUploadFormControl.markAsTouched();
+    }
+    clearFileCountError(errorKey) {
+        const currentErrors = this.fileUploadFormControl.errors;
+        if (currentErrors && currentErrors[errorKey]) {
+            delete currentErrors[errorKey];
+            if (Object.keys(currentErrors).length === 0) {
+                this.fileUploadFormControl.setErrors(null);
+            }
+            else {
+                this.fileUploadFormControl.setErrors(currentErrors);
+            }
+        }
+    }
+    validateTotalFileSize() {
+        if (this.options.maxSizeForAllFilesInMB > 0) {
+            const totalSize = this.uploader.queue.reduce((sum, element) => sum + element.file.size, 0);
+            const maxSizeBytes = this.options.maxSizeForAllFilesInMB * this.BYTES_TO_MB;
+            if (totalSize > maxSizeBytes) {
+                this.showTotalSizeError();
+                return false;
+            }
+        }
+        return true;
+    }
+    showTotalSizeError() {
+        const totalSizeMsg = this.utilityService.getResourceValue('TotalFileSizeExceeded')
+            .replace('{maxSize}', this.options.maxSizeForAllFilesInMB.toString());
+        const currentErrors = this.fileUploadFormControl.errors || {};
+        currentErrors['MaxSizeForAllFilesInMB'] = totalSizeMsg;
+        this.fileUploadFormControl.setErrors(currentErrors);
+        this.fileUploadFormControl.markAsTouched();
+    }
+    validateFileSize(file) {
+        const maxFileSize = this.options.fileMaxSizeInMB * this.BYTES_TO_MB;
+        if (file.size > maxFileSize) {
+            this.setFormControlError('FileMaxSizeInMB', `${this.options.fileMaxSizeInMB}MB`);
+            return false;
+        }
+        return true;
+    }
+    validateFileType(file) {
+        if (this.options.fileUploadAcceptsTypes?.length) {
+            const fileType = file.type;
+            const isAccepted = this.acceptedTypeArray.some(type => type.toLowerCase() === fileType.toLowerCase());
+            if (!isAccepted) {
+                this.setFormControlError('ToolTipTypeError', this.toolTipTypeArray);
+                return false;
+            }
+        }
+        return true;
+    }
+    validateIndividualFileSize(file) {
+        const maxFileSize = this.options.fileMaxSizeInMB * this.BYTES_TO_MB;
+        return file.size <= maxFileSize;
+    }
+    validateIndividualFileType(file) {
+        if (!this.options.fileUploadAcceptsTypes?.length) {
+            return true;
+        }
+        const fileType = file.type;
+        return this.acceptedTypeArray.some(type => type.toLowerCase() === fileType.toLowerCase());
+    }
+    validateDuplicateFileName(file, currentElement) {
+        if (!file?.name) {
+            return true;
+        }
+        const currentFileName = file.name.toLowerCase();
+        const existingFiles = this.uploader.queue.filter(item => item !== currentElement);
+        const duplicateExists = existingFiles.some(item => {
+            const existingFileName = item.file?.name || item._file?.name;
+            return existingFileName && existingFileName.toLowerCase() === currentFileName;
+        });
+        if (duplicateExists) {
+            return false;
+        }
+        if (this.options.value) {
+            const uploadedFiles = Array.isArray(this.options.value) ? this.options.value : [this.options.value];
+            const duplicateInUploaded = uploadedFiles.some(uploadedFile => {
+                const uploadedFileName = uploadedFile?.fileName || uploadedFile?.name;
+                return uploadedFileName && uploadedFileName.toLowerCase() === currentFileName;
             });
-            formControl.markAsTouched();
-            this.uploader.queue = [];
-            return;
+            return !duplicateInUploaded;
         }
-        if (this.options.isMultipleFile &&
-            this.options.maxSizeForAllFilesInMB != null &&
-            this.options.maxSizeForAllFilesInMB > 0) {
-            let AllSizeFile = 0;
-            for (let index = 0; index < this.uploader.queue.length; index++) {
-                const element = this.uploader.queue[index];
-                const file = element.file;
-                AllSizeFile = AllSizeFile + file.size;
-            }
-            const MaxSizeForAllFiles = this.options.maxSizeForAllFilesInMB * 1000 * 1000;
-            if (AllSizeFile > MaxSizeForAllFiles) {
-                const formControl = this.fileUploadFormControl;
-                formControl.setErrors({
-                    MaxSizeForAllFilesInMB: this.options.maxSizeForAllFilesInMB + 'MB'
-                });
-                formControl.markAsTouched();
-                this.uploader.queue = [];
-                return;
+        return true;
+    }
+    removeInvalidFiles(invalidFiles) {
+        invalidFiles.forEach(invalidFile => {
+            const index = this.uploader.queue.indexOf(invalidFile);
+            if (index > -1) {
+                this.uploader.queue.splice(index, 1);
+            }
+        });
+    }
+    showValidationErrors(errors) {
+        if (errors.length === 0)
+            return;
+        const errorMessage = errors.join('<br/>');
+        this.setValidationError('InvalidFiles', errorMessage);
+        setTimeout(() => {
+            this.clearInvalidFilesError();
+        }, this.ERROR_DISPLAY_DURATION);
+    }
+    setValidationError(errorKey, errorMessage) {
+        const currentErrors = this.fileUploadFormControl.errors || {};
+        currentErrors[errorKey] = errorMessage;
+        this.fileUploadFormControl.setErrors(currentErrors);
+        this.fileUploadFormControl.markAsTouched();
+    }
+    clearInvalidFilesError() {
+        const currentErrors = this.fileUploadFormControl.errors;
+        if (currentErrors && currentErrors['InvalidFiles']) {
+            delete currentErrors['InvalidFiles'];
+            if (Object.keys(currentErrors).length === 0) {
+                this.fileUploadFormControl.setErrors(null);
+            }
+            else {
+                this.fileUploadFormControl.setErrors(currentErrors);
             }
         }
-        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;
-            const maxFileSize = this.options.fileMaxSizeInMB * 1000 * 1000;
-            if (file) {
-                const fileType = file.type;
-                if (file.size > maxFileSize) {
-                    const formControl = this.fileUploadFormControl;
-                    formControl.setErrors({
-                        FileMaxSizeInMB: this.options.fileMaxSizeInMB + 'M'
-                    });
-                    formControl.markAsTouched();
-                    this.uploader.queue = [];
-                    return;
+    }
+    setFormControlError(errorKey, errorValue) {
+        this.fileUploadFormControl.setErrors({ [errorKey]: errorValue });
+        this.fileUploadFormControl.markAsTouched();
+        this.uploader.queue = [];
+    }
+    handleAsyncFileUpload(element, filesArray) {
+        const uploadSubscription = this.fileUploadService.uploadFile(element._file).subscribe({
+            next: (event) => {
+                if (event.type === HttpEventType.UploadProgress) {
+                    this.handleUploadProgress(element, event);
                 }
-                if (this.options.fileUploadAcceptsTypes != null &&
-                    this.options.fileUploadAcceptsTypes.length > 0 &&
-                    !(this.acceptedTypeArray.includes(fileType.toUpperCase()) ||
-                        this.acceptedTypeArray.includes(fileType.toLowerCase()))) {
-                    const formControl = this.fileUploadFormControl;
-                    formControl.setErrors({ ToolTipTypeError: this.toolTipTypeArray });
-                    formControl.markAsTouched();
-                    this.uploader.queue = [];
-                    return;
-                }
-                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);
-                            if (event.type === HttpEventType.UploadProgress) {
-                                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;
-                                let AddedFile = {
-                                    iD_GUID: fileID,
-                                    fileName: this.uploader.queue[queueIndex]._file['name'],
-                                    fileType: this.uploader.queue[queueIndex]._file['type'],
-                                    isNew: true
-                                };
-                                if (this.options.isMultipleFile == false) {
-                                    this.fileUploadModel = new FileUploadModel();
-                                    this.fileUploadModel.file = AddedFile;
-                                    this.fileUploadFormControl.setValue(this.fileUploadModel);
-                                    this.group.get(this.options.name).setValue(this.fileUploadModel);
-                                    //Use this line to enable two way binding.
-                                    this.options.value = this.fileUploadModel;
-                                }
-                                else {
-                                    FilesArray.push(AddedFile);
-                                    this.multipleFileUploadModel.uploadedFiles = FilesArray;
-                                    if (this.options.value != null && this.options.value != undefined) {
-                                        if (this.options.value.correlationID_GUID == null) {
-                                            this.multipleFileUploadModel.removedFiles = [];
-                                        }
-                                    }
-                                    this.multipleFileUploadModel.correlationID_GUID =
-                                        this.options.value?.correlationID_GUID;
-                                    this.fileUploadFormControl.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);
-                                }
-                            }
-                        }
-                    });
-                }
-                else {
-                    let reader = new FileReader();
-                    let fileObject = file.rawFile;
-                    reader.readAsDataURL(fileObject);
-                    reader.onload = () => {
-                        let existingID_GUID = null;
-                        if (!this.options.isMultipleFile && this.file)
-                            existingID_GUID = this.file.NameWithExtension == file.name ? this.file.iD_GUID : null;
-                        let AddedFile = {
-                            fileName: file.name,
-                            fileType: file.type,
-                            fileBase64: reader.result.toString().split(',')[1],
-                            fileSizeInMB: file.size / 1000 / 1000,
-                            nameWithExtension: file.name,
-                            iD_GUID: existingID_GUID,
-                            isNew: true
-                        };
-                        if (this.options.isMultipleFile == false) {
-                            this.fileUploadModel = new FileUploadModel();
-                            this.fileUploadModel.file = AddedFile;
-                            this.fileUploadFormControl.setValue(this.fileUploadModel);
-                            this.group.get(this.options.name).setValue(this.fileUploadModel);
-                            //Use this line to enable two way binding.
-                            this.options.value = this.fileUploadModel;
-                        }
-                        else {
-                            FilesArray.push(AddedFile);
-                            this.multipleFileUploadModel.uploadedFiles = FilesArray;
-                            if (this.options.value != null && this.options.value != undefined) {
-                                if (this.options.value.correlationID_GUID == null) {
-                                    this.multipleFileUploadModel.removedFiles = [];
-                                }
-                            }
-                            this.multipleFileUploadModel.correlationID_GUID =
-                                this.options.value?.correlationID_GUID;
-                            this.fileUploadFormControl.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;
-                        }
-                    };
-                    let originalValue = this.group.get(this.options.name).value;
-                    if (this.options.patchFunction &&
-                        this.options.patchPath &&
-                        this.group.get(this.options.name).valid) {
-                        this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
-                    }
-                    this.OnChange.emit(originalValue);
+                else if (event.type === HttpEventType.Response) {
+                    this.handleUploadComplete(element, event, filesArray);
                 }
+            },
+            error: (error) => {
+                console.error('Upload failed:', error);
+                // Handle upload error - you can add custom error handling here
             }
+        });
+        // Store subscription for cleanup
+        this.subscriptions.add(uploadSubscription);
+    }
+    handleUploadProgress(element, event) {
+        const queueIndex = this.uploader.queue.findIndex((file) => file === element);
+        if (queueIndex === -1)
+            return;
+        const progress = Math.round((100 * event.loaded) / event.total);
+        this.uploader.queue[queueIndex].progress =
+            progress >= this.PROGRESS_NEAR_COMPLETE ? this.PROGRESS_NEAR_COMPLETE : progress;
+    }
+    handleUploadComplete(element, event, filesArray) {
+        const queueIndex = this.uploader.queue.findIndex((file) => file === element);
+        if (queueIndex === -1)
+            return;
+        this.uploader.queue[queueIndex].progress = this.PROGRESS_COMPLETE;
+        const fileID = event.body.val;
+        this.updateElementWithFileInfo(element, fileID, event.body.downloadUrl);
+        const addedFile = this.createFileDTO(element, fileID, event.body.downloadUrl);
+        this.updateFormValue(addedFile, filesArray);
+    }
+    updateElementWithFileInfo(element, fileID, downloadUrl) {
+        element._file['iD_GUID'] = fileID;
+        element._file['isNew'] = true;
+        if (downloadUrl) {
+            element._file['url'] = downloadUrl;
+            element.file.url = downloadUrl;
+        }
+    }
+    createFileDTO(element, fileID, downloadUrl) {
+        return {
+            iD_GUID: fileID,
+            fileName: element._file['name'],
+            fileType: element._file['type'],
+            isNew: true,
+            fileBase64: '',
+            fileSizeInMB: element._file.size / this.BYTES_TO_MB,
+            nameWithExtension: element._file['name'],
+            fullFileURL: downloadUrl || null
+        };
+    }
+    handleSyncFileUpload(file, filesArray) {
+        this.trackMemoryUsage(file.size);
+        const reader = new FileReader();
+        // Store reader reference for cleanup
+        const readerRef = reader;
+        reader.onload = () => {
+            try {
+                const existingGUID = this.getExistingFileGUID(file);
+                this.updateQueueItemForSync(file);
+                const addedFile = this.createSyncFileDTO(file, reader.result, existingGUID);
+                this.updateFormValue(addedFile, filesArray);
+                this.handlePatchAndEmit();
+            }
+            finally {
+                // Clean up reader
+                readerRef.onload = null;
+                readerRef.onerror = null;
+                readerRef.onabort = null;
+            }
+        };
+        reader.onerror = () => {
+            console.error('File reading failed');
+            readerRef.onload = null;
+            readerRef.onerror = null;
+            readerRef.onabort = null;
+        };
+        reader.readAsDataURL(file.rawFile);
+    }
+    updateQueueItemForSync(file) {
+        const queueItem = this.findQueueItemByFile(file);
+        if (queueItem) {
+            this.preserveFileReference(queueItem, file);
+            queueItem.progress = this.PROGRESS_COMPLETE;
+        }
+    }
+    findQueueItemByFile(file) {
+        return this.uploader.queue.find(item => item.file.name === file.name && item.file.size === file.size);
+    }
+    preserveFileReference(queueItem, file) {
+        queueItem._file.rawFile = file.rawFile;
+        queueItem.file.rawFile = file.rawFile;
+    }
+    createSyncFileDTO(file, readerResult, existingGUID) {
+        return {
+            fileName: file.name,
+            fileType: file.type,
+            fileBase64: readerResult.split(',')[1],
+            fileSizeInMB: file.size / this.BYTES_TO_MB,
+            nameWithExtension: file.name,
+            iD_GUID: existingGUID,
+            isNew: true,
+            fullFileURL: null
+        };
+    }
+    getExistingFileGUID(file) {
+        if (!this.options.isMultipleFile && this.file) {
+            return this.file.nameWithExtension === file.name ? this.file.iD_GUID : null;
+        }
+        return null;
+    }
+    updateFormValue(addedFile, filesArray) {
+        if (!this.options.isMultipleFile) {
+            this.fileUploadModel = new FileUploadModel();
+            this.fileUploadModel.file = addedFile;
+            this.updateFormControl(this.fileUploadModel);
+        }
+        else {
+            filesArray.push(addedFile);
+            this.multipleFileUploadModel.uploadedFiles = filesArray;
+            this.setupMultipleFileModel();
+            this.updateFormControl(this.multipleFileUploadModel);
+            this.isUploadComplete.emit(true);
         }
     }
+    setupMultipleFileModel() {
+        if (this.options.value?.correlationID_GUID == null) {
+            this.multipleFileUploadModel.removedFiles = [];
+        }
+        this.multipleFileUploadModel.correlationID_GUID = this.options.value?.correlationID_GUID;
+    }
+    updateFormControl(value) {
+        this.preserveErrorsAndUpdateValue(value);
+        this.options.value = value;
+    }
+    preserveErrorsAndUpdateValue(value) {
+        const currentErrors = this.fileUploadFormControl.errors;
+        this.fileUploadFormControl.setValue(value, { emitEvent: false });
+        this.group.get(this.options.name)?.setValue(value, { emitEvent: false });
+        if (currentErrors) {
+            this.fileUploadFormControl.setErrors(currentErrors);
+        }
+    }
+    handlePatchAndEmit() {
+        const originalValue = this.group.get(this.options.name)?.value;
+        if (this.options.patchFunction && this.options.patchPath && this.group.get(this.options.name)?.valid) {
+            this.controlUtility.patchControlValue(originalValue, this.options.patchFunction, this.options.patchPath);
+        }
+        this.OnChange.emit(originalValue);
+    }
     removeFromControlValue(item) {
-        if (this.options.isUploadFileAsync && item.progress == 100 && item._file['isNew']) {
-            this.fileUploadService.deleteFile(item._file['iD_GUID']).subscribe((res) => { });
+        // Clean up blob URL before removing
+        const downloadUrl = this.getFileDownloadUrl(item);
+        if (downloadUrl && downloadUrl.startsWith('blob:')) {
+            this.cleanupBlobUrl(downloadUrl);
         }
-        if (this.options.isMultipleFile == false) {
-            this.fileUploadModel = null;
-            if (this.options.isRequired == true) {
-                this.fileUploadFormControl.markAsTouched();
-                this.fileUploadFormControl.invalid;
-            }
-            this.group.get(this.options.name).setValue(this.fileUploadModel);
-            this.options.value = this.fileUploadModel;
+        this.handleAsyncFileDeletion(item);
+        if (!this.options.isMultipleFile) {
+            this.handleSingleFileRemoval();
         }
         else {
-            if (this.options.value != null && this.options.value != undefined) {
-                if (this.options.value.correlationID_GUID == null) {
-                    this.deletedFiles = [];
-                    this.multipleFileUploadModel.removedFiles = [];
-                }
-                else {
-                    if (this.multipleFileUploadModel.removedFiles.length == 0) {
-                        let FileObject = item.file.rawFile;
-                        let DeletedItem = this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension == FileObject.name)[0];
-                        this.multipleFileUploadModel.existingFiles =
-                            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((obj) => obj.nameWithExtension == FileObject.name);
-                        if (deletedList.length == 0 || deletedList == undefined) {
-                            let DeletedItem = this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension == FileObject.name)[0];
-                            this.multipleFileUploadModel.existingFiles =
-                                this.multipleFileUploadModel.existingFiles.filter((obj) => obj.nameWithExtension != FileObject.name);
-                            this.deletedFiles.push(DeletedItem);
-                            this.multipleFileUploadModel.removedFiles.push(DeletedItem.iD_GUID);
-                        }
-                    }
+            this.handleMultipleFileRemoval(item);
+        }
+        this.checkAndClearMaxFileCountValidation();
+    }
+    handleAsyncFileDeletion(item) {
+        if (this.options.isUploadFileAsync &&
+            item.progress === this.PROGRESS_COMPLETE &&
+            item._file['isNew']) {
+            const deleteSubscription = this.fileUploadService.deleteFile(item._file['iD_GUID']).subscribe({
+                error: (error) => console.error('Delete failed:', error)
+            });
+            this.subscriptions.add(deleteSubscription);
+        }
+    }
+    handleSingleFileRemoval() {
+        this.uploader.queue = [];
+        this.fileUploadModel = null;
+        if (this.options.isRequired) {
+            this.fileUploadFormControl.markAsTouched();
+        }
+        const currentErrors = this.fileUploadFormControl.errors;
+        this.group.get(this.options.name)?.setValue(this.fileUploadModel, { emitEvent: false });
+        if (currentErrors) {
+            this.fileUploadFormControl.setErrors(currentErrors);
+        }
+        this.options.value = this.fileUploadModel;
+    }
+    handleMultipleFileRemoval(item) {
+        // Clean up blob URL
+        const downloadUrl = this.getFileDownloadUrl(item);
+        if (downloadUrl && downloadUrl.startsWith('blob:')) {
+            this.cleanupBlobUrl(downloadUrl);
+        }
+        const queueIndex = this.uploader.queue.indexOf(item);
+        if (queueIndex > -1) {
+            this.uploader.queue.splice(queueIndex, 1);
+        }
+        this.processFileRemovalFromExisting(item);
+        this.removeFromUploadedFiles(item);
+        this.validateRemainingFiles();
+        this.updateMultipleFileModel();
+    }
+    processFileRemovalFromExisting(item) {
+        if (!this.options.value) {
+            this.resetDeletedFiles();
+            return;
+        }
+        if (!this.options.value.correlationID_GUID) {
+            this.resetDeletedFiles();
+        }
+        else {
+            this.handleExistingFileRemoval(item);
+        }
+    }
+    resetDeletedFiles() {
+        this.deletedFiles = [];
+        this.multipleFileUploadModel.removedFiles = [];
+    }
+    handleExistingFileRemoval(item) {
+        const fileName = item.file.rawFile.name;
+        const existingFile = this.multipleFileUploadModel.existingFiles
+            .find(obj => obj.nameWithExtension === fileName);
+        if (existingFile && !this.deletedFiles.some(obj => obj.nameWithExtension === fileName)) {
+            this.multipleFileUploadModel.existingFiles =
+                this.multipleFileUploadModel.existingFiles.filter(obj => obj.nameWithExtension !== fileName);
+            this.deletedFiles.push(existingFile);
+            this.multipleFileUploadModel.removedFiles.push(existingFile.iD_GUID);
+        }
+    }
+    removeFromUploadedFiles(item) {
+        const itemFileName = item._file.name || item.file.name;
+        const itemFileSize = item._file.size || item.file.size;
+        const itemGUID = item._file['iD_GUID'];
+        this.multipleFileUploadModel.uploadedFiles =
+            this.multipleFileUploadModel.uploadedFiles.filter(obj => {
+                if (itemGUID && obj.iD_GUID) {
+                    return obj.iD_GUID !== itemGUID;
                 }
-            }
-            else {
-                this.deletedFiles = [];
-                this.multipleFileUploadModel.removedFiles = [];
-            }
-            this.multipleFileUploadModel.uploadedFiles =
-                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
-                });
-                this.fileUploadFormControl.markAsTouched();
-                this.fileUploadFormControl.invalid;
-            }
-            this.multipleFileUploadModel.correlationID_GUID = this.options.value?.correlationID_GUID;
-            this.fileUploadFormControl.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;
+                const objFileName = obj.nameWithExtension || obj.fileName;
+                const objFileSize = obj.fileSizeInMB ? obj.fileSizeInMB * this.BYTES_TO_MB : 0;
+                return !(objFileName === itemFileName && Math.abs(objFileSize - itemFileSize) < 1000);
+            });
+    }
+    validateRemainingFiles() {
+        if ((!this.multipleFileUploadModel.uploadedFiles ||
+            this.multipleFileUploadModel.uploadedFiles.length === 0) &&
+            this.options.isRequired) {
+            this.fileUploadFormControl.setErrors({
+                MinFileCountValidationKey: this.options.minNoOfFiles
+            });
+            this.fileUploadFormControl.markAsTouched();
+        }
+    }
+    updateMultipleFileModel() {
+        this.multipleFileUploadModel.correlationID_GUID = this.options.value?.correlationID_GUID;
+        const currentErrors = this.fileUploadFormControl.errors;
+        this.fileUploadFormControl.setValue(this.multipleFileUploadModel, { emitEvent: false });
+        this.group.get(this.options.name)?.setValue(this.multipleFileUploadModel, { emitEvent: false });
+        this.options.value = this.multipleFileUploadModel;
+        if (currentErrors) {
+            this.fileUploadFormControl.setErrors(currentErrors);
         }
     }
     convertSizeToMB(size) {
         if (size === 0) {
             return 0;
         }
-        // Convert size to megabytes
-        const megabytes = size / (1024 * 1024);
-        // Round to two decimal places
-        const roundedMegabytes = Math.round(megabytes * 100) / 100;
-        return roundedMegabytes;
+        const BYTES_TO_MB_ACCURATE = 1024 * 1024;
+        const megabytes = size / BYTES_TO_MB_ACCURATE;
+        return Math.round(megabytes * 100) / 100;
+    }
+    trackByFunction(index, item) {
+        return item._file ? item._file.name + item._file.size : index;
+    }
+    shouldShowFileList() {
+        return this.uploader?.queue && this.uploader.queue.length > 0;
+    }
+    isDownloadEnabled() {
+        return true;
+    }
+    isRemoveEnabled() {
+        return !this.options.isReadonly && !this.options.isDisabled;
+    }
+    getFileDownloadUrl(item) {
+        const existingUrl = this.getExistingFileUrl(item);
+        if (existingUrl) {
+            return existingUrl;
+        }
+        return this.createFileUrl(item);
+    }
+    getExistingFileUrl(item) {
+        return item?.file?.url ||
+            item?._file?.url ||
+            item?.url ||
+            item?.file?.rawFile?.url ||
+            item?._file?.rawFile?.url ||
+            null;
+    }
+    createFileUrl(item) {
+        const fileName = this.getFileName(item);
+        const fileType = item?.file?.type || item?._file?.type;
+        const originalFile = item?._file?.rawFile || item?.file?.rawFile;
+        if (originalFile && originalFile instanceof File) {
+            return URL.createObjectURL(originalFile);
+        }
+        const base64Data = typeof originalFile === 'string' ? originalFile : null;
+        if (base64Data && fileName) {
+            return this.createBlobUrlWithFilename(base64Data, fileType, fileName);
+        }
+        const fileId = item?._file?.['iD_GUID'];
+        if (fileId && this.options.isUploadFileAsync) {
+            return this.constructDownloadUrl(fileId, fileName);
+        }
+        return null;
+    }
+    createBlobUrlWithFilename(base64Data, fileType, fileName) {
+        try {
+            const byteCharacters = atob(base64Data);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: fileType || 'application/octet-stream' });
+            return URL.createObjectURL(blob);
+        }
+        catch (error) {
+            const errorMsg = this.utilityService.getResourceValue('ErrorCreatingBlobUrl');
+            console.error(errorMsg, error);
+            return `data:${fileType || 'application/octet-stream'};base64,${base64Data}`;
+        }
+    }
+    constructDownloadUrl(fileId, fileName) {
+        const downloadBaseUrl = this.options.downloadBaseUrl;
+        let url;
+        if (downloadBaseUrl) {
+            url = `${downloadBaseUrl}/${fileId}`;
+        }
+        else {
+            url = `/api/files/download/${fileId}`;
+        }
+        if (fileName) {
+            const separator = url.includes('?') ? '&' : '?';
+            url += `${separator}filename=${encodeURIComponent(fileName)}`;
+        }
+        return url;
+    }
+    getFileName(item) {
+        return item?.file?.name || item?._file?.name || 'file';
+    }
+    downloadFile(item) {
+        const downloadInfo = this.prepareFileDownload(item);
+        if (!downloadInfo.url) {
+            this.handleDownloadError(downloadInfo.fileName);
+            return;
+        }
+        this.executeFileDownload(downloadInfo.url, downloadInfo.fileName);
+    }
+    prepareFileDownload(item) {
+        return {
+            url: this.getFileDownloadUrl(item),
+            fileName: this.getFileName(item)
+        };
+    }
+    handleDownloadError(fileName) {
+        const errorMsg = this.utilityService.getResourceValue('NoDownloadUrlAvailable')
+            .replace('{fileName}', fileName);
+        console.error(errorMsg);
+    }
+    executeFileDownload(url, fileName) {
+        const link = this.createDownloadLink(url, fileName);
+        this.triggerDownload(link);
+        this.cleanupBlobUrl(url);
+    }
+    createDownloadLink(url, fileName) {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = fileName;
+        link.style.display = 'none';
+        return link;
+    }
+    triggerDownload(link) {
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    cleanupBlobUrl(url) {
+        if (url.startsWith('blob:')) {
+            setTimeout(() => {
+                URL.revokeObjectURL(url);
+            }, 100);
+        }
+    }
+    trackMemoryUsage(fileSize) {
+        this.currentMemoryUsage += fileSize;
+        // If memory usage exceeds limit, clean up old files
+        if (this.currentMemoryUsage > this.MAX_MEMORY_USAGE) {
+            this.cleanupOldFiles();
+        }
+    }
+    cleanupOldFiles() {
+        if (this.uploader?.queue && this.uploader.queue.length > 0) {
+            // Remove oldest files to free memory
+            const oldestFile = this.uploader.queue.shift();
+            if (oldestFile) {
+                const url = this.getFileDownloadUrl(oldestFile);
+                if (url && url.startsWith('blob:')) {
+                    this.cleanupBlobUrl(url);
+                }
+                this.currentMemoryUsage -= (oldestFile.file?.size || 0);
+            }
+        }
+    }
+    cleanupEventListeners() {
+        // Clear file input references
+        if (this.fileInput?.nativeElement) {
+            this.fileInput.nativeElement.value = '';
+        }
+        // Clear uploader queue to prevent memory leaks
+        if (this.uploader?.queue) {
+            this.uploader.queue = [];
+        }
+    }
+    cleanupUploaderQueue() {
+        if (this.uploader?.queue) {
+            // Clear all items and their associated resources
+            this.uploader.queue.forEach(item => {
+                // Clean up blob URLs
+                const url = this.getFileDownloadUrl(item);
+                if (url && url.startsWith('blob:')) {
+                    this.cleanupBlobUrl(url);
+                }
+                // Clear file references
+                if (item._file) {
+                    item._file = null;
+                }
+                if (item.file) {
+                    item.file = null;
+                }
+            });
+            // Clear the queue
+            this.uploader.queue = [];
+        }
+    }
+    ngOnDestroy() {
+        // Clean up subscriptions
+        this.subscriptions.unsubscribe();
+        // Clean up uploader queue
+        this.cleanupUploaderQueue();
+        // Clean up event listeners
+        this.cleanupEventListeners();
+        // Clean up blob URLs
+        if (this.uploader?.queue) {
+            this.uploader.queue.forEach(item => {
+                const url = this.getFileDownloadUrl(item);
+                if (url && url.startsWith('blob:')) {
+                    URL.revokeObjectURL(url);
+                }
+            });
+        }
+    }
+    checkAndClearMaxFileCountValidation() {
+        if (!this.options.maxNoOfFiles || this.options.maxNoOfFiles <= 0) {
+            return;
+        }
+        const currentQueueLength = this.uploader.queue.length;
+        if (currentQueueLength <= this.options.maxNoOfFiles) {
+            this.clearFileCountError('MaxFileCountValidationKey');
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: i2.ControlContainer, optional: true }, { token: i2.FormGroupDirective }, { token: ControlUtility }, { token: i3.UtilityService }, { token: i3.ControlValidationService }, { token: GlobalSettings }, { token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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['url'] }}\" class=\"btn btn-download-file btn-sm\" download>\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\"></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.3.12", type: FileUploadComponent, selector: "BBSF-FileUpload", inputs: { group: "group", options: "options" }, outputs: { OnChange: "OnChange", isUploadComplete: "isUploadComplete" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType === 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!-- Label -->\r\n    <label [hidden]=\"options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n      {{ options.labelValue }}\r\n      <!-- Required asterisk -->\r\n      <span *ngIf=\"options.isRequired && !options.isReadonly && (options.showAsterisk || true)\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!-- Drop zone enabled -->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{ options.extraClasses }}\"\r\n      *ngIf=\"options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      [ngClass]=\"{ 'another-file-over-class': hasAnotherDropZoneOver }\" (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"acceptedType\" [id]=\"options.name\"\r\n      [attr.multiple]=\"options.isMultipleFile ? 'multiple' : null\"\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputControl.click()\">\r\n\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <!-- Upload icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <!-- Instruction text -->\r\n          <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n            {{ utilityService.getResourceValue('DragAndDropHere') }}\r\n          </div>\r\n\r\n          <!-- Validation messages -->\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\">\r\n          </div>\r\n\r\n          <div class=\"bbsf-validation-msg text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Hidden file input -->\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        [attr.multiple]=\"options.isMultipleFile ? 'multiple' : null\" name=\"file\" type=\"file\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType === 1 ? '' : 'col-md-9'\" [id]=\"options.name\"\r\n        #fileInputControl [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- Click to upload (no drop zone) -->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <!-- Upload icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <!-- Upload text -->\r\n          <div class=\"bbsf-validation-msg text-center\">\r\n            {{ utilityService.getResourceValue('Upload') }}\r\n          </div>\r\n\r\n          <!-- Validation messages -->\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\">\r\n          </div>\r\n\r\n          <div class=\"bbsf-validation-msg text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Hidden file input -->\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        [attr.multiple]=\"options.isMultipleFile ? 'multiple' : null\" name=\"file\" type=\"file\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType === 1 ? '' : 'col-md-9'\" [id]=\"options.name\" #fileInput\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- Read-only state with no files -->\r\n    <div *ngIf=\"options.isReadonly && (!options.value || (uploader.queue && uploader.queue.length === 0))\">\r\n      <span class=\"readonly-view\">{{ utilityService.getResourceValue('NA') }}</span>\r\n    </div>\r\n  </div>\r\n  <!-- Uploaded files list -->\r\n  <div class=\"uploaded-items\" *ngIf=\"shouldShowFileList()\">\r\n    <div class=\"btn-group\" *ngFor=\"let item of uploader.queue; trackBy: trackByFunction\">\r\n\r\n      <!-- Async upload completed files -->\r\n      <ng-container *ngIf=\"item?.progress === 100 && options.isUploadFileAsync\">\r\n        <!-- Download link - always visible -->\r\n        <button *ngIf=\"getFileDownloadUrl(item); else noUrlTemplate\" type=\"button\"\r\n          class=\"btn-download-file btn-sm btn-progress-upload\" (click)=\"downloadFile(item)\"\r\n          [title]=\"'Download ' + getFileName(item)\">\r\n          <span class=\"file-name\">{{ getFileName(item) }}</span>\r\n        </button>\r\n\r\n        <!-- File name display when no URL available -->\r\n        <ng-template #noUrlTemplate>\r\n          <span class=\"btn-download-file btn-sm btn-progress-upload\" [title]=\"getFileName(item)\">\r\n            <span class=\"file-name\">{{ getFileName(item) }}</span>\r\n          </span>\r\n        </ng-template>\r\n\r\n        <!-- Remove button - only show when not readonly and not disabled -->\r\n        <button *ngIf=\"isRemoveEnabled()\" class=\"btn btn-download-file btn-sm\" type=\"button\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\" [attr.aria-label]=\"'Remove ' + getFileName(item)\"\r\n          [title]=\"'Remove ' + getFileName(item)\">\r\n          <!-- Delete icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <!-- Sync upload files -->\r\n      <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n        <!-- Download link - always visible -->\r\n        <button type=\"button\" class=\"btn btn-download-file btn-sm\" (click)=\"downloadFile(item)\"\r\n          [title]=\"'Download ' + getFileName(item)\">\r\n          <!-- Download icon -->\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ getFileName(item) }}</span>\r\n        </button>\r\n\r\n        <!-- Remove button - only show when not readonly and not disabled -->\r\n        <button *ngIf=\"isRemoveEnabled()\" class=\"btn btn-download-file btn-sm btn-danger\" type=\"button\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\" [attr.aria-label]=\"'Remove ' + getFileName(item)\"\r\n          [title]=\"'Remove ' + getFileName(item)\">\r\n          <i class=\"fa fa-times px-0\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <!-- File upload progress indicators -->\r\n  <div *ngFor=\"let item of uploader.queue; trackBy: trackByFunction\">\r\n    <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile }\"\r\n      *ngIf=\"item?.progress < 100 && options.isUploadFileAsync && !options.isReadonly\">\r\n\r\n      <div class=\"upload-items-toolbar\">\r\n        <h4>{{ getFileName(item) }}</h4>\r\n        <button *ngIf=\"isRemoveEnabled()\" type=\"button\" class=\"btn-cancel-upload\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\"\r\n          [attr.aria-label]=\"'Cancel upload for ' + getFileName(item)\">\r\n          <!-- Cancel icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_1324_13216)\">\r\n              <path opacity=\"0.4\"\r\n                d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n                stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_1324_13216\">\r\n                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"progress\">\r\n        <div class=\"progress-bar\" role=\"progressbar\" [attr.aria-valuenow]=\"item?.progress\" aria-valuemin=\"0\"\r\n          aria-valuemax=\"100\" [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\"\r\n          *ngIf=\"item?.progress > 0\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Validation and description section -->\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- Validation messages -->\r\n    <div class=\"bbsf-validation\" *ngIf=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      {{ getErrorValidation(fileUploadFormControl.errors | keyvalue) }}\r\n    </div>\r\n\r\n    <!-- Control description -->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription\">\r\n      {{ options.labelDescription }}\r\n    </div>\r\n\r\n    <!-- Reset error state -->\r\n    <div *ngIf=\"(group.valid && group.dirty && group.touched) || (group.untouched && group.invalid && group.dirty)\">\r\n      {{ resetError() }}\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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['url'] }}\" class=\"btn btn-download-file btn-sm\" download>\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\"></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-FileUpload', 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      <!-- Required asterisk -->\r\n      <span *ngIf=\"options.isRequired && !options.isReadonly && (options.showAsterisk || true)\"\r\n        class=\"text-danger\">*</span>\r\n    </label>\r\n    <!-- Drop zone enabled -->\r\n    <div ng2FileDrop class=\"bbsf-input-container {{ options.extraClasses }}\"\r\n      *ngIf=\"options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      [ngClass]=\"{ 'another-file-over-class': hasAnotherDropZoneOver }\" (onFileDrop)=\"onFileChange()\"\r\n      (fileOver)=\"fileOverAnother($event)\" [uploader]=\"uploader\" [accept]=\"acceptedType\" [id]=\"options.name\"\r\n      [attr.multiple]=\"options.isMultipleFile ? 'multiple' : null\"\r\n      [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\"\r\n      (click)=\"fileInputControl.click()\">\r\n\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <!-- Upload icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <!-- Instruction text -->\r\n          <div class=\"bbsf-validation-msg validation-msg-header text-center\">\r\n            {{ utilityService.getResourceValue('DragAndDropHere') }}\r\n          </div>\r\n\r\n          <!-- Validation messages -->\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\">\r\n          </div>\r\n\r\n          <div class=\"bbsf-validation-msg text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Hidden file input -->\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        [attr.multiple]=\"options.isMultipleFile ? 'multiple' : null\" name=\"file\" type=\"file\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType === 1 ? '' : 'col-md-9'\" [id]=\"options.name\"\r\n        #fileInputControl [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- Click to upload (no drop zone) -->\r\n    <div class=\"bbsf-input-container\" *ngIf=\"!options.isDropZone && !isHideInput() && !options.isReadonly\"\r\n      (click)=\"fileInput.click()\">\r\n\r\n      <div class=\"dropzone-label\">\r\n        <div class=\"svg-and-validation\">\r\n          <!-- Upload icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"70\" height=\"70\" viewBox=\"0 0 70 70\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M58.333 48.8332C61.8957 45.8908 64.1663 41.4397 64.1663 36.4583C64.1663 27.5988 56.9843 20.4167 48.1247 20.4167C47.4874 20.4167 46.8912 20.0842 46.5675 19.5351C42.7641 13.0808 35.7417 8.75 27.708 8.75C15.6268 8.75 5.83301 18.5438 5.83301 30.625C5.83301 36.6511 8.26974 42.1082 12.2116 46.0644\"\r\n              stroke=\"#4B5489\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path d=\"M23.333 46.6667L34.9997 35M34.9997 35L46.6663 46.6667M34.9997 35V61.25\" stroke=\"#4B5489\"\r\n              stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n\r\n          <!-- Upload text -->\r\n          <div class=\"bbsf-validation-msg text-center\">\r\n            {{ utilityService.getResourceValue('Upload') }}\r\n          </div>\r\n\r\n          <!-- Validation messages -->\r\n          <div class=\"bbsf-validation-msg text-center\" *ngIf=\"validationMessage\" [innerHTML]=\"validationMessage\">\r\n          </div>\r\n\r\n          <div class=\"bbsf-validation-msg text-center text-danger\"\r\n            *ngIf=\"validationCountMessage && options.isMultipleFile && options.maxNoOfFiles > 0\"\r\n            [innerHTML]=\"validationCountMessage\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Hidden file input -->\r\n      <input ng2FileSelect [uploader]=\"uploader\" [accept]=\"acceptedType\"\r\n        class=\"fileSelector customFileUploadPlacment hidden v-required-multiplefiles d-none\"\r\n        [attr.multiple]=\"options.isMultipleFile ? 'multiple' : null\" name=\"file\" type=\"file\" autocomplete=\"off\"\r\n        (change)=\"onFileChange()\" [ngClass]=\"options.viewType === 1 ? '' : 'col-md-9'\" [id]=\"options.name\" #fileInput\r\n        [class.is-invalid]=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\" />\r\n    </div>\r\n    <!-- Read-only state with no files -->\r\n    <div *ngIf=\"options.isReadonly && (!options.value || (uploader.queue && uploader.queue.length === 0))\">\r\n      <span class=\"readonly-view\">{{ utilityService.getResourceValue('NA') }}</span>\r\n    </div>\r\n  </div>\r\n  <!-- Uploaded files list -->\r\n  <div class=\"uploaded-items\" *ngIf=\"shouldShowFileList()\">\r\n    <div class=\"btn-group\" *ngFor=\"let item of uploader.queue; trackBy: trackByFunction\">\r\n\r\n      <!-- Async upload completed files -->\r\n      <ng-container *ngIf=\"item?.progress === 100 && options.isUploadFileAsync\">\r\n        <!-- Download link - always visible -->\r\n        <button *ngIf=\"getFileDownloadUrl(item); else noUrlTemplate\" type=\"button\"\r\n          class=\"btn-download-file btn-sm btn-progress-upload\" (click)=\"downloadFile(item)\"\r\n          [title]=\"'Download ' + getFileName(item)\">\r\n          <span class=\"file-name\">{{ getFileName(item) }}</span>\r\n        </button>\r\n\r\n        <!-- File name display when no URL available -->\r\n        <ng-template #noUrlTemplate>\r\n          <span class=\"btn-download-file btn-sm btn-progress-upload\" [title]=\"getFileName(item)\">\r\n            <span class=\"file-name\">{{ getFileName(item) }}</span>\r\n          </span>\r\n        </ng-template>\r\n\r\n        <!-- Remove button - only show when not readonly and not disabled -->\r\n        <button *ngIf=\"isRemoveEnabled()\" class=\"btn btn-download-file btn-sm\" type=\"button\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\" [attr.aria-label]=\"'Remove ' + getFileName(item)\"\r\n          [title]=\"'Remove ' + getFileName(item)\">\r\n          <!-- Delete icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n            <path opacity=\"0.4\"\r\n              d=\"M9.33301 3.70584V3.26663C9.33301 2.65166 9.33301 2.34419 9.20587 2.1093C9.09405 1.9027 8.91555 1.73471 8.69604 1.62944C8.44647 1.50977 8.11977 1.50977 7.46638 1.50977H6.53305C5.87965 1.50977 5.55296 1.50977 5.30339 1.62944C5.08387 1.73471 4.90539 1.9027 4.79354 2.1093C4.66638 2.34419 4.66638 2.65166 4.66638 3.26663V3.70584\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            <path\r\n              d=\"M1.75 3.70605H12.25M11.0834 3.70605V9.8551C11.0834 10.7775 11.0834 11.2387 10.8926 11.591C10.7248 11.901 10.4571 12.1529 10.1278 12.3109C9.75345 12.4904 9.26345 12.4904 8.28334 12.4904H5.71666C4.73658 12.4904 4.24653 12.4904 3.87218 12.3109C3.5429 12.1529 3.27519 11.901 3.10741 11.591C2.91666 11.2387 2.91666 10.7775 2.91666 9.8551V3.70605\"\r\n              stroke=\"#D83731\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          </svg>\r\n        </button>\r\n      </ng-container>\r\n\r\n      <!-- Sync upload files -->\r\n      <ng-container *ngIf=\"!options.isUploadFileAsync\">\r\n        <!-- Download link - always visible -->\r\n        <button type=\"button\" class=\"btn btn-download-file btn-sm\" (click)=\"downloadFile(item)\"\r\n          [title]=\"'Download ' + getFileName(item)\">\r\n          <!-- Download icon -->\r\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path\r\n              d=\"M21 22H3C2.4 22 2 21.6 2 21C2 20.4 2.4 20 3 20H21C21.6 20 22 20.4 22 21C22 21.6 21.6 22 21 22ZM13 13.4V3C13 2.4 12.6 2 12 2C11.4 2 11 2.4 11 3V13.4H13Z\"\r\n              fill=\"currentColor\"></path>\r\n            <path opacity=\"0.3\" d=\"M7 13.4H17L12.7 17.7C12.3 18.1 11.7 18.1 11.3 17.7L7 13.4Z\" fill=\"currentColor\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"file-name\">{{ getFileName(item) }}</span>\r\n        </button>\r\n\r\n        <!-- Remove button - only show when not readonly and not disabled -->\r\n        <button *ngIf=\"isRemoveEnabled()\" class=\"btn btn-download-file btn-sm btn-danger\" type=\"button\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\" [attr.aria-label]=\"'Remove ' + getFileName(item)\"\r\n          [title]=\"'Remove ' + getFileName(item)\">\r\n          <i class=\"fa fa-times px-0\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <!-- File upload progress indicators -->\r\n  <div *ngFor=\"let item of uploader.queue; trackBy: trackByFunction\">\r\n    <div class=\"upload-items\" [ngClass]=\"{ 'mt-4': options.isMultipleFile }\"\r\n      *ngIf=\"item?.progress < 100 && options.isUploadFileAsync && !options.isReadonly\">\r\n\r\n      <div class=\"upload-items-toolbar\">\r\n        <h4>{{ getFileName(item) }}</h4>\r\n        <button *ngIf=\"isRemoveEnabled()\" type=\"button\" class=\"btn-cancel-upload\"\r\n          (click)=\"item.remove(); removeFromControlValue(item)\"\r\n          [attr.aria-label]=\"'Cancel upload for ' + getFileName(item)\">\r\n          <!-- Cancel icon -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_1324_13216)\">\r\n              <path opacity=\"0.4\"\r\n                d=\"M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z\"\r\n                stroke=\"#DBE1F0\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              <path d=\"M11.25 6.75L6.75 11.25M6.75 6.75L11.25 11.25\" stroke=\"#DBE1F0\" stroke-width=\"2\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_1324_13216\">\r\n                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"progress\">\r\n        <div class=\"progress-bar\" role=\"progressbar\" [attr.aria-valuenow]=\"item?.progress\" aria-valuemin=\"0\"\r\n          aria-valuemax=\"100\" [class.file-uploaded]=\"item?.progress < 100\" [style.width.%]=\"item?.progress\"\r\n          *ngIf=\"item?.progress > 0\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Validation and description section -->\r\n  <div class=\"subtext-container\" *ngIf=\"!options.isReadonly\">\r\n    <!-- Validation messages -->\r\n    <div class=\"bbsf-validation\" *ngIf=\"fileUploadFormControl.invalid && fileUploadFormControl.touched\">\r\n      {{ getErrorValidation(fileUploadFormControl.errors | keyvalue) }}\r\n    </div>\r\n\r\n    <!-- Control description -->\r\n    <div class=\"bbsf-control-desc\" *ngIf=\"options.labelDescription\">\r\n      {{ options.labelDescription }}\r\n    </div>\r\n\r\n    <!-- Reset error state -->\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>" }]
         }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
                     type: Optional
                 }] }, { type: i2.FormGroupDirective }, { type: ControlUtility }, { type: i3.UtilityService }, { type: i3.ControlValidationService }, { type: GlobalSettings }, { type: FileUploadService }], propDecorators: { fileInput: [{
@@ -9251,6 +9711,7 @@ class BBSFControlsModule {
             NgbModal,
             NgbActiveModal,
             DatePipe,
+            KeyValuePipe,
             BBSFDateTimePipe,
             BBSFDatePipe,
             RenderComponentService,
@@ -9374,6 +9835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         NgbModal,
                         NgbActiveModal,
                         DatePipe,
+                        KeyValuePipe,
                         BBSFDateTimePipe,
                         BBSFDatePipe,
                         RenderComponentService,
@@ -9748,6 +10210,7 @@ class FileDTO {
         this.bytes = undefined;
         this.fileSizeInMB = undefined;
         this.fileURL = undefined;
+        this.fullFileURL = undefined;
         this.isNew = false;
     }
 }