ngx-image-cropper 8.1.0 → 9.0.0

package/fesm2022/ngx-image-cropper.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, Output, HostListener } from '@angular/core';
+import { signal, output, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, HostListener } from '@angular/core';
 import { takeUntil, first } from 'rxjs/operators';
 import { Subject, merge, fromEvent } from 'rxjs';
 import { NgIf } from '@angular/common';
@@ -82,7 +82,7 @@ function moveCropper(event, moveStart) {
     };
 }
 function resizeCropper(event, moveStart, cropperState) {
-    const cropperPosition = { ...cropperState.cropper };
+    const cropperPosition = { ...cropperState.cropper() };
     const moveX = getClientX(event) - moveStart.clientX;
     const moveY = getClientY(event) - moveStart.clientY;
     switch (moveStart.position) {
@@ -246,6 +246,8 @@ function getClientY(event) {
 
 class CropperState {
     constructor() {
+        this.cropper = signal({ x1: 0, x2: 0, y1: 0, y2: 0 });
+        this.transform = {};
         this.options = {
             format: 'png',
             output: 'blob',
@@ -272,8 +274,6 @@ class CropperState {
             cropperFrameAriaLabel: undefined,
             checkImageType: true
         };
-        this.cropper = { x1: 0, x2: 0, y1: 0, y2: 0 };
-        this.transform = {};
         // Internal
         this.cropperScaledMinWidth = 20;
         this.cropperScaledMinHeight = 20;
@@ -309,7 +309,7 @@ class CropperState {
             this.setCropperScaledMinSize();
             this.setCropperScaledMaxSize();
             if (this.options.maintainAspectRatio && (this.options.resetCropOnAspectRatioChange || !this.aspectRatioIsCorrect())) {
-                this.cropper = this.maxSizeCropperPosition();
+                this.cropper.set(this.maxSizeCropperPosition());
                 positionPossiblyChanged = true;
             }
         }
@@ -327,7 +327,7 @@ class CropperState {
             }
         }
         if (positionPossiblyChanged) {
-            this.cropper = checkCropperPosition(this.cropper, this, false);
+            this.cropper.update((cropper) => checkCropperPosition(cropper, this, false));
         }
     }
     validateOptions() {
@@ -386,12 +386,13 @@ class CropperState {
         }
     }
     equalsCropperPosition(cropper) {
-        return this.cropper == null && cropper == null
-            || this.cropper != null && cropper != null
-                && this.cropper.x1.toFixed(3) === cropper.x1.toFixed(3)
-                && this.cropper.y1.toFixed(3) === cropper.y1.toFixed(3)
-                && this.cropper.x2.toFixed(3) === cropper.x2.toFixed(3)
-                && this.cropper.y2.toFixed(3) === cropper.y2.toFixed(3);
+        const localCropper = this.cropper();
+        return localCropper == null && cropper == null
+            || localCropper != null && cropper != null
+                && localCropper.x1.toFixed(3) === cropper.x1.toFixed(3)
+                && localCropper.y1.toFixed(3) === cropper.y1.toFixed(3)
+                && localCropper.x2.toFixed(3) === cropper.x2.toFixed(3)
+                && localCropper.y2.toFixed(3) === cropper.y2.toFixed(3);
     }
     equalsTransformTranslate(transform) {
         return (this.transform.translateH ?? 0) === (transform.translateH ?? 0)
@@ -405,20 +406,18 @@ class CropperState {
             && (this.transform.flipV ?? false) === (transform.flipV ?? false);
     }
     aspectRatioIsCorrect() {
-        const currentCropAspectRatio = (this.cropper.x2 - this.cropper.x1) / (this.cropper.y2 - this.cropper.y1);
+        const localCropper = this.cropper();
+        const currentCropAspectRatio = (localCropper.x2 - localCropper.x1) / (localCropper.y2 - localCropper.y1);
         return currentCropAspectRatio === this.options.aspectRatio;
     }
     resizeCropperPosition(oldMaxSize) {
-        if (!this.cropper) {
-            return;
-        }
         if (oldMaxSize.width !== this.maxSize.width || oldMaxSize.height !== this.maxSize.height) {
-            this.cropper = {
-                x1: this.cropper.x1 * this.maxSize.width / oldMaxSize.width,
-                x2: this.cropper.x2 * this.maxSize.width / oldMaxSize.width,
-                y1: this.cropper.y1 * this.maxSize.height / oldMaxSize.height,
-                y2: this.cropper.y2 * this.maxSize.height / oldMaxSize.height
-            };
+            this.cropper.update(cropper => ({
+                x1: cropper.x1 * this.maxSize.width / oldMaxSize.width,
+                x2: cropper.x2 * this.maxSize.width / oldMaxSize.width,
+                y1: cropper.y1 * this.maxSize.height / oldMaxSize.height,
+                y2: cropper.y2 * this.maxSize.height / oldMaxSize.height
+            }));
         }
     }
     maxSizeCropperPosition() {
@@ -545,7 +544,7 @@ class CropService {
         const result = {
             width, height,
             imagePosition,
-            cropperPosition: { ...cropperState.cropper }
+            cropperPosition: { ...cropperState.cropper() }
         };
         if (cropperState.options.containWithinAspectRatio) {
             result.offsetImagePosition = this.getOffsetImagePosition(cropperState);
@@ -593,11 +592,12 @@ class CropService {
     }
     getImagePosition(cropperState) {
         const ratio = this.getRatio(cropperState);
+        const cropper = cropperState.cropper();
         const out = {
-            x1: Math.round(cropperState.cropper.x1 * ratio),
-            y1: Math.round(cropperState.cropper.y1 * ratio),
-            x2: Math.round(cropperState.cropper.x2 * ratio),
-            y2: Math.round(cropperState.cropper.y2 * ratio)
+            x1: Math.round(cropper.x1 * ratio),
+            y1: Math.round(cropper.y1 * ratio),
+            x2: Math.round(cropper.x2 * ratio),
+            y2: Math.round(cropper.y2 * ratio)
         };
         if (!cropperState.options.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
@@ -620,11 +620,12 @@ class CropService {
             offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.width) / 2;
             offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.height) / 2;
         }
+        const cropper = cropperState.cropper();
         const out = {
-            x1: Math.round(cropperState.cropper.x1 * ratio) - offsetX,
-            y1: Math.round(cropperState.cropper.y1 * ratio) - offsetY,
-            x2: Math.round(cropperState.cropper.x2 * ratio) - offsetX,
-            y2: Math.round(cropperState.cropper.y2 * ratio) - offsetY
+            x1: Math.round(cropper.x1 * ratio) - offsetX,
+            y1: Math.round(cropper.y1 * ratio) - offsetY,
+            x2: Math.round(cropper.x2 * ratio) - offsetX,
+            y2: Math.round(cropper.y2 * ratio) - offsetY
         };
         if (!cropperState.options.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
@@ -973,10 +974,8 @@ class ImageCropperComponent {
     get alignImageStyle() {
         return this.state.options.alignImage;
     }
-    constructor(sanitizer, cd, zone) {
+    constructor(sanitizer) {
         this.sanitizer = sanitizer;
-        this.cd = cd;
-        this.zone = zone;
         this.pinchStart$ = new Subject();
         this.cropService = new CropService();
         this.loadImageService = new LoadImageService();
@@ -985,26 +984,27 @@ class ImageCropperComponent {
         this.moveTypes = MoveTypes;
         this.state = new CropperState();
         this.safeImgDataUrl = signal(undefined);
+        this.safeTransformStyle = signal(undefined);
         this.marginLeft = '0px';
         this.imageVisible = false;
         this.allowMoveImage = false;
         this.checkImageType = true;
         this.disabled = false;
         this.hidden = false;
-        this.imageCropped = new EventEmitter();
-        this.startCropImage = new EventEmitter();
-        this.imageLoaded = new EventEmitter();
-        this.cropperReady = new EventEmitter();
-        this.loadImageFailed = new EventEmitter();
-        this.transformChange = new EventEmitter();
-        this.cropperChange = new EventEmitter();
+        this.imageCropped = output();
+        this.startCropImage = output();
+        this.imageLoaded = output();
+        this.cropperReady = output();
+        this.loadImageFailed = output();
+        this.transformChange = output();
+        this.cropperChange = output();
         this.reset();
     }
     ngOnInit() {
         this.state.stepSize = this.initialStepSize || this.state.stepSize;
     }
     ngOnChanges(changes) {
-        const previousCropperPosition = this.state.cropper;
+        const previousCropperPosition = this.state.cropper();
         const previousTransform = this.state.transform;
         const previousBackgroundColor = this.state.options.backgroundColor;
         this.state.setOptionsFromChanges(changes);
@@ -1024,11 +1024,11 @@ class ImageCropperComponent {
             return;
         }
         if (changes['cropper'] && this.cropper) {
-            this.state.cropper = checkCropperPosition(this.cropper, this.state, true);
+            this.state.cropper.set(checkCropperPosition(this.cropper, this.state, true));
         }
         const cropperChanged = !this.state.equalsCropperPosition(previousCropperPosition);
         if (cropperChanged && (!this.cropper || !this.state.equalsCropperPosition(this.cropper))) {
-            this.cropperChange.emit(this.state.cropper);
+            this.cropperChange.emit(this.state.cropper());
         }
         if (cropperChanged
             || !this.state.equalsTransform(previousTransform)
@@ -1099,10 +1099,10 @@ class ImageCropperComponent {
     }
     setCssTransform() {
         const translateUnit = this.state.transform?.translateUnit || '%';
-        this.safeTransformStyle = this.sanitizer.bypassSecurityTrustStyle(`translate(${this.state.transform.translateH || 0}${translateUnit}, ${this.state.transform.translateV || 0}${translateUnit})` +
+        this.safeTransformStyle.set(this.sanitizer.bypassSecurityTrustStyle(`translate(${this.state.transform.translateH || 0}${translateUnit}, ${this.state.transform.translateV || 0}${translateUnit})` +
             ' scaleX(' + (this.state.transform.scale || 1) * (this.state.transform.flipH ? -1 : 1) + ')' +
             ' scaleY(' + (this.state.transform.scale || 1) * (this.state.transform.flipV ? -1 : 1) + ')' +
-            ' rotate(' + (this.state.transform.rotate || 0) + 'deg)');
+            ' rotate(' + (this.state.transform.rotate || 0) + 'deg)'));
     }
     imageLoadedInView() {
         if (this.state.loadedImage != null) {
@@ -1118,17 +1118,16 @@ class ImageCropperComponent {
         else if (this.sourceImageLoaded()) {
             this.setMaxSize();
             if (this.cropper && (!this.maintainAspectRatio || this.state.aspectRatioIsCorrect())) {
-                this.state.cropper = checkCropperPosition(this.cropper, this.state, true);
+                this.state.cropper.set(checkCropperPosition(this.cropper, this.state, true));
                 this.emitCropperPositionChange(this.cropper);
             }
             else {
-                this.state.cropper = checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true);
-                this.cropperChange.emit(this.state.cropper);
+                this.state.cropper.set(checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true));
+                this.cropperChange.emit(this.state.cropper());
             }
             this.imageVisible = true;
             this.cropperReady.emit({ ...this.state.maxSize });
             this.doAutoCrop();
-            this.cd.markForCheck();
         }
         else {
             this.setImageMaxSizeRetries++;
@@ -1149,7 +1148,6 @@ class ImageCropperComponent {
             const oldMaxSize = { ...this.state.maxSize };
             this.setMaxSize();
             this.state.resizeCropperPosition(oldMaxSize);
-            this.cd.markForCheck();
         }
     }
     keyboardAccess(event) {
@@ -1173,20 +1171,19 @@ class ImageCropperComponent {
         event.preventDefault();
         event.stopPropagation();
         this.moveStart = {
-            active: true,
             type: moveType,
             position,
             clientX: 0,
             clientY: 0,
             transform: this.state.transform,
-            cropper: this.state.cropper
+            cropper: this.state.cropper()
         };
         this.handleMouseMove(moveEvent);
         this.handleMouseUp();
     }
     startMove(event, moveType, position = null) {
         if (this.disabled
-            || this.moveStart?.active && this.moveStart?.type === MoveTypes.Pinch
+            || this.moveStart && this.moveStart.type === MoveTypes.Pinch
             || moveType === MoveTypes.Drag && !this.allowMoveImage) {
             return;
         }
@@ -1194,30 +1191,23 @@ class ImageCropperComponent {
             event.preventDefault();
         }
         this.moveStart = {
-            active: true,
             type: moveType,
             position,
             clientX: getClientX(event),
             clientY: getClientY(event),
             transform: this.state.transform,
-            cropper: this.state.cropper
+            cropper: this.state.cropper()
         };
         this.initMouseMove();
     }
     initMouseMove() {
         merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).pipe(takeUntil(merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend'), this.pinchStart$).pipe(first()))).subscribe({
-            next: (event) => this.zone.run(() => {
-                this.handleMouseMove(event);
-                this.cd.markForCheck();
-            }),
-            complete: () => this.zone.run(() => {
-                this.handleMouseUp();
-                this.cd.markForCheck();
-            })
+            next: (event) => this.handleMouseMove(event),
+            complete: () => this.handleMouseUp()
         });
     }
     handleMouseMove(event) {
-        if (!this.moveStart?.active) {
+        if (!this.moveStart) {
             return;
         }
         if ('stopPropagation' in event) {
@@ -1227,11 +1217,11 @@ class ImageCropperComponent {
             event.preventDefault();
         }
         if (this.moveStart.type === MoveTypes.Move) {
-            this.state.cropper = checkCropperWithinMaxSizeBounds(moveCropper(event, this.moveStart), this.state, true);
+            this.state.cropper.set(checkCropperWithinMaxSizeBounds(moveCropper(event, this.moveStart), this.state, true));
         }
         else if (this.moveStart.type === MoveTypes.Resize) {
             if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
-                this.state.cropper = checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false);
+                this.state.cropper.set(checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false));
             }
         }
         else if (this.moveStart.type === MoveTypes.Drag) {
@@ -1246,15 +1236,16 @@ class ImageCropperComponent {
         }
     }
     handleMouseUp() {
-        if (!this.moveStart?.active || this.moveStart?.type === MoveTypes.Pinch) {
+        if (!this.moveStart || this.moveStart.type === MoveTypes.Pinch) {
             return;
         }
-        if (!this.state.equalsCropperPosition(this.moveStart.cropper) || this.moveStart.transform && !this.state.equalsTransform(this.moveStart.transform)) {
+        if (!this.state.equalsCropperPosition(this.moveStart.cropper)
+            || this.moveStart.transform && !this.state.equalsTransform(this.moveStart.transform)) {
             if (this.moveStart.type === MoveTypes.Drag) {
                 this.transformChange.emit(this.state.transform);
             }
             else {
-                this.cropperChange.emit(this.state.cropper);
+                this.cropperChange.emit(this.state.cropper());
             }
             this.doAutoCrop();
         }
@@ -1267,13 +1258,13 @@ class ImageCropperComponent {
         if ('preventDefault' in event) {
             event.preventDefault();
         }
+        const cropper = this.state.cropper();
         this.moveStart = {
-            active: true,
             type: MoveTypes.Pinch,
             position: 'center',
-            clientX: this.state.cropper.x1 + (this.state.cropper.x2 - this.state.cropper.x1) / 2,
-            clientY: this.state.cropper.y1 + (this.state.cropper.y2 - this.state.cropper.y1) / 2,
-            cropper: this.state.cropper
+            clientX: cropper.x1 + (cropper.x2 - cropper.x1) / 2,
+            clientY: cropper.y1 + (cropper.y2 - cropper.y1) / 2,
+            cropper: cropper
         };
         this.initPinch();
     }
@@ -1282,18 +1273,12 @@ class ImageCropperComponent {
         fromEvent(document, 'touchmove')
             .pipe(takeUntil(fromEvent(document, 'touchend')))
             .subscribe({
-            next: (event) => this.zone.run(() => {
-                this.handlePinchMove(event);
-                this.cd.markForCheck();
-            }),
-            complete: () => this.zone.run(() => {
-                this.handlePinchStop();
-                this.cd.markForCheck();
-            })
+            next: (event) => this.handlePinchMove(event),
+            complete: () => this.handlePinchStop()
         });
     }
     handlePinchMove(event) {
-        if (!this.moveStart?.active) {
+        if (!this.moveStart) {
             return;
         }
         if (event.preventDefault) {
@@ -1301,13 +1286,12 @@ class ImageCropperComponent {
         }
         if (this.moveStart.type === MoveTypes.Pinch) {
             if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
-                this.state.cropper = checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false);
+                this.state.cropper.set(checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false));
             }
         }
-        this.cd.markForCheck();
     }
     handlePinchStop() {
-        if (!this.moveStart?.active) {
+        if (!this.moveStart) {
             return;
         }
         if (!this.state.equalsCropperPosition(this.moveStart.cropper)) {
@@ -1325,7 +1309,7 @@ class ImageCropperComponent {
     }
     emitCropperPositionChange(previousPosition) {
         if (!this.state.equalsCropperPosition(previousPosition)) {
-            this.cropperChange.emit(this.state.cropper);
+            this.cropperChange.emit(this.state.cropper());
         }
     }
     doAutoCrop() {
@@ -1346,7 +1330,7 @@ class ImageCropperComponent {
         return null;
     }
     cropToBlob() {
-        return new Promise((resolve, reject) => this.zone.run(async () => {
+        return new Promise(async (resolve, reject) => {
             const result = await this.cropService.crop(this.state, 'blob');
             if (result) {
                 this.imageCropped.emit(result);
@@ -1355,7 +1339,7 @@ class ImageCropperComponent {
             else {
                 reject('Crop image failed');
             }
-        }));
+        });
     }
     cropToBase64() {
         const result = this.cropService.crop(this.state, 'base64');
@@ -1365,16 +1349,20 @@ class ImageCropperComponent {
         }
         return null;
     }
+    resetCropperPosition() {
+        this.state.cropper.set(checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true));
+        this.cropperChange.emit(this.state.cropper());
+    }
     ngOnDestroy() {
         this.pinchStart$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageCropperComponent, isStandalone: true, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", imageAltText: "imageAltText", options: "options", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", format: "format", autoCrop: "autoCrop", cropper: "cropper", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resetCropOnAspectRatioChange: "resetCropOnAspectRatioChange", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", checkImageType: "checkImageType", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange", cropperChange: "cropperChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.disabled": "this.disabled", "class.ngx-ic-hidden": "this.hidden", "style.text-align": "this.alignImageStyle" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [style.background]=\"imageVisible && state.options.backgroundColor\"\n  (touchstart)=\"startPinch($event)\"\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl() as src\"\n    [src]=\"src\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"state.maxSize?.width || 0\"\n    [style.height.px]=\"state.maxSize?.height || 0\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div\n    class=\"ngx-ic-cropper\"\n    *ngIf=\"imageVisible\"\n    [class.ngx-ic-round]=\"state.options.roundCropper\"\n    [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n    [style.top.px]=\"state.cropper.y1\"\n    [style.left.px]=\"state.cropper.x1\"\n    [style.width.px]=\"state.cropper.x2 - state.cropper.x1\"\n    [style.height.px]=\"state.cropper.y2 - state.cropper.y1\"\n    [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    (keydown)=\"keyboardAccess($event)\"\n    tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container\n      *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n      <span\n        class=\"ngx-ic-resize ngx-ic-topleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-topright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-top\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-right\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-left\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      ></span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:var(--cropper-move-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ic-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageCropperComponent, isStandalone: true, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", imageAltText: "imageAltText", options: "options", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", format: "format", autoCrop: "autoCrop", cropper: "cropper", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resetCropOnAspectRatioChange: "resetCropOnAspectRatioChange", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", checkImageType: "checkImageType", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange", cropperChange: "cropperChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.disabled": "this.disabled", "class.ngx-ic-hidden": "this.hidden", "style.text-align": "this.alignImageStyle" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [style.background]=\"imageVisible && state.options.backgroundColor\"\n  (touchstart)=\"startPinch($event)\"\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl() as src\"\n    [src]=\"src\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle()\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"state.maxSize?.width || 0\"\n    [style.height.px]=\"state.maxSize?.height || 0\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div\n    class=\"ngx-ic-cropper\"\n    *ngIf=\"imageVisible\"\n    [class.ngx-ic-round]=\"state.options.roundCropper\"\n    [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n    [style.top.px]=\"state.cropper().y1\"\n    [style.left.px]=\"state.cropper().x1\"\n    [style.width.px]=\"state.cropper().x2 - state.cropper().x1\"\n    [style.height.px]=\"state.cropper().y2 - state.cropper().y1\"\n    [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    (keydown)=\"keyboardAccess($event)\"\n    tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container\n      *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n      <span\n        class=\"ngx-ic-resize ngx-ic-topleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-topright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-top\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-right\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-left\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      ></span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:var(--cropper-move-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ic-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageCropperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageCropperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  [style.background]=\"imageVisible && state.options.backgroundColor\"\n  (touchstart)=\"startPinch($event)\"\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl() as src\"\n    [src]=\"src\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"state.maxSize?.width || 0\"\n    [style.height.px]=\"state.maxSize?.height || 0\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div\n    class=\"ngx-ic-cropper\"\n    *ngIf=\"imageVisible\"\n    [class.ngx-ic-round]=\"state.options.roundCropper\"\n    [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n    [style.top.px]=\"state.cropper.y1\"\n    [style.left.px]=\"state.cropper.x1\"\n    [style.width.px]=\"state.cropper.x2 - state.cropper.x1\"\n    [style.height.px]=\"state.cropper.y2 - state.cropper.y1\"\n    [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    (keydown)=\"keyboardAccess($event)\"\n    tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container\n      *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n      <span\n        class=\"ngx-ic-resize ngx-ic-topleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-topright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-top\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-right\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-left\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      ></span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:var(--cropper-move-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ic-hidden{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { wrapper: [{
+            args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  [style.background]=\"imageVisible && state.options.backgroundColor\"\n  (touchstart)=\"startPinch($event)\"\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl() as src\"\n    [src]=\"src\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle()\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"state.maxSize?.width || 0\"\n    [style.height.px]=\"state.maxSize?.height || 0\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div\n    class=\"ngx-ic-cropper\"\n    *ngIf=\"imageVisible\"\n    [class.ngx-ic-round]=\"state.options.roundCropper\"\n    [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n    [style.top.px]=\"state.cropper().y1\"\n    [style.left.px]=\"state.cropper().x1\"\n    [style.width.px]=\"state.cropper().x2 - state.cropper().x1\"\n    [style.height.px]=\"state.cropper().y2 - state.cropper().y1\"\n    [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    (keydown)=\"keyboardAccess($event)\"\n    tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container\n      *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n      <span\n        class=\"ngx-ic-resize ngx-ic-topleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-topright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-top\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-right\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-left\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      ></span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:var(--cropper-move-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ic-hidden{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ['wrapper', { static: true }]
             }], sourceImage: [{
@@ -1458,20 +1446,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class.ngx-ic-hidden']
             }, {
                 type: Input
-            }], imageCropped: [{
-                type: Output
-            }], startCropImage: [{
-                type: Output
-            }], imageLoaded: [{
-                type: Output
-            }], cropperReady: [{
-                type: Output
-            }], loadImageFailed: [{
-                type: Output
-            }], transformChange: [{
-                type: Output
-            }], cropperChange: [{
-                type: Output
             }], alignImageStyle: [{
                 type: HostBinding,
                 args: ['style.text-align']