@bnsights/bbsf-controls 1.0.177 → 1.0.179

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -2122,6 +2122,7 @@ class FileUploadComponent {
         this.ERROR_DISPLAY_DURATION = 5000;
         this.MAX_MEMORY_USAGE = 100 * 1024 * 1024; // 100MB limit
         this.currentMemoryUsage = 0;
+        this.hasClearedRequiredError = false; // Track if required error was already cleared
         this.isSubmitted = false;
         this.OnChange = new EventEmitter();
         this.isUploadComplete = new EventEmitter();
@@ -2143,6 +2144,11 @@ class FileUploadComponent {
         this.removeRequiredValidation = () => {
             this.controlUtility.removeRequiredValidation(this.fileUploadFormControl, this.validationRules, this.options);
         };
+        this.removeRequiredValidatorOnly = () => {
+            this.validationRules = this.validationRules.filter(validator => validator !== Validators.required);
+            this.fileUploadFormControl.setValidators(this.validationRules);
+            this.fileUploadFormControl.updateValueAndValidity();
+        };
         this.addRequiredValidation = () => {
             this.controlUtility.addRequiredValidation(this.fileUploadFormControl, this.validationRules, this.options);
         };
@@ -2238,14 +2244,51 @@ class FileUploadComponent {
         }
     }
     setupFileTypeValidation() {
-        if (this.options.fileUploadAcceptsTypes?.length) {
+        if (!this.options.fileUploadAcceptsTypes?.length) {
+            console.warn('FileUpload: No file types specified in fileUploadAcceptsTypes');
+            return;
+        }
+        try {
             this.processAcceptedTypes();
             this.buildValidationMessage();
+            // Log the processed types for debugging
+            console.log('FileUpload: Processed file types:', {
+                original: this.options.fileUploadAcceptsTypes,
+                processed: this.acceptedTypeArray,
+                acceptAttribute: this.acceptedType,
+                displayTypes: this.toolTipTypeArray
+            });
+        }
+        catch (error) {
+            console.error('FileUpload: Error processing file types:', error);
+            // Fallback to accepting all files if processing fails
+            this.acceptedType = '';
+            this.acceptedTypeArray = [];
+            this.toolTipTypeArray = [];
         }
     }
     processAcceptedTypes() {
-        this.acceptedType = this.options.fileUploadAcceptsTypes.join(',');
-        this.acceptedTypeArray = this.options.fileUploadAcceptsTypes.filter(type => type.trim());
+        // Process each file type and extract individual MIME types
+        const allMimeTypes = [];
+        for (const fileType of this.options.fileUploadAcceptsTypes) {
+            if (fileType.includes(',')) {
+                // Handle types like ImageTypes that contain multiple MIME types
+                const mimeTypes = fileType.split(',').map(type => type.trim());
+                allMimeTypes.push(...mimeTypes);
+            }
+            else {
+                // Single MIME type
+                allMimeTypes.push(fileType);
+            }
+        }
+        // Filter out empty strings and normalize MIME types
+        const normalizedMimeTypes = allMimeTypes
+            .filter(type => type.trim())
+            .map(type => type.trim().toLowerCase());
+        // Create the accept attribute string for HTML input
+        this.acceptedType = normalizedMimeTypes.join(',');
+        // Store the processed array for validation (keep original case for display)
+        this.acceptedTypeArray = allMimeTypes.filter(type => type.trim());
         const mimeTypeMap = this.getMimeTypeMap();
         for (const type of this.acceptedTypeArray) {
             const displayType = mimeTypeMap[type];
@@ -2266,17 +2309,23 @@ class FileUploadComponent {
             'image/png': 'PNG',
             'image/bmp': 'BMP',
             'image/jpeg': 'JPEG',
+            'image/svg+xml': 'SVG',
             'application/zip': 'ZIP',
             'application/x-rar-compressed': 'RAR',
+            'video/webm': 'WebM',
+            'video/ogg': 'OGG',
             'video/mp4': 'MP4',
-            'video/avi': 'AVI',
             'video/quicktime': 'MOV',
+            'video/x-msvideo': 'AVI',
+            'video/x-ms-wmv': 'WMV',
+            'video/avi': 'AVI',
             'video/mpeg': 'MPEG',
-            'audio/mpeg': 'MP3',
             'video/x-flv': 'FLV',
-            'video/x-ms-wmv': 'WMV',
-            'image/svg+xml': 'SVG',
+            'audio/mpeg': 'MP3',
             'text/plain': 'Txt',
+            'text/xml': 'XML',
+            'application/json': 'JSON',
+            'application/octet-stream': 'Binary',
             'application/BN': 'License'
         };
     }
@@ -2294,7 +2343,7 @@ class FileUploadComponent {
         if (this.options.maxNoOfFiles > 0) {
             messages.push(`${this.utilityService.getResourceValue('MaxFileCountValidationKey')}${this.options.maxNoOfFiles}`);
         }
-        this.validationMessage = messages.join('<br/>');
+        this.validationMessage = messages.join(' <br/> ');
     }
     setupFormControl() {
         this.group.addControl(this.options.name, new FormControl(''));
@@ -2514,9 +2563,28 @@ class FileUploadComponent {
     }
     showFileCountError(errorKey, message) {
         const currentErrors = this.fileUploadFormControl.errors || {};
-        currentErrors[errorKey] = message;
-        this.fileUploadFormControl.setErrors(currentErrors);
+        // Preserve existing errors and add the new one
+        const newErrors = { ...currentErrors };
+        newErrors[errorKey] = message;
+        this.fileUploadFormControl.setErrors(newErrors);
         this.fileUploadFormControl.markAsTouched();
+        // Force the form control to be invalid
+        this.fileUploadFormControl.markAsDirty();
+        // Ensure the error persists
+        this.forceValidationErrorDisplay(errorKey, message);
+    }
+    forceValidationErrorDisplay(errorKey, message) {
+        // Force the validation error to persist by re-applying it after a short delay
+        setTimeout(() => {
+            const currentErrors = this.fileUploadFormControl.errors || {};
+            if (!currentErrors[errorKey]) {
+                const newErrors = { ...currentErrors };
+                newErrors[errorKey] = message;
+                this.fileUploadFormControl.setErrors(newErrors);
+                this.fileUploadFormControl.markAsTouched();
+                this.fileUploadFormControl.markAsDirty();
+            }
+        }, 100);
     }
     clearFileCountError(errorKey) {
         const currentErrors = this.fileUploadFormControl.errors;
@@ -2545,9 +2613,15 @@ class FileUploadComponent {
         const totalSizeMsg = this.utilityService.getResourceValue('TotalFileSizeExceeded')
             .replace('{maxSize}', this.options.maxSizeForAllFilesInMB.toString());
         const currentErrors = this.fileUploadFormControl.errors || {};
-        currentErrors['MaxSizeForAllFilesInMB'] = totalSizeMsg;
-        this.fileUploadFormControl.setErrors(currentErrors);
+        // Preserve existing errors and add the new one
+        const newErrors = { ...currentErrors };
+        newErrors['MaxSizeForAllFilesInMB'] = totalSizeMsg;
+        this.fileUploadFormControl.setErrors(newErrors);
         this.fileUploadFormControl.markAsTouched();
+        // Force the form control to be invalid
+        this.fileUploadFormControl.markAsDirty();
+        // Ensure the error persists
+        this.forceValidationErrorDisplay('MaxSizeForAllFilesInMB', totalSizeMsg);
     }
     validateFileSize(file) {
         const maxFileSize = this.options.fileMaxSizeInMB * this.BYTES_TO_MB;
@@ -2576,8 +2650,11 @@ class FileUploadComponent {
         if (!this.options.fileUploadAcceptsTypes?.length) {
             return true;
         }
-        const fileType = file.type;
-        return this.acceptedTypeArray.some(type => type.toLowerCase() === fileType.toLowerCase());
+        const fileType = file.type?.toLowerCase();
+        if (!fileType) {
+            return false;
+        }
+        return this.acceptedTypeArray.some(type => type.toLowerCase() === fileType);
     }
     validateDuplicateFileName(file, currentElement) {
         if (!file?.name) {
@@ -2615,15 +2692,22 @@ class FileUploadComponent {
             return;
         const errorMessage = errors.join('<br/>');
         this.setValidationError('InvalidFiles', errorMessage);
+        // Increase the error display duration to prevent errors from disappearing too quickly
         setTimeout(() => {
             this.clearInvalidFilesError();
-        }, this.ERROR_DISPLAY_DURATION);
+        }, this.ERROR_DISPLAY_DURATION * 2); // Double the duration
     }
     setValidationError(errorKey, errorMessage) {
         const currentErrors = this.fileUploadFormControl.errors || {};
-        currentErrors[errorKey] = errorMessage;
-        this.fileUploadFormControl.setErrors(currentErrors);
+        // Preserve existing errors and add the new one
+        const newErrors = { ...currentErrors };
+        newErrors[errorKey] = errorMessage;
+        this.fileUploadFormControl.setErrors(newErrors);
         this.fileUploadFormControl.markAsTouched();
+        // Force the form control to be invalid
+        this.fileUploadFormControl.markAsDirty();
+        // Ensure the error persists
+        this.forceValidationErrorDisplay(errorKey, errorMessage);
     }
     clearInvalidFilesError() {
         const currentErrors = this.fileUploadFormControl.errors;
@@ -2638,9 +2722,16 @@ class FileUploadComponent {
         }
     }
     setFormControlError(errorKey, errorValue) {
-        this.fileUploadFormControl.setErrors({ [errorKey]: errorValue });
+        const currentErrors = this.fileUploadFormControl.errors || {};
+        // Preserve existing errors and add the new one
+        const newErrors = { ...currentErrors };
+        newErrors[errorKey] = errorValue;
+        this.fileUploadFormControl.setErrors(newErrors);
         this.fileUploadFormControl.markAsTouched();
+        this.fileUploadFormControl.markAsDirty();
         this.uploader.queue = [];
+        // Ensure the error persists
+        this.forceValidationErrorDisplay(errorKey, errorValue);
     }
     handleAsyncFileUpload(element, filesArray) {
         const uploadSubscription = this.fileUploadService.uploadFile(element._file).subscribe({
@@ -2783,11 +2874,30 @@ class FileUploadComponent {
         this.options.value = value;
     }
     preserveErrorsAndUpdateValue(value) {
-        const currentErrors = this.fileUploadFormControl.errors;
+        // If we have a valid file value and haven't cleared the required error yet, remove it
+        if (this.hasValidFileValue(value) && !this.hasClearedRequiredError) {
+            // Use the custom method that only removes the validator without changing the isRequired option
+            // This keeps the asterisk visible while removing the validation logic
+            this.removeRequiredValidatorOnly();
+            // Mark that we've cleared the required error
+            this.hasClearedRequiredError = true;
+        }
+        // Set the form control value
         this.fileUploadFormControl.setValue(value, { emitEvent: false });
+        // Update the form group control value
         this.group.get(this.options.name)?.setValue(value, { emitEvent: false });
-        if (currentErrors) {
-            this.fileUploadFormControl.setErrors(currentErrors);
+    }
+    hasValidFileValue(value) {
+        if (!value)
+            return false;
+        if (this.options.isMultipleFile) {
+            const multipleValue = value;
+            return (multipleValue.uploadedFiles && multipleValue.uploadedFiles.length > 0) ||
+                (multipleValue.existingFiles && multipleValue.existingFiles.length > 0);
+        }
+        else {
+            const singleValue = value;
+            return singleValue.file && singleValue.file.fileName !== '';
         }
     }
     handlePatchAndEmit() {
@@ -2827,13 +2937,15 @@ class FileUploadComponent {
         this.fileUploadModel = null;
         if (this.options.isRequired) {
             this.fileUploadFormControl.markAsTouched();
+            // Use the existing utility function to add required validation back
+            this.addRequiredValidation();
         }
-        const currentErrors = this.fileUploadFormControl.errors;
+        // Reset the flag so required validation can work again
+        this.hasClearedRequiredError = false;
         this.group.get(this.options.name)?.setValue(this.fileUploadModel, { emitEvent: false });
-        if (currentErrors) {
-            this.fileUploadFormControl.setErrors(currentErrors);
-        }
         this.options.value = this.fileUploadModel;
+        // Re-evaluate all validations after file removal
+        this.reEvaluateAllValidations();
     }
     handleMultipleFileRemoval(item) {
         // Clean up blob URL
@@ -2899,17 +3011,97 @@ class FileUploadComponent {
                 MinFileCountValidationKey: this.options.minNoOfFiles
             });
             this.fileUploadFormControl.markAsTouched();
+            this.addRequiredValidation();
+            this.hasClearedRequiredError = false;
+        }
+        // Re-evaluate all validations after file removal
+        this.reEvaluateAllValidations();
+    }
+    reEvaluateAllValidations() {
+        // Clear all existing validation errors first
+        this.fileUploadFormControl.setErrors(null);
+        // Re-apply required validation if needed
+        if (this.options.isRequired) {
+            this.addRequiredValidation();
+        }
+        // Re-validate file count constraints
+        this.reValidateFileCountConstraints();
+        // Re-validate total file size
+        this.reValidateTotalFileSize();
+        // Re-validate individual files
+        this.reValidateIndividualFiles();
+        // Clear validation errors that are no longer applicable
+        this.clearObsoleteValidationErrors();
+        // Update form control validity
+        this.fileUploadFormControl.updateValueAndValidity();
+    }
+    clearObsoleteValidationErrors() {
+        const currentFileCount = this.uploader.queue.length;
+        // Clear max file count error if current count is within limit
+        if (this.options.maxNoOfFiles > 0 && currentFileCount <= this.options.maxNoOfFiles) {
+            this.clearFileCountError('MaxFileCountValidationKey');
+        }
+        // Clear min file count error if current count meets minimum requirement
+        if (this.options.minNoOfFiles > 0 && currentFileCount >= this.options.minNoOfFiles) {
+            this.clearFileCountError('MinFileCountValidationKey');
+        }
+        // Clear total size error if current total size is within limit
+        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.clearFileCountError('MaxSizeForAllFilesInMB');
+            }
+        }
+    }
+    reValidateFileCountConstraints() {
+        const currentFileCount = this.uploader.queue.length;
+        // Check minimum file count
+        if (this.options.minNoOfFiles > 0 && currentFileCount < this.options.minNoOfFiles) {
+            const minFileMsg = this.utilityService.getResourceValue('MinimumFilesRequired')
+                .replace('{count}', this.options.minNoOfFiles.toString());
+            this.showFileCountError('MinFileCountValidationKey', minFileMsg);
+        }
+        // Check maximum file count
+        if (this.options.maxNoOfFiles > 0 && currentFileCount > this.options.maxNoOfFiles) {
+            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}', currentFileCount.toString());
+            this.showFileCountError('MaxFileCountValidationKey', finalMsg);
+        }
+    }
+    reValidateTotalFileSize() {
+        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();
+            }
+        }
+    }
+    reValidateIndividualFiles() {
+        // Re-validate each remaining file for size and type
+        for (const element of this.uploader.queue) {
+            const file = element.file;
+            if (!file)
+                continue;
+            // Check file size
+            if (!this.validateIndividualFileSize(file)) {
+                this.setFormControlError('FileMaxSizeInMB', `${this.options.fileMaxSizeInMB}MB`);
+            }
+            // Check file type
+            if (!this.validateIndividualFileType(file)) {
+                this.setFormControlError('ToolTipTypeError', this.toolTipTypeArray);
+            }
         }
     }
     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) {
@@ -3119,11 +3311,11 @@ class FileUploadComponent {
         }
     }
     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-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" }] }); }
+    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      <span [innerHTML]=\"getErrorValidation(fileUploadFormControl.errors | keyvalue)\"></span>\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-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>" }]
+            args: [{ selector: 'BBSF-FileUpload', standalone: false, template: "<div class=\"form-group bbsf-control bbsf-file-upload\" [formGroup]=\"group\">\r\n  <div [ngClass]=\"options.viewType === 1 ? 'bbsf-vertical' : 'bbsf-horizontal'\">\r\n    <!-- Label -->\r\n    <label [hidden]=\"options.hideLabel\" class=\"bbsf-label {{ options.labelExtraClasses }}\">\r\n      {{ options.labelValue }}\r\n      <!-- 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      <span [innerHTML]=\"getErrorValidation(fileUploadFormControl.errors | keyvalue)\"></span>\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: [{