@bnsights/bbsf-controls 1.2.28 → 1.2.29

package/README.md

@@ -2,11 +2,11 @@
 
 BBSF Controls package is part of BBSF 3 packages. It has all the form controls that we use to build our application forms.
 
-For more info please visit [BBSF Controls documenation](https://bbsfadmin.bnsights.com/controls) or [BBSF documentation](https://bnsightsprojects.visualstudio.com/BBSF%203/_wiki/wikis/BBSF-3.wiki/65/BBSF-Documentation)
-
-## 🚀 NEW! Tree-Shakable Granular Modules (v2.0+)
-
-The package now supports **true tree-shaking** through granular modules for optimal bundle size!
+For more info please visit [BBSF Controls documenation](https://bbsfadmin.bnsights.com/controls) or [BBSF documentation](https://bnsightsprojects.visualstudio.com/BBSF%203/_wiki/wikis/BBSF-3.wiki/65/BBSF-Documentation)
+
+## 🚀 NEW! Tree-Shakable Granular Modules (v2.0+)
+
+The package now supports **true tree-shaking** through granular modules for optimal bundle size!
 
 ### 📦 Available Modules
 
@@ -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,46 +398,61 @@ If the issue persists, consider using a different HTML editor component that's c
 
 ---
 
-## Change Log
-
-## 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
-
-=====================
+## 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
 {
@@ -464,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

@@ -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 {
@@ -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(() => {