@bnsights/bbsf-controls 1.2.27 → 1.2.29

package/README.md

@@ -327,19 +327,19 @@ import { BBSFFormsBasicModule, BBSFUploadsModule } from '@bnsights/bbsf-controls
 
 ---
 
-## 🔧 Troubleshooting
-
-### Markdown editor assets and behavior
-
-`BBSF-MarkdownEditor` is now powered by Tiptap and no longer depends on the previous third-party markdown editor, Ace, runtime markdown scripts, or copied markdown editor assets.
-
-The control keeps the BBSF API and form integration, but the old split preview panel, `customRender`, and built-in image upload behavior are no longer provided by the editor engine.
-
----
-
-### Error: `export 'DOCUMENT' (imported as 'DOCUMENT') was not found in '@angular/core'`
-
-**Problem:** This error occurs when using Angular 19+ with the `BBSFEditorsModule` (which uses `@kolkov/angular-editor`). Angular 19's build system tries to process the `@kolkov/angular-editor` package and encounters compatibility issues.
+## 🔧 Troubleshooting
+
+### Markdown editor assets and behavior
+
+`BBSF-MarkdownEditor` is now powered by Tiptap and no longer depends on the previous third-party markdown editor, Ace, runtime markdown scripts, or copied markdown editor assets.
+
+The control keeps the BBSF API and form integration, but the old split preview panel, `customRender`, and built-in image upload behavior are no longer provided by the editor engine.
+
+---
+
+### Error: `export 'DOCUMENT' (imported as 'DOCUMENT') was not found in '@angular/core'`
+
+**Problem:** This error occurs when using Angular 19+ with the `BBSFEditorsModule` (which uses `@kolkov/angular-editor`). Angular 19's build system tries to process the `@kolkov/angular-editor` package and encounters compatibility issues.
 
 **Solution 1: Install @kolkov/angular-editor in your consuming app (Recommended)**
 
@@ -398,38 +398,61 @@ If the issue persists, consider using a different HTML editor component that's c
 
 ---
 
-## Change Log
-
-## 1.2.27 / 22-06-2026
-
-=====================
-
-- Added optional image cropper support to `BBSF-FileUpload` through `FileUploadOptions.cropperOptions`.
-- Added exported cropper option models for configuring modal behavior, orientation presets, and cancel behavior.
-- Preserved existing upload behavior unless cropper options are explicitly enabled.
-
-## 1.2.26 / 15-06-2026
-
-=====================
-
-- Added explicit package exports for controls SCSS assets so Angular browser and application builders can resolve deep style imports from consuming packages.
-- Kept backward compatibility for extensionless Sass imports such as `@bnsights/bbsf-controls/src/lib/assets/sass/variables`.
-- Marked CSS, SCSS, and packaged assets as side-effectful so published global styles are preserved by consumers.
-- Added `LogoCropperComponent` as a standalone upload modal component exported from `@bnsights/bbsf-controls`.
-- Re-exported `LogoCropperComponent` through `BBSFUploadsModule` and the package public API.
-- Added `ngx-image-cropper` dependency for logo cropping support with Angular 19-compatible peer dependencies.
-
-## 1.2.25 / 15-06-2026
-
-=====================
-
-- Replaced the BBSF MarkdownEditor engine with a Tiptap-powered markdown editor while keeping the existing `BBSF-MarkdownEditor` selector, options model, form integration, validation, and `BBSFEditorsModule` export.
-- Removed the old markdown editor runtime asset dependency path, including Ace and copied markdown editor assets.
-- Added Tiptap and PrimeIcons dependencies for the new MarkdownEditor toolbar and markdown serialization.
-
-## 1.2.24 / 14-06-2026
-
-=====================
+## Change Log
+
+## 1.2.29 / 05-07-2026
+
+=====================
+
+- Added `allowMoveImage` support to `LogoCropperComponent` to pan the source image under a static crop box, with the CSS pointer-events fix (`.ngx-ic-cropper { pointer-events: none; }`) required to let drags reach the image instead of the crop-box overlay.
+- Added `containWithinAspectRatio` support; padding is now computed from an `effectiveAspectRatio` getter so it matches the static crop box shape when one is set, instead of a mismatched `aspectRatio` input.
+- Added 90° rotate left/right buttons using `canvasRotation` (does not clip corners like `transform.rotate`).
+- Added a full reset button (zoom, pan, and rotation), replacing the previous zoom-only reset.
+- Added mouse-wheel zoom on the cropper.
+- Added `loadImageFailed` handling: logs the error, shows a toast, and dismisses the modal so the caller can clear the upload.
+- Added optional display scaling (`maxDisplayWidth`/`maxDisplayHeight`, default `0` = disabled) so small target crop sizes can be shown enlarged on screen while the exported file is resized back to the true target dimensions.
+- Extended `FileUploadCropperOptions` with `allowMoveImage`, `containWithinAspectRatio`, `maxDisplayWidth`, and `maxDisplayHeight`, threaded through `BBSF-FileUpload`'s cropper modal.
+- Added `ResetZoom` and `ImageLoadFailed` resource keys.
+- All additions are backward compatible; existing consumers are unaffected until they opt in.
+
+## 1.2.28 / 23-06-2026
+
+=====================
+
+- Added optional `FileUploadOptions` overrides for validation error message labels.
+- Supported host-provided localized labels for max file count, min file count, total size, file size, type tooltip, duplicate file, and required validation messages.
+- Threaded file upload options through validation helpers and applied the duplicate-file override message.
+
+## 1.2.27 / 22-06-2026
+
+=====================
+
+- Added optional image cropper support to `BBSF-FileUpload` through `FileUploadOptions.cropperOptions`.
+- Added exported cropper option models for configuring modal behavior, orientation presets, and cancel behavior.
+- Preserved existing upload behavior unless cropper options are explicitly enabled.
+
+## 1.2.26 / 15-06-2026
+
+=====================
+
+- Added explicit package exports for controls SCSS assets so Angular browser and application builders can resolve deep style imports from consuming packages.
+- Kept backward compatibility for extensionless Sass imports such as `@bnsights/bbsf-controls/src/lib/assets/sass/variables`.
+- Marked CSS, SCSS, and packaged assets as side-effectful so published global styles are preserved by consumers.
+- Added `LogoCropperComponent` as a standalone upload modal component exported from `@bnsights/bbsf-controls`.
+- Re-exported `LogoCropperComponent` through `BBSFUploadsModule` and the package public API.
+- Added `ngx-image-cropper` dependency for logo cropping support with Angular 19-compatible peer dependencies.
+
+## 1.2.25 / 15-06-2026
+
+=====================
+
+- Replaced the BBSF MarkdownEditor engine with a Tiptap-powered markdown editor while keeping the existing `BBSF-MarkdownEditor` selector, options model, form integration, validation, and `BBSFEditorsModule` export.
+- Removed the old markdown editor runtime asset dependency path, including Ace and copied markdown editor assets.
+- Added Tiptap and PrimeIcons dependencies for the new MarkdownEditor toolbar and markdown serialization.
+
+## 1.2.24 / 14-06-2026
+
+=====================
 
 - Add new file-upload props for override labels
 {
@@ -456,7 +479,7 @@ If the issue persists, consider using a different HTML editor component that's c
 - Fixed package stylesheet imports for Angular esbuild application builder compatibility.
 - Replaced webpack-era `/node_modules/...` SCSS imports in `src/lib/assets/Style.scss` with relative package imports.
 - Removed `.css` extensions from SCSS imports so Sass resolves and inlines vendor styles instead of leaving CSS `@import` statements for esbuild.
-- Fixed imports for Angular Material prebuilt theme, ngx-toastr, intl-tel-input, markdown editor styles, and angular-datetime-picker styles.
+- Fixed imports for Angular Material prebuilt theme, ngx-toastr, intl-tel-input, markdown editor styles, and angular-datetime-picker styles.
 
 ## 1.2.22 / 06-05-2026
 

package/fesm2022/bnsights-bbsf-controls.mjs

@@ -106,95 +106,95 @@ class ErrorMassageValidation {
         control.setErrors({ minlength: true });
         control.markAsTouched();
     }
-    getErrorMassageValidation(error) {
+    getErrorMassageValidation(error, options) {
         let result = '';
         switch (error.key) {
             case 'required':
-                result = this.utilityService.getResourceValue('RequiredValidationKey');
+                result = options?.requiredErrorMsg || this.utilityService.getResourceValue('RequiredValidationKey');
                 break;
             case 'email':
-                result = this.utilityService.getResourceValue('EmailValidationKey');
+                result = options?.emailErrorMsg || this.utilityService.getResourceValue('EmailValidationKey');
                 break;
             case 'EmailValidationKey':
-                result = this.utilityService.getResourceValue('EmailValidationKey');
+                result = options?.emailErrorMsg || this.utilityService.getResourceValue('EmailValidationKey');
                 break;
             case 'URLValidationKey':
-                result = this.utilityService.getResourceValue('urlValidationError');
+                result = options?.urlErrorMsg || this.utilityService.getResourceValue('urlValidationError');
                 break;
             case 'pattern':
-                result = this.utilityService.getResourceValue('NumberValidationKey');
+                result = options?.numberErrorMsg || this.utilityService.getResourceValue('NumberValidationKey');
                 break;
             case 'maxlength':
-                result = `${this.utilityService.getResourceValue('MaxLenghtValidationKey')} ${error.value.requiredLength}`;
+                result = `${options?.maxLengthErrorMsg || this.utilityService.getResourceValue('MaxLenghtValidationKey')} ${error.value.requiredLength}`;
                 break;
             case 'minlength':
-                result = `${this.utilityService.getResourceValue('MinLenghtValidationKey')} ${error.value.requiredLength}`;
+                result = `${options?.minLengthErrorMsg || this.utilityService.getResourceValue('MinLenghtValidationKey')} ${error.value.requiredLength}`;
                 break;
             case 'min':
-                result = `${this.utilityService.getResourceValue('MinValueValidationKey')} ${error.value.min}`;
+                result = `${options?.minValueErrorMsg || this.utilityService.getResourceValue('MinValueValidationKey')} ${error.value.min}`;
                 break;
             case 'max':
-                result = `${this.utilityService.getResourceValue('MaxValueValidationKey')} ${error.value.max}`;
+                result = `${options?.maxValueErrorMsg || this.utilityService.getResourceValue('MaxValueValidationKey')} ${error.value.max}`;
                 break;
             case 'IntegerNumberValidationKey':
-                result = this.utilityService.getResourceValue('IntegerNumberValidationKey');
+                result = options?.integerNumberErrorMsg || this.utilityService.getResourceValue('IntegerNumberValidationKey');
                 break;
             case 'PositiveNumberValidationKey':
-                result = this.utilityService.getResourceValue('PositiveNumberValidationKey');
+                result = options?.positiveNumberErrorMsg || this.utilityService.getResourceValue('PositiveNumberValidationKey');
                 break;
             case 'validatePhoneNumber':
-                result = this.utilityService.getResourceValue('PhoneNumberValidationKey');
+                result = options?.phoneNumberErrorMsg || this.utilityService.getResourceValue('PhoneNumberValidationKey');
                 break;
             case 'mask':
-                result = `${this.utilityService.getResourceValue('MaskValidationKey')} ${error.value.requiredMask}`;
+                result = `${options?.maskErrorMsg || this.utilityService.getResourceValue('MaskValidationKey')} ${error.value.requiredMask}`;
                 break;
             case 'passwordComplexityHasNumber':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasNumber');
+                result = options?.passwordHasNumberErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasNumber');
                 break;
             case 'ArabicLetterOnly':
-                result = this.utilityService.getResourceValue('ArabicLetterOnly');
+                result = options?.arabicLetterOnlyErrorMsg || this.utilityService.getResourceValue('ArabicLetterOnly');
                 break;
             case 'EnglishLetterOnly':
-                result = this.utilityService.getResourceValue('EnglishLetterOnly');
+                result = options?.englishLetterOnlyErrorMsg || this.utilityService.getResourceValue('EnglishLetterOnly');
                 break;
             case 'ArabicIsRequiredAndOnly50CharactersEnglish':
-                result = this.utilityService.getResourceValue('VAL_ArabicIsRequiredAndOnly50CharactersEnglish');
+                result = options?.arabicRequiredAndEnglishMax50ErrorMsg || this.utilityService.getResourceValue('VAL_ArabicIsRequiredAndOnly50CharactersEnglish');
                 break;
             case 'passwordComplexityHasCapitalLetter':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
+                result = options?.passwordHasCapitalLetterErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasCapitalLetter');
                 break;
             case 'passwordComplexityHasSmallLetter':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
+                result = options?.passwordHasSmallLetterErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasSmallLetter');
                 break;
             case 'passwordComplexityHasSpecialLetter':
-                result = this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
+                result = options?.passwordHasSpecialLetterErrorMsg || this.utilityService.getResourceValue('PasswordComplexityHasSpecialLetter');
                 break;
             case 'MaxWordCountValidationKey':
-                result = `${this.utilityService.getResourceValue('MaxWordCountValidationKey')} ${error.value}`;
+                result = `${options?.maxWordCountErrorMsg || this.utilityService.getResourceValue('MaxWordCountValidationKey')} ${error.value}`;
                 break;
             case 'NewSelectionValidationKey':
-                result = this.utilityService.getResourceValue('NewSelectionValidationKey');
+                result = options?.newSelectionErrorMsg || this.utilityService.getResourceValue('NewSelectionValidationKey');
                 break;
             case 'MaxFileCountValidationKey':
-                result = `${this.utilityService.getResourceValue('MaxFileCountValidationKey')} ${error.value}`;
+                result = `${options?.maxFileCountErrorMsg || this.utilityService.getResourceValue('MaxFileCountValidationKey')} ${error.value}`;
                 break;
             case 'MinFileCountValidationKey':
-                result = `${this.utilityService.getResourceValue('MinFileCountValidationKey')} ${error.value}`;
+                result = `${options?.minFileCountErrorMsg || this.utilityService.getResourceValue('MinFileCountValidationKey')} ${error.value}`;
                 break;
             case 'MaxSizeForAllFilesInMB':
-                result = `${this.utilityService.getResourceValue('MaxSizeForAllFilesInMB')} ${error.value}`;
+                result = `${options?.maxSizeTotalErrorMsg || this.utilityService.getResourceValue('MaxSizeForAllFilesInMB')} ${error.value}`;
                 break;
             case 'FileMaxSizeInMB':
-                result = `${this.utilityService.getResourceValue('FileMaxSizeInMB')} ${error.value}`;
+                result = `${options?.maxFileSizeErrorMsg || this.utilityService.getResourceValue('FileMaxSizeInMB')} ${error.value}`;
                 break;
             case 'ToolTipTypeError':
-                result = `${this.utilityService.getResourceValue('ToolTipTypeError')} ${error.value}`;
+                result = `${options?.toolTipTypeErrorMsg || this.utilityService.getResourceValue('ToolTipTypeError')} ${error.value}`;
                 break;
             case 'InvalidEndDate':
-                result = this.utilityService.getResourceValue('InvalidEndDate');
+                result = options?.invalidEndDateErrorMsg || this.utilityService.getResourceValue('InvalidEndDate');
                 break;
             case 'InvalidStartDate':
-                result = this.utilityService.getResourceValue('InvalidStartDate');
+                result = options?.invalidStartDateErrorMsg || this.utilityService.getResourceValue('InvalidStartDate');
                 break;
             case 'DuplicateFileError':
                 result = error.value;
@@ -219,7 +219,7 @@ class ControlUtility {
         this.controlValidationService = controlValidationService;
         this.utilityService = utilityService;
     }
-    getErrorValidation(ErrorsItem, customValidation) {
+    getErrorValidation(ErrorsItem, customValidation, options) {
         let result = '';
         ErrorsItem.forEach(element => {
             if (element.key === 'customerError' && ErrorsItem.length === 1) {
@@ -235,7 +235,7 @@ class ControlUtility {
                 result = element.value;
             }
             else {
-                result = this.ErrorHandler.getErrorMassageValidation(element);
+                result = this.ErrorHandler.getErrorMassageValidation(element, options);
             }
         });
         return result;
@@ -305,7 +305,7 @@ class ControlUtility {
         //   UtilityService.showGlobalError();
         //   this.scrollToGlobalErrorMassage()
         // }
-        return this.getErrorValidation(ErrorList, options.customValidation);
+        return this.getErrorValidation(ErrorList, options.customValidation, options);
     }
     scrollToGlobalErrorMassage() {
         let element = document.getElementById('errorId');
@@ -2568,6 +2568,14 @@ class FileUploadCropperOptions {
         this.backdrop = 'static';
         this.maintainAspectRatio = true;
         this.onlyScaleDown = true;
+        this.allowMoveImage = false;
+        this.containWithinAspectRatio = false;
+        // Maximum on-screen size of the crop box; 0 keeps the crop box at its true
+        // (output) size. When set, the output file is still resized back to the
+        // preset's static dimensions. Pick values that fit the modal size (an
+        // ng-bootstrap 'lg' modal body is ~770px wide).
+        this.maxDisplayWidth = 0;
+        this.maxDisplayHeight = 0;
         this.cancelBehavior = 'clear';
         this.horizontal = new FileUploadCropperPreset(3 / 1, 90, 45);
         this.vertical = new FileUploadCropperPreset(3 / 2, 200, 66);
@@ -7352,28 +7360,91 @@ class LogoCropperComponent {
         this.cropperStaticWidth = 0;
         this.cropperStaticHeight = 0;
         this.onlyScaleDown = true;
-        this.transform = { scale: 1 };
+        this.allowMoveImage = false;
+        this.containWithinAspectRatio = false;
+        // Maximum on-screen size of the crop box; 0 disables display scaling and
+        // keeps the crop box at its true (output) size.
+        this.maxDisplayWidth = 0;
+        this.maxDisplayHeight = 0;
+        this.transform = { scale: 1, translateH: 0, translateV: 0, translateUnit: 'px' };
+        this.canvasRotation = 0;
         this.croppedBlob = null;
         this.minScale = 1;
         this.maxScale = 4;
         this.scaleStep = 0.1;
     }
     ngOnInit() { }
+    get displayScalingEnabled() {
+        return this.maxDisplayWidth > 0 && this.maxDisplayHeight > 0 &&
+            this.cropperStaticWidth > 0 && this.cropperStaticHeight > 0;
+    }
+    // Scale the crop box up so the user can see the image clearly while cropping,
+    // while the uploaded file is resized back to the target dimensions.
+    get displayScale() {
+        if (!this.displayScalingEnabled)
+            return 1;
+        const scale = Math.min(this.maxDisplayWidth / this.cropperStaticWidth, this.maxDisplayHeight / this.cropperStaticHeight);
+        return Math.max(1, scale);
+    }
+    get displayWidth() {
+        return Math.round(this.cropperStaticWidth * this.displayScale);
+    }
+    get displayHeight() {
+        return Math.round(this.cropperStaticHeight * this.displayScale);
+    }
+    // The contain-within-aspect-ratio padding is computed from the aspectRatio
+    // option, so it must match the static crop box shape when one is set.
+    get effectiveAspectRatio() {
+        if (this.cropperStaticWidth && this.cropperStaticHeight) {
+            return this.cropperStaticWidth / this.cropperStaticHeight;
+        }
+        return this.aspectRatio;
+    }
+    // Source-image size caps consumed by the component scss; null falls back to
+    // the legacy fixed caps so display scaling stays opt-in.
+    get sourceMaxHeight() {
+        return this.displayScalingEnabled ? `${this.displayHeight}px` : null;
+    }
+    get sourceMaxWidth() {
+        return this.displayScalingEnabled ? `${this.displayWidth}px` : null;
+    }
     translate(key) {
         return this.utilityService.getResourceValue(key);
     }
     imageCropped(event) {
         this.croppedBlob = event.blob ?? null;
     }
+    imageLoadFailed(error) {
+        console.error('Logo cropper failed to load image', error);
+        this.utilityService.notifyErrorMessage(this.translate('ImageLoadFailed'));
+        this.activeModal.dismiss();
+    }
+    onWheel(event) {
+        event.preventDefault();
+        if (event.deltaY < 0)
+            this.zoomIn();
+        else if (event.deltaY > 0)
+            this.zoomOut();
+    }
     zoomIn() {
         this.setScale((this.transform.scale ?? 1) + this.scaleStep);
     }
     zoomOut() {
         this.setScale((this.transform.scale ?? 1) - this.scaleStep);
     }
+    rotateLeft() {
+        this.canvasRotation = (this.canvasRotation + 3) % 4;
+    }
+    rotateRight() {
+        this.canvasRotation = (this.canvasRotation + 1) % 4;
+    }
     resetZoom() {
         this.setScale(1);
     }
+    reset() {
+        this.canvasRotation = 0;
+        this.transform = { scale: 1, translateH: 0, translateV: 0, translateUnit: 'px' };
+    }
     confirm() {
         if (!this.croppedBlob)
             return;
@@ -7388,14 +7459,14 @@ class LogoCropperComponent {
         this.transform = { ...this.transform, scale: clamped };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: LogoCropperComponent, deps: [{ token: i4$1.NgbActiveModal }, { token: i3.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: LogoCropperComponent, isStandalone: true, selector: "BBSF-LogoCropper", inputs: { imageFile: "imageFile", isHorizontal: "isHorizontal", aspectRatio: "aspectRatio", maintainAspectRatio: "maintainAspectRatio", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", onlyScaleDown: "onlyScaleDown" }, ngImport: i0, template: "<div class=\"bbsf-logo-cropper\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\" [imageFile]=\"imageFile\"\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"aspectRatio\"\n      [cropperStaticWidth]=\"cropperStaticWidth\" [cropperStaticHeight]=\"cropperStaticHeight\"\n      [onlyScaleDown]=\"onlyScaleDown\" [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\">\n    </image-cropper>\n\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\n        [title]=\"translate('ZoomOut')\">\n        <i class=\"fa fa-search-minus\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"resetZoom()\"\n        [title]=\"translate('ResetZoom')\">\n        <i class=\"fa fa-undo\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\n        <i class=\"fa fa-search-plus\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\n      {{ translate(\"Crop\") }}\n    </button>\n  </div>\n</div>\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:45px!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:200px!important;max-height:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: LogoCropperComponent, isStandalone: true, selector: "BBSF-LogoCropper", inputs: { imageFile: "imageFile", isHorizontal: "isHorizontal", aspectRatio: "aspectRatio", maintainAspectRatio: "maintainAspectRatio", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", onlyScaleDown: "onlyScaleDown", allowMoveImage: "allowMoveImage", containWithinAspectRatio: "containWithinAspectRatio", maxDisplayWidth: "maxDisplayWidth", maxDisplayHeight: "maxDisplayHeight" }, ngImport: i0, template: "<div class=\"bbsf-logo-cropper\">\r\n  <div class=\"modal-header\">\r\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\r\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\r\n  </div>\r\n\r\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\r\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\"\r\n      [class.allow-move]=\"allowMoveImage\" [imageFile]=\"imageFile\"\r\n      [style.--bbsf-cropper-source-max-height]=\"sourceMaxHeight\"\r\n      [style.--bbsf-cropper-source-max-width]=\"sourceMaxWidth\"\r\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"effectiveAspectRatio\"\r\n      [containWithinAspectRatio]=\"containWithinAspectRatio\" [canvasRotation]=\"canvasRotation\"\r\n      [cropperStaticWidth]=\"displayWidth\" [cropperStaticHeight]=\"displayHeight\"\r\n      [resizeToWidth]=\"displayScalingEnabled ? cropperStaticWidth : 0\"\r\n      [resizeToHeight]=\"displayScalingEnabled ? cropperStaticHeight : 0\"\r\n      [onlyScaleDown]=\"onlyScaleDown\" [allowMoveImage]=\"allowMoveImage\" [(transform)]=\"transform\" format=\"png\"\r\n      (imageCropped)=\"imageCropped($event)\" (loadImageFailed)=\"imageLoadFailed($event)\" (wheel)=\"onWheel($event)\">\r\n    </image-cropper>\r\n\r\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\r\n        [title]=\"translate('ZoomOut')\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"rotateLeft()\"\r\n        [title]=\"translate('RotateLeft')\">\r\n        <i class=\"fa fa-rotate-left\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"rotateRight()\"\r\n        [title]=\"translate('RotateRight')\">\r\n        <i class=\"fa fa-rotate-right\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"reset()\"\r\n        [title]=\"translate('ResetZoom')\">\r\n        <i class=\"fa fa-refresh\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\r\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\r\n      {{ translate(\"Crop\") }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:var(--bbsf-cropper-source-max-height, 45px)!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:var(--bbsf-cropper-source-max-width, 200px)!important;max-height:none!important}.bbsf-logo-cropper image-cropper.allow-move .ngx-ic-cropper{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: LogoCropperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'BBSF-LogoCropper', encapsulation: ViewEncapsulation.None, standalone: true, imports: [
                         CommonModule,
                         ImageCropperComponent
-                    ], template: "<div class=\"bbsf-logo-cropper\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\" [imageFile]=\"imageFile\"\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"aspectRatio\"\n      [cropperStaticWidth]=\"cropperStaticWidth\" [cropperStaticHeight]=\"cropperStaticHeight\"\n      [onlyScaleDown]=\"onlyScaleDown\" [transform]=\"transform\" format=\"png\" (imageCropped)=\"imageCropped($event)\">\n    </image-cropper>\n\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\n        [title]=\"translate('ZoomOut')\">\n        <i class=\"fa fa-search-minus\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"resetZoom()\"\n        [title]=\"translate('ResetZoom')\">\n        <i class=\"fa fa-undo\"></i>\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\n        <i class=\"fa fa-search-plus\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\n      {{ translate(\"Crop\") }}\n    </button>\n  </div>\n</div>\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:45px!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:200px!important;max-height:none!important}\n"] }]
+                    ], template: "<div class=\"bbsf-logo-cropper\">\r\n  <div class=\"modal-header\">\r\n    <h5 class=\"modal-title\">{{ translate(\"CropImage\") }}</h5>\r\n    <button type=\"button\" class=\"btn-close\" (click)=\"dismiss()\"></button>\r\n  </div>\r\n\r\n  <div class=\"modal-body d-flex flex-column justify-content-center align-items-center py-0\" style=\"min-height: 200px;\">\r\n    <image-cropper [class.crop-horizontal]=\"isHorizontal\" [class.crop-vertical]=\"!isHorizontal\"\r\n      [class.allow-move]=\"allowMoveImage\" [imageFile]=\"imageFile\"\r\n      [style.--bbsf-cropper-source-max-height]=\"sourceMaxHeight\"\r\n      [style.--bbsf-cropper-source-max-width]=\"sourceMaxWidth\"\r\n      [maintainAspectRatio]=\"maintainAspectRatio\" [aspectRatio]=\"effectiveAspectRatio\"\r\n      [containWithinAspectRatio]=\"containWithinAspectRatio\" [canvasRotation]=\"canvasRotation\"\r\n      [cropperStaticWidth]=\"displayWidth\" [cropperStaticHeight]=\"displayHeight\"\r\n      [resizeToWidth]=\"displayScalingEnabled ? cropperStaticWidth : 0\"\r\n      [resizeToHeight]=\"displayScalingEnabled ? cropperStaticHeight : 0\"\r\n      [onlyScaleDown]=\"onlyScaleDown\" [allowMoveImage]=\"allowMoveImage\" [(transform)]=\"transform\" format=\"png\"\r\n      (imageCropped)=\"imageCropped($event)\" (loadImageFailed)=\"imageLoadFailed($event)\" (wheel)=\"onWheel($event)\">\r\n    </image-cropper>\r\n\r\n    <div class=\"d-flex justify-content-center align-items-center gap-2 mt-3\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomOut()\"\r\n        [title]=\"translate('ZoomOut')\">\r\n        <i class=\"fa fa-search-minus\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"zoomIn()\" [title]=\"translate('ZoomIn')\">\r\n        <i class=\"fa fa-search-plus\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"rotateLeft()\"\r\n        [title]=\"translate('RotateLeft')\">\r\n        <i class=\"fa fa-rotate-left\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"rotateRight()\"\r\n        [title]=\"translate('RotateRight')\">\r\n        <i class=\"fa fa-rotate-right\"></i>\r\n      </button>\r\n      <button type=\"button\" class=\"btn btn-outline-secondary btn-sm\" (click)=\"reset()\"\r\n        [title]=\"translate('ResetZoom')\">\r\n        <i class=\"fa fa-refresh\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"modal-footer\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-light\" (click)=\"dismiss()\"> Cancel </button>\r\n    <button type=\"button\" class=\"btn btn-sm btn-brand\" [disabled]=\"!croppedBlob\" (click)=\"confirm()\">\r\n      {{ translate(\"Crop\") }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".bbsf-logo-cropper image-cropper.crop-horizontal .ngx-ic-source-image{max-height:var(--bbsf-cropper-source-max-height, 45px)!important;max-width:none!important}.bbsf-logo-cropper image-cropper.crop-vertical .ngx-ic-source-image{max-width:var(--bbsf-cropper-source-max-width, 200px)!important;max-height:none!important}.bbsf-logo-cropper image-cropper.allow-move .ngx-ic-cropper{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i4$1.NgbActiveModal }, { type: i3.UtilityService }], propDecorators: { imageFile: [{
                 type: Input
             }], isHorizontal: [{
@@ -7410,6 +7481,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }], onlyScaleDown: [{
                 type: Input
+            }], allowMoveImage: [{
+                type: Input
+            }], containWithinAspectRatio: [{
+                type: Input
+            }], maxDisplayWidth: [{
+                type: Input
+            }], maxDisplayHeight: [{
+                type: Input
             }] } });
 
 class FileUploadComponent {
@@ -7755,7 +7834,7 @@ class FileUploadComponent {
             const formControl = this.fileUploadFormControl;
             const resourceValue = this.UtilityService.getResourceValue('DuplicateFileError');
             // If resource value is the same as the key, it means the resource wasn't found
-            const errorMessage = (resourceValue && resourceValue !== 'DuplicateFileError') ? resourceValue : 'File(s) already exist';
+            const errorMessage = this.options?.duplicateFileErrorMsg || ((resourceValue && resourceValue !== 'DuplicateFileError') ? resourceValue : 'File(s) already exist');
             const errorObj = {
                 DuplicateFileError: `${errorMessage}: ${duplicateFileNames}`
             };
@@ -7794,7 +7873,7 @@ class FileUploadComponent {
             //keep existing valid files, remove only extra ones
             this.uploader.queue = this.uploader.queue.slice(0, max);
             this.maxFilesReached = true;
-            this.maxFilesValidationMsg = this.UtilityService.getResourceValue('MaxFileCountValidationKey') + max;
+            this.maxFilesValidationMsg = (this.options.maxFileCountErrorMsg || this.UtilityService.getResourceValue('MaxFileCountValidationKey')) + max;
         }
         else {
             this.maxFilesReached = false;
@@ -8002,6 +8081,10 @@ class FileUploadComponent {
         modalRef.componentInstance.cropperStaticHeight = preset.cropperStaticHeight;
         modalRef.componentInstance.maintainAspectRatio = cropperOptions.maintainAspectRatio;
         modalRef.componentInstance.onlyScaleDown = cropperOptions.onlyScaleDown;
+        modalRef.componentInstance.allowMoveImage = cropperOptions.allowMoveImage;
+        modalRef.componentInstance.containWithinAspectRatio = cropperOptions.containWithinAspectRatio;
+        modalRef.componentInstance.maxDisplayWidth = cropperOptions.maxDisplayWidth;
+        modalRef.componentInstance.maxDisplayHeight = cropperOptions.maxDisplayHeight;
         modalRef.result.then((croppedFile) => {
             this.readCroppedFile(addedFile, croppedFile);
         }).catch(() => {