ngx-image-cropper 9.1.1 → 9.1.3

package/fesm2022/ngx-image-cropper.mjs

@@ -15,18 +15,18 @@ function checkCropperSizeRestriction(cropperPosition, cropperState) {
     const centerX = cropperPosition.x1 + cropperWidth / 2;
     const centerY = cropperPosition.y1 + cropperHeight / 2;
     if (cropperState.options.cropperStaticHeight && cropperState.options.cropperStaticWidth) {
-        cropperWidth = cropperState.maxSize.width > cropperState.options.cropperStaticWidth
+        cropperWidth = cropperState.maxSize().width > cropperState.options.cropperStaticWidth
             ? cropperState.options.cropperStaticWidth
-            : cropperState.maxSize.width;
-        cropperHeight = cropperState.maxSize.height > cropperState.options.cropperStaticHeight
+            : cropperState.maxSize().width;
+        cropperHeight = cropperState.maxSize().height > cropperState.options.cropperStaticHeight
             ? cropperState.options.cropperStaticHeight
-            : cropperState.maxSize.height;
+            : cropperState.maxSize().height;
     }
     else {
-        cropperWidth = Math.max(cropperState.cropperScaledMinWidth, Math.min(cropperWidth, cropperState.cropperScaledMaxWidth, cropperState.maxSize.width));
-        cropperHeight = Math.max(cropperState.cropperScaledMinHeight, Math.min(cropperHeight, cropperState.cropperScaledMaxHeight, cropperState.maxSize.height));
+        cropperWidth = Math.max(cropperState.cropperScaledMinWidth, Math.min(cropperWidth, cropperState.cropperScaledMaxWidth, cropperState.maxSize().width));
+        cropperHeight = Math.max(cropperState.cropperScaledMinHeight, Math.min(cropperHeight, cropperState.cropperScaledMaxHeight, cropperState.maxSize().height));
         if (cropperState.options.maintainAspectRatio) {
-            if (cropperState.maxSize.width / cropperState.options.aspectRatio < cropperState.maxSize.height) {
+            if (cropperState.maxSize().width / cropperState.options.aspectRatio < cropperState.maxSize().height) {
                 cropperHeight = cropperWidth / cropperState.options.aspectRatio;
             }
             else {
@@ -55,18 +55,18 @@ function checkCropperWithinMaxSizeBounds(position, cropperState, maintainSize =
             y1: 0
         };
     }
-    if (position.x2 > cropperState.maxSize.width) {
+    if (position.x2 > cropperState.maxSize().width) {
         position = {
             ...position,
-            x1: position.x1 - (maintainSize ? (position.x2 - cropperState.maxSize.width) : 0),
-            x2: cropperState.maxSize.width
+            x1: position.x1 - (maintainSize ? (position.x2 - cropperState.maxSize().width) : 0),
+            x2: cropperState.maxSize().width
         };
     }
-    if (position.y2 > cropperState.maxSize.height) {
+    if (position.y2 > cropperState.maxSize().height) {
         position = {
             ...position,
-            y1: position.y1 - (maintainSize ? (position.y2 - cropperState.maxSize.height) : 0),
-            y2: cropperState.maxSize.height
+            y1: position.y1 - (maintainSize ? (position.y2 - cropperState.maxSize().height) : 0),
+            y2: cropperState.maxSize().height
         };
     }
     return position;
@@ -126,17 +126,17 @@ function resizeCropper(event, moveStart, cropperState) {
                 cropperPosition.x2 -= cropperPosition.x1;
                 cropperPosition.x1 = 0;
             }
-            else if (cropperPosition.x2 > cropperState.maxSize.width) {
-                cropperPosition.x1 -= (cropperPosition.x2 - cropperState.maxSize.width);
-                cropperPosition.x2 = cropperState.maxSize.width;
+            else if (cropperPosition.x2 > cropperState.maxSize().width) {
+                cropperPosition.x1 -= (cropperPosition.x2 - cropperState.maxSize().width);
+                cropperPosition.x2 = cropperState.maxSize().width;
             }
             if (cropperPosition.y1 < 0) {
                 cropperPosition.y2 -= cropperPosition.y1;
                 cropperPosition.y1 = 0;
             }
-            else if (cropperPosition.y2 > cropperState.maxSize.height) {
-                cropperPosition.y1 -= (cropperPosition.y2 - cropperState.maxSize.height);
-                cropperPosition.y2 = cropperState.maxSize.height;
+            else if (cropperPosition.y2 > cropperState.maxSize().height) {
+                cropperPosition.y1 -= (cropperPosition.y2 - cropperState.maxSize().height);
+                cropperPosition.y2 = cropperState.maxSize().height;
             }
             break;
     }
@@ -154,7 +154,7 @@ function checkAspectRatio(position, cropperPosition, cropperState) {
     switch (position) {
         case 'top':
             cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
-            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
             overflowY = Math.max(0 - cropperPosition.y1, 0);
             if (overflowX > 0 || overflowY > 0) {
                 cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
@@ -163,8 +163,8 @@ function checkAspectRatio(position, cropperPosition, cropperState) {
             break;
         case 'bottom':
             cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
-            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
-            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
+            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
             if (overflowX > 0 || overflowY > 0) {
                 cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
                 cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : (overflowX / cropperState.options.aspectRatio);
@@ -181,7 +181,7 @@ function checkAspectRatio(position, cropperPosition, cropperState) {
             break;
         case 'topright':
             cropperPosition.y1 = cropperPosition.y2 - (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
-            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
             overflowY = Math.max(0 - cropperPosition.y1, 0);
             if (overflowX > 0 || overflowY > 0) {
                 cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
@@ -191,8 +191,8 @@ function checkAspectRatio(position, cropperPosition, cropperState) {
         case 'right':
         case 'bottomright':
             cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
-            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
-            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
+            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
             if (overflowX > 0 || overflowY > 0) {
                 cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
                 cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
@@ -202,7 +202,7 @@ function checkAspectRatio(position, cropperPosition, cropperState) {
         case 'bottomleft':
             cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
             overflowX = Math.max(0 - cropperPosition.x1, 0);
-            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
             if (overflowX > 0 || overflowY > 0) {
                 cropperPosition.x1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
                 cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
@@ -212,8 +212,8 @@ function checkAspectRatio(position, cropperPosition, cropperState) {
             cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
             cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
             const overflowX1 = Math.max(0 - cropperPosition.x1, 0);
-            const overflowX2 = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
-            const overflowY1 = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            const overflowX2 = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
+            const overflowY1 = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
             const overflowY2 = Math.max(0 - cropperPosition.y1, 0);
             if (overflowX1 > 0 || overflowX2 > 0 || overflowY1 > 0 || overflowY2 > 0) {
                 cropperPosition.x1 += (overflowY1 * cropperState.options.aspectRatio) > overflowX1 ? (overflowY1 * cropperState.options.aspectRatio) : overflowX1;
@@ -247,6 +247,7 @@ function getClientY(event) {
 class CropperState {
     constructor() {
         this.cropper = signal({ x1: 0, x2: 0, y1: 0, y2: 0 });
+        this.maxSize = signal({ width: 0, height: 0 });
         this.transform = {};
         this.options = {
             format: 'png',
@@ -267,7 +268,7 @@ class CropperState {
             roundCropper: false,
             onlyScaleDown: false,
             imageQuality: 92,
-            backgroundColor: null,
+            backgroundColor: undefined,
             containWithinAspectRatio: false,
             hideResizeSquares: false,
             alignImage: 'center',
@@ -336,7 +337,7 @@ class CropperState {
         }
     }
     setMaxSize(width, height) {
-        this.maxSize = { width, height };
+        this.maxSize.set({ width, height });
         this.setCropperScaledMinSize();
         this.setCropperScaledMaxSize();
     }
@@ -352,7 +353,7 @@ class CropperState {
     }
     setCropperScaledMinWidth() {
         this.cropperScaledMinWidth = this.options.cropperMinWidth > 0
-            ? Math.max(20, this.options.cropperMinWidth / this.loadedImage.transformed.size.width * this.maxSize.width)
+            ? Math.max(20, this.options.cropperMinWidth / this.loadedImage.transformed.size.width * this.maxSize().width)
             : 20;
     }
     setCropperScaledMinHeight() {
@@ -360,7 +361,7 @@ class CropperState {
             this.cropperScaledMinHeight = Math.max(20, this.cropperScaledMinWidth / this.options.aspectRatio);
         }
         else if (this.options.cropperMinHeight > 0) {
-            this.cropperScaledMinHeight = Math.max(20, this.options.cropperMinHeight / this.loadedImage.transformed.size.height * this.maxSize.height);
+            this.cropperScaledMinHeight = Math.max(20, this.options.cropperMinHeight / this.loadedImage.transformed.size.height * this.maxSize().height);
         }
         else {
             this.cropperScaledMinHeight = 20;
@@ -368,9 +369,9 @@ class CropperState {
     }
     setCropperScaledMaxSize() {
         if (this.loadedImage?.transformed.size) {
-            const ratio = this.loadedImage.transformed.size.width / this.maxSize.width;
-            this.cropperScaledMaxWidth = this.options.cropperMaxWidth > 20 ? this.options.cropperMaxWidth / ratio : this.maxSize.width;
-            this.cropperScaledMaxHeight = this.options.cropperMaxHeight > 20 ? this.options.cropperMaxHeight / ratio : this.maxSize.height;
+            const ratio = this.loadedImage.transformed.size.width / this.maxSize().width;
+            this.cropperScaledMaxWidth = this.options.cropperMaxWidth > 20 ? this.options.cropperMaxWidth / ratio : this.maxSize().width;
+            this.cropperScaledMaxHeight = this.options.cropperMaxHeight > 20 ? this.options.cropperMaxHeight / ratio : this.maxSize().height;
             if (this.options.maintainAspectRatio) {
                 if (this.cropperScaledMaxWidth > this.cropperScaledMaxHeight * this.options.aspectRatio) {
                     this.cropperScaledMaxWidth = this.cropperScaledMaxHeight * this.options.aspectRatio;
@@ -381,8 +382,8 @@ class CropperState {
             }
         }
         else {
-            this.cropperScaledMaxWidth = this.maxSize.width;
-            this.cropperScaledMaxHeight = this.maxSize.height;
+            this.cropperScaledMaxWidth = this.maxSize().width;
+            this.cropperScaledMaxHeight = this.maxSize().height;
         }
     }
     equalsCropperPosition(cropper) {
@@ -411,12 +412,12 @@ class CropperState {
         return currentCropAspectRatio === this.options.aspectRatio;
     }
     resizeCropperPosition(oldMaxSize) {
-        if (oldMaxSize.width !== this.maxSize.width || oldMaxSize.height !== this.maxSize.height) {
+        if (oldMaxSize.width !== this.maxSize().width || oldMaxSize.height !== this.maxSize().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
+                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
             }));
         }
     }
@@ -424,8 +425,17 @@ class CropperState {
         return {
             x1: 0,
             y1: 0,
-            x2: this.maxSize.width,
-            y2: this.maxSize.height
+            x2: this.maxSize().width,
+            y2: this.maxSize().height
+        };
+    }
+    toCropInput() {
+        return {
+            cropper: this.cropper(),
+            maxSize: this.maxSize(),
+            transform: this.transform,
+            loadedImage: this.loadedImage,
+            options: { ...this.options }
         };
     }
 }
@@ -518,8 +528,8 @@ function percentage(percent, totalValue) {
 }
 
 class CropService {
-    crop(cropperState, output) {
-        const imagePosition = this.getImagePosition(cropperState);
+    crop(input, output) {
+        const imagePosition = this.getImagePosition(input);
         const width = imagePosition.x2 - imagePosition.x1;
         const height = imagePosition.y2 - imagePosition.y1;
         const cropCanvas = document.createElement('canvas');
@@ -529,77 +539,76 @@ class CropService {
         if (!ctx) {
             return null;
         }
-        if (cropperState.options.backgroundColor != null) {
-            ctx.fillStyle = cropperState.options.backgroundColor;
+        if (input.options?.backgroundColor != null) {
+            ctx.fillStyle = input.options.backgroundColor;
             ctx.fillRect(0, 0, width, height);
         }
-        const scaleX = (cropperState.transform.scale || 1) * (cropperState.transform.flipH ? -1 : 1);
-        const scaleY = (cropperState.transform.scale || 1) * (cropperState.transform.flipV ? -1 : 1);
-        const { translateH, translateV } = this.getCanvasTranslate(cropperState);
-        const transformedImage = cropperState.loadedImage.transformed;
+        const scaleX = (input.transform?.scale || 1) * (input.transform?.flipH ? -1 : 1);
+        const scaleY = (input.transform?.scale || 1) * (input.transform?.flipV ? -1 : 1);
+        const { translateH, translateV } = this.getCanvasTranslate(input);
+        const transformedImage = input.loadedImage.transformed;
         ctx.setTransform(scaleX, 0, 0, scaleY, transformedImage.size.width / 2 + translateH, transformedImage.size.height / 2 + translateV);
         ctx.translate(-imagePosition.x1 / scaleX, -imagePosition.y1 / scaleY);
-        ctx.rotate((cropperState.transform.rotate || 0) * Math.PI / 180);
+        ctx.rotate((input.transform?.rotate || 0) * Math.PI / 180);
         ctx.drawImage(transformedImage.image, -transformedImage.size.width / 2, -transformedImage.size.height / 2);
         const result = {
             width, height,
             imagePosition,
-            cropperPosition: { ...cropperState.cropper() }
+            cropperPosition: { ...input.cropper }
         };
-        if (cropperState.options.containWithinAspectRatio) {
-            result.offsetImagePosition = this.getOffsetImagePosition(cropperState);
+        if (input.options?.containWithinAspectRatio) {
+            result.offsetImagePosition = this.getOffsetImagePosition(input);
         }
-        const resizeRatio = this.getResizeRatio(width, height, cropperState.options);
+        const resizeRatio = this.getResizeRatio(width, height, input.options);
         if (resizeRatio !== 1) {
             result.width = Math.round(width * resizeRatio);
-            result.height = cropperState.options.maintainAspectRatio
-                ? Math.round(result.width / cropperState.options.aspectRatio)
+            result.height = input.options?.maintainAspectRatio
+                ? Math.round(result.width / (input.options?.aspectRatio ?? 1))
                 : Math.round(height * resizeRatio);
             resizeCanvas(cropCanvas, result.width, result.height);
         }
         if (output === 'blob') {
-            return this.cropToBlob(result, cropCanvas, cropperState);
+            return this.cropToBlob(result, cropCanvas, input);
         }
         else {
-            result.base64 = cropCanvas.toDataURL('image/' + cropperState.options.format, this.getQuality(cropperState.options));
+            result.base64 = cropCanvas.toDataURL('image/' + (input.options?.format ?? 'png'), this.getQuality(input.options));
             return result;
         }
     }
-    async cropToBlob(output, cropCanvas, cropperState) {
-        output.blob = await new Promise(resolve => cropCanvas.toBlob(resolve, 'image/' + cropperState.options.format, this.getQuality(cropperState.options)));
+    async cropToBlob(output, cropCanvas, input) {
+        output.blob = await new Promise(resolve => cropCanvas.toBlob(resolve, 'image/' + (input.options?.format ?? 'png'), this.getQuality(input.options)));
         if (output.blob) {
             output.objectUrl = URL.createObjectURL(output.blob);
         }
         return output;
     }
-    getCanvasTranslate(cropperState) {
-        if (cropperState.transform.translateUnit === 'px') {
-            const ratio = this.getRatio(cropperState);
+    getCanvasTranslate(input) {
+        if (input.transform?.translateUnit === 'px') {
+            const ratio = this.getRatio(input);
             return {
-                translateH: (cropperState.transform.translateH || 0) * ratio,
-                translateV: (cropperState.transform.translateV || 0) * ratio
+                translateH: (input.transform?.translateH || 0) * ratio,
+                translateV: (input.transform?.translateV || 0) * ratio
             };
         }
         else {
             return {
-                translateH: cropperState.transform.translateH ? percentage(cropperState.transform.translateH, cropperState.loadedImage.transformed.size.width) : 0,
-                translateV: cropperState.transform.translateV ? percentage(cropperState.transform.translateV, cropperState.loadedImage.transformed.size.height) : 0
+                translateH: input.transform?.translateH ? percentage(input.transform.translateH, input.loadedImage.transformed.size.width) : 0,
+                translateV: input.transform?.translateV ? percentage(input.transform.translateV, input.loadedImage.transformed.size.height) : 0
             };
         }
     }
-    getRatio(cropperState) {
-        return cropperState.loadedImage.transformed.size.width / cropperState.maxSize.width;
+    getRatio(input) {
+        return input.loadedImage.transformed.size.width / input.maxSize.width;
     }
     getImagePosition(cropperState) {
         const ratio = this.getRatio(cropperState);
-        const cropper = cropperState.cropper();
         const out = {
-            x1: Math.round(cropper.x1 * ratio),
-            y1: Math.round(cropper.y1 * ratio),
-            x2: Math.round(cropper.x2 * ratio),
-            y2: Math.round(cropper.y2 * ratio)
+            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)
         };
-        if (!cropperState.options.containWithinAspectRatio) {
+        if (!cropperState.options?.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
             out.y1 = Math.max(out.y1, 0);
             out.x2 = Math.min(out.x2, cropperState.loadedImage.transformed.size.width);
@@ -607,52 +616,50 @@ class CropService {
         }
         return out;
     }
-    getOffsetImagePosition(cropperState) {
-        const canvasRotation = cropperState.options.canvasRotation + cropperState.loadedImage.exifTransform.rotate;
-        const ratio = this.getRatio(cropperState);
+    getOffsetImagePosition(input) {
+        const canvasRotation = (input.options?.canvasRotation ?? 0) + input.loadedImage.exifTransform.rotate;
+        const ratio = this.getRatio(input);
         let offsetX;
         let offsetY;
         if (canvasRotation % 2) {
-            offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.height) / 2;
-            offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.width) / 2;
+            offsetX = (input.loadedImage.transformed.size.width - input.loadedImage.original.size.height) / 2;
+            offsetY = (input.loadedImage.transformed.size.height - input.loadedImage.original.size.width) / 2;
         }
         else {
-            offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.width) / 2;
-            offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.height) / 2;
+            offsetX = (input.loadedImage.transformed.size.width - input.loadedImage.original.size.width) / 2;
+            offsetY = (input.loadedImage.transformed.size.height - input.loadedImage.original.size.height) / 2;
         }
-        const cropper = cropperState.cropper();
+        const cropper = input.cropper;
         const out = {
             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) {
+        if (!input.options?.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
             out.y1 = Math.max(out.y1, 0);
-            out.x2 = Math.min(out.x2, cropperState.loadedImage.transformed.size.width);
-            out.y2 = Math.min(out.y2, cropperState.loadedImage.transformed.size.height);
+            out.x2 = Math.min(out.x2, input.loadedImage.transformed.size.width);
+            out.y2 = Math.min(out.y2, input.loadedImage.transformed.size.height);
         }
         return out;
     }
     getResizeRatio(width, height, options) {
-        const ratioWidth = options.resizeToWidth / width;
-        const ratioHeight = options.resizeToHeight / height;
         const ratios = new Array();
-        if (options.resizeToWidth > 0) {
-            ratios.push(ratioWidth);
+        if (options?.resizeToWidth && options.resizeToWidth > 0) {
+            ratios.push(options.resizeToWidth / width);
         }
-        if (options.resizeToHeight > 0) {
-            ratios.push(ratioHeight);
+        if (options?.resizeToHeight && options.resizeToHeight > 0) {
+            ratios.push(options.resizeToHeight / height);
         }
         const result = ratios.length === 0 ? 1 : Math.min(...ratios);
-        if (result > 1 && !options.onlyScaleDown) {
+        if (result > 1 && !options?.onlyScaleDown) {
             return result;
         }
         return Math.min(result, 1);
     }
     getQuality(options) {
-        return Math.min(1, Math.max(0, options.imageQuality / 100));
+        return Math.min(1, Math.max(0, options?.imageQuality ?? 92 / 100));
     }
 }
 
@@ -1061,7 +1068,7 @@ class ImageCropperComponent {
     }
     reset() {
         this.state.loadedImage = undefined;
-        this.state.maxSize = undefined;
+        this.state.maxSize.set({ width: 0, height: 0 });
         this.imageVisible = false;
     }
     loadImageFile(file) {
@@ -1119,7 +1126,7 @@ class ImageCropperComponent {
                 this.cropperChange.emit(this.state.cropper());
             }
             this.imageVisible = true;
-            this.cropperReady.emit({ ...this.state.maxSize });
+            this.cropperReady.emit(this.state.maxSize());
             this.doAutoCrop();
         }
         else {
@@ -1138,7 +1145,7 @@ class ImageCropperComponent {
             this.resizedWhileHidden = true;
         }
         else {
-            const oldMaxSize = { ...this.state.maxSize };
+            const oldMaxSize = this.state.maxSize();
             this.setMaxSize();
             this.state.resizeCropperPosition(oldMaxSize);
         }
@@ -1297,7 +1304,7 @@ class ImageCropperComponent {
         if (this.sourceImage) {
             const sourceImageStyle = getComputedStyle(this.sourceImage.nativeElement);
             this.state.setMaxSize(parseFloat(sourceImageStyle.width), parseFloat(sourceImageStyle.height));
-            this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.state.maxSize.width / 2 + 'px)');
+            this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.state.maxSize().width / 2 + 'px)');
         }
     }
     emitCropperPositionChange(previousPosition) {
@@ -1324,7 +1331,7 @@ class ImageCropperComponent {
     }
     cropToBlob() {
         return new Promise(async (resolve, reject) => {
-            const result = await this.cropService.crop(this.state, 'blob');
+            const result = await this.cropService.crop(this.state.toCropInput(), 'blob');
             if (result) {
                 this.imageCropped.emit(result);
                 resolve(result);
@@ -1335,7 +1342,7 @@ class ImageCropperComponent {
         });
     }
     cropToBase64() {
-        const result = this.cropService.crop(this.state, 'base64');
+        const result = this.cropService.crop(this.state.toCropInput(), 'base64');
         if (result) {
             this.imageCropped.emit(result);
             return result;
@@ -1350,11 +1357,11 @@ class ImageCropperComponent {
         this.pinchStart$.complete();
     }
     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]=\"state.options.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\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\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\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\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\n      <span\n        class=\"ngx-ic-resize ngx-ic-top\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-right\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-bottom\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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      <span\n        class=\"ngx-ic-resize ngx-ic-left\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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:var(--cropper-color, #53535C);background:transparent;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-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:hover .ngx-ic-move{border:var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, .5)))}:host .ngx-ic-cropper:focus .ngx-ic-move{border:var(--cropper-focus-border, 2px solid dodgerblue)}:host .ngx-ic-cropper:focus .ngx-ic-resize .ngx-ic-square{background:var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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;width:6px;height:6px;box-sizing:content-box;background:var(--cropper-resize-square-bg, #53535C);border:var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper .ngx-ic-resize:hover .ngx-ic-square{background:var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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 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 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.ɵ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]=\"state.options.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\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\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\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\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\n      <span\n        class=\"ngx-ic-resize ngx-ic-top\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-right\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-bottom\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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      <span\n        class=\"ngx-ic-resize ngx-ic-left\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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{display:inline;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:var(--cropper-color, #53535C);background:transparent;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-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:hover .ngx-ic-move{border:var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, .5)))}:host .ngx-ic-cropper:focus .ngx-ic-move{border:var(--cropper-focus-border, 2px solid dodgerblue)}:host .ngx-ic-cropper:focus .ngx-ic-resize .ngx-ic-square{background:var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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;width:6px;height:6px;box-sizing:content-box;background:var(--cropper-resize-square-bg, #53535C);border:var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper .ngx-ic-resize:hover .ngx-ic-square{background:var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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 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 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: "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]=\"state.options.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\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\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\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\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\n      <span\n        class=\"ngx-ic-resize ngx-ic-top\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-right\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-bottom\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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      <span\n        class=\"ngx-ic-resize ngx-ic-left\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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:var(--cropper-color, #53535C);background:transparent;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-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:hover .ngx-ic-move{border:var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, .5)))}:host .ngx-ic-cropper:focus .ngx-ic-move{border:var(--cropper-focus-border, 2px solid dodgerblue)}:host .ngx-ic-cropper:focus .ngx-ic-resize .ngx-ic-square{background:var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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;width:6px;height:6px;box-sizing:content-box;background:var(--cropper-resize-square-bg, #53535C);border:var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper .ngx-ic-resize:hover .ngx-ic-square{background:var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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 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 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"] }]
+            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]=\"state.options.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\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\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\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\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\n      <span\n        class=\"ngx-ic-resize ngx-ic-top\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-right\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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 ngx-ic-bottom\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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      <span\n        class=\"ngx-ic-resize ngx-ic-left\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\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{display:inline;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:var(--cropper-color, #53535C);background:transparent;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-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:hover .ngx-ic-move{border:var(--cropper-hover-border, var(--cropper-border, 1px solid rgba(255, 255, 255, .5)))}:host .ngx-ic-cropper:focus .ngx-ic-move{border:var(--cropper-focus-border, 2px solid dodgerblue)}:host .ngx-ic-cropper:focus .ngx-ic-resize .ngx-ic-square{background:var(--cropper-resize-square-focus-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-focus-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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;width:6px;height:6px;box-sizing:content-box;background:var(--cropper-resize-square-bg, #53535C);border:var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper .ngx-ic-resize:hover .ngx-ic-square{background:var(--cropper-resize-square-hover-bg, var(--cropper-resize-square-bg, #53535C));border:var(--cropper-resize-square-hover-border, var(--cropper-resize-square-border, 1px solid rgba(255, 255, 255, .5)))}: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 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 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 }]