@bnsights/bbsf-controls 1.0.178 → 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);
         };
@@ -2557,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;
@@ -2588,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;
@@ -2661,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;
@@ -2684,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({
@@ -2829,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() {
@@ -2873,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
@@ -2945,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) {